使用VertexShader更改幾何形狀時，陰影不會更新

Question

我正在使用自定義着色器來使平面彎曲。 我的自定義着色器擴展了Lambert着色器，因此它支持燈光和陰影。 一切都按預期工作，但是當vertexShader更改平面的幾何形狀時，陰影不會更新。 我有什么需要標記的幾何在vertexShader中已更新並且陰影需要更改嗎？

[這里是問題的屏幕截圖。 平面是用vertexShader彎曲的，但是陰影不會更新] [1] [1]： http : //i.stack.imgur.com/6kfCF.png

這是演示/代碼： http ://dev.cartelle.nl/curve/如果拖動“ bendAngle”滑塊，則可以看到陰影不會更新。

我認為一種解決方法是獲得曲面的邊界框。 然后使用這些點創建一個新的網格/框並使用該對象投射陰影。 但是后來我不確定如何獲取新的彎曲幾何體的坐標。 在應用了着色器之后，當我檢查geometry.boundingBox時，它每次也只會給我原始坐標。

謝謝約翰尼

Answer 1

如果要修改頂點着色器中的幾何位置，並且要投射陰影，則需要指定自定義深度材質，以便陰影可以響應修改后的位置。

在自定義深度材質的頂點着色器中，以與在材質的頂點着色器中修改頂點的方式相同的方式修改頂點位置。

在此three.js示例中可以看到一個自定義深度材料的示例 （盡管在該示例中頂點着色器中未修改頂點；但在CPU上已對其進行了修改）。

在您的情況下，您可以使用以下模式為自定義深度材質創建一個頂點着色器：

<script type="x-shader/x-vertex" id="vertexShaderDepth">

  uniform float bendAngle;
  uniform vec2 bounds;
  uniform float bendOffset;
  uniform float bendAxisAngle;

    vec3 bendIt( vec3 ip, float ba, vec2 b, float o, float a ) {
        // your code here
        return ip;
    }

    void main() {

        vec3 p = bendIt( position, bendAngle, bounds, bendOffset, bendAxisAngle );

        vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );

        gl_Position = projectionMatrix * mvPosition;

    }

</script>

和片段着色器是這樣的：

<script type="x-shader/x-fragment" id="fragmentShaderDepth">

    vec4 pack_depth( const in float depth ) {

        const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
        const vec4 bit_mask  = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
        vec4 res = fract( depth * bit_shift );
        res -= res.xxyz * bit_mask;
        return res;

    }

    void main() {

        gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );

    }
</script>

然后在您的JavaScript中，指定自定義深度材料：

uniforms = {};
uniforms.bendAngle = { type: "f", value: properties.bendAngle };
uniforms.bendOffset = { type: "f", value: properties.offset };
uniforms.bendAxisAngle = { type: "f", value: properties.bendAxisAngle };
uniforms.bounds = { type: "v2", value: new THREE.Vector2( - 8, 16 ) };

var vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;

myObject.customDepthMaterial = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
} );

three.js r.74