##############################

3D rotation test with X3DOM and ThreeJS


BACK to GitHub Repository

BACK to GitHub WEB DEMO

3D rotation test with X3DOM

3D rotation test with ThreeJS

3D rotation test 2 with X3DOM
姿勢ベクトルと回転行列の積の数値検証X3DOMテスト

rottestWithX3DOMAndThreeJS.zip

##############################



これらのサンプルは、NAS6LIB の数値計算、特に N6LVector、N6LMatrix、N6LQuaternion の回転変換の多面的な数値検証です。


既知の問題 ##############################

概要

NAS6LIB と X3DOM, ThreeJS 間で 3D モデルを変換する際に、特にスカイボックスにおいて、テクスチャ画像の左右反転とビュー行列の転置に関する問題が発生しました。
ビュー行列の転置問題 転置問題を解決した後も、NAS6LIB 内では数値計算は正しく実行されていましたが、X3DOM で描画すると鏡像になっていました。
Three.js で問題では問題がなかったため、原因は X3DOM における座標系の解釈が独特であることが判明し、テクスチャとスカイボックスの位置を調整することで解決しました。
というよりも私がThreeJSに数値計算をほとんど任せなかったのがThreeJSで問題がなかった原因かもしれません

問題

左右反転と転置現象：NAS6LIB で計算された行列を X3DOM に適用すると、特にスカイボックスのテクスチャ画像が左右反転して表示されました。
ビューマトリックスの転置現象も確認されました。
ライブラリ間の座標系の違い：NAS6LIBは左手座標系ですが、X3DOMは右手座標系をベースとしているため、変換が複雑でした。
Three.jsとの比較：Three.jsでは同様の変換ロジックで問題が発生しなかったため、これはX3DOMにおける座標系の解釈に起因する特殊な問題であることがわかりました。

解決策

N6LMatrix.FromX3DOM()の調整：戻り値に転置を適用することで、転置の問題を解決しました。
スカイボックス画像を左右反転し、配置を調整：マトリックス変換だけでは問題が完全に解決しなかったため、画像編集ソフトを用いてスカイボックスに使用した画像を左右反転（ミラーリング）しました。
同時に、**前面と背面**（Z軸方向に対応）の画像の配置を調整しました。 X3DOMのBackgroundノードも同様でした。この組み合わせにより、最終的に正しく調整された表示が実現しました。

学んだこと

ライブラリ固有の座標系の解釈：各3Dライブラリは独自の座標系定義とレンダリングパイプラインを持っているため、異なるライブラリをリンクする際には、
各ライブラリの特性を理解し、必要に応じてテクスチャやオブジェクトの配置を調整し、数値的な精度だけでなく視覚的な差異を回避することが重要です。

デバッグ戦略：問題が複雑に絡み合っている場合は、まず最も単純な「回転なし」の状態を確認し、次に単軸回転などの単純なテストケースで動作を確認するのが効果的です。

実用的な解決策を検討する：数学的な変換が複雑で解決が難しい場合は、テクスチャの調整など、視覚的な問題をより直接的に解決するアプローチも効果的です。

##############################


戻る