giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add underwater fog effect and update shader material for water patches

Browse Source
This commit is contained in:
Victor Giers
2026-04-07 06:15:21 +02:00
parent 3e370591d3
commit 7d61cd322d
1 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/runtime-three/runtime-host.js
View File

@@ -1,15 +1,16 @@
import { AmbientLight, AnimationClip, AnimationMixer, DirectionalLight, Euler, Group, LoopOnce, LoopRepeat, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PointLight, Quaternion, Scene, ShaderMaterial, Vector3, SpotLight, WebGLRenderer } from "three";
import { AmbientLight, AnimationClip, AnimationMixer, DirectionalLight, Euler, FogExp2, Group, LoopOnce, LoopRepeat, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PointLight, Quaternion, Scene, ShaderMaterial, Vector3, SpotLight, WebGLRenderer } from "three";
import { createModelInstanceRenderGroup, disposeModelInstance } from "../assets/model-instance-rendering";
import { buildBoxBrushDerivedMeshData } from "../geometry/box-brush-mesh";
import { createStarterMaterialSignature, createStarterMaterialTexture } from "../materials/starter-material-textures";
import { applyAdvancedRenderingLightShadowFlags, applyAdvancedRenderingRenderableShadowFlags, configureAdvancedRenderingRenderer, createAdvancedRenderingComposer, resolveBoxVolumeRenderPaths } from "../rendering/advanced-rendering";
import { collectWaterContactPatches, createWaterContactPatchAxisUniformValue, createWaterContactPatchUniformValue, createWaterMaterial } from "../rendering/water-material";
import { collectWaterContactPatches, createWaterContactPatchAxisUniformValue, createWaterContactPatchShapeUniformValue, createWaterContactPatchUniformValue, createWaterMaterial } from "../rendering/water-material";
import { areAdvancedRenderingSettingsEqual, cloneAdvancedRenderingSettings } from "../document/world-settings";
import { FirstPersonNavigationController } from "./first-person-navigation-controller";
import { RapierCollisionWorld } from "./rapier-collision-world";
import { RuntimeInteractionSystem } from "./runtime-interaction-system";
import { RuntimeAudioSystem } from "./runtime-audio-system";
import { OrbitVisitorNavigationController } from "./orbit-visitor-navigation-controller";
import { resolveUnderwaterFogState } from "./underwater-fog";
const FALLBACK_FACE_COLOR = 0x747d89;
export class RuntimeHost {
scene = new Scene();
@@ -27,6 +28,7 @@ export class RuntimeHost {
orbitVisitorController = new OrbitVisitorNavigationController();
interactionSystem = new RuntimeInteractionSystem();
audioSystem = new RuntimeAudioSystem(this.scene, this.camera, null);
underwaterSceneFog = new FogExp2("#2c6f8d", 0.03);
brushMeshes = new Map();
volumeTime = 0;
volumeAnimatedMaterials = [];
@@ -209,6 +211,7 @@ export class RuntimeHost {
this.advancedRenderingComposer?.dispose();
this.advancedRenderingComposer = null;
this.currentAdvancedRenderingSettings = null;
this.scene.fog = null;
if (this.renderer !== null) {
this.renderer.autoClear = true;
}
@@ -446,6 +449,7 @@ export class RuntimeHost {
brush,
uniform: waterMaterial.contactPatchesUniform,
axisUniform: waterMaterial.contactPatchAxesUniform,
shapeUniform: waterMaterial.contactPatchShapesUniform ?? { value: [] },
staticContactPatches
});
}
@@ -484,9 +488,12 @@ export class RuntimeHost {
const cb = parseInt(hex.substring(4, 6), 16) / 255;
const vertexShader = `
varying vec2 vUv;
#include <fog_pars_vertex>
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
#include <fog_vertex>
}
`;
const fragmentShader = `
@@ -494,6 +501,7 @@ export class RuntimeHost {
uniform float fogDensity;
uniform float time;
varying vec2 vUv;
#include <fog_pars_fragment>
void main() {
vec2 dist = abs(vUv - 0.5) * 2.0;
float edgeFade = 1.0 - smoothstep(0.4, 1.0, max(dist.x, dist.y));
@@ -503,6 +511,7 @@ export class RuntimeHost {
alpha = clamp(alpha, 0.0, 0.88);
vec3 color = mix(fogColor, vec3(1.0), (1.0 - edgeFade) * 0.09);
gl_FragColor = vec4(color, alpha);
#include <fog_fragment>
}
`;
const mat = new ShaderMaterial({
@@ -515,11 +524,28 @@ export class RuntimeHost {
},
transparent: true,
depthWrite: false,
fog: true,
side: 2
});
this.volumeAnimatedMaterials.push(mat);
return mat;
}
updateUnderwaterSceneFog() {
const fogState = this.activeController === this.firstPersonController
? resolveUnderwaterFogState(this.runtimeScene, this.currentFirstPersonTelemetry)
: null;
if (fogState === null) {
if (this.scene.fog !== null) {
this.scene.fog = null;
}
return;
}
this.underwaterSceneFog.color.set(fogState.colorHex);
this.underwaterSceneFog.density = fogState.density;
if (this.scene.fog !== this.underwaterSceneFog) {
this.scene.fog = this.underwaterSceneFog;
}
}
getOrCreateTexture(material) {
const signature = createStarterMaterialSignature(material);
const cachedTexture = this.materialTextureCache.get(material.id);
@@ -655,6 +681,7 @@ export class RuntimeHost {
const mergedPatches = this.mergeRuntimeWaterContactPatches(binding.staticContactPatches, this.collectRuntimePlayerWaterContactPatches(binding.brush));
binding.uniform.value = createWaterContactPatchUniformValue(mergedPatches);
binding.axisUniform.value = createWaterContactPatchAxisUniformValue(mergedPatches);
binding.shapeUniform.value = createWaterContactPatchShapeUniformValue(mergedPatches);
}
}
clearModelInstances() {
@@ -717,6 +744,7 @@ export class RuntimeHost {
if (this.runtimeWaterContactUniforms.length > 0) {
this.updateRuntimeWaterContactUniforms();
}
this.updateUnderwaterSceneFog();
if (this.advancedRenderingComposer !== null) {
this.advancedRenderingComposer.render(dt);
return;