ThreeJS FBO 粒子光照和阴影

Question

更新：我决定通过这个链接实现一个简单的照明解决方案，http://blog.edankwan.com/post/three-js-advanced-tips-shadow，由 ScieCode 建议。这是链接页面的第一部分。结果可以在这篇文章底部的图片中看到。

链接页面确实包含有关如何在 ThreeJS 中使用自定义着色器材质投射阴影的信息，但我觉得它更适合网格和基本粒子系统。我正在使用 FBO 粒子系统。

我有一个使用 FBO 的粒子系统。它是使用 ThreeJS 中的着色器材质构建的。这些粒子变成了高耸的积云。如何将光照和阴影应用到这些粒子，就好像它们是一个实体网格一样？

以下是将粒子渲染到屏幕的最后一组着色器：

说实话，我什至不完全理解顶点着色器是如何输出位置的。我找到了这个示例代码并适合我正在做的事情。我了解其中的大部分内容，但顶点着色器的尾部对我来说是模糊的。

顶点：

precision highp float;

attribute vec2 id;
attribute vec3 p_color;
attribute float p_size;

uniform vec2 dimensions;
uniform float size;

uniform sampler2D infoTexture;
uniform sampler2D originalTexture;
uniform sampler2D positionTexture;
uniform sampler2D previousPositionTexture;
uniform sampler2D velocityTexture;

varying vec2 vUv;
varying float life;
varying vec2 vSpeed;
varying float vSize;

float modI(float a,float b) {
    float m=a-floor((a+0.5)/b)*b;
    return floor(m+0.5);
}

const float PI = 3.14159265359;

void main() {

    float size_modifier = 1. * p_size;

    float ptr = id.x;
    float u = modI( ptr, dimensions.x ) / dimensions.x;
    float v = ( ptr / dimensions.x ) / dimensions.y;
    vec2 puv = vec2( u, v );

    vec4 velocity = texture2D( velocityTexture, puv );
    // vSpeed = .1 * ( projectionMatrix * modelViewMatrix * vec4( velocity.xyz, 1. ) ).xy;

    vec4 i = texture2D( infoTexture, puv );

    vec4 prev_pos = texture2D( previousPositionTexture, puv );
    vec4 origin_pos = texture2D( originalTexture, puv );

    vec4 c = texture2D( positionTexture, puv );
    vec3 p = c.xyz;
    vUv = uv;
    float life_time = 1000.;
    life = 1. - ( c.a / life_time );
    // if( c.a == 0. ) life = 0.;

    if( velocity.a != 1. ){

        size_modifier = .0;

    }

    vec4 modified = modelViewMatrix * vec4( p, 1. );
    // float a = -atan( vSpeed.y, vSpeed.x ) - .5 * PI;
    // float l = clamp( length( vSpeed ), .5, 4. );
    // mat2 rot = mat2( cos( a ), -sin( a ), sin( a ), cos( a ) );

    // modified.xyz += size * i.x * 10. * vec3( rot * position.xy, 0. );
    // modified.xyz += size * size_modifier * i.x * 10. * vec3( rot * position.xy, 0. );
    modified.xyz += size * size_modifier * i.x * 10. * vec3( position.xy, 0. );
    gl_Position = projectionMatrix * modified;

}

片段：

precision highp float;

varying float vSize;
varying vec2 vUv;
varying float life;
varying vec2 vSpeed;
varying vec3 p_color_f;

uniform float useTriangles;

const vec2 barycenter = vec2( .5, .6666 );

void main() {

    // render circles
    float d = smoothstep( .5, .55, 1. - 2. * length( vUv - barycenter ) );
    if( d <= 0. ) discard;

    vec3 frag_c = vec3( p_color_f );

    gl_FragColor = vec4( frag_c, 1.);

}

我如何将着色器块添加到自定义着色器：

particleMaterial = new THREE.ShaderMaterial( {
    uniforms: THREE.UniformsUtils.merge([
        THREE.UniformsLib.shadowmap,
        THREE.UniformsLib.lights,
        THREE.UniformsLib.ambient,
        {
            size: { type: 'f', value: 1 },
            useTriangles: { type: 'f', value: 0 },
            originalTexture: { type: 't', value: texture },
            infoTexture: { type: 't', value: texture2 },
            positionTexture: { type: 't', value: positionSim.fbos[ 0 ] },
            previousPositionTexture: { type: 't', value: positionSim.fbos[ 1 ] },
            velocityTexture: { type: 't', value: velocitySim.fbos[ 1 ] },
            dimensions: { type: 'v2', value: dimensions },
            cameraPosition: { type: 'v3', value: new THREE.Vector3() },
            prevModelViewMatrix: { type: 'm4', value: new THREE.Matrix4() },
            prevProjectionMatrix: { type: 'm4', value: new THREE.Matrix4() }
        } ]),
    vertexShader: document.getElementById( 'particle-vs' ).textContent,
    fragmentShader: document.getElementById( 'particle-fs' ).textContent,
    transparent: false,
    side: THREE.DoubleSide,
    depthTest: true,
    depthWrite: true,
    lights: true
    // blending: THREE.NoBlending
} );

基本光照效果：

即使这样也增加了风暴的深度。

Answer 1

不清楚您希望阴影或照明如何表现。如果您能说得更清楚，我很乐意编辑此回复以最好地回答您的问题。

话虽如此，在您的情况下，有两种资源可能是可行的：

• Edan Kwan 的 blog post 关于自定义着色器/粒子的阴影。它有点过时了，但其中大部分仍然存在，应该能让您对您正在尝试解决的问题有一个很好的了解。
• 自从 Edan 发布帖子以来，一些 GLSL ShaderChunk 发生了变化，我建议您看看我所做的 discourse post，当时我正在尝试一些听起来与您所要求的内容相似的东西。

为了模拟正确的光照，您需要导入light_pars ShaderChunks 及其所有依赖项。这样，您可以访问每个粒子顶点位置的光强度。您可以以任何您认为合适的方式使用该信息。