three.js

Question

にMeshStandardMaterialするIDカラーマップを追加するIは、物質ペインタで利用可能な技術と同様three.jsに色IDマップを追加したい：

• https://www.youtube.com/watch?v=5GqeyuZGOhc

結果カラーマップが追加されるように、MeshStandardMaterialと合成する必要があります。その上に複数のidマップマップが適用されます。 （その後、後続のPBR要素が標準として追加されます）。

1つのjpg画像に最大4つのidマップを含めることができます（チャンネルごとに）。各チャネルは、適用された色のアルファ値であり、0x00は不可視であり、0xFFは完全に可視である。その後、カラーパラメータが（チャンネルごとに）渡され、フラグメントシェーダに適用され、実行時に色が変更されます。

// load an id map with 4 separate channels 
IdMapTexture texture = (IdMapTexture)mTextureLoader.load(path, callback); 

MeshStandardIdMapMaterial material = new MeshStandardIdMapMaterial(); 
material.idMaps[0] = texture; 

// apply colors to the channel via the fragment shader 
material.idMaps[0].color0 = new Color(0x336699); 
material.idMaps[0].color1 = new Color(0xFF0099); 
material.idMaps[0].color2 = new Color(0x640971); 
material.idMaps[0].color3 = new Color(0x216647); 

// apply the material to the mesh 
mesh.material = material; 

私の質問は、主に3つのトピック（最高==最高）に沸く：ここ

はが意味をなさないかもしれないAPIのためのいくつかの擬似コードです。

1. すでに利用可能なものはありますか？
2. これをより構造化/単純化するための合成手法はありますか？
3. three.jsのMeshStandardMaterialを拡張するための標準的な方法やツールはありますか？

よろしく

Answer 1

Iは、複数の透明PNG画像を追加するGLSLミックス（）関数と一緒にHTMLドキュメントにGLSL頂点およびフラグメント・シェーダを追加することによって、これを達成しました。 pngにはthree.jsテクスチャローダシステムがロードされ、フラグメントシェーダに渡されました。

フラグメントシェイダーでは、その後、vec3を使用してフラグメントの色を直接設定しました。マテリアルの透明プロパティをtrueに設定し、ブレンド関数をそれに応じて設定する必要があることに注意することが重要です。