13 Proyecto final

Proyecto final: reescribe el planeta del inicio

El shader de vértices eleva el terreno con ruido; el de fragmentos lo colorea con luz por bandas. Puedes editar cada línea.

uHeight · altura de montañas0.35

uBands · bandas de luz3

Dirección del sol0.60

-3.143.14

Se ejecuta una vez por vérticeArrastra los números o edita el código

uniform float uHeight;   // altura de las montañas
varying vec3 vWorld;
varying float vH;

float hash(vec3 p) {
  return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453);
}
float noise(vec3 p) {
  vec3 i = floor(p);
  vec3 f = fract(p);
  f = f * f * (3.0 - 2.0 * f);
  return mix(mix(mix(hash(i), hash(i + vec3(1, 0, 0)), f.x),
                 mix(hash(i + vec3(0, 1, 0)), hash(i + vec3(1, 1, 0)), f.x), f.y),
             mix(mix(hash(i + vec3(0, 0, 1)), hash(i + vec3(1, 0, 1)), f.x),
                 mix(hash(i + vec3(0, 1, 1)), hash(i + vec3(1, 1, 1)), f.x), f.y), f.z);
}
float fbm(vec3 p) {
  float sum = 0.0;
  float amp = 0.5;
  for (int i = 0; i < 5; i++) {
    sum += amp * noise(p);
    p *= 2.0;
    amp *= 0.5;
  }
  return sum;
}

void main() {
  vec3 n = normalize(position);
  float h = fbm(n * 2.2 + 3.0);          // altura del terreno, 0–1
  vH = h;
  float land = max(h - 0.45, 0.0);        // bajo el nivel del mar sigue siendo una esfera
  vec3 p = n * (1.0 + land * uHeight * 2.0);
  vec4 world = modelMatrix * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = projectionMatrix * viewMatrix * world;
}

uniform float uHeight;   // altura de las montañas
varying vec3 vWorld;
varying float vH;

float hash(vec3 p) {
  return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453);
}
float noise(vec3 p) {
  vec3 i = floor(p);
  vec3 f = fract(p);
  f = f * f * (3.0 - 2.0 * f);
  return mix(mix(mix(hash(i), hash(i + vec3(1, 0, 0)), f.x),
                 mix(hash(i + vec3(0, 1, 0)), hash(i + vec3(1, 1, 0)), f.x), f.y),
             mix(mix(hash(i + vec3(0, 0, 1)), hash(i + vec3(1, 0, 1)), f.x),
                 mix(hash(i + vec3(0, 1, 1)), hash(i + vec3(1, 1, 1)), f.x), f.y), f.z);
}
float fbm(vec3 p) {
  float sum = 0.0;
  float amp = 0.5;
  for (int i = 0; i < 5; i++) {
    sum += amp * noise(p);
    p *= 2.0;
    amp *= 0.5;
  }
  return sum;
}

void main() {
  vec3 n = normalize(position);
  float h = fbm(n * 2.2 + 3.0);          // altura del terreno, 0–1
  vH = h;
  float land = max(h - 0.45, 0.0);        // bajo el nivel del mar sigue siendo una esfera
  vec3 p = n * (1.0 + land * uHeight * 2.0);
  vec4 world = modelMatrix * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = projectionMatrix * viewMatrix * world;
}

Lado JS

material.uniforms.uTime.value = 0.00
material.uniforms.uHeight.value = 0.35
material.uniforms.uBands.value = 3
material.uniforms.uSun.value.set(0.83, 0.5, 0.56)

El planeta del inicio ya es tuyo: los vértices elevan el terreno con fbm y los fragmentos lo colorean con luz por bandas y un contorno luminoso.

Pruébalo

Código de vértices: sube uHeight para crear montañas más altas
Código de fragmentos: cambia los colores del agua, la arena, la hierba y la nieve
Añade un pequeño destello al agua con uTime
Cambia el exponente del contorno de 3.0 a 1.5