// 来源:https://threejs.org/examples/?q=cloud#webgl_volume_cloud import { BackSide, BoxGeometry, Color, Data3DTexture, GLSL3, LinearFilter, Mesh, RawShaderMaterial, RedFormat, Vector3, } from "three"; import { ImprovedNoise } from "three/examples/jsm/math/ImprovedNoise.js"; const vertexShader = ` in vec3 position; uniform mat4 modelMatrix; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform vec3 cameraPos; out vec3 vOrigin; out vec3 vDirection; void main() { vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz; vDirection = position - vOrigin; gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = ` precision highp float; precision highp sampler3D; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; in vec3 vOrigin; in vec3 vDirection; out vec4 color; uniform vec3 base; uniform sampler3D map; uniform float threshold; uniform float range; uniform float opacity; uniform float steps; uniform float frame; uint wang_hash(uint seed) { seed = (seed ^ 61u) ^ (seed >> 16u); seed *= 9u; seed = seed ^ (seed >> 4u); seed *= 0x27d4eb2du; seed = seed ^ (seed >> 15u); return seed; } float randomFloat(inout uint seed) { return float(wang_hash(seed)) / 4294967296.; } vec2 hitBox( vec3 orig, vec3 dir ) { const vec3 box_min = vec3( - 0.5 ); const vec3 box_max = vec3( 0.5 ); vec3 inv_dir = 1.0 / dir; vec3 tmin_tmp = ( box_min - orig ) * inv_dir; vec3 tmax_tmp = ( box_max - orig ) * inv_dir; vec3 tmin = min( tmin_tmp, tmax_tmp ); vec3 tmax = max( tmin_tmp, tmax_tmp ); float t0 = max( tmin.x, max( tmin.y, tmin.z ) ); float t1 = min( tmax.x, min( tmax.y, tmax.z ) ); return vec2( t0, t1 ); } float sample1( vec3 p ) { return texture( map, p ).r; } float shading( vec3 coord ) { float step = 0.01; return sample1( coord + vec3( - step ) ) - sample1( coord + vec3( step ) ); } vec4 linearToSRGB( in vec4 value ) { return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a ); } void main(){ vec3 rayDir = normalize( vDirection ); vec2 bounds = hitBox( vOrigin, rayDir ); if ( bounds.x > bounds.y ) discard; bounds.x = max( bounds.x, 0.0 ); float stepSize = ( bounds.y - bounds.x ) / steps; uint seed = uint( gl_FragCoord.x ) * uint( 1973 ) + uint( gl_FragCoord.y ) * uint( 9277 ) + uint( frame ) * uint( 26699 ); vec3 size = vec3( textureSize( map, 0 ) ); float randNum = randomFloat( seed ) * 2.0 - 1.0; vec3 p = vOrigin + bounds.x * rayDir; p += rayDir * randNum * ( 1.0 / size ); vec4 ac = vec4( base, 0.0 ); for ( float i = 0.0; i < steps; i += 1.0 ) { float d = sample1( p + 0.5 ); d = smoothstep( threshold - range, threshold + range, d ) * opacity; float col = shading( p + 0.5 ) * 3.0 + ( ( p.x + p.y ) * 0.25 ) + 0.2; ac.rgb += ( 1.0 - ac.a ) * d * col; ac.a += ( 1.0 - ac.a ) * d; if ( ac.a >= 0.95 ) break; p += rayDir * stepSize; } color = linearToSRGB( ac ); if ( color.a == 0.0 ) discard; } `; // 生成云纹理 function createCloudTexture(size, noiseScale) { // 体素密度 const data = new Uint8Array(size * size * size); const perlin = new ImprovedNoise(); const vector = new Vector3(); let i = 0; for (let z = 0; z < size; z++) { for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { const d = 1.0 - vector.set(x, y, z).subScalar(size / 2).divideScalar(size).length(); data[i] = (128 + 128 * perlin.noise(x * noiseScale / 1.5, y * noiseScale, z * noiseScale / 1.5)) * d * d; i++; } } } // 上传纹理 const texture = new Data3DTexture(data, size, size, size); texture.format = RedFormat; texture.minFilter = LinearFilter; texture.magFilter = LinearFilter; texture.unpackAlignment = 1; texture.needsUpdate = true; return texture; } // 创建体积云 export function createVolumeCloud(options = {}) { // 默认参数 const { size = 96, noiseScale = 0.05, color = 0x798aa0, threshold = 0.25, opacity = 0.25, range = 0.1, steps = 80, scale = [3, 1.5, 2.2], } = options; // 构造材质 const texture = createCloudTexture(size, noiseScale); const material = new RawShaderMaterial({ glslVersion: GLSL3, uniforms: { base: { value: new Color(color) }, map: { value: texture }, cameraPos: { value: new Vector3() }, threshold: { value: threshold }, opacity: { value: opacity }, range: { value: range }, steps: { value: steps }, frame: { value: 0 }, }, vertexShader, fragmentShader, side: BackSide, transparent: true, depthWrite: true, }); // 返回网格 const cloud = new Mesh(new BoxGeometry(1, 1, 1), material); cloud.name = "volumeCloud"; cloud.scale.set(...scale); cloud.frustumCulled = false; return cloud; } // 更新体积云 export function updateVolumeCloud(cloud, camera, rotationSpeed = 0) { if (!cloud?.material?.uniforms || !camera) return; if (!cloud.material.visible) return; // 同步相机 const uniforms = cloud.material.uniforms; camera.getWorldPosition(uniforms.cameraPos.value); uniforms.frame.value += 1; // 可选旋转 if (rotationSpeed !== 0) cloud.rotation.y += rotationSpeed / 60; } // 释放体积云 export function disposeVolumeCloud(cloud) { if (!cloud) return; // 释放显存 cloud.geometry?.dispose(); cloud.material?.uniforms?.map?.value?.dispose(); cloud.material?.dispose(); }