概要
ディスプレイスメント マップ (高さマップ) をかなり単純なオブジェクト (六角形の平面) に適用しようとしていますが、予期しない結果が得られます。私はグレースケールを使用しているため、高さマップはメッシュの Z 値にのみ影響するはずであるという印象を受けました。ただし、作成したディスプレイスメント マップは、メッシュを X 平面と Y 平面に広げます。さらに、他のすべてのテクスチャが正常に適用されている、私が作成した UV マッピングを使用していないようです。
モデルと UV マップ
これは、私の六角形メッシュの参照画像と、それに対応する Blender の UV マップです。
拡散テクスチャとディスプレイスメント テクスチャ
これらは、Three.JS を使用してメッシュに適用している拡散マップ テクスチャとディスプレイスメント マップ テクスチャです。
レンダリング
ディスプレイスメント マップを使用せずに平面をレンダリングすると、六角形の平面が線内にとどまっていることがわかります。ただし、ディスプレイスメント マップを追加すると、頂点の Z だけでなく X と Y の位置に明確に影響し、平面が線の上に拡張されます。
コード
関連する Three.js コードは次のとおりです。
// Textures
var diffuseTexture = THREE.ImageUtils.loadTexture('diffuse.png', null, loaded);
var displacementTexture = THREE.ImageUtils.loadTexture('displacement.png', null, loaded);
// Terrain Uniform
var terrainShader = THREE.ShaderTerrain["terrain"];
var uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);
//uniformsTerrain["tNormal"].value = null;
//uniformsTerrain["uNormalScale"].value = 1;
uniformsTerrain["tDisplacement"].value = displacementTexture;
uniformsTerrain["uDisplacementScale"].value = 1;
uniformsTerrain[ "tDiffuse1" ].value = diffuseTexture;
//uniformsTerrain[ "tDetail" ].value = null;
uniformsTerrain[ "enableDiffuse1" ].value = true;
//uniformsTerrain[ "enableDiffuse2" ].value = true;
//uniformsTerrain[ "enableSpecular" ].value = true;
//uniformsTerrain[ "uDiffuseColor" ].value.setHex(0xcccccc);
//uniformsTerrain[ "uSpecularColor" ].value.setHex(0xff0000);
//uniformsTerrain[ "uAmbientColor" ].value.setHex(0x0000cc);
//uniformsTerrain[ "uShininess" ].value = 3;
//uniformsTerrain[ "uRepeatOverlay" ].value.set(6, 6);
// Terrain Material
var material = new THREE.ShaderMaterial({
uniforms:uniformsTerrain,
vertexShader:terrainShader.vertexShader,
fragmentShader:terrainShader.fragmentShader,
lights:true,
fog:true
});
// Load Tile
var loader = new THREE.JSONLoader();
loader.load('models/hextile.js', function(g) {
//g.computeFaceNormals();
//g.computeVertexNormals();
g.computeTangents();
g.materials[0] = material;
tile = new THREE.Mesh(g, new THREE.MeshFaceMaterial());
scene.add(tile);
});
仮説
なぜこれがうまくいかないのかについて、私は現在3つの可能性をジャグリングしています:
- UV マップがディスプレイスメント マップに適用されません。
- ディスプレイスメント マップを間違って作成しました。
- ディスプレイスメントを Z のみにロックするプロセスの重要なステップを見逃していました。
そしてもちろん、秘密のオプション #4 は上記のどれにも当てはまらず、自分が何をしているのかまったくわかりません。または前述の任意の混合物。
実際の例
ここで実例を見ることができます。
この件についてより多くの知識を持っている人が私を導くことができれば、私はとても感謝しています!
編集 1 : 提案に従って、私はコメントアウトしcomputeFaceNormals()、computeVertexNormals(). わずかに改善されましたが、メッシュはまだ歪んでいます。
