Question

所以我花了很多时间编写自己的简单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

设置我需要的阴影变化，但更新＆＃34; worldPosition＆＃34;像我一样应该解决这个问题，不是吗？

Answer 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
}

作为深度材料的基础，然后将其分配给对象：

extrudedMesh.customDepthMaterial = depthMaterial;

像魅力一样工作。然后，您可以像更换任何其他材料一样更新深度材料的制服。

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

1 个答案: