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

FBM

La función base. Una línea, toda la textura.

Lo que acabas de hacer a mano ya está empaquetado en fb(), la misma función que usaste en Forces como caja negra. Ahora sabes exactamente qué hay adentro: capas de noise apiladas. Una función, una línea, textura con detalle a todas las escalas.

Una línea. Toda la textura.

fb(p)FBM, 4 octavas de noise apiladas y rotadas. La caja negra, abierta.
PruebaCambia p * 3. a p * 8., más fino. A p * 1., enorme.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float v = fb(p * 3.0);
  float contour = 1.0-smoothstep(0.0,0.03, abs(fract(v*8.)-0.5));
  float zone = floor(v * 5.0) / 5.0;
  float scan = step(0.5,sin(gl_FragCoord.y*1.5)*.5+.5)*.06;
  vec3 col = vec3(0.01, 0.02, 0.03);
  col += vec3(0.0, 0.35+zone*0.4, 0.25+zone*0.3) * v;
  col += vec3(0.0, 0.9, 0.7) * contour * 0.6;
  col += vec3(0.9, 0.0, 0.5) * step(0.78, v) * 0.4;
  col += vec3(0.95, 0.9, 1.0) * step(0.88, v) * 0.3;
  float glow = exp(-length(p)*1.5) * v * 0.2;
  col += vec3(0.0, 0.5, 0.4) * glow;
  col *= 1.0 - scan;
  col += vec3(0.015, 0.01, 0.02);
  gl_FragColor = vec4(col, 1.);
}
close