THREE.jsで素材のコンパイル済みシェーダコードを表示しますか？

Question

THREE.jsでカスタムシェーダーを作成しているときに間違いを犯すと、コンソールはコンパイルされたGLSLコードで素晴らしいエラーメッセージを出力します。それは一緒にすべての余分な線で自分のコードが含まれてThree.jsが自動的に追加されている：

質問：

内蔵のvertexShaderとfragmentShaderをコンパイル出力にどのような方法があります材料で？私は自分のプロジェクトでTHREE.MeshLambertMaterialを使用しています。コンパイルされたGLSLコードを読んで、その実行方法を理解したいと思います。私は図書館の\ src \ renderers \ shaders \ 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; 
    } 
} 

Answer 1

three.jsシェーダーのソースコードを表示するだけでなく、Chrome用に@ spiteのshader editor extensionを使用してブラウザでライブ編集することもできます。

Answer 2

を最終コードはGPUにアップロードされます。それが存在する唯一の場所は、WebGLProgramクラスのis hereです。

• （デバッガでコードをステッピングthree.jsの非縮小さビルドを使用してWebGLProgram級でデバッガ・ブレークポイントを設定：あなたのユースケースによっては、これらのもののいずれかを行うことができますまた、three.jsが何をするのかを理解する優れた方法です）。
• install http://spector.babylonjs.com/またはhttp://benvanik.github.io/WebGL-Inspector/を実行して実行されるシェーダコードを検査します。