13 Capstone

Capstone: rewrite the opening planet

The vertex shader raises terrain with noise; the fragment shader colours it with banded light. Every line can be edited.

uHeight · mountain height0.35

uBands · light bands3

Sun direction0.60

-3.143.14

Runs once per vertexDrag numbers, or edit the code

uniform float uHeight;   // mountain height
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);          // terrain height, 0–1
  vH = h;
  float land = max(h - 0.45, 0.0);        // below sea level it stays a sphere
  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;   // mountain height
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);          // terrain height, 0–1
  vH = h;
  float land = max(h - 0.45, 0.0);        // below sea level it stays a sphere
  vec3 p = n * (1.0 + land * uHeight * 2.0);
  vec4 world = modelMatrix * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = projectionMatrix * viewMatrix * world;
}

JS side

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)

The opening planet is yours now: the vertex raises terrain with fbm, the fragment colours it with banded light and a rim.

Try it

Vertex code: raise uHeight for taller mountains
Fragment code: change the water, sand, grass and snow colours
Add a little shimmer to the water using uTime
Change the rim exponent from 3.0 to 1.5