learn GLSL from zero
ToolsCrea con shadersShader MakerCrea shaders gratis en líneaToolkitObras de shaders listas para tu webSketcher LabPinta el hero de tu landing con shaders3D StudioEl editor Three.js en tu navegador
GamesJuega con shadersOnomatoShaderEscribe una palabra y explótalaThe WatcherUn ojo que te sigueAetherVidrio líquido con un ojo adentroBloomcoreUna palabra hace crecer un jardín de luzPyrokineAvienta fuego a la paredVoltaicLa pirámide lanza rayosSurfSurfea un océano de shader

Lección 7 de 10 · Ruido en GLSL

Esfera

Noise + clip = esfera.

El noise no tiene que llenar toda la pantalla. Recórtalo con un círculo y parece una esfera, un planeta, una luna, una gota.

Combinas el smoothstep() del círculo con el noise como color adentro.

Esfera de datos. Latitud, longitud, glitch.

Combinar técnicasCírculo de Start Here + noise de esta sección = esfera con textura. Cada sección te da herramientas que se combinan.
PruebaCambia el radio 0.55 a 0.4, esfera chica. A 0.8, esfera enorme. Cambia el 5. de fract(p.y * 5.) para la escala del wire. Suma + T * 0.1 dentro del fract para que el wire derive.

El código

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