在THREE.js中查看材質的編譯着色器代碼？

每當我寫在three.js所定製的着色器，我犯了一個錯誤，控制檯輸出與編譯後的代碼GLSL一個不錯的錯誤信息。它包括我的代碼與所有多餘的線條沿着three.js所自動添加上：在THREE.js中查看材質的編譯着色器代碼？

問：

有什麼辦法來輸出編譯一個內置的vertexShader和fragmentShader材料？我在我的項目中使用THREE.MeshLambertMaterial，我想閱讀編譯GLSL代碼來了解它的引擎蓋下是如何運行的。我知道，我可以去圖書館的的\ src \渲染\着色器\ ShaderLib \ meshlambert_frag.glsl但它有幾十#include線，沒有所有的附加屬性/校服自動three.js所追加。

我試圖CONSOLE.LOG材料的性能第一渲染之後，但我不能找到編譯GLSL代碼：

var firstRender = true; 

function update(){ 
    renderer.render(scene, camera); 

    if(firstRender === true){ 
     // Where in myMaterial is the GLSL code stored? 
     console.log(myMaterial.program.vertexShader); 
     firstRender = false; 
    } 
}

來源

2017-08-30 Marquizzo

您不僅可以查看three.js着色器源代碼，您可以使用@ spite的shader editor extension for Chrome在瀏覽器中進行編輯。

來源

2017-08-30 21:55:31 WestLangley

Firefox已經在它的devtools着色器代碼查看器。我也只是穿過稱爲Chrome擴展[spector.js（https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?hl=en）這似乎相當不錯（我只注意到在提到來到其他答案... woops） – 2pha

謝謝，@ 2pha！ FireFox着色器編輯器非常棒，我甚至不需要安裝任何第三方插件！ – Marquizzo

它（據我可以告訴）不可能以編程方式訪問上傳到GPU的最終代碼。 WebGLProgram類中唯一存在is here的地方。根據您的使用情況，你可以做這些事情之一：

使用three.js所的非精縮構建和在WebGLProgram -class設置調試器斷點（單步調試代碼的調試器也是理解three.js的一個很好的方法）。
安裝http://spector.babylonjs.com/或http://benvanik.github.io/WebGL-Inspector/檢查所執行的着色器代碼。

來源

2017-08-30 21:38:40

在THREE.js中查看材質的編譯着色器代碼？

回答

相關問題