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 6 de 10 · Ruido en GLSL

Terreno

Noise como datos. step() como filtro.

El noise no solo es color, es información. Aquí lo usamos como elevación de un terreno. Con step() cortas el terreno en niveles, como un mapa topográfico.

Mapa topográfico de un planeta que no existe.

step() como nivelCada step() define un nivel de altura. Abajo del umbral = un color. Arriba = otro. Varios steps = varios niveles.
PruebaCambia el 4. en floor(v * 4.0) a 8., el doble de niveles. Cambia el 0.75 a 0.5 y los picos pink se expanden. Agrega otro step con un tercer color para sumar un nivel propio.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float v = n2(p * 3.0) * 0.5 + n2(p * 6.0 + 2.0) * 0.3 + n2(p * 12.0) * 0.2;
  float contour = abs(fract(v * 10.0) - 0.5);
  contour = 1.0 - smoothstep(0.0, 0.04, contour);
  vec2 gridLine = abs(fract(p * 8.0) - 0.5);
  float grid = 1.0 - smoothstep(0.0, 0.03, min(gridLine.x, gridLine.y));
  float zone = floor(v * 4.0) / 4.0;
  vec3 col = vec3(0.01, 0.03 + zone * 0.06, 0.02 + zone * 0.04);
  col += vec3(0.0, 0.9, 0.7) * contour * 0.5;
  col += vec3(0.0, 0.3, 0.25) * grid * 0.2;
  col += vec3(0.95, 0.0, 0.5) * step(0.75, v) * 0.3;
  col += vec3(0.01, 0.01, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close