three.js - THREE.lod および法線マップシェーダーが失敗する

Question

私は THREE lod システムで遊びたかったのですが、メッシュに法線マップマテリアルを適用しましたが、GL エラーで失敗しました:

WebGLRenderingContext: GL エラー:GL_INVALID_OPERATION: glDrawElements: 属性 2 の範囲外の頂点にアクセスしようとしています

webgl_lod の例を編集して、MeshLambertMaterial を適用する代わりに、misc_control_fly の例で提供されている法線マップ ShaderMaterial を使用するだけで、誰でも簡単に再現できると思います。

法線マップシェーダは LOD メッシュで動作するはずではありませんか?

編集：ここに問題を確認するためのリンクがあります。

web_lod の例の元の meshLambertMateriel の代わりに、shaderLib のノーマルマップシェーダーを使用: http://typedef.byethost8.com/examples/failing_webgl_lod.html

score 0 · Accepted Answer

ジオメトリの接線を生成する必要があります。追加：

geometry[ 0 ][ 0 ].computeTangents();
geometry[ 1 ][ 0 ].computeTangents();

これにより、エラーが解消されます。

WebGLRenderingContext: GL エラー:GL_INVALID_OPERATION: glDrawElements: 属性 2 の範囲外の頂点にアクセスしようとしています

また、何かが表示されるのを確認するために、平面の代わりに sheres を使用する必要がありました => 平面に対してテクスチャ座標が生成されない可能性がありますか? または、法線マップマテリアルは平面では機能しませんか?

three.js - THREE.lod および法線マップ シェーダーが失敗する