2016-03-30 7 views
1

THREE.ShaderLib.phongでのMeshPhongMaterialとShaderMaterialの使用の違いは何ですか?THREEJSのMeshPhongMaterialとShaderMaterialの相違点

  1. 3つのjは内部的にすべてのマテリアルにシェーダを使用しますか?
  2. ShaderMaterialを使用するとパフォーマンスが向上しますか?
  3. 私はMeshPhongMaterialを使用するコードを持っていますが、どのようにTHREE.ShaderLib.phongでShaderMaterialに変換しますか?鏡面THREE.MultiplyOperation:0x030303、反射0xFFFFFFの、光沢:35、 シェーディング:THREE.SmoothShading、結合ここ

コード

VAR材=新しいTHREE.MeshPhongMaterial({色です。 1});

どのように私は、コンバインおそらくShaderMaterialとしてではなく、あなた(変数、フラグメントおよび頂点シェーダ)のために行われたすべてのハードワークとMeshPhongMaterialと考えることができShaderMaterial

答えて

2

における反射率およびその他のプロパティを指定してください。

  1. はい、すべての素材はシェーダです(シェーダコードをGPUに送信します)。
  2. シェーダによって異なります。
  3. なぜあなたはそれを再作成しますか?あなたはすることができます。試してみる前に資料の仕組みを理解しているはずです。

私は自分自身のページを持っていますexperiments with ShaderMaterialあなたは一見見ることができました。

また、私自身のリファレンスhereのために組み込みの材料/シェーダを見ました。

でも、私がこれらを投稿して以来、3つの材料とその構成方法が少し変わりました。しかし、私のシェーダの実験はちょっとした助けになるかもしれません。

私はまた、効果的に自分自身の材料のクラスを作り、ShaderMaterialクラスを拡張したfiddle hereを持っている(これは単なる実験だったと私はそれが最高の、またはそれを行うにしても正しい方法だかはわからないけれども。)

私はあなたが行ずつを疑うクリア
... 
3

は役に立つかもしれません:

THREE.ShaderLib.phongでMeshPhongMaterialとShaderMaterialを使用しての違いは何ですか。

MeshPhongMaterialは、名前空間はあなたがライブラリのsrc /レンダラー/シェーダー/ ShaderLib.jsをチェックするのであれば内部的にはグラフィックス(DEV /デザイナーの背景) からある人のための速く、より容易な開発を行うために、ライブラリによってユーザーを終了し提供します THREE.ShaderLib ['phong']はshaderIDs行29574 three 75バージョンにマップされます。 彼らは同じです。

3つのjは内部的にすべてのマテリアルにシェーダを使用しますか?

回答:OpenGLES 2.0以上は、EGLを使用して作成されたサーフェスに描画するための固定パイプラインと比較して、シェーダベースのテクノロジです。

ShaderMaterialを使用するとパフォーマンスが向上しますか?

答え:あなたが見ているものによっては、光沢ベクトルの計算をフラグメントシェーダーにしたくない場合は、十分に成熟していますが、これは均一ではなく直接vec3を提供します。最初は、LOD、Object Poolingなどのような多くのパフォーマンスのために撮影してください。(異なる人々は同じことについて異なる意見を持っているかもしれません)

私はMeshPhongMaterialを使用するコードを持っていますが、どのようにShaderMaterial THREE.ShaderLib.phong。

回答:あなたは手動で

var phongShader = THREE.ShaderLib[ 'phong' ] 
var shaderMaterial = new THREE.ShaderMaterial({ 
uniform: phongShader.uniform, 
vertexShader: phongShader.vertexShader, 
fragmentShader: phongShader.fragmentShader 
}); 

呼び出さできますしかし、あなたはあまりにもTHREE.ShaderChunkを使用して、カスタムGLSLファイルを呼び出すことによって、シェーダーを拡張することができます。

どのように私は、反射率とShaderMaterial内の他の特性

回答、組み合わせて指定します:あなた自身の制服(すでに材料でサポートされて言及1 1)を作成し、

THREE.UniformsUtils.merge([ 
phongShader.uniform, 
{ 
//to do custom uniform 
} 
vertexShader:vertexShader, 
fragmentShader:fragmentShader 
)] 
var vertexShader = [ 

//so on add the shaderChunk Required 
].join('\n') 

var fragmentShader = [ 
THREE.ShaderChunk[ "common" ], 
//so on add the shaderChunk Required 
//call your custom uniform which you have supplied into the final gl_FragColor 
].join('\n') 
を呼び出します

あなたの問題を見るIMHOあなたはカスタムパラメータを使って直接fragmentShaderを編集することができるvertexShaderを変更する必要はありません。

0

レンダラにはMeshPhongMaterialの特殊な制服の更新機能が組み込まれていますが、ShaderMaterialの制服を手動で更新する必要があるため、実際は同じではありません。つまり、私は完全な概要は持っていません。少なくとも、THREE.WebGLRendererのソースコードを詳細に調べる必要があります。私は確かに言うことができる何

let mat = new THREE.MeshPhongMaterial(); 

作品ということ、そして

let mat = new THREE.ShaderMaterial(THREE.ShaderLib.phong); 

は制服に関するエラーメッセージで失敗することがあります。これは、少なくとも部分的にはデフォルト値の欠落によっても引き起こされる可能性があります。

編集:私は間違っていました。あなたはまた、霧を有効にするにはtrue mat.fog =を使用したい場合があり

mat.lights = true; 

を追加した場合、それが動作

。シェーダオブジェクトパーツ(uniforms、vertexShader、fragmentShader)を個別に指定する場合は、ShaderMaterialコンストラクタのパラメータに "lights:true"と "fog:true"を追加することもできます。

関連する問題