Three.js: MeshLambertMaterialでカスタムVertexShaderを使用していますか?

作成日 2011年12月02日  ·  9コメント  ·  ソース: mrdoob/three.js

こんにちは私はある種のカスタムシェーダーを実行しようとしていますが、マテリアルではなく頂点の位置を変更したいだけです。 MeshLambertには、すでにライト、テクスチャ、および必要なすべてのものがありますが、頂点を変更して、オブジェクトに有機的な外観を与えます。

誰かが私に指示を与えることができますか?

ありがとう!

Question

最も参考になるコメント

@maurrubioプロジェクトを終了し

全てのコメント9件

誰か?

最も簡単なのは、カスタムコードを頂点シェーダーに追加するだけで、ランバートのようなカスタムShaderMaterialを作成することです。

内部的には、標準のマテリアルはShaderMaterialとまったく同じ機械を使用するため、ここからコードをコピーして貼り付ける必要があります。

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1187

こんにちは@alteredq返信ありがとう

これはあなたが参照したものですか?
http://www.interactiveuniverse.net/Shaders.js

ランバートシェーダーで提供される配列からオブジェクトを作成し、それらを新しいShaderMaterialインスタンスに渡します。

そうすることで、ポイントライトの影響を受けずに黒いマテリアルを取得できます。

もうすぐです;)

標準マテリアルの機能をShaderMaterialさせるには、マテリアルフラグ(ライト、フォグなど)も設定する必要があります。

https://github.com/mrdoob/three.js/blob/master/src/materials/ShaderMaterial.js#L40

shaderMaterial = new THREE.ShaderMaterial( {

    uniforms:       uniforms,
    vertexShader:   vertexShader,
    fragmentShader: fragmentShader,
    lights:         true
    }); 

機能した !!! どうもありがとうございました。仕事が終わったら皆さんと共有します。

最後の質問@alteredqは、オブジェクトで環境マップを使用してテクスチャを与えることも目的としていました。 MeshLambertMaterialに含まれているこの種の機能をどのように実装すると思いますか?

うーん。 適切なユニフォーム( envMap )を設定するだけで十分だと思います。また、頂点シェーダーとフラグメントシェーダー#define USE_ENVMAPの両方の上部に固定する必要があります。

uniforms[ "envMap" ].texture = myCubeTexture;
vertexShader= [

"#define USE_ENVMAP",

"varying vec3 vLightWeighting;",

THREE.ShaderChunk[ "map_pars_vertex" ],
THREE.ShaderChunk[ "lightmap_pars_vertex" ],

...
fragmentShader = [

"#define USE_ENVMAP",

"uniform float opacity;",

...

シェーダーで頂点の位置を変更すると、静的ジオメトリからの法線が正しくなくなり、すべてが古い位置に従ってシェーディングされることに注意してください。

それは働いた:D

皆さんは本当に素晴らしいです。開発者は他の人が自分のツールで何をしているのかを見るのが大好きです。プロジェクトをすぐに完了できることを願っています(これは私の個人的なポートフォリオであり、WebSocketを使用してスペースインターフェイスのユーザーを球と接続しています(それぞれが異なるプロジェクトです)そしてユーザーは空間をナビゲートし、各ユーザーは私の作品を横切って移動する異なるダイナミックポイントライトです。

エンジンはかなり機能しているので、デザインにもっと取り組む必要があります。

よろしくお願いします!

@maurrubioプロジェクトを終了し

このページは役に立ちましたか?
0 / 5 - 0 評価