修改了 Phong 着色器，阴影不再正常工作答案

【问题标题】：Modified the Phong shader, shadows no longer working properly修改了 Phong 着色器，阴影不再正常工作
【发布时间】：2014-10-03 00:58:02
【问题描述】：

所以我花了很多时间编写自己的简单 Phong 着色器，然后才发现必须有一些方法来修改现有的 three.js Phong 着色器以满足我的需要。我最终做的看起来像这样

var phongShader = THREE.ShaderLib.phong;
var phongMatUniforms = THREE.UniformsUtils.clone(phongShader.uniforms);
var uniforms = phongMatUniforms;
uniforms.currentTime = {
    type : "f",
    value : 1.0
};
uniforms.hourlyValues = {
    type : "fv1",
    value : hourlyValuesArray
}

现在我可以访问 Phong 顶点和片段着色器，我浏览了着色器并修改了我认为可以实现我正在寻找的部分：

//original Three.js phong shader line
mvPosition = modelViewMatrix * vec4( position, 1.0 );
//my edited / updated line
mvPosition = modelViewMatrix * vec4( position.x, position.y, position.z + interpolatedValue, 1.0 );

太棒了！一切都像我想的那样工作。然后我决定尝试用聚光灯添加阴影。好消息是阴影有效，但它们不适用于着色器修改的几何体。这是一个截图示例：

http://imgur.com/8Sdxq60

所以我认为 Phong 顶点着色器中肯定还有其他地方需要另一个简单的更新。问题是，我找不到。在我看来是这样的：

#if ! defined( USE_MORPHTARGETS ) && ! defined( USE_SKINNING )

    //original shader code
    vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
    //updated to account for distorted geometry
    worldPosition = modelMatrix * vec4( position.x, position.y, position.z + interpolatedValue, 1.0 );
#endif

应该做的伎俩，但它所做的只是生成上面的屏幕截图。

对于我应该修改着色器中的什么/位置以考虑到我扭曲的几何图形，我有点不知所措。最后看起来像这样：

#ifdef USE_SHADOWMAP

    for( int i = 0; i < MAX_SHADOWS; i ++ ) {

        vShadowCoord[ i ] = shadowMatrix[ i ] * worldPosition;

    }

#endif

设置我需要的阴影变化，但像我一样更新“worldPosition”应该可以解决这个问题，不是吗？

【问题讨论】：

这是一个改变 phongshader 的答案。它可能对你有用。 stackoverflow.com/questions/13678523/…
嗯。也许我需要修改紫外线/正常？我不是 100% 确定这是有道理的。
所以修改 vShadowCoord 似乎意味着所有扭曲的几何体接收阴影正确。在稍微戳了一下源的不同部分之后，看起来我可能需要查看“THREE.ShadowMapPlugin”以使几何体正确投射阴影。特别是在“var depthShader = THREE.ShaderLib[“depthRGBA”];”。这看起来很有希望。

标签： three.js

【解决方案1】：

好的，所以我找到了阴影投射的相关着色器。它们确实驻留在 THREE.ShadowMapPlugin 中。具体有一行：

if ( object.customDepthMaterial ) {

    material = object.customDepthMaterial;

}

因此您将材质分配给 objects.customDepthMaterial。

我用过：

var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
depthUniforms.currentTime = {
    type : "f",
    value : 1.0
};
depthUniforms.hourlyValues = {
    type : "fv1",
    value : hourlyValuesArray
}

作为depthmaterial的基础，然后将其分配给对象：

extrudedMesh.customDepthMaterial = depthMaterial;

工作就像一个魅力。然后，您可以像更新任何其他材质一样为深度材质更新制服。

【讨论】：