feat: rebuild the nightdrive road and terrain
This commit is contained in:
@@ -1,43 +1,206 @@
|
||||
import * as THREE from 'three';
|
||||
import type { EnvironmentChapter } from '@/journey/types';
|
||||
import type { RenderQualitySettings } from '@/scene/render-quality';
|
||||
import type { SceneResourceBag } from '@/scene/resources';
|
||||
import { CHAPTER_PALETTES } from '@/scene/world/palette';
|
||||
|
||||
export function createTerrain(resources: SceneResourceBag, segments: number) {
|
||||
export interface TerrainWorld {
|
||||
group: WorldGroup;
|
||||
update(
|
||||
distance: number,
|
||||
speed: number,
|
||||
chapter: EnvironmentChapter,
|
||||
routeProgress: number,
|
||||
): void;
|
||||
}
|
||||
|
||||
interface WorldGroup {
|
||||
add(...objects: unknown[]): void;
|
||||
getObjectByName(name: string): unknown;
|
||||
}
|
||||
|
||||
const TERRAIN_WIDTH = 160;
|
||||
const TERRAIN_DEPTH = 300;
|
||||
const NEAR_Z = 14;
|
||||
const ROAD_CLEAR_HALF_WIDTH = 11.4;
|
||||
const RIDGE_START = 24;
|
||||
|
||||
export function createTerrain(
|
||||
resources: SceneResourceBag,
|
||||
quality: RenderQualitySettings,
|
||||
): TerrainWorld {
|
||||
const group = new THREE.Group();
|
||||
const geometry = resources.own(
|
||||
'geometry',
|
||||
new THREE.PlaneGeometry(72, 240, Math.max(4, Math.floor(segments / 4)), segments),
|
||||
);
|
||||
const cyan = resources.own('material', new THREE.MeshBasicMaterial({
|
||||
color: 0x168fae,
|
||||
wireframe: true,
|
||||
group.name = 'terrain-world';
|
||||
const geometry = resources.own('geometry', createIndexedTerrainGeometry(quality.terrainSegments));
|
||||
const initialPalette = CHAPTER_PALETTES['deep-night'];
|
||||
const lowColor = new THREE.Color(initialPalette.terrainLow);
|
||||
const highColor = new THREE.Color(initialPalette.terrainHigh);
|
||||
const uniforms = {
|
||||
uDistance: { value: 0 },
|
||||
uSpeed: { value: 0 },
|
||||
uRouteProgress: { value: 0 },
|
||||
uTerrainEnergy: { value: initialPalette.terrainEnergy },
|
||||
uOctaves: { value: quality.terrainOctaves },
|
||||
uLowColor: { value: lowColor },
|
||||
uHighColor: { value: highColor },
|
||||
};
|
||||
const material = resources.own('material', new THREE.ShaderMaterial({
|
||||
uniforms,
|
||||
vertexShader: `
|
||||
attribute float roadMask;
|
||||
uniform float uDistance;
|
||||
uniform float uSpeed;
|
||||
uniform float uRouteProgress;
|
||||
uniform float uTerrainEnergy;
|
||||
uniform float uOctaves;
|
||||
varying float vHeight;
|
||||
varying float vRoadMask;
|
||||
varying float vDepthFade;
|
||||
varying float vFlow;
|
||||
|
||||
float hash21(vec2 point) {
|
||||
point = fract(point * vec2(123.34, 456.21));
|
||||
point += dot(point, point + 45.32);
|
||||
return fract(point.x * point.y);
|
||||
}
|
||||
|
||||
float valueNoise(vec2 point) {
|
||||
vec2 cell = floor(point);
|
||||
vec2 local = fract(point);
|
||||
local = local * local * (3.0 - 2.0 * local);
|
||||
return mix(
|
||||
mix(hash21(cell), hash21(cell + vec2(1.0, 0.0)), local.x),
|
||||
mix(hash21(cell + vec2(0.0, 1.0)), hash21(cell + vec2(1.0)), local.x),
|
||||
local.y
|
||||
);
|
||||
}
|
||||
|
||||
float multiOctaveNoise(vec2 point) {
|
||||
float result = valueNoise(point) * 0.58;
|
||||
if (uOctaves > 1.5) result += valueNoise(point * 2.03 + 17.2) * 0.28;
|
||||
if (uOctaves > 2.5) result += valueNoise(point * 4.07 - 9.4) * 0.14;
|
||||
return result;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec3 displaced = position;
|
||||
float wrappedPhase = mod(uDistance * (0.18 + uSpeed * 0.06), 96.0);
|
||||
float ridgeNoise = multiOctaveNoise(vec2(position.x * 0.038, (position.z - wrappedPhase) * 0.028));
|
||||
float macroRidge = multiOctaveNoise(vec2(position.x * 0.014 + 31.0, position.z * 0.012));
|
||||
float edgeGrowth = mix(0.6, 1.0, smoothstep(0.0, 72.0, abs(position.x)));
|
||||
float height = roadMask * (0.25 + ridgeNoise * ridgeNoise * 8.8 + macroRidge * 2.4);
|
||||
height *= edgeGrowth * uTerrainEnergy;
|
||||
displaced.y += height - 0.22;
|
||||
|
||||
vHeight = clamp(height / 10.0, 0.0, 1.0);
|
||||
vRoadMask = roadMask;
|
||||
vDepthFade = smoothstep(-286.0, -205.0, position.z) * (1.0 - smoothstep(7.0, 14.0, position.z));
|
||||
vFlow = fract((-position.z + uDistance * (0.9 + uSpeed * 0.25)) / 11.0);
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
uniform vec3 uLowColor;
|
||||
uniform vec3 uHighColor;
|
||||
uniform float uRouteProgress;
|
||||
varying float vHeight;
|
||||
varying float vRoadMask;
|
||||
varying float vDepthFade;
|
||||
varying float vFlow;
|
||||
|
||||
void main() {
|
||||
float ridgeMix = smoothstep(0.16, 0.78, vHeight);
|
||||
vec3 color = mix(uLowColor, uHighColor, ridgeMix);
|
||||
float pulse = 0.78 + 0.22 * smoothstep(0.18, 0.52, vFlow);
|
||||
float routeCalm = mix(1.0, 0.9, smoothstep(0.82, 1.0, uRouteProgress));
|
||||
float alpha = vRoadMask * vDepthFade * pulse * routeCalm * mix(0.34, 0.66, ridgeMix);
|
||||
gl_FragColor = vec4(color, alpha);
|
||||
}
|
||||
`,
|
||||
transparent: true,
|
||||
opacity: 0.34,
|
||||
}));
|
||||
const magenta = resources.own('material', new THREE.MeshBasicMaterial({
|
||||
color: 0xbd317f,
|
||||
wireframe: true,
|
||||
transparent: true,
|
||||
opacity: 0.22,
|
||||
depthWrite: false,
|
||||
depthTest: true,
|
||||
blending: THREE.AdditiveBlending,
|
||||
toneMapped: true,
|
||||
}));
|
||||
|
||||
const planes: Array<{ position: { z: number } }> = [];
|
||||
for (const [x, material] of [[-44, magenta], [44, cyan]] as const) {
|
||||
const plane = new THREE.Mesh(geometry, material);
|
||||
plane.rotation.x = -Math.PI / 2;
|
||||
plane.position.set(x, -0.2, -92);
|
||||
planes.push(plane);
|
||||
group.add(plane);
|
||||
}
|
||||
const lines = new THREE.LineSegments(geometry, material);
|
||||
lines.name = 'terrain-lines';
|
||||
lines.frustumCulled = false;
|
||||
group.add(lines);
|
||||
|
||||
return {
|
||||
group,
|
||||
update(distance: number) {
|
||||
const drift = modulo(distance * 1.4, 8);
|
||||
for (const plane of planes) plane.position.z = -92 + drift;
|
||||
update(distance, speed, chapter, routeProgress) {
|
||||
const palette = CHAPTER_PALETTES[chapter];
|
||||
uniforms.uDistance.value = finiteOrZero(distance);
|
||||
uniforms.uSpeed.value = clamp01(speed);
|
||||
uniforms.uRouteProgress.value = clamp01(routeProgress);
|
||||
uniforms.uTerrainEnergy.value = palette.terrainEnergy;
|
||||
lowColor.setHex(palette.terrainLow);
|
||||
highColor.setHex(palette.terrainHigh);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function modulo(value: number, divisor: number): number {
|
||||
return ((value % divisor) + divisor) % divisor;
|
||||
function createIndexedTerrainGeometry(segments: number) {
|
||||
const zSegments = Math.max(16, Math.floor(segments));
|
||||
const xSegments = Math.max(24, Math.floor(zSegments * 0.75 / 2) * 2);
|
||||
const columnCount = xSegments + 1;
|
||||
const rowCount = zSegments + 1;
|
||||
const positions = new Float32Array(columnCount * rowCount * 3);
|
||||
const roadMasks = new Float32Array(columnCount * rowCount);
|
||||
let vertexOffset = 0;
|
||||
let maskOffset = 0;
|
||||
|
||||
for (let row = 0; row < rowCount; row += 1) {
|
||||
const z = NEAR_Z - (row / zSegments) * TERRAIN_DEPTH;
|
||||
for (let column = 0; column < columnCount; column += 1) {
|
||||
const x = -TERRAIN_WIDTH / 2 + (column / xSegments) * TERRAIN_WIDTH;
|
||||
positions[vertexOffset] = x;
|
||||
positions[vertexOffset + 1] = 0;
|
||||
positions[vertexOffset + 2] = z;
|
||||
vertexOffset += 3;
|
||||
roadMasks[maskOffset] = smoothstep(ROAD_CLEAR_HALF_WIDTH, RIDGE_START, Math.abs(x));
|
||||
maskOffset += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const indices: number[] = [];
|
||||
const vertexIndex = (column: number, row: number): number => row * columnCount + column;
|
||||
for (let row = 0; row < rowCount; row += 1) {
|
||||
for (let column = 0; column < columnCount; column += 1) {
|
||||
const x = -TERRAIN_WIDTH / 2 + (column / xSegments) * TERRAIN_WIDTH;
|
||||
if (row < zSegments && Math.abs(x) > ROAD_CLEAR_HALF_WIDTH) {
|
||||
indices.push(vertexIndex(column, row), vertexIndex(column, row + 1));
|
||||
}
|
||||
if (column < xSegments) {
|
||||
const nextX = -TERRAIN_WIDTH / 2 + ((column + 1) / xSegments) * TERRAIN_WIDTH;
|
||||
const midpoint = (x + nextX) * 0.5;
|
||||
if (Math.abs(midpoint) > ROAD_CLEAR_HALF_WIDTH) {
|
||||
indices.push(vertexIndex(column, row), vertexIndex(column + 1, row));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
geometry.setAttribute('roadMask', new THREE.BufferAttribute(roadMasks, 1));
|
||||
geometry.setIndex(indices);
|
||||
geometry.computeBoundingSphere();
|
||||
return geometry;
|
||||
}
|
||||
|
||||
function smoothstep(edge0: number, edge1: number, value: number): number {
|
||||
const progress = THREE.MathUtils.clamp((value - edge0) / (edge1 - edge0), 0, 1);
|
||||
return progress * progress * (3 - 2 * progress);
|
||||
}
|
||||
|
||||
function finiteOrZero(value: number): number {
|
||||
return Number.isFinite(value) ? value : 0;
|
||||
}
|
||||
|
||||
function clamp01(value: number): number {
|
||||
return THREE.MathUtils.clamp(finiteOrZero(value), 0, 1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user