Shaders: glslsandbox to CYOS

Questions
1

I have no experience with writing shaders so i’m trying to get an existing shader from GLSL Sandbox in Babylon using CYOS.

The shader i want to use is one file and i don’t know what is the vertex or fragment part.

This is the shader i want to get working on a sphere using CYOS.
http://glslsandbox.com/e#58474.0

1 Like
2

I am relatively new to shader programming, too, but the sandbox looks like a pixel shader.
This one operates on pixels on a 2d plane.

To get it working in cyos you have to remove the non-existent variables and use the vUv for the position.

If you use the CYOS basic template and replace the fragment shader with the following code it works.
Maybe not exactly what you had in mind but hopefully it will help you get started.

precision highp float;

varying vec2 vUV;

const vec3   atmosphereColor = vec3(0.3, 0.6, 1.0) * 1.6;

vec3 shadowedAtmosphereColor(vec2 fragCoord, vec2 iResolution, float minVal) {
  vec2 rel = 0.65 * (fragCoord.xy);
  float maxVal = 1.0;

  float a = min(1.0,
              pow(max(0.0, 1.0 - dot(rel, rel) * 6.5), 2.4) + 
              max(abs(rel.x - rel.y) - 0.35, 0.0) * 12.0 +                   
              max(0.0, 0.2 + dot(rel, vec2(2.75))) + 
              0.0
             );

  float planetShadow = mix(minVal, maxVal, a);

  return atmosphereColor * planetShadow;
}

void main( void ) {

  vec2 delta = vUV.xy - vec2(0.5, 0.5);
  float atmosphereRadialAttenuation = min(1.0, 0.06 * pow(max(0.0, 1.0 - (length(delta) - 0.9) / 0.9), 8.0));
  vec3 c = shadowedAtmosphereColor(vec2(0.5)/*gl_FragCoord.xy*/, vec2(0.5)/*resolution.xy*/, 0.5);
  //vec3 c = xf(gl_FragCoord.xy, resolution.xy, 0.5);
  c *= atmosphereRadialAttenuation;
  gl_FragColor = vec4( c, 1.0 );
}
1 Like
3

Just for the sake of it, we also provide a new way to deal with shaders:
https://doc.babylonjs.com/how_to/node_material

1 Like
4

Thx for the help!

The node material is cool, have to try that out.