如何爲Threejs着色器組裝適當的制服？

我想弄清楚如何正確使用Three.js'內置的ShaderChunk s用於照明和霧等，我想好的第一步是複製其中一個ShaderLib着色器的設置。因此，要開始我用：如何爲Threejs着色器組裝適當的制服？

customMaterial = new ShaderMaterial({ 
    lights: true, 
    uniforms: UniformsUtils.merge([ 
     UniformsLib.common, 
     UniformsLib.specularmap, 
     UniformsLib.envmap, 
     UniformsLib.aomap, 
     UniformsLib.lightmap, 
     UniformsLib.emissivemap, 
     UniformsLib.fog, 
     UniformsLib.lights, 
     { 
     emissive: { value: new Color(0x000000) }, 
     diffuse: { value: new Color(1,1,1) } 
     } 
    ]), 
    vertexShader: document.getElementById("vertexShader").textContent, 
    fragmentShader: document.getElementById("fragmentShader").textContent 
    })

當着色器代碼僅僅是直接從meshlambert_vert.glsl和meshlambert_frag.glsl，而且部分複製有基於this entry in the ShaderLib

不過，我使我的測試場景從兩個不同照相機/渲染器，我馬上注意到了一個問題。對於此應用的對象，更改一個攝像機的透視圖會更改第二個攝像機的照明角度。

我認爲這是由於這些UniformLib對象被其他地方引用？

我不知道我應該通過這裏，而不是爲什麼這不起作用，但標準材料。我想我正在跳過一步，但我不明白它可能是什麼。

這裏是一個codepen，我儘可能地隔離了問題。現在它幾乎是ShaderLib來源的直接副本。在這一點上，我認爲這是一個通過參考，它應該是一個副本，在WebGLRenderer內的某處。 https://codepen.io/cl4ws0n/pen/dVewdZ

無論它的價值如何，我也嘗試添加第二個場景，並在它們之間移動對象。這並沒有解決它，也沒有單獨的對象在單獨的場景共享材料。

來源

2017-10-06 Danie Clawson

請刪除與您的問題無關的活動示例中的_everything_並解釋我們應該看到的內容。 – WestLangley

@WestLangley好吧，我做到了，更新了我的鏈接。只是現在的必需品。請注意，當右側的攝像機角度發生變化時，左側圖像中心立方體的照明是否錯誤。 –

第二個盒子和LambertMaterial可以被移除。制服應該被克隆，以保證它們是唯一的：「制服：UniformsUtils.clone（shader.uniforms），'，但這不是問題，因爲你只用了一次材質。需要兩個渲染器來複制問題嗎？ – WestLangley

正如Matjaz Drolc在評論中指出的那樣，這是三個r87中的一個bug。 needsUpdate標誌在ShaderMaterials下無法正常工作。您可以在我的codepen鏈接中的每個渲染過程之前強制進行更新，並且它將正確渲染。看到叉https://codepen.io/cl4ws0n/pen/qPYwzp

我已經對回購做了一個問題，如果有人想跟蹤它的進展，它可以找到here。

來源

2017-10-10 18:36:27

WebGLRenderer對某些材質有一些硬編碼邏輯。在這種情況下，它正在尋找一個名爲isMeshLambertMaterial的標誌：https://github.com/mrdoob/three.js/blob/r87/src/renderers/WebGLRenderer.js#L1780

因此請嘗試在您的材料中設置isMeshLambertMaterial: true, isMeshBasicMaterial: false。

來源

2017-10-07 19:12:54

我認爲你在正確的軌道上，但我現在收到一個錯誤，在SingleUniform.setValue3fv「無法讀取未定義的屬性'x'... –

也許你需要設置大部分這些屬性：https： //github.com/mrdoob/three.js/blob/r87/src/materials/MeshLambertMaterial.js#L44 –

那也不是。我不認爲這是問題了。我認爲它與ShaderMaterials制服沒有在渲染器之間正確更新 –

如何爲Threejs着色器組裝適當的制服？

回答

相關問題