feat: rebuild the nightdrive road and terrain
This commit is contained in:
@@ -2,15 +2,42 @@ import type { LiveQualityTier } from '@/scene/types';
|
||||
|
||||
export interface RenderQualitySettings {
|
||||
pixelRatio: number;
|
||||
roadSegments: number;
|
||||
terrainSegments: number;
|
||||
terrainOctaves: 1 | 2 | 3;
|
||||
particleCount: number;
|
||||
streakCount: number;
|
||||
postEffects: boolean;
|
||||
}
|
||||
|
||||
const settings: Readonly<Record<LiveQualityTier, Omit<RenderQualitySettings, 'pixelRatio'> & { dprCap: number }>> = {
|
||||
high: { dprCap: 1.5, terrainSegments: 96, particleCount: 384, postEffects: true },
|
||||
medium: { dprCap: 1.5, terrainSegments: 64, particleCount: 192, postEffects: true },
|
||||
low: { dprCap: 1.25, terrainSegments: 32, particleCount: 64, postEffects: false },
|
||||
high: {
|
||||
dprCap: 1.5,
|
||||
roadSegments: 192,
|
||||
terrainSegments: 96,
|
||||
terrainOctaves: 3,
|
||||
particleCount: 384,
|
||||
streakCount: 48,
|
||||
postEffects: true,
|
||||
},
|
||||
medium: {
|
||||
dprCap: 1.5,
|
||||
roadSegments: 144,
|
||||
terrainSegments: 64,
|
||||
terrainOctaves: 2,
|
||||
particleCount: 192,
|
||||
streakCount: 28,
|
||||
postEffects: true,
|
||||
},
|
||||
low: {
|
||||
dprCap: 1.25,
|
||||
roadSegments: 96,
|
||||
terrainSegments: 32,
|
||||
terrainOctaves: 1,
|
||||
particleCount: 64,
|
||||
streakCount: 12,
|
||||
postEffects: false,
|
||||
},
|
||||
};
|
||||
|
||||
export function renderQualityFor(
|
||||
@@ -22,8 +49,11 @@ export function renderQualityFor(
|
||||
const finiteDpr = Number.isFinite(devicePixelRatio) ? Math.max(1, devicePixelRatio) : 1;
|
||||
return {
|
||||
pixelRatio: Math.min(finiteDpr, selected.dprCap, mobileOrTablet ? 1.5 : 2),
|
||||
roadSegments: selected.roadSegments,
|
||||
terrainSegments: selected.terrainSegments,
|
||||
terrainOctaves: selected.terrainOctaves,
|
||||
particleCount: selected.particleCount,
|
||||
streakCount: selected.streakCount,
|
||||
postEffects: selected.postEffects,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -73,8 +73,8 @@ export async function createProceduralSceneGeneration(
|
||||
rearLight.position.set(0, 1.2, 7);
|
||||
scene.add(rearLight);
|
||||
|
||||
const road = createRoad(context.resources);
|
||||
const terrain = createTerrain(context.resources, quality.terrainSegments);
|
||||
const road = createRoad(context.resources, quality);
|
||||
const terrain = createTerrain(context.resources, quality);
|
||||
const sun = createSun(context.resources);
|
||||
const car = createCar(context.resources);
|
||||
const sign = createSign(context.resources);
|
||||
@@ -177,8 +177,13 @@ export async function createProceduralSceneGeneration(
|
||||
const deltaSeconds = lastNow === null ? 0 : Math.min(0.1, Math.max(0, (now - lastNow) / 1000));
|
||||
lastNow = now;
|
||||
driveDistance += snapshot.driveSpeed * deltaSeconds * 18;
|
||||
road.update(driveDistance, snapshot.driveSpeed);
|
||||
terrain.update(driveDistance);
|
||||
road.update(driveDistance, snapshot.driveSpeed, snapshot.acceleration);
|
||||
terrain.update(
|
||||
driveDistance,
|
||||
snapshot.driveSpeed,
|
||||
snapshot.chapter,
|
||||
snapshot.routeProgress,
|
||||
);
|
||||
sun.update(snapshot.chapter, snapshot.routeProgress);
|
||||
car.update(snapshot.driveSpeed, snapshot.acceleration, now / 1000);
|
||||
sign.update(snapshot.sign);
|
||||
|
||||
173
src/scene/world/palette.ts
Normal file
173
src/scene/world/palette.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import * as THREE from 'three';
|
||||
import type { EnvironmentChapter } from '@/journey/types';
|
||||
|
||||
export interface ChapterPaletteDefinition {
|
||||
sky: number;
|
||||
fog: number;
|
||||
terrainLow: number;
|
||||
terrainHigh: number;
|
||||
sun: number;
|
||||
haze: number;
|
||||
warmth: number;
|
||||
terrainEnergy: number;
|
||||
starVisibility: number;
|
||||
streakEnergy: number;
|
||||
}
|
||||
|
||||
export interface MutableChapterPalette {
|
||||
sky: MutableColor;
|
||||
fog: MutableColor;
|
||||
terrainLow: MutableColor;
|
||||
terrainHigh: MutableColor;
|
||||
sun: MutableColor;
|
||||
haze: MutableColor;
|
||||
warmth: number;
|
||||
terrainEnergy: number;
|
||||
starVisibility: number;
|
||||
streakEnergy: number;
|
||||
}
|
||||
|
||||
export interface MutableColor {
|
||||
clone(): MutableColor;
|
||||
getHex(): number;
|
||||
lerpColors(from: MutableColor, to: MutableColor, progress: number): MutableColor;
|
||||
setHex(value: number): MutableColor;
|
||||
}
|
||||
|
||||
export const CHAPTER_PALETTES: Readonly<Record<EnvironmentChapter, ChapterPaletteDefinition>> = {
|
||||
'deep-night': {
|
||||
sky: 0x040713,
|
||||
fog: 0x07101c,
|
||||
terrainLow: 0x126a7c,
|
||||
terrainHigh: 0xa53a74,
|
||||
sun: 0xc7437e,
|
||||
haze: 0x65225f,
|
||||
warmth: 0.12,
|
||||
terrainEnergy: 0.78,
|
||||
starVisibility: 1,
|
||||
streakEnergy: 0.72,
|
||||
},
|
||||
systems: {
|
||||
sky: 0x050918,
|
||||
fog: 0x081622,
|
||||
terrainLow: 0x168aa0,
|
||||
terrainHigh: 0xa83f79,
|
||||
sun: 0xd05282,
|
||||
haze: 0x6d2968,
|
||||
warmth: 0.22,
|
||||
terrainEnergy: 0.9,
|
||||
starVisibility: 0.94,
|
||||
streakEnergy: 0.86,
|
||||
},
|
||||
infrastructure: {
|
||||
sky: 0x060a1b,
|
||||
fog: 0x091a2a,
|
||||
terrainLow: 0x197f98,
|
||||
terrainHigh: 0xa13d7a,
|
||||
sun: 0xd45b82,
|
||||
haze: 0x6f2d70,
|
||||
warmth: 0.3,
|
||||
terrainEnergy: 0.88,
|
||||
starVisibility: 0.86,
|
||||
streakEnergy: 0.82,
|
||||
},
|
||||
builds: {
|
||||
sky: 0x0b0d22,
|
||||
fog: 0x111d2d,
|
||||
terrainLow: 0x1a8ba0,
|
||||
terrainHigh: 0xb04479,
|
||||
sun: 0xe16d7a,
|
||||
haze: 0x7f356c,
|
||||
warmth: 0.46,
|
||||
terrainEnergy: 1,
|
||||
starVisibility: 0.72,
|
||||
streakEnergy: 1,
|
||||
},
|
||||
'pre-dawn': {
|
||||
sky: 0x15142a,
|
||||
fog: 0x1c2433,
|
||||
terrainLow: 0x277f91,
|
||||
terrainHigh: 0x9c4b78,
|
||||
sun: 0xf09667,
|
||||
haze: 0xa45468,
|
||||
warmth: 0.76,
|
||||
terrainEnergy: 0.72,
|
||||
starVisibility: 0.38,
|
||||
streakEnergy: 0.52,
|
||||
},
|
||||
destination: {
|
||||
sky: 0x241b31,
|
||||
fog: 0x2b2b38,
|
||||
terrainLow: 0x386f79,
|
||||
terrainHigh: 0x87506e,
|
||||
sun: 0xf4b06d,
|
||||
haze: 0xbb6b65,
|
||||
warmth: 1,
|
||||
terrainEnergy: 0.54,
|
||||
starVisibility: 0.16,
|
||||
streakEnergy: 0.18,
|
||||
},
|
||||
};
|
||||
|
||||
const paletteColors = Object.fromEntries(
|
||||
Object.entries(CHAPTER_PALETTES).map(([chapter, palette]) => [chapter, {
|
||||
sky: new THREE.Color(palette.sky),
|
||||
fog: new THREE.Color(palette.fog),
|
||||
terrainLow: new THREE.Color(palette.terrainLow),
|
||||
terrainHigh: new THREE.Color(palette.terrainHigh),
|
||||
sun: new THREE.Color(palette.sun),
|
||||
haze: new THREE.Color(palette.haze),
|
||||
}]),
|
||||
) as Readonly<Record<EnvironmentChapter, Pick<MutableChapterPalette,
|
||||
'sky' | 'fog' | 'terrainLow' | 'terrainHigh' | 'sun' | 'haze'>>>;
|
||||
|
||||
export function createMutableChapterPalette(
|
||||
chapter: EnvironmentChapter = 'deep-night',
|
||||
): MutableChapterPalette {
|
||||
const source = CHAPTER_PALETTES[chapter];
|
||||
const colors = paletteColors[chapter];
|
||||
return {
|
||||
sky: colors.sky.clone(),
|
||||
fog: colors.fog.clone(),
|
||||
terrainLow: colors.terrainLow.clone(),
|
||||
terrainHigh: colors.terrainHigh.clone(),
|
||||
sun: colors.sun.clone(),
|
||||
haze: colors.haze.clone(),
|
||||
warmth: source.warmth,
|
||||
terrainEnergy: source.terrainEnergy,
|
||||
starVisibility: source.starVisibility,
|
||||
streakEnergy: source.streakEnergy,
|
||||
};
|
||||
}
|
||||
|
||||
export function writeChapterPalette(
|
||||
target: MutableChapterPalette,
|
||||
from: EnvironmentChapter,
|
||||
to: EnvironmentChapter,
|
||||
progress: number,
|
||||
): MutableChapterPalette {
|
||||
const start = CHAPTER_PALETTES[from];
|
||||
const end = CHAPTER_PALETTES[to];
|
||||
const startColors = paletteColors[from];
|
||||
const endColors = paletteColors[to];
|
||||
const mix = clamp01(progress);
|
||||
target.sky.lerpColors(startColors.sky, endColors.sky, mix);
|
||||
target.fog.lerpColors(startColors.fog, endColors.fog, mix);
|
||||
target.terrainLow.lerpColors(startColors.terrainLow, endColors.terrainLow, mix);
|
||||
target.terrainHigh.lerpColors(startColors.terrainHigh, endColors.terrainHigh, mix);
|
||||
target.sun.lerpColors(startColors.sun, endColors.sun, mix);
|
||||
target.haze.lerpColors(startColors.haze, endColors.haze, mix);
|
||||
target.warmth = lerp(start.warmth, end.warmth, mix);
|
||||
target.terrainEnergy = lerp(start.terrainEnergy, end.terrainEnergy, mix);
|
||||
target.starVisibility = lerp(start.starVisibility, end.starVisibility, mix);
|
||||
target.streakEnergy = lerp(start.streakEnergy, end.streakEnergy, mix);
|
||||
return target;
|
||||
}
|
||||
|
||||
function lerp(from: number, to: number, progress: number): number {
|
||||
return from + (to - from) * progress;
|
||||
}
|
||||
|
||||
function clamp01(value: number): number {
|
||||
return Number.isFinite(value) ? THREE.MathUtils.clamp(value, 0, 1) : 0;
|
||||
}
|
||||
@@ -1,50 +1,111 @@
|
||||
import * as THREE from 'three';
|
||||
import type { RenderQualitySettings } from '@/scene/render-quality';
|
||||
import type { SceneResourceBag } from '@/scene/resources';
|
||||
|
||||
export function createRoad(resources: SceneResourceBag) {
|
||||
export interface RoadWorld {
|
||||
group: WorldGroup;
|
||||
update(distance: number, speed: number, acceleration: number): void;
|
||||
}
|
||||
|
||||
interface WorldGroup {
|
||||
add(...objects: unknown[]): void;
|
||||
getObjectByName(name: string): unknown;
|
||||
}
|
||||
|
||||
const ROAD_WIDTH = 22;
|
||||
const ROAD_DEPTH = 300;
|
||||
const ROAD_CENTER_Z = -136;
|
||||
|
||||
export function createRoad(
|
||||
resources: SceneResourceBag,
|
||||
quality: RenderQualitySettings,
|
||||
): RoadWorld {
|
||||
const group = new THREE.Group();
|
||||
const roadGeometry = resources.own('geometry', new THREE.PlaneGeometry(18, 240));
|
||||
const roadMaterial = resources.own('material', new THREE.MeshStandardMaterial({
|
||||
color: 0x070b16,
|
||||
roughness: 0.88,
|
||||
metalness: 0.12,
|
||||
group.name = 'road-world';
|
||||
|
||||
const geometry = resources.own(
|
||||
'geometry',
|
||||
new THREE.PlaneGeometry(ROAD_WIDTH, ROAD_DEPTH, 16, quality.roadSegments),
|
||||
);
|
||||
geometry.rotateX(-Math.PI / 2);
|
||||
geometry.translate(0, 0, ROAD_CENTER_Z);
|
||||
|
||||
const uniforms = {
|
||||
uDistance: { value: 0 },
|
||||
uSpeed: { value: 0 },
|
||||
uAcceleration: { value: 0 },
|
||||
uAsphalt: { value: new THREE.Color(0x03070f) },
|
||||
uAsphaltLift: { value: new THREE.Color(0x091422) },
|
||||
uEdgeColor: { value: new THREE.Color(0x64d9e7) },
|
||||
uLaneColor: { value: new THREE.Color(0xf1a35e) },
|
||||
};
|
||||
const material = resources.own('material', new THREE.ShaderMaterial({
|
||||
uniforms,
|
||||
vertexShader: `
|
||||
varying vec2 vRoadUv;
|
||||
varying float vDepth;
|
||||
|
||||
void main() {
|
||||
vRoadUv = uv;
|
||||
vDepth = smoothstep(0.0, 1.0, uv.y);
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
uniform float uDistance;
|
||||
uniform float uSpeed;
|
||||
uniform float uAcceleration;
|
||||
uniform vec3 uAsphalt;
|
||||
uniform vec3 uAsphaltLift;
|
||||
uniform vec3 uEdgeColor;
|
||||
uniform vec3 uLaneColor;
|
||||
varying vec2 vRoadUv;
|
||||
varying float vDepth;
|
||||
|
||||
void main() {
|
||||
float roadX = abs(vRoadUv.x - 0.5) * 2.0;
|
||||
float centerValley = 1.0 - smoothstep(0.0, 0.82, roadX);
|
||||
float outerEdge = smoothstep(0.82, 0.9, roadX) * (1.0 - smoothstep(0.94, 1.0, roadX));
|
||||
float shoulder = smoothstep(0.66, 0.92, roadX) * 0.12;
|
||||
float laneWidth = 1.0 - smoothstep(0.012, 0.03, abs(vRoadUv.x - 0.5));
|
||||
float laneCycle = fract(vRoadUv.y * 34.0 + uDistance * (0.12 + uSpeed * 0.025));
|
||||
float laneDash = smoothstep(0.16, 0.24, laneCycle) * (1.0 - smoothstep(0.68, 0.78, laneCycle));
|
||||
float centerLane = laneWidth * laneDash * smoothstep(0.04, 0.22, vRoadUv.y);
|
||||
float edgeLuminance = outerEdge * (0.58 + uAcceleration * 0.34);
|
||||
float grain = sin((vRoadUv.y * 410.0 + vRoadUv.x * 37.0) + uDistance * 0.08) * 0.008;
|
||||
|
||||
vec3 color = mix(uAsphaltLift, uAsphalt, centerValley * 0.84);
|
||||
color += uEdgeColor * (edgeLuminance + shoulder);
|
||||
color += uLaneColor * centerLane * (0.66 + uSpeed * 0.18);
|
||||
color += grain;
|
||||
color *= mix(0.7, 1.0, smoothstep(0.0, 0.24, vRoadUv.y));
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
}
|
||||
`,
|
||||
depthWrite: true,
|
||||
depthTest: true,
|
||||
toneMapped: true,
|
||||
}));
|
||||
const road = new THREE.Mesh(roadGeometry, roadMaterial);
|
||||
road.rotation.x = -Math.PI / 2;
|
||||
road.position.z = -92;
|
||||
group.add(road);
|
||||
|
||||
const edgeGeometry = resources.own('geometry', new THREE.BoxGeometry(0.12, 0.035, 240));
|
||||
const edgeMaterial = resources.own('material', new THREE.MeshBasicMaterial({ color: 0x38dff2 }));
|
||||
for (const x of [-8.65, 8.65]) {
|
||||
const edge = new THREE.Mesh(edgeGeometry, edgeMaterial);
|
||||
edge.position.set(x, 0.035, -92);
|
||||
group.add(edge);
|
||||
}
|
||||
|
||||
const markerGeometry = resources.own('geometry', new THREE.BoxGeometry(0.14, 0.025, 3.8));
|
||||
const markerMaterial = resources.own('material', new THREE.MeshBasicMaterial({ color: 0xff9e68 }));
|
||||
const markers: Array<{ position: { z: number } }> = [];
|
||||
for (let index = 0; index < 22; index += 1) {
|
||||
const marker = new THREE.Mesh(markerGeometry, markerMaterial);
|
||||
marker.position.set(0, 0.045, 8 - index * 10);
|
||||
markers.push(marker);
|
||||
group.add(marker);
|
||||
}
|
||||
const surface = new THREE.Mesh(geometry, material);
|
||||
surface.name = 'road-surface';
|
||||
surface.receiveShadow = true;
|
||||
group.add(surface);
|
||||
|
||||
return {
|
||||
group,
|
||||
update(distance: number, speed: number) {
|
||||
const flow = distance * (5 + speed * 8);
|
||||
for (let index = 0; index < markers.length; index += 1) {
|
||||
const marker = markers[index];
|
||||
if (!marker) continue;
|
||||
marker.position.z = 8 - modulo(index * 10 - flow, 220);
|
||||
}
|
||||
update(distance, speed, acceleration) {
|
||||
uniforms.uDistance.value = finiteOrZero(distance);
|
||||
uniforms.uSpeed.value = clamp01(speed);
|
||||
uniforms.uAcceleration.value = clamp01(acceleration);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function modulo(value: number, divisor: number): number {
|
||||
return ((value % divisor) + divisor) % divisor;
|
||||
function finiteOrZero(value: number): number {
|
||||
return Number.isFinite(value) ? value : 0;
|
||||
}
|
||||
|
||||
function clamp01(value: number): number {
|
||||
return THREE.MathUtils.clamp(finiteOrZero(value), 0, 1);
|
||||
}
|
||||
|
||||
@@ -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