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

因此，我花了相當多的時間編寫自己的簡單Phong着色器，然後才發現必須有一些方法來修改現有的three.js Phong着色器以滿足我的需要。我終於實現了這個樣子修改了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 
}

現在，我不得不進入海防頂點和片段着色器，我所經歷的着色器戳和修改，我認爲會達到什麼樣的我一直在尋找的部分：

//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

所以我想，一定有別的地方需要另一種簡單的更新海防頂點着色器。問題是，我找不到它。它看起來對我來說是這樣的：

#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

設置陰影varyings，我需要，但在更新「worldPosition」像我一樣要解決這個問題，不是嗎？

來源

2014-10-01 Brenden

這是一個改變phongshader的答案。它可能對你有用。 http://stackoverflow.com/questions/13678523/three-js-material-texture-and-color – 2pha 2014-10-01 03:56:00

嗯。也許我需要修改uv/normal？我不是100％肯定這是有道理的。 – Brenden 2014-10-02 02:28:02

因此，修改vShadowCoord似乎意味着所有扭曲的幾何*正確接收*陰影。在源的不同部分稍微戳一下後，看起來我可能需要查看「THREE.ShadowMapPlugin」以正確地獲取幾何圖形*投射*陰影。具體在「var depthShader = THREE.ShaderLib [」depthRGBA「];」。這看起來有希望。 – Brenden 2014-10-02 04:10:52

好的，所以我找到了用於陰影投射的相關着色器。他們確實駐留在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;

工作就像一個魅力。然後，您可以像更換任何其他材料一樣更新深度材質的制服。

來源

2014-10-02 16:58:02 Brenden

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

回答

相關問題