learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 7 of 10 · Noise in GLSL

Sphere

Noise + clip = sphere.

Noise does not have to fill the whole screen. Clip it with a circle and it looks like a sphere, a planet, a moon, a drop.

You combine the smoothstep() circle with noise as the color inside.

Data sphere. Latitude, longitude, glitch.

Combining techniquesCircle from Start Here + noise from this section = textured sphere. Each section gives you tools that combine.
TryChange radius 0.55 to 0.4, small sphere. To 0.8, huge sphere. Change 5. in fract(p.y * 5.) for wire scale. Add + T * 0.1 inside the fract and the wire drifts.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float d = length(p);
  float r = 0.55;
  float mask = smoothstep(r, r-0.02, d);
  float height = max(1.0 - d/r, 0.0);
  float lat = abs(fract(p.y * 5.) - 0.5);
  float lon = abs(fract(p.x * 5.) - 0.5);
  float wire = 1.0 - smoothstep(0.0, 0.05, min(lat, lon));
  float rim = smoothstep(0.3, 0.55, d/r);
  float edge = exp(-abs(d-r)*15.) * 0.6;
  float glitch = step(0.93, h2(vec2(floor(T*3.),floor(p.y*6.)))) * 0.12;
  float scan = step(0.5,sin(gl_FragCoord.y*1.5)*.5+.5)*.06;
  vec3 col = vec3(0.01, 0.02, 0.03);
  vec3 sphere = vec3(0.0, 0.15+height*0.45, 0.1+height*0.35);
  sphere += vec3(0.0, 0.7, 0.5) * wire * 0.4;
  sphere += vec3(0.0, 0.5, 0.8) * rim * 0.3;
  sphere += vec3(0.9, 0.95, 1.0) * height * height * 0.25;
  col = mix(col, sphere, mask);
  col += vec3(0.0, 0.8, 0.6) * edge;
  col += vec3(0.8, 0.0, 0.5) * glitch * mask * 0.4;
  col *= 1.0 - scan;
  col += vec3(0.015, 0.01, 0.02);
  gl_FragColor = vec4(col, 1.);
}
close