3

パフォーマンス上の理由から、シーン内に何百もの移動四面体を表示する必要があります。そこで、カスタム シェーダーを必要とする instancedbuffergeometry を使用します。

シーンには、通常のジオメトリ (非バッファ) といくつかのライト (煮詰めたスニペットを用意しました: 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() {
	vColor = color;
	vNormal = normalMatrix * vec3(normal);
	gl_Position = projectionMatrix *
				modelViewMatrix *
				vec4(position*1.0+offset,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
	varying vec4 vColor;
    varying vec3 vNormal;

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

シーンで定義したライトにカスタム シェーダを適合させる方法はありますか? シェーダーはまた、指向性のある光の印象を与えないように顔をレンダリングします。頂点から色を補間するのではなく、単一の面を均等に照らしたいのですが、それを達成できませんでした。

ポインタやヘルプをいただければ幸いです。

4

2 に答える 2

1

r83 の時点での、Three.js MeshPhongMaterial シェーダーの完全なフラグメントおよび頂点シェーダー ソースの要点を次に示します。

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

上記の Gist は、シェーダー エディターの Chrome 拡張機能をインストールし、このようなMeshPhongMaterial を含む Three.js サンプル ページに移動し、シェーダー エディターを使用して実行中のシェーダー プログラムの完全なソースを検査することによって生成されました。

シェーダー エディター ソース

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

私は完全なソース コードを取得し、ロジックを手動で追加します。文字通り、計算結果を既存のgl_FragColor = ...

将来的には、私のツールShaderFrogを使用して、Three.js シェーダー機能 (ライト、ボーン、モーフ ターゲットなど) を任意のカスタム シェーダーに自動的に追加できるようにします。ShaderFrog はすでに任意のシェーダーを自動的に組み合わせることができますが、Three 機能を完全にサポートするために必要な手動作業はまだ行っていません。

于 2016-12-18T20:40:15.130 に答える