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 5 de 10 · Domain warping

Wood

Rosewood oscuro. Vetas que brillan.

sin() convierte un campo continuo en ondas repetitivas. Sobre un campo warpeado, esas ondas se curvan como vetas de madera. El multiplicador antes del sin() controla la densidad.

Mesa de roble recién barnizada.

sin(f * N)N = densidad de vetas. El warp les da curvatura natural.
PruebaSube el 12.0 de sin(f * 12.0) a 25.0 y el grano se hace fino. Bájalo a 5.0 y las vetas se vuelven gruesas, casi crudas.

El código

void main(){
  vec2 p = gl_FragCoord.xy / R * 3.0;
  float warp = fb(p);
  float f = fb(p + warp * 0.6);
  float grain = sin(f * 12.0) * 0.5 + 0.5;
  float band = floor(grain * 5.0) / 5.0;
  float line = step(0.9, grain);
  float fine = n2(p * 15.0) * 0.04;
  vec3 light = vec3(0.55, 0.3, 0.15);
  vec3 mid = vec3(0.35, 0.18, 0.08);
  vec3 dark = vec3(0.1, 0.04, 0.01);
  vec3 col = mix(light, mid, band);
  col = mix(col, dark, line);
  col += fine;
  col += vec3(.2,.12,.06) * pow(grain, 5.) * 0.5;
  col *= 0.9 + 0.1 * grain;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.0);
}
close