Three.jsライブラリを使用して、単一のdae/Colladaシーンファイルからオブジェクトをロードして表示します。ColladaLoader(Three.jsのサンプルコード)を使用してファイルをロードし、関数を使用して個々のオブジェクトを検索しますcolladaScene.getChildByName('ObjectName', true);
。これはうまく機能しますが、レンダリング時にモアレアーティファクトが発生します。
ロードされた任意のシーンにはBlenderで編集された複雑なオブジェクトが含まれているため、オブジェクトやテクスチャについて推測することはできません。つまり、どのテクスチャまたはマテリアルが期待されるかわからないため、テクスチャまたはマテリアルに特定の変更/修正をハードコーディングすることはできません。修正または微調整は、複数のテクスチャを持つさまざまなオブジェクトに適用できるように、一般的なものである必要があります。シーンファイルを作成する人に指示することができないため、テクスチャの寸法が2の累乗に準拠していると想定することはできません。
問題:Web-GLを使用してオブジェクトを表示すると、いくつかのオブジェクトで非常に悪いモアレの問題が発生します。オブジェクトの中には、縞模様のテクスチャ(ダークウッドと黒)とレンガの壁(異なる色)を持つものがいくつかあります。これらの縞模様とレンガのオブジェクトは、さまざまな角度と距離でレンダリングされると、深刻なモアレアーチファクトの影響を受けます。ストライプオブジェクトの例を次に示します。これは、縞模様のテクスチャを持つボックスジオメトリです。 http://imgur.com/a/vKsi3#0
テクスチャマテリアルまたはテクスチャ自体の設定を変更して、モアレアーティファクトを非表示にすることはできますか?フィルタ設定、シェーダ設定を変更したり、ミップマップテクスチャを作成したりできますか?テクスチャの寸法が2の経験則に準拠していないために発生するモアレはありますか?Colladaシーンを読み込んだ後、Javascriptでアンチエイリアス処理されたミップマップを作成するにはどうすればよいですか?どういうわけかBlenderにミップマップを作成させることができますか?BlenderにミップマップをCollada形式でエクスポートさせることができませんでした。Blenderのオブジェクトテクスチャの「自動ミップマップ」をチェック/チェック解除するトライエンドがありますが、役に立ちません。
私を助けてください。フィルタ、シェーダー、またはミップマップの問題ですか?Colladaシーンをロードし、オブジェクトをトラバースしてオブジェクトを設定/変更し、「奇妙な角度と距離」でもスムーズにレンダリングするサンプルコードを持っている人はいますか?
最後の手段として、Three.jsのJavascriptで何もできない場合:Blenderでシーンを開き、Colladaファイルにエクスポートしたときにオブジェクトのレンダリングを改善するためにマテリアル/テクスチャ設定を変更する方法はありますか?
Three.jsにロードされたときにストライプオブジェクトを表示すると、次のようになります(リモートで想像するすべてのものを含めて、レンダリングに影響を与えます)。
THREE.Mesh
children: Array[0] // No child objects.
material: THREE.MeshPhongMaterial
blendDst: 205
blendEquation: 100
blendSrc: 204
blending: 1
map: THREE.Texture
anisotropy: 1
format: 1021
generateMipmaps: true
image: <img>
height: 474
width: 1395
magFilter: 1006
mapping: THREE.UVMapping
minFilter: 1006
mipmaps: Array[0]
premultiplyAlpha: false
type: 1009
metal: false
morphNormals: false
morphTargets: false
normalMap: null
opacity: 1
shading: 2
skinning: false