1563 lines
56 KiB
JavaScript
1563 lines
56 KiB
JavaScript
import * as THREE from 'three';
|
|
import App from '@/core/app/App';
|
|
import Loader from '@/core/loader/Loader';
|
|
|
|
const DEFAULT_LIGHT = [0.7559289460184544, 0.7559289460184544, -0.3779644730092272];
|
|
const COLOR_BLACK = new THREE.Color('black');
|
|
const WATERPOOL_CLEAR_COLOR = 0x272727;
|
|
const WATERPOOL_PICK_MATERIAL = new THREE.MeshBasicMaterial({
|
|
colorWrite: false,
|
|
depthWrite: false,
|
|
depthTest: false,
|
|
transparent: true,
|
|
opacity: 0,
|
|
side: THREE.DoubleSide,
|
|
});
|
|
|
|
const waterPoolSet = new Set();
|
|
let waterPoolRenderingRegistered = false;
|
|
let waterPoolRenderingPending = false;
|
|
const waterPoolSceneState = {
|
|
texture: null,
|
|
resolution: new THREE.Vector2(),
|
|
renderId: 0,
|
|
lastCaptureId: -1,
|
|
};
|
|
|
|
function markWaterPoolRenderFrame() {
|
|
waterPoolSceneState.renderId += 1;
|
|
}
|
|
|
|
function ensureWaterPoolSceneTexture(renderer) {
|
|
if (!renderer) return;
|
|
renderer.getSize(waterPoolSceneState.resolution);
|
|
const w = waterPoolSceneState.resolution.x;
|
|
const h = waterPoolSceneState.resolution.y;
|
|
const texture = waterPoolSceneState.texture;
|
|
const image = texture ? texture.image : null;
|
|
if (!texture || !image || image.width !== w || image.height !== h) {
|
|
if (texture) texture.dispose();
|
|
waterPoolSceneState.texture = new THREE.FramebufferTexture(w, h);
|
|
waterPoolSceneState.texture.minFilter = THREE.LinearFilter;
|
|
waterPoolSceneState.texture.magFilter = THREE.LinearFilter;
|
|
}
|
|
}
|
|
|
|
function captureWaterPoolSceneTexture(renderer) {
|
|
if (!renderer) return;
|
|
if (waterPoolSceneState.lastCaptureId === waterPoolSceneState.renderId) {
|
|
return;
|
|
}
|
|
ensureWaterPoolSceneTexture(renderer);
|
|
if (!waterPoolSceneState.texture) return;
|
|
renderer.copyFramebufferToTexture(waterPoolSceneState.texture);
|
|
waterPoolSceneState.lastCaptureId = waterPoolSceneState.renderId;
|
|
}
|
|
|
|
function registerWaterPoolRendering() {
|
|
if (waterPoolRenderingRegistered) return;
|
|
|
|
const viewer = App?.viewer;
|
|
if (!viewer) {
|
|
waterPoolRenderingPending = true;
|
|
return;
|
|
}
|
|
|
|
waterPoolRenderingPending = false;
|
|
viewer.addEventListener("beforeRender", () => {
|
|
markWaterPoolRenderFrame();
|
|
});
|
|
viewer.addEventListener("afterAnimation", (e) => {
|
|
if (waterPoolSet.size === 0) return;
|
|
|
|
const renderer = App.viewer?.renderer;
|
|
if (!renderer) return;
|
|
|
|
waterPoolSet.forEach((pool) => {
|
|
if (!pool || typeof pool.step !== 'function') return;
|
|
|
|
pool.step(renderer);
|
|
});
|
|
|
|
e.toBeRender(true);
|
|
|
|
const prevClearColor = renderer.getClearColor(new THREE.Color());
|
|
const prevClearAlpha = renderer.getClearAlpha();
|
|
renderer.setRenderTarget(null);
|
|
renderer.setClearColor(WATERPOOL_CLEAR_COLOR, 0);
|
|
renderer.clear();
|
|
renderer.setClearColor(prevClearColor, prevClearAlpha);
|
|
});
|
|
|
|
waterPoolRenderingRegistered = true;
|
|
}
|
|
|
|
function registerWaterPool(pool) {
|
|
if (!pool) return;
|
|
if (pool._waterPoolRegistered || pool._waterPoolRegistering) return;
|
|
if (pool.loaded && typeof pool.loaded.then === 'function') {
|
|
pool._waterPoolRegistering = true;
|
|
pool.loaded.then(() => {
|
|
pool._waterPoolRegistering = false;
|
|
if (pool._waterPoolRemoved) return;
|
|
if (pool._waterPoolRegistered) return;
|
|
pool._waterPoolRegistered = true;
|
|
waterPoolSet.add(pool);
|
|
registerWaterPoolRendering();
|
|
}).catch(() => {
|
|
pool._waterPoolRegistering = false;
|
|
});
|
|
return;
|
|
}
|
|
pool._waterPoolRegistered = true;
|
|
waterPoolSet.add(pool);
|
|
registerWaterPoolRendering();
|
|
}
|
|
|
|
function unregisterWaterPool(pool) {
|
|
if (!pool) return;
|
|
pool._waterPoolRegistered = false;
|
|
pool._waterPoolRegistering = false;
|
|
waterPoolSet.delete(pool);
|
|
}
|
|
|
|
function serializeTexture(texture) {
|
|
if (!texture) return null;
|
|
if (!texture.isTexture || !texture.image) return null;
|
|
if (typeof document === 'undefined') return null;
|
|
|
|
const image = texture.image;
|
|
try {
|
|
if (image instanceof HTMLCanvasElement) {
|
|
return { type: 'texture', dataUrl: image.toDataURL('image/png') };
|
|
}
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
|
|
const canvas = document.createElement('canvas');
|
|
const width = image.width || image.videoWidth;
|
|
const height = image.height || image.videoHeight;
|
|
if (!width || !height) return null;
|
|
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return null;
|
|
|
|
try {
|
|
if (image instanceof ImageData) {
|
|
ctx.putImageData(image, 0, 0);
|
|
} else if (image.data && image.width && image.height) {
|
|
const data = image.data instanceof Uint8ClampedArray ? image.data : new Uint8ClampedArray(image.data);
|
|
const imageData = new ImageData(data, image.width, image.height);
|
|
ctx.putImageData(imageData, 0, 0);
|
|
} else {
|
|
ctx.drawImage(image, 0, 0, width, height);
|
|
}
|
|
return { type: 'texture', dataUrl: canvas.toDataURL('image/png') };
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function restoreTexture(serialized) {
|
|
if (!serialized) return null;
|
|
if (serialized.type === 'texture' && serialized.dataUrl) {
|
|
const tex = new THREE.TextureLoader().load(serialized.dataUrl);
|
|
tex.wrapS = THREE.RepeatWrapping;
|
|
tex.wrapT = THREE.RepeatWrapping;
|
|
return tex;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function loadText(url) {
|
|
return new Promise((resolve, reject) => {
|
|
const loader = new THREE.FileLoader();
|
|
const _url = new URL(import.meta.env.BASE_URL + url, import.meta.url).href;
|
|
loader.load(_url, resolve, undefined, reject);
|
|
});
|
|
}
|
|
|
|
let shaderChunksPromise = null;
|
|
function ensureShaderChunks() {
|
|
if (THREE.ShaderChunk['utils'] && THREE.ShaderChunk['cylinder_utils']) {
|
|
return Promise.resolve();
|
|
}
|
|
if (shaderChunksPromise) {
|
|
return shaderChunksPromise;
|
|
}
|
|
shaderChunksPromise = Promise.all([
|
|
loadText('resource/shaders/water/utils.glsl'),
|
|
loadText('resource/shaders/water/cylinder_utils.glsl')
|
|
]).then(([utils, cylinderUtils]) => {
|
|
THREE.ShaderChunk['utils'] = utils;
|
|
THREE.ShaderChunk['cylinder_utils'] = cylinderUtils;
|
|
}).catch((error) => {
|
|
shaderChunksPromise = null;
|
|
throw error;
|
|
});
|
|
return shaderChunksPromise;
|
|
}
|
|
|
|
function createWallMaterial(type, light, tiles, wallOpacity, wallMode, volumeColor) {
|
|
const vertexPromise = loadText('resource/shaders/water/pool/vertex.glsl');
|
|
const fragmentPromise = type === 'cylinder'
|
|
? loadText('resource/shaders/water/cylinder_pool/fragment.glsl')
|
|
: loadText('resource/shaders/water/pool/fragment.glsl');
|
|
|
|
return Promise.all([vertexPromise, fragmentPromise]).then(([vertexShader, fragmentShader]) => {
|
|
const material = new THREE.RawShaderMaterial({
|
|
uniforms: {
|
|
light: { value: light },
|
|
tiles: { value: tiles },
|
|
useTiles: { value: tiles ? 1 : 0 },
|
|
tilesColor: { value: volumeColor },
|
|
water: { value: null },
|
|
causticTex: { value: null },
|
|
sceneTexture: { value: null },
|
|
resolution: { value: new THREE.Vector2(1, 1) },
|
|
useSceneRefraction: { value: 1 },
|
|
surfaceTransmittance: { value: 0.65 },
|
|
normalStrength: { value: 0.6 },
|
|
refractionStrength: { value: 0.035 },
|
|
wallMode: { value: wallMode },
|
|
wallOpacity: { value: wallOpacity },
|
|
volumeColor: { value: volumeColor },
|
|
poolHeight: { value: 1 },
|
|
poolHalfSize: { value: new THREE.Vector2(1, 1) },
|
|
poolRadius: { value: 1 },
|
|
},
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
material.side = THREE.DoubleSide;
|
|
if (wallOpacity < 1) {
|
|
material.transparent = true;
|
|
material.depthWrite = false;
|
|
}
|
|
return material;
|
|
});
|
|
}
|
|
|
|
class WaterSimulation {
|
|
constructor(size = 256) {
|
|
this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
|
|
this._geometry = new THREE.PlaneGeometry(2, 2);
|
|
|
|
this._textureA = new THREE.WebGLRenderTarget(size, size, { type: THREE.FloatType });
|
|
this._textureB = new THREE.WebGLRenderTarget(size, size, { type: THREE.FloatType });
|
|
this.texture = this._textureA;
|
|
|
|
const shadersPromises = [
|
|
loadText('resource/shaders/water/simulation/vertex.glsl'),
|
|
loadText('resource/shaders/water/simulation/drop_fragment.glsl'),
|
|
loadText('resource/shaders/water/simulation/normal_fragment.glsl'),
|
|
loadText('resource/shaders/water/simulation/update_fragment.glsl'),
|
|
];
|
|
|
|
const delta = 1 / size;
|
|
|
|
this.loaded = Promise.all(shadersPromises)
|
|
.then(([vertexShader, dropFragmentShader, normalFragmentShader, updateFragmentShader]) => {
|
|
const dropMaterial = new THREE.RawShaderMaterial({
|
|
uniforms: {
|
|
center: { value: [0, 0] },
|
|
radius: { value: 0 },
|
|
strength: { value: 0 },
|
|
tInput: { value: null },
|
|
},
|
|
vertexShader: vertexShader,
|
|
fragmentShader: dropFragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
const normalMaterial = new THREE.RawShaderMaterial({
|
|
uniforms: {
|
|
delta: { value: [delta, delta] },
|
|
tInput: { value: null },
|
|
},
|
|
vertexShader: vertexShader,
|
|
fragmentShader: normalFragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
const updateMaterial = new THREE.RawShaderMaterial({
|
|
uniforms: {
|
|
delta: { value: [delta, delta] },
|
|
tInput: { value: null },
|
|
},
|
|
vertexShader: vertexShader,
|
|
fragmentShader: updateFragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
this._dropMesh = new THREE.Mesh(this._geometry, dropMaterial);
|
|
this._normalMesh = new THREE.Mesh(this._geometry, normalMaterial);
|
|
this._updateMesh = new THREE.Mesh(this._geometry, updateMaterial);
|
|
});
|
|
}
|
|
|
|
addDrop(renderer, x, y, radius, strength) {
|
|
this._dropMesh.material.uniforms['center'].value = [x, y];
|
|
this._dropMesh.material.uniforms['radius'].value = radius;
|
|
this._dropMesh.material.uniforms['strength'].value = strength;
|
|
|
|
this._render(renderer, this._dropMesh);
|
|
}
|
|
|
|
stepSimulation(renderer) {
|
|
this._render(renderer, this._updateMesh);
|
|
}
|
|
|
|
updateNormals(renderer) {
|
|
this._render(renderer, this._normalMesh);
|
|
}
|
|
|
|
_render(renderer, mesh) {
|
|
const oldTexture = this.texture;
|
|
const newTexture = this.texture === this._textureA ? this._textureB : this._textureA;
|
|
|
|
mesh.material.uniforms['tInput'].value = oldTexture.texture;
|
|
|
|
renderer.setRenderTarget(newTexture);
|
|
renderer.render(mesh, this._camera);
|
|
|
|
this.texture = newTexture;
|
|
}
|
|
}
|
|
|
|
class Caustics {
|
|
constructor(lightFrontGeometry, light, size = 1024) {
|
|
this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
|
|
this._geometry = lightFrontGeometry;
|
|
this.texture = new THREE.WebGLRenderTarget(size, size, { type: THREE.UnsignedByteType });
|
|
|
|
const shadersPromises = [
|
|
loadText('resource/shaders/water/caustics/vertex.glsl'),
|
|
loadText('resource/shaders/water/caustics/fragment.glsl')
|
|
];
|
|
|
|
this.loaded = Promise.all(shadersPromises)
|
|
.then(([vertexShader, fragmentShader]) => {
|
|
const material = new THREE.RawShaderMaterial({
|
|
uniforms: {
|
|
light: { value: light },
|
|
water: { value: null },
|
|
poolHeight: { value: 1 },
|
|
poolHalfSize: { value: new THREE.Vector2(1, 1) },
|
|
poolRadius: { value: 1 },
|
|
},
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
this._causticMesh = new THREE.Mesh(this._geometry, material);
|
|
});
|
|
}
|
|
|
|
update(renderer, waterTexture) {
|
|
this._causticMesh.material.uniforms['water'].value = waterTexture;
|
|
|
|
renderer.setRenderTarget(this.texture);
|
|
renderer.setClearColor(COLOR_BLACK, 0);
|
|
renderer.clear();
|
|
renderer.render(this._causticMesh, this._camera);
|
|
}
|
|
}
|
|
|
|
class CylinderCaustics {
|
|
constructor(lightFrontGeometry, light, size = 1024) {
|
|
this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
|
|
this._geometry = lightFrontGeometry;
|
|
this.texture = new THREE.WebGLRenderTarget(size, size, { type: THREE.UnsignedByteType });
|
|
|
|
const shadersPromises = [
|
|
loadText('resource/shaders/water/cylinder_caustics/vertex.glsl'),
|
|
loadText('resource/shaders/water/cylinder_caustics/fragment.glsl')
|
|
];
|
|
|
|
this.loaded = Promise.all(shadersPromises)
|
|
.then(([vertexShader, fragmentShader]) => {
|
|
const material = new THREE.RawShaderMaterial({
|
|
uniforms: {
|
|
light: { value: light },
|
|
water: { value: null },
|
|
poolHeight: { value: 1 },
|
|
poolHalfSize: { value: new THREE.Vector2(1, 1) },
|
|
poolRadius: { value: 1 },
|
|
},
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
this._causticMesh = new THREE.Mesh(this._geometry, material);
|
|
});
|
|
}
|
|
|
|
update(renderer, waterTexture) {
|
|
this._causticMesh.material.uniforms['water'].value = waterTexture;
|
|
|
|
renderer.setRenderTarget(this.texture);
|
|
renderer.setClearColor(COLOR_BLACK, 0);
|
|
renderer.clear();
|
|
renderer.render(this._causticMesh, this._camera);
|
|
}
|
|
}
|
|
|
|
class Water {
|
|
constructor({ light, tiles, sky, segments }) {
|
|
this.geometry = new THREE.PlaneGeometry(2, 2, segments, segments);
|
|
|
|
const shadersPromises = [
|
|
loadText('resource/shaders/water/water/vertex.glsl'),
|
|
loadText('resource/shaders/water/water/fragment.glsl')
|
|
];
|
|
|
|
this.loaded = Promise.all(shadersPromises)
|
|
.then(([vertexShader, fragmentShader]) => {
|
|
const baseUniforms = {
|
|
light: { value: light },
|
|
tiles: { value: tiles },
|
|
useTiles: { value: tiles ? 1 : 0 },
|
|
tilesColor: { value: new THREE.Color(0x2c5965) },
|
|
sky: { value: sky },
|
|
water: { value: null },
|
|
causticTex: { value: null },
|
|
underwater: { value: false },
|
|
wallMode: { value: 0 },
|
|
volumeColor: { value: new THREE.Color(0x2c5965) },
|
|
surfaceColor: { value: new THREE.Color(0x4a8aa0) },
|
|
useSky: { value: 0 },
|
|
useSceneRefraction: { value: 1 },
|
|
surfaceTransmittance: { value: 0.65 },
|
|
normalStrength: { value: 0.6 },
|
|
refractionStrength: { value: 0.035 },
|
|
hasWall: { value: 1 },
|
|
poolHeight: { value: 1 },
|
|
poolHalfSize: { value: new THREE.Vector2(1, 1) },
|
|
poolRadius: { value: 1 },
|
|
sceneTexture: { value: null },
|
|
resolution: { value: new THREE.Vector2(1, 1) },
|
|
};
|
|
|
|
const frontUniforms = THREE.UniformsUtils.clone(baseUniforms);
|
|
const backUniforms = THREE.UniformsUtils.clone(baseUniforms);
|
|
|
|
this.materialFront = new THREE.RawShaderMaterial({
|
|
uniforms: frontUniforms,
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
this.materialBack = new THREE.RawShaderMaterial({
|
|
uniforms: backUniforms,
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
this.materialFront.side = THREE.FrontSide;
|
|
this.materialBack.side = THREE.BackSide;
|
|
this.materialFront.uniforms['underwater'].value = true;
|
|
this.materialBack.uniforms['underwater'].value = false;
|
|
|
|
this.materials = [this.materialFront, this.materialBack];
|
|
|
|
this.meshFront = new THREE.Mesh(this.geometry, this.materialFront);
|
|
this.meshBack = new THREE.Mesh(this.geometry, this.materialBack);
|
|
this.meshes = [this.meshFront, this.meshBack];
|
|
|
|
this.material = this.materialFront;
|
|
this.mesh = this.meshFront;
|
|
});
|
|
}
|
|
|
|
getMaterials() {
|
|
if (this.materials && this.materials.length) {
|
|
return this.materials;
|
|
}
|
|
if (this.material) {
|
|
return [this.material];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
_applyTextures(waterTexture, causticsTexture) {
|
|
const materials = this.getMaterials();
|
|
if (!materials.length) {
|
|
return;
|
|
}
|
|
materials.forEach((material) => {
|
|
if (!material || !material.uniforms) {
|
|
return;
|
|
}
|
|
material.uniforms['water'].value = waterTexture;
|
|
material.uniforms['causticTex'].value = causticsTexture;
|
|
});
|
|
}
|
|
|
|
draw(renderer, camera, waterTexture, causticsTexture) {
|
|
this._applyTextures(waterTexture, causticsTexture);
|
|
|
|
if (this.meshFront) {
|
|
renderer.render(this.meshFront, camera);
|
|
}
|
|
if (this.meshBack) {
|
|
renderer.render(this.meshBack, camera);
|
|
}
|
|
}
|
|
}
|
|
|
|
class CylinderWater {
|
|
constructor({ light, tiles, sky, segments }) {
|
|
this.geometry = new THREE.PlaneGeometry(2, 2, segments, segments);
|
|
|
|
const shadersPromises = [
|
|
loadText('resource/shaders/water/water/vertex.glsl'),
|
|
loadText('resource/shaders/water/cylinder_water/fragment.glsl')
|
|
];
|
|
|
|
this.loaded = Promise.all(shadersPromises)
|
|
.then(([vertexShader, fragmentShader]) => {
|
|
const baseUniforms = {
|
|
light: { value: light },
|
|
tiles: { value: tiles },
|
|
useTiles: { value: tiles ? 1 : 0 },
|
|
tilesColor: { value: new THREE.Color(0x2c5965) },
|
|
sky: { value: sky },
|
|
water: { value: null },
|
|
causticTex: { value: null },
|
|
underwater: { value: false },
|
|
wallMode: { value: 0 },
|
|
volumeColor: { value: new THREE.Color(0x2c5965) },
|
|
surfaceColor: { value: new THREE.Color(0x4a8aa0) },
|
|
useSky: { value: 0 },
|
|
useSceneRefraction: { value: 1 },
|
|
surfaceTransmittance: { value: 0.65 },
|
|
normalStrength: { value: 0.6 },
|
|
refractionStrength: { value: 0.035 },
|
|
hasWall: { value: 1 },
|
|
poolHeight: { value: 1 },
|
|
poolHalfSize: { value: new THREE.Vector2(1, 1) },
|
|
poolRadius: { value: 1 },
|
|
sceneTexture: { value: null },
|
|
resolution: { value: new THREE.Vector2(1, 1) },
|
|
};
|
|
|
|
const frontUniforms = THREE.UniformsUtils.clone(baseUniforms);
|
|
const backUniforms = THREE.UniformsUtils.clone(baseUniforms);
|
|
|
|
this.materialFront = new THREE.RawShaderMaterial({
|
|
uniforms: frontUniforms,
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
this.materialBack = new THREE.RawShaderMaterial({
|
|
uniforms: backUniforms,
|
|
vertexShader: vertexShader,
|
|
fragmentShader: fragmentShader,
|
|
glslVersion: THREE.GLSL3,
|
|
});
|
|
|
|
this.materialFront.side = THREE.FrontSide;
|
|
this.materialBack.side = THREE.BackSide;
|
|
this.materialFront.uniforms['underwater'].value = true;
|
|
this.materialBack.uniforms['underwater'].value = false;
|
|
|
|
this.materials = [this.materialFront, this.materialBack];
|
|
|
|
this.meshFront = new THREE.Mesh(this.geometry, this.materialFront);
|
|
this.meshBack = new THREE.Mesh(this.geometry, this.materialBack);
|
|
this.meshes = [this.meshFront, this.meshBack];
|
|
|
|
this.material = this.materialFront;
|
|
this.mesh = this.meshFront;
|
|
});
|
|
}
|
|
|
|
getMaterials() {
|
|
if (this.materials && this.materials.length) {
|
|
return this.materials;
|
|
}
|
|
if (this.material) {
|
|
return [this.material];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
_applyTextures(waterTexture, causticsTexture) {
|
|
const materials = this.getMaterials();
|
|
if (!materials.length) {
|
|
return;
|
|
}
|
|
materials.forEach((material) => {
|
|
if (!material || !material.uniforms) {
|
|
return;
|
|
}
|
|
material.uniforms['water'].value = waterTexture;
|
|
material.uniforms['causticTex'].value = causticsTexture;
|
|
});
|
|
}
|
|
|
|
draw(renderer, camera, waterTexture, causticsTexture) {
|
|
this._applyTextures(waterTexture, causticsTexture);
|
|
|
|
if (this.meshFront) {
|
|
renderer.render(this.meshFront, camera);
|
|
}
|
|
if (this.meshBack) {
|
|
renderer.render(this.meshBack, camera);
|
|
}
|
|
}
|
|
}
|
|
|
|
class SquarePoolWall {
|
|
constructor(material) {
|
|
this._geometry = new THREE.BufferGeometry();
|
|
const vertices = new Float32Array([
|
|
-1, -1, -1,
|
|
-1, -1, 1,
|
|
-1, 1, -1,
|
|
-1, 1, 1,
|
|
1, -1, -1,
|
|
1, 1, -1,
|
|
1, -1, 1,
|
|
1, 1, 1,
|
|
-1, -1, -1,
|
|
1, -1, -1,
|
|
-1, -1, 1,
|
|
1, -1, 1,
|
|
-1, 1, -1,
|
|
-1, 1, 1,
|
|
1, 1, -1,
|
|
1, 1, 1,
|
|
-1, -1, -1,
|
|
-1, 1, -1,
|
|
1, -1, -1,
|
|
1, 1, -1,
|
|
-1, -1, 1,
|
|
1, -1, 1,
|
|
-1, 1, 1,
|
|
1, 1, 1
|
|
]);
|
|
const indices = new Uint32Array([
|
|
0, 1, 2,
|
|
2, 1, 3,
|
|
4, 5, 6,
|
|
6, 5, 7,
|
|
12, 13, 14,
|
|
14, 13, 15,
|
|
16, 17, 18,
|
|
18, 17, 19,
|
|
20, 21, 22,
|
|
22, 21, 23
|
|
]);
|
|
|
|
this._geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
|
this._geometry.setIndex(new THREE.BufferAttribute(indices, 1));
|
|
|
|
this._material = material;
|
|
this.mesh = new THREE.Mesh(this._geometry, this._material);
|
|
}
|
|
|
|
draw(renderer, camera, waterTexture, causticsTexture) {
|
|
this._applyUniforms(waterTexture, causticsTexture);
|
|
renderer.render(this.mesh, camera);
|
|
}
|
|
|
|
_applyUniforms(waterTexture, causticsTexture) {
|
|
if (!this._material || !this._material.uniforms) {
|
|
return;
|
|
}
|
|
if (this._material.uniforms.water) {
|
|
this._material.uniforms.water.value = waterTexture;
|
|
}
|
|
if (this._material.uniforms.causticTex) {
|
|
this._material.uniforms.causticTex.value = causticsTexture;
|
|
}
|
|
}
|
|
}
|
|
|
|
class CylinderPoolWall {
|
|
constructor(material, segments = 64) {
|
|
this._geometry = this._buildGeometry(segments);
|
|
this._material = material;
|
|
this.mesh = new THREE.Mesh(this._geometry, this._material);
|
|
}
|
|
|
|
_buildGeometry(segments) {
|
|
const geometry = new THREE.BufferGeometry();
|
|
const vertices = [];
|
|
const indices = [];
|
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
const angle = (i / segments) * Math.PI * 2;
|
|
const x = Math.cos(angle);
|
|
const z = Math.sin(angle);
|
|
vertices.push(x, -1, z);
|
|
vertices.push(x, 1, z);
|
|
}
|
|
|
|
for (let i = 0; i < segments; i++) {
|
|
const base = i * 2;
|
|
indices.push(base, base + 1, base + 2);
|
|
indices.push(base + 2, base + 1, base + 3);
|
|
}
|
|
// 移除顶部盖面，避免与水面重叠产生伪影
|
|
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
|
|
geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));
|
|
|
|
return geometry;
|
|
}
|
|
|
|
draw(renderer, camera, waterTexture, causticsTexture) {
|
|
this._applyUniforms(waterTexture, causticsTexture);
|
|
renderer.render(this.mesh, camera);
|
|
}
|
|
|
|
_applyUniforms(waterTexture, causticsTexture) {
|
|
if (!this._material || !this._material.uniforms) {
|
|
return;
|
|
}
|
|
if (this._material.uniforms.water) {
|
|
this._material.uniforms.water.value = waterTexture;
|
|
}
|
|
if (this._material.uniforms.causticTex) {
|
|
this._material.uniforms.causticTex.value = causticsTexture;
|
|
}
|
|
}
|
|
}
|
|
|
|
function buildSquareRaycastTarget() {
|
|
const targetGeometry = new THREE.PlaneGeometry(2, 2);
|
|
const posAttr = targetGeometry.getAttribute('position');
|
|
for (let i = 0; i < posAttr.count; i++) {
|
|
const y = posAttr.getY(i);
|
|
posAttr.setZ(i, -y);
|
|
posAttr.setY(i, 0);
|
|
}
|
|
posAttr.needsUpdate = true;
|
|
const targetMesh = new THREE.Mesh(targetGeometry, WATERPOOL_PICK_MATERIAL);
|
|
targetMesh.visible = true;
|
|
targetMesh.updateMatrixWorld(true);
|
|
return targetMesh;
|
|
}
|
|
|
|
function buildCylinderRaycastTarget() {
|
|
const targetGeometry = new THREE.CircleGeometry(1, 64);
|
|
const posAttr = targetGeometry.getAttribute('position');
|
|
for (let i = 0; i < posAttr.count; i++) {
|
|
const y = posAttr.getY(i);
|
|
posAttr.setZ(i, -y);
|
|
posAttr.setY(i, 0);
|
|
}
|
|
posAttr.needsUpdate = true;
|
|
const targetMesh = new THREE.Mesh(targetGeometry, WATERPOOL_PICK_MATERIAL);
|
|
targetMesh.visible = true;
|
|
targetMesh.updateMatrixWorld(true);
|
|
return targetMesh;
|
|
}
|
|
|
|
export class WaterPool extends THREE.Group {
|
|
static register(pool) {
|
|
registerWaterPool(pool);
|
|
}
|
|
|
|
static unregister(pool) {
|
|
unregisterWaterPool(pool);
|
|
}
|
|
|
|
static registerRendering() {
|
|
registerWaterPoolRendering();
|
|
}
|
|
|
|
constructor(options = {}) {
|
|
super();
|
|
|
|
this.type = 'WaterPool';
|
|
this.isWaterPool = true;
|
|
|
|
this.name = options.name || 'WaterPool';
|
|
this.poolType = options.type === 'cylinder' ? 'cylinder' : 'square';
|
|
this.light = options.light || DEFAULT_LIGHT;
|
|
this.tiles = options.tiles || null;
|
|
this.sky = options.sky || null;
|
|
const wallMode = (options.wallMode === 'wall' || options.wallMode === 'volume' || options.wallMode === 'none')
|
|
? options.wallMode
|
|
: null;
|
|
this.hasWall = wallMode ? wallMode !== 'none' : options.wall === true;
|
|
this.wallMode = wallMode || (this.hasWall ? 'wall' : 'none');
|
|
this.wallOpacity = Number.isFinite(options.wallOpacity)
|
|
? THREE.MathUtils.clamp(options.wallOpacity, 0, 1)
|
|
: 1;
|
|
// 体积水模式下默认关闭屏幕空间折射，避免水面发黑
|
|
this.useSceneRefraction = options.useSceneRefraction !== undefined
|
|
? options.useSceneRefraction
|
|
: (this.wallMode === 'volume' ? 0 : 1);
|
|
// 顶部水面透视强度（0~1），用于控制看到水下物体的程度
|
|
this.surfaceTransmittance = Number.isFinite(options.surfaceTransmittance)
|
|
? THREE.MathUtils.clamp(options.surfaceTransmittance, 0, 1)
|
|
: 0.65;
|
|
// 波纹法线强度与折射偏移强度，降低边缘过强的明暗对比
|
|
this.normalStrength = Number.isFinite(options.normalStrength)
|
|
? THREE.MathUtils.clamp(options.normalStrength, 0, 1)
|
|
: 0.6;
|
|
// 屏幕空间折射强度
|
|
this.refractionStrength = Number.isFinite(options.refractionStrength)
|
|
? THREE.MathUtils.clamp(options.refractionStrength, 0, 1)
|
|
: 0.035;
|
|
// 体积水颜色，避免 wallMode 时出现“发光蓝”
|
|
this.volumeColor = (options.volumeColor instanceof THREE.Color)
|
|
? options.volumeColor
|
|
: new THREE.Color(options.volumeColor !== undefined ? options.volumeColor : 0x2c5965);
|
|
// 水面颜色默认与体积色一致，保证水面/水体颜色接近
|
|
this.surfaceColor = (options.surfaceColor instanceof THREE.Color)
|
|
? options.surfaceColor
|
|
: new THREE.Color(options.surfaceColor !== undefined ? options.surfaceColor : this.volumeColor.getHex());
|
|
// 是否有天空盒，避免 sky 为空导致水面发黑
|
|
this.useSky = !!this.sky;
|
|
this._halfWidth = 1;
|
|
this._halfDepth = 1;
|
|
this._poolHeight = 1;
|
|
this._radius = 1;
|
|
this._uniformHalfSize = new THREE.Vector2(1, 1);
|
|
this._tempMat4 = new THREE.Matrix4();
|
|
this._tempVec3 = new THREE.Vector3();
|
|
this._disturbance = null;
|
|
this._sceneTexture = null;
|
|
this._resolution = new THREE.Vector2();
|
|
this._waterPoolRegistered = false;
|
|
this._waterPoolRegistering = false;
|
|
this._waterPoolRemoved = false;
|
|
this._renderOrderBase = Number.isFinite(options.renderOrder) ? options.renderOrder : 1000;
|
|
this._lastSceneCaptureFrame = -1;
|
|
this._beforeRenderHandler = this._handleBeforeRender.bind(this);
|
|
this._addedHandler = () => {
|
|
this._waterPoolRemoved = false;
|
|
WaterPool.register(this);
|
|
if (waterPoolRenderingPending) {
|
|
WaterPool.registerRendering();
|
|
}
|
|
};
|
|
this._removedHandler = () => {
|
|
this._waterPoolRemoved = true;
|
|
WaterPool.unregister(this);
|
|
};
|
|
this.addEventListener('added', this._addedHandler);
|
|
this.addEventListener('removed', this._removedHandler);
|
|
|
|
const simulationSize = options.simulationSize || 256;
|
|
const causticsSize = options.causticsSize || 1024;
|
|
const waterSegments = options.waterSegments || 200;
|
|
const wallSegments = options.wallSegments || 64;
|
|
|
|
this.simulationSize = simulationSize;
|
|
this.causticsSize = causticsSize;
|
|
this.waterSegments = waterSegments;
|
|
this.wallSegments = wallSegments;
|
|
|
|
this._updateSize(options);
|
|
|
|
this.simulation = new WaterSimulation(simulationSize);
|
|
this.water = this.poolType === 'cylinder'
|
|
? new CylinderWater({ light: this.light, tiles: this.tiles, sky: this.sky, segments: waterSegments })
|
|
: new Water({ light: this.light, tiles: this.tiles, sky: this.sky, segments: waterSegments });
|
|
this.caustics = this.poolType === 'cylinder'
|
|
? new CylinderCaustics(this.water.geometry, this.light, causticsSize)
|
|
: new Caustics(this.water.geometry, this.light, causticsSize);
|
|
|
|
this.wall = null;
|
|
|
|
this.raycastTarget = this.poolType === 'cylinder'
|
|
? buildCylinderRaycastTarget()
|
|
: buildSquareRaycastTarget();
|
|
|
|
const tasks = [
|
|
ensureShaderChunks(),
|
|
this.simulation.loaded,
|
|
this.water.loaded,
|
|
this.caustics.loaded,
|
|
];
|
|
|
|
if (this.hasWall) {
|
|
const wallModeValue = this.wallMode === 'volume' ? 1 : 0;
|
|
const wallTask = createWallMaterial(
|
|
this.poolType,
|
|
this.light,
|
|
this.tiles,
|
|
this.wallOpacity,
|
|
wallModeValue,
|
|
this.volumeColor
|
|
).then((material) => {
|
|
this.wall = this.poolType === 'cylinder'
|
|
? new CylinderPoolWall(material, wallSegments)
|
|
: new SquarePoolWall(material);
|
|
});
|
|
tasks.push(wallTask);
|
|
}
|
|
|
|
this.loaded = Promise.all(tasks).then(() => {
|
|
this.waterMeshFront = this.water.meshFront || this.water.mesh;
|
|
this.waterMeshBack = this.water.meshBack || null;
|
|
this.waterMesh = this.waterMeshFront || this.water.mesh || null;
|
|
this.waterMeshes = this._getWaterMeshes();
|
|
if (this.wall) {
|
|
this.wallMesh = this.wall.mesh;
|
|
}
|
|
this._applyScale();
|
|
this._attachMeshesToGroup();
|
|
this._applyRenderOrder();
|
|
this._installRenderHooks();
|
|
return this;
|
|
});
|
|
|
|
}
|
|
|
|
_updateSize(options = {}) {
|
|
if (this.poolType === 'cylinder') {
|
|
const diameter = options.diameter || (options.radius ? options.radius * 2 : 2);
|
|
const height = options.height || 2;
|
|
const radius = options.radius || diameter / 2;
|
|
|
|
this.diameter = diameter;
|
|
this.radius = radius;
|
|
this.width = diameter;
|
|
this.depth = diameter;
|
|
this.height = height;
|
|
|
|
this._radius = radius;
|
|
this._halfWidth = radius;
|
|
this._halfDepth = radius;
|
|
this._poolHeight = height;
|
|
} else {
|
|
const width = options.width || options.size || 2;
|
|
const depth = options.depth || options.size || width;
|
|
const height = options.height || 2;
|
|
|
|
this.width = width;
|
|
this.depth = depth;
|
|
this.height = height;
|
|
|
|
this._halfWidth = width / 2;
|
|
this._halfDepth = depth / 2;
|
|
this._poolHeight = height;
|
|
}
|
|
}
|
|
|
|
_getWaterMeshes() {
|
|
if (this.waterMeshes && this.waterMeshes.length) {
|
|
return this.waterMeshes;
|
|
}
|
|
if (this.water && Array.isArray(this.water.meshes) && this.water.meshes.length) {
|
|
return this.water.meshes;
|
|
}
|
|
if (this.waterMesh) {
|
|
return [this.waterMesh];
|
|
}
|
|
if (this.water && this.water.mesh) {
|
|
return [this.water.mesh];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
_getWaterMaterials() {
|
|
if (!this.water) {
|
|
return [];
|
|
}
|
|
if (typeof this.water.getMaterials === 'function') {
|
|
return this.water.getMaterials();
|
|
}
|
|
if (Array.isArray(this.water.materials) && this.water.materials.length) {
|
|
return this.water.materials;
|
|
}
|
|
if (this.water.material) {
|
|
return [this.water.material];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
_attachMeshesToGroup() {
|
|
if (this.wallMesh && this.wallMesh.parent !== this) {
|
|
this.add(this.wallMesh);
|
|
}
|
|
const waterMeshes = this._getWaterMeshes();
|
|
waterMeshes.forEach((mesh) => {
|
|
if (mesh && mesh.parent !== this) {
|
|
this.add(mesh);
|
|
}
|
|
});
|
|
if (this.raycastTarget && this.raycastTarget.parent !== this) {
|
|
this.raycastTarget.ignore = false;
|
|
this.add(this.raycastTarget);
|
|
}
|
|
if (this.wallMesh) {
|
|
this.wallMesh.ignore = true;
|
|
}
|
|
waterMeshes.forEach((mesh) => {
|
|
if (mesh) {
|
|
mesh.ignore = true;
|
|
}
|
|
});
|
|
this._applyProxyToMeshes();
|
|
}
|
|
|
|
_applyProxyToMeshes() {
|
|
this.traverse((child) => {
|
|
if (child && child.isMesh) {
|
|
child.proxy = this;
|
|
//child.ignore = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
_applyRenderOrder() {
|
|
const baseOrder = Number.isFinite(this._renderOrderBase) ? this._renderOrderBase : 0;
|
|
if (this.wallMesh) {
|
|
this.wallMesh.renderOrder = baseOrder;
|
|
}
|
|
if (this.waterMeshFront) {
|
|
this.waterMeshFront.renderOrder = baseOrder + 1;
|
|
}
|
|
if (this.waterMeshBack) {
|
|
this.waterMeshBack.renderOrder = baseOrder + 2;
|
|
}
|
|
if (!this.waterMeshFront && this.waterMesh) {
|
|
this.waterMesh.renderOrder = baseOrder + 1;
|
|
}
|
|
}
|
|
|
|
_installRenderHooks() {
|
|
const waterMeshes = this._getWaterMeshes();
|
|
if (!waterMeshes.length) {
|
|
if (this.wallMesh) {
|
|
this.wallMesh.onBeforeRender = this._beforeRenderHandler;
|
|
}
|
|
return;
|
|
}
|
|
waterMeshes.forEach((mesh) => {
|
|
if (!mesh) {
|
|
return;
|
|
}
|
|
mesh.onBeforeRender = this._beforeRenderHandler;
|
|
});
|
|
if (this.wallMesh) {
|
|
this.wallMesh.onBeforeRender = this._beforeRenderHandler;
|
|
}
|
|
}
|
|
|
|
_handleBeforeRender(renderer) {
|
|
this._prepareSceneTexture(renderer);
|
|
}
|
|
|
|
_prepareSceneTexture(renderer) {
|
|
if (!renderer) {
|
|
return;
|
|
}
|
|
this._ensureSceneTexture(renderer);
|
|
captureWaterPoolSceneTexture(renderer);
|
|
this._applySceneTextureUniforms();
|
|
}
|
|
|
|
_applySceneTextureUniforms() {
|
|
const materials = this._getWaterMaterials();
|
|
if (!materials.length) {
|
|
if (this.wall && this.wall._material && this.wall._material.uniforms) {
|
|
if (this.wall._material.uniforms.sceneTexture) {
|
|
this.wall._material.uniforms.sceneTexture.value = this._sceneTexture;
|
|
}
|
|
if (this.wall._material.uniforms.resolution) {
|
|
this.wall._material.uniforms.resolution.value.copy(this._resolution);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
materials.forEach((material) => {
|
|
if (!material || !material.uniforms) {
|
|
return;
|
|
}
|
|
if (material.uniforms.sceneTexture) {
|
|
material.uniforms.sceneTexture.value = this._sceneTexture;
|
|
}
|
|
if (material.uniforms.resolution) {
|
|
material.uniforms.resolution.value.copy(this._resolution);
|
|
}
|
|
});
|
|
|
|
if (this.wall && this.wall._material && this.wall._material.uniforms) {
|
|
if (this.wall._material.uniforms.sceneTexture) {
|
|
this.wall._material.uniforms.sceneTexture.value = this._sceneTexture;
|
|
}
|
|
if (this.wall._material.uniforms.resolution) {
|
|
this.wall._material.uniforms.resolution.value.copy(this._resolution);
|
|
}
|
|
}
|
|
}
|
|
|
|
_applyWaterTextures(waterTexture, causticsTexture) {
|
|
const materials = this._getWaterMaterials();
|
|
materials.forEach((material) => {
|
|
if (!material || !material.uniforms) {
|
|
return;
|
|
}
|
|
if (material.uniforms.water) {
|
|
material.uniforms.water.value = waterTexture;
|
|
}
|
|
if (material.uniforms.causticTex) {
|
|
material.uniforms.causticTex.value = causticsTexture;
|
|
}
|
|
});
|
|
|
|
if (this.wall && this.wall._material && this.wall._material.uniforms) {
|
|
if (this.wall._material.uniforms.water) {
|
|
this.wall._material.uniforms.water.value = waterTexture;
|
|
}
|
|
if (this.wall._material.uniforms.causticTex) {
|
|
this.wall._material.uniforms.causticTex.value = causticsTexture;
|
|
}
|
|
}
|
|
}
|
|
|
|
_applyScale() {
|
|
const waterMeshes = this._getWaterMeshes();
|
|
if (waterMeshes.length) {
|
|
waterMeshes.forEach((mesh) => {
|
|
if (mesh) {
|
|
mesh.scale.set(1, 1, 1);
|
|
}
|
|
});
|
|
const geometry = waterMeshes[0].geometry;
|
|
if (geometry) {
|
|
// Update bounding sphere to match shader-transformed geometry.
|
|
// The vertex shader scales vertices by poolHalfSize, so the actual
|
|
// rendered extent exceeds the original PlaneGeometry bounding sphere.
|
|
const r = this.poolType === 'cylinder'
|
|
? this._radius
|
|
: Math.sqrt(this._halfWidth * this._halfWidth + this._halfDepth * this._halfDepth);
|
|
geometry.boundingSphere = new THREE.Sphere(
|
|
new THREE.Vector3(0, 0, 0), r
|
|
);
|
|
}
|
|
}
|
|
|
|
if (this.wallMesh) {
|
|
this.wallMesh.scale.set(1, 1, 1);
|
|
// 墙体在着色器中按尺寸缩放，需要手动更新包围体避免视锥裁剪错误
|
|
this._updateWallBounds();
|
|
}
|
|
|
|
if (this.raycastTarget) {
|
|
const scaleX = this.poolType === 'cylinder' ? this._radius : this._halfWidth;
|
|
const scaleZ = this.poolType === 'cylinder' ? this._radius : this._halfDepth;
|
|
this.raycastTarget.scale.set(scaleX, 1, scaleZ);
|
|
this.raycastTarget.updateMatrixWorld(true);
|
|
}
|
|
|
|
this._applyUniforms();
|
|
}
|
|
|
|
_updateWallBounds() {
|
|
if (!this.wallMesh || !this.wallMesh.geometry) {
|
|
return;
|
|
}
|
|
|
|
const minY = -this._poolHeight;
|
|
// 墙体顶部与水面齐平，避免超出水面
|
|
const maxY = 0;
|
|
const min = new THREE.Vector3(-this._halfWidth, minY, -this._halfDepth);
|
|
const max = new THREE.Vector3(this._halfWidth, maxY, this._halfDepth);
|
|
const box = new THREE.Box3(min, max);
|
|
const sphere = new THREE.Sphere();
|
|
box.getBoundingSphere(sphere);
|
|
|
|
this.wallMesh.geometry.boundingBox = box;
|
|
this.wallMesh.geometry.boundingSphere = sphere;
|
|
}
|
|
|
|
setSize(options = {}) {
|
|
this._updateSize(options);
|
|
this._applyScale();
|
|
}
|
|
|
|
_applyUniforms() {
|
|
this._uniformHalfSize.set(this._halfWidth, this._halfDepth);
|
|
this._updateMaterialUniforms(this._getWaterMaterials());
|
|
this._updateMaterialUniforms(this.wall ? this.wall._material : null);
|
|
this._updateMaterialUniforms(this._getCausticsMaterial());
|
|
}
|
|
|
|
_updateMaterialUniforms(material) {
|
|
if (Array.isArray(material)) {
|
|
material.forEach((item) => this._updateMaterialUniforms(item));
|
|
return;
|
|
}
|
|
if (!material || !material.uniforms) {
|
|
return;
|
|
}
|
|
if (material.uniforms.tiles) {
|
|
material.uniforms.tiles.value = this.tiles;
|
|
}
|
|
if (material.uniforms.useTiles) {
|
|
material.uniforms.useTiles.value = this.tiles ? 1 : 0;
|
|
}
|
|
if (material.uniforms.tilesColor) {
|
|
material.uniforms.tilesColor.value = this.volumeColor;
|
|
}
|
|
if (material.uniforms.wallMode) {
|
|
material.uniforms.wallMode.value = this.wallMode === 'volume' ? 1 : 0;
|
|
}
|
|
if (material.uniforms.wallOpacity) {
|
|
material.uniforms.wallOpacity.value = this.wallOpacity;
|
|
}
|
|
if (material.uniforms.volumeColor) {
|
|
material.uniforms.volumeColor.value = this.volumeColor;
|
|
}
|
|
if (material.uniforms.surfaceColor) {
|
|
material.uniforms.surfaceColor.value = this.surfaceColor;
|
|
}
|
|
if (material.uniforms.useSky) {
|
|
material.uniforms.useSky.value = this.useSky ? 1 : 0;
|
|
}
|
|
if (material.uniforms.useSceneRefraction) {
|
|
material.uniforms.useSceneRefraction.value = this.useSceneRefraction ? 1 : 0;
|
|
}
|
|
if (material.uniforms.hasWall) {
|
|
material.uniforms.hasWall.value = this.hasWall ? 1 : 0;
|
|
}
|
|
if (material.uniforms.surfaceTransmittance) {
|
|
material.uniforms.surfaceTransmittance.value = this.surfaceTransmittance;
|
|
}
|
|
if (material.uniforms.normalStrength) {
|
|
material.uniforms.normalStrength.value = this.normalStrength;
|
|
}
|
|
if (material.uniforms.refractionStrength) {
|
|
material.uniforms.refractionStrength.value = this.refractionStrength;
|
|
}
|
|
if (material.uniforms.poolHalfSize) {
|
|
material.uniforms.poolHalfSize.value = this._uniformHalfSize;
|
|
}
|
|
if (material.uniforms.poolHeight) {
|
|
material.uniforms.poolHeight.value = this._poolHeight;
|
|
}
|
|
if (material.uniforms.poolRadius) {
|
|
material.uniforms.poolRadius.value = this._radius;
|
|
}
|
|
}
|
|
|
|
_getCausticsMaterial() {
|
|
if (!this.caustics || !this.caustics._causticMesh) {
|
|
return null;
|
|
}
|
|
return this.caustics._causticMesh.material || null;
|
|
}
|
|
|
|
setPosition(x, y, z) {
|
|
this.position.set(x, y, z);
|
|
const waterMeshes = this._getWaterMeshes();
|
|
waterMeshes.forEach((mesh) => {
|
|
if (mesh) {
|
|
mesh.position.set(0, 0, 0);
|
|
}
|
|
});
|
|
if (this.wallMesh) {
|
|
this.wallMesh.position.set(0, 0, 0);
|
|
}
|
|
if (this.raycastTarget) {
|
|
this.raycastTarget.position.set(0, 0, 0);
|
|
this.raycastTarget.updateMatrixWorld(true);
|
|
}
|
|
this.updateMatrixWorld(true);
|
|
}
|
|
|
|
getDropCoordsFromWorld(point, out = new THREE.Vector2()) {
|
|
if (!this.raycastTarget) {
|
|
return out.set(0, 0);
|
|
}
|
|
this.raycastTarget.updateMatrixWorld(true);
|
|
const local = this._tempVec3.copy(point)
|
|
.applyMatrix4(this._tempMat4.copy(this.raycastTarget.matrixWorld).invert());
|
|
return out.set(local.x, local.z);
|
|
}
|
|
|
|
addDrop(renderer, x, y, radius, strength) {
|
|
this.simulation.addDrop(renderer, x, y, radius, strength);
|
|
}
|
|
|
|
startDisturbance(options = {}) {
|
|
const mode = options.mode === 'uniform' ? 'uniform' : 'drag';
|
|
const travelRadius = Number.isFinite(options.travelRadius) ? options.travelRadius : 0.85;
|
|
const driftSpeed = Number.isFinite(options.driftSpeed) ? options.driftSpeed : 0.015;
|
|
const jitter = Number.isFinite(options.jitter) ? options.jitter : 0.01;
|
|
const spread = Number.isFinite(options.spread) ? options.spread : 0.08;
|
|
const angle = Math.random() * Math.PI * 2;
|
|
|
|
this._disturbance = {
|
|
mode,
|
|
dropsPerStep: options.dropsPerStep || 1,
|
|
radiusMin: options.radiusMin || 0.01,
|
|
radiusMax: options.radiusMax || 0.05,
|
|
strengthMin: options.strengthMin || 0.005,
|
|
strengthMax: options.strengthMax || 0.02,
|
|
// “拖动式”随机扰动的运动参数，避免波纹过于平均
|
|
travelRadius,
|
|
driftSpeed,
|
|
jitter,
|
|
spread,
|
|
x: Math.cos(angle) * travelRadius * 0.5,
|
|
y: Math.sin(angle) * travelRadius * 0.5,
|
|
vx: Math.cos(angle) * driftSpeed,
|
|
vy: Math.sin(angle) * driftSpeed,
|
|
};
|
|
}
|
|
|
|
stopDisturbance() {
|
|
this._disturbance = null;
|
|
}
|
|
|
|
step(renderer) {
|
|
if (this._disturbance) {
|
|
const d = this._disturbance;
|
|
if (d.mode === 'uniform') {
|
|
for (let i = 0; i < d.dropsPerStep; i++) {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const r = Math.random() * 0.8;
|
|
const radius = d.radiusMin + Math.random() * (d.radiusMax - d.radiusMin);
|
|
const strength = (Math.random() > 0.5 ? 1 : -1)
|
|
* (d.strengthMin + Math.random() * (d.strengthMax - d.strengthMin));
|
|
this.simulation.addDrop(
|
|
renderer,
|
|
Math.cos(angle) * r, Math.sin(angle) * r,
|
|
radius, strength
|
|
);
|
|
}
|
|
} else {
|
|
// 随机游走 + 抖动，模拟鼠标来回滑动的水波
|
|
d.vx += (Math.random() - 0.5) * d.jitter;
|
|
d.vy += (Math.random() - 0.5) * d.jitter;
|
|
|
|
const speed = Math.hypot(d.vx, d.vy);
|
|
if (speed > d.driftSpeed) {
|
|
const scale = d.driftSpeed / speed;
|
|
d.vx *= scale;
|
|
d.vy *= scale;
|
|
}
|
|
|
|
d.x += d.vx;
|
|
d.y += d.vy;
|
|
|
|
const dist2 = d.x * d.x + d.y * d.y;
|
|
const limit = d.travelRadius;
|
|
if (dist2 > limit * limit) {
|
|
const len = Math.sqrt(dist2) || 1;
|
|
d.x = (d.x / len) * limit;
|
|
d.y = (d.y / len) * limit;
|
|
d.vx = -d.vx;
|
|
d.vy = -d.vy;
|
|
}
|
|
|
|
for (let i = 0; i < d.dropsPerStep; i++) {
|
|
const radius = d.radiusMin + Math.random() * (d.radiusMax - d.radiusMin);
|
|
const strength = (Math.random() > 0.5 ? 1 : -1)
|
|
* (d.strengthMin + Math.random() * (d.strengthMax - d.strengthMin));
|
|
const ox = (Math.random() - 0.5) * d.spread;
|
|
const oy = (Math.random() - 0.5) * d.spread;
|
|
this.simulation.addDrop(renderer, d.x + ox, d.y + oy, radius, strength);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.simulation.stepSimulation(renderer);
|
|
this.simulation.updateNormals(renderer);
|
|
this.caustics.update(renderer, this.simulation.texture.texture);
|
|
|
|
this._applyWaterTextures(this.simulation.texture.texture, this.caustics.texture.texture);
|
|
}
|
|
|
|
_ensureSceneTexture(renderer) {
|
|
const effect = App?.viewer?.effect;
|
|
const composer = effect?.composer;
|
|
const outputBuffer = effect?.enabled ? composer?.outputBuffer : null;
|
|
|
|
if (outputBuffer && outputBuffer.texture) {
|
|
this._sceneTexture = outputBuffer.texture;
|
|
this._resolution.set(outputBuffer.width, outputBuffer.height);
|
|
return;
|
|
}
|
|
|
|
ensureWaterPoolSceneTexture(renderer);
|
|
this._sceneTexture = waterPoolSceneState.texture;
|
|
if (this._sceneTexture) {
|
|
this._resolution.copy(waterPoolSceneState.resolution);
|
|
}
|
|
}
|
|
|
|
render(renderer, camera) {
|
|
const waterTexture = this.simulation.texture.texture;
|
|
const causticsTexture = this.caustics.texture.texture;
|
|
|
|
if (!THREE.ShaderChunk['utils'] || !THREE.ShaderChunk['cylinder_utils']) {
|
|
return;
|
|
}
|
|
|
|
this._applyWaterTextures(waterTexture, causticsTexture);
|
|
this._prepareSceneTexture(renderer);
|
|
|
|
if (this.parent) {
|
|
return;
|
|
}
|
|
|
|
// 先渲染墙体，让帧缓冲包含场景+墙体
|
|
if (this.wall) {
|
|
this.wall.draw(renderer, camera, waterTexture, causticsTexture);
|
|
}
|
|
|
|
// 最后渲染水面
|
|
this.water.draw(renderer, camera, waterTexture, causticsTexture);
|
|
}
|
|
|
|
clone(recursive = true) {
|
|
const self = super.clone(false);
|
|
self.matrix = self.matrix.toArray();
|
|
self.up = self.up.toArray();
|
|
|
|
const options = {
|
|
name: this.name,
|
|
type: this.poolType === 'cylinder' ? 'cylinder' : 'square',
|
|
light: Array.isArray(this.light) ? [...this.light] : DEFAULT_LIGHT,
|
|
tiles: this.tiles || null,
|
|
sky: this.sky || null,
|
|
wallMode: this.wallMode,
|
|
wall: !!this.hasWall,
|
|
wallOpacity: this.wallOpacity,
|
|
useSceneRefraction: this.useSceneRefraction ? 1 : 0,
|
|
surfaceTransmittance: this.surfaceTransmittance,
|
|
normalStrength: this.normalStrength,
|
|
refractionStrength: this.refractionStrength,
|
|
volumeColor: this.volumeColor ? this.volumeColor.clone() : new THREE.Color(0x2c5965),
|
|
surfaceColor: this.surfaceColor ? this.surfaceColor.clone() : new THREE.Color(0x4a8aa0),
|
|
simulationSize: this.simulationSize,
|
|
causticsSize: this.causticsSize,
|
|
waterSegments: this.waterSegments,
|
|
wallSegments: this.wallSegments,
|
|
diameter: this.diameter,
|
|
width: this.width,
|
|
depth: this.depth,
|
|
height: this.height,
|
|
renderOrder: this._renderOrderBase,
|
|
};
|
|
|
|
const cloned = new WaterPool(options);
|
|
const _uuid = cloned.uuid;
|
|
Loader.objectLoader.copyAttrByData(cloned, self);
|
|
cloned.uuid = _uuid;
|
|
|
|
if (this._disturbance) {
|
|
const disturbance = {
|
|
mode: this._disturbance.mode,
|
|
dropsPerStep: this._disturbance.dropsPerStep,
|
|
radiusMin: this._disturbance.radiusMin,
|
|
radiusMax: this._disturbance.radiusMax,
|
|
strengthMin: this._disturbance.strengthMin,
|
|
strengthMax: this._disturbance.strengthMax,
|
|
travelRadius: this._disturbance.travelRadius,
|
|
driftSpeed: this._disturbance.driftSpeed,
|
|
jitter: this._disturbance.jitter,
|
|
spread: this._disturbance.spread,
|
|
};
|
|
cloned._disturbance = { ...disturbance };
|
|
if (cloned.loaded && typeof cloned.loaded.then === 'function') {
|
|
cloned.loaded.then(() => {
|
|
cloned.startDisturbance(disturbance);
|
|
});
|
|
} else {
|
|
cloned.startDisturbance(disturbance);
|
|
}
|
|
}
|
|
|
|
return cloned;
|
|
}
|
|
|
|
toJSON(meta) {
|
|
const internalChildren = this.children.slice();
|
|
internalChildren.forEach((child) => this.remove(child));
|
|
|
|
const data = super.toJSON(meta);
|
|
const options = {
|
|
name: this.name,
|
|
type: this.poolType === 'cylinder' ? 'cylinder' : 'square',
|
|
light: Array.isArray(this.light) ? [...this.light] : DEFAULT_LIGHT,
|
|
tiles: serializeTexture(this.tiles),
|
|
wallMode: this.wallMode,
|
|
wall: !!this.hasWall,
|
|
wallOpacity: this.wallOpacity,
|
|
useSceneRefraction: this.useSceneRefraction ? 1 : 0,
|
|
surfaceTransmittance: this.surfaceTransmittance,
|
|
normalStrength: this.normalStrength,
|
|
refractionStrength: this.refractionStrength,
|
|
volumeColor: this.volumeColor ? `#${this.volumeColor.getHexString()}` : '#2c5965',
|
|
surfaceColor: this.surfaceColor ? `#${this.surfaceColor.getHexString()}` : '#4a8aa0',
|
|
simulationSize: this.simulationSize,
|
|
causticsSize: this.causticsSize,
|
|
waterSegments: this.waterSegments,
|
|
wallSegments: this.wallSegments,
|
|
diameter: this.diameter,
|
|
width: this.width,
|
|
depth: this.depth,
|
|
height: this.height,
|
|
disturbance: this._disturbance
|
|
? {
|
|
enabled: true,
|
|
mode: this._disturbance.mode,
|
|
dropsPerStep: this._disturbance.dropsPerStep,
|
|
radiusMin: this._disturbance.radiusMin,
|
|
radiusMax: this._disturbance.radiusMax,
|
|
strengthMin: this._disturbance.strengthMin,
|
|
strengthMax: this._disturbance.strengthMax,
|
|
travelRadius: this._disturbance.travelRadius,
|
|
driftSpeed: this._disturbance.driftSpeed,
|
|
jitter: this._disturbance.jitter,
|
|
spread: this._disturbance.spread,
|
|
}
|
|
: { enabled: false },
|
|
};
|
|
|
|
data.object.type = this.type;
|
|
data.object.options = options;
|
|
data.object.children = [];
|
|
|
|
internalChildren.forEach((child) => this.add(child));
|
|
|
|
return data;
|
|
}
|
|
|
|
static fromJSON(json = {}) {
|
|
const options = json.options ? { ...json.options } : {};
|
|
|
|
if (options.tiles && typeof options.tiles === 'object') {
|
|
options.tiles = restoreTexture(options.tiles);
|
|
}
|
|
const sceneEnv = App?.viewer?.scene?.environment || null;
|
|
if (sceneEnv) {
|
|
options.sky = sceneEnv;
|
|
}
|
|
|
|
const pool = new WaterPool(options);
|
|
|
|
if (pool.loaded && typeof pool.loaded.then === 'function') {
|
|
pool.loaded.then(() => {
|
|
pool.startDisturbance(options.disturbance);
|
|
});
|
|
} else {
|
|
pool.startDisturbance(options.disturbance);
|
|
}
|
|
|
|
return pool;
|
|
}
|
|
}
|