Threejs：カスタムシェーダを標準レンダリングと一致させる

Question

性能上の理由から、移動中の四面体を100個表示する必要があります。カスタムシェーダが必要なインスタンス化されたバッファフィジオメトリを使用しています。

シーンには、通常のジオメトリ（非バッファ）といくつかのライト（ぼんやりとした抜粋：https://jsfiddle.net/negan/xs3k1yz4/）を持つオブジェクトも含まれています。

私の問題は、照明がシーンの残りの部分に当てはまるように四面体が陰影付けされていないということです。

<script id="vertexShader" type="x-shader/x-vertex"> 
 
attribute vec3 offset; 
 
attribute vec4 color; 
 
varying vec4 vColor; 
 
varying vec3 vNormal; 
 
void main() { 
 
\t vColor = color; 
 
\t vNormal = normalMatrix * vec3(normal); 
 
\t gl_Position = projectionMatrix * 
 
\t \t \t \t modelViewMatrix * 
 
\t \t \t \t vec4(position*1.0+offset,1.0); 
 
} 
 
</script> 
 
<script id="fragmentShader" type="x-shader/x-fragment"> 
 
\t varying vec4 vColor; 
 
    varying vec3 vNormal; 
 

 
\t void main() { 
 
\t \t float di = 0.4*dot(vNormal,normalize(vec3(1.,1.,0.)))+0.4*dot(vNormal,normalize(vec3(1.,0.,1.))); 
 
\t \t di = di+0.2; 
 
\t \t vec4 vColor2= vColor*vec4(1.0,1.,1.,0.2)*di; 
 
\t \t gl_FragColor = vColor2;// adjust the alpha 
 
\t } 
 
</script>

カスタムシェーダが、私はシーンに定義されているライトを適合させるための方法があります：理由はおそらく、私が建てプリミティブシェーダのですか？シェーダはまた、指示された光の印象を与えないような方法で面をレンダリングする。私はむしろ、頂点から補間された色を持つ単一の面を均等に照明したいと思っていましたが、私はそれを達成できませんでした。

任意のポインタまたはヘルプが評価されます。

Answer 1

Here's a gist of the full fragment and vertex shader source Three.js MeshPhongMaterialシェーダの場合、r83以降。

Three.jsは文字列連結システムを使用してシェーダを構築するため、Three.jsソースを参照してシェーダのソースを特定することはほとんど不可能です。

：

上記の要旨は、shader editor Chrome extensionをインストールMeshPhongMaterial like this one有するThree.js例ページに行くと実行シェーダプログラムの完全なソースを検査するためにシェーダエディタを使用して生成されました

Three.jsはライティングデータのようなすべてのデフォルトユニフォームをすべてのシェーダプログラムに渡すので、上記のGistコードでカスタムシェーダを作成すると、ライト、ボーンなどがすべて自動的に機能します。

私は完全なソースコードを取得し、文字通り将来的には、既存のgl_FragColor = ...

にあなたの計算の結果を追加し、手動であなたのロジックを追加し、私のツールShaderFrogあなたは、自動的に任意のThree.jsシェーダを追加できるようになるでしょうフィーチャー（ライト、ボーン、モーフターゲットなど）をカスタムシェーダーに追加できます。 ShaderFrogはすでにどのシェーダも自動的に組み合わせることができますが、まだ3つの機能を完全にサポートするために必要な手動作業は行っていません。