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

Marble

Carrara clásico. Blanco con venas grises.

sin() de una coordenada + warp = vetas. La coordenada lineal da dirección, el warp las ondula. Tres colores: crema base, gris en vetas anchas, dorado en las más finas.

Sedimento prensado por mil años.

sin(p.x + warp)Coordenada lineal = dirección. Warp = ondulación. Juntos = mármol.
PruebaCambia p.x por p.y para vetas horizontales, o p.x + p.y para diagonales.

El código

void main(){
  vec2 p = gl_FragCoord.xy / R * 4.0;
  float w = fb(p * 0.7);
  float w2 = fb(p * 1.3 + 5.0);
  float v1 = sin(p.x * 3.0 + w * 4.0 + p.y * 0.4);
  float vein1 = exp(-abs(v1) * 6.0);
  float v2 = sin(p.x * 5.5 + w2 * 3.0 - p.y * 0.6);
  float vein2 = exp(-abs(v2) * 10.0);
  float v3 = sin(p.y * 9.0 + w * 2.5 + p.x * 1.5);
  float vein3 = exp(-abs(v3) * 18.0);
  float surf = n2(p * 25.0) * 0.012;
  vec3 white = vec3(0.97, 0.965, 0.96);
  vec3 grey = vec3(0.45, 0.43, 0.48);
  vec3 col = white + surf;
  col = mix(col, grey, vein1 * 0.55);
  col = mix(col, grey, vein2 * 0.3);
  col = mix(col, grey * 0.7, vein3 * 0.2);
  gl_FragColor = vec4(col, 1.0);
}
close