私はこの問題を解決するために、数日間実験とグーグル検索を行ってきました。
オブジェクトを 3D 空間にレンダリングするシステムをセットアップし、「カメラ」も実装しています。現在、光源を追加しようとしていますが、非常にイライラする問題に遭遇しました。
「カメラ」は、特定のアイテムがレンダリングされる前に適用される mvMatrix の効果的な回転と変換です。
オブジェクトを独自の軸で回転させるロジックをオブジェクトに追加すると、ライトは正しく配置されたままになり、光源に面するオブジェクトのさまざまな面を照らします。ただし、カメラを移動すると、光源がカメラに対して「固着」します。これは、私が望むものではありません。
これを解決するためのいくつかの試みは次のとおりです。
- カメラを動かしたり回転させたりする前にライトを配置し、
- カメラを動かして回転させた後、ライトを配置し、
- 移動後、カメラを回転させる前にライトを配置します。
- すべてがレンダリングされ、mvMatrix がポップされた後、ライトを配置します。
- すべてがレンダリングされた後、mvMatrix がポップされる前にライトを配置します。
- プログラムの開始時にライトを一度配置し、レンダリング ループ中は再度配置しません。
- ライトを配置するときは、その位置 vec3 に mvMatrix を掛けます (これにより非常に近くなりましたが、完全ではないようですが、ライトは常に 0,0,0 に配置されます)。
- ライトを配置するときは、その位置 vec3 に mvMatrix の逆数を掛けます (非常に奇妙な結果)。
これにより、mvMatrix の回転で回転する必要があると思われますが、その変換は無視します (理由はわかりません。試したことがないことを考えることができるのはこれだけだと思います)が、間違っている可能性があります。私はそれを行う簡単な方法を見つけることができませんでした。
とにかく、あなたがコードを見たいと思っていることは確かです。私はすべて公開の github レポジトリに持っています (PR は歓迎します!)。
- メインのレンダリング ループ: https://github.com/philbrookes/webgl-engine/blob/add-normals-and-lighting/webgl-engine/Renderer.js#L37
- カメラの位置と回転方法:
- prepareLighting メソッド: https://github.com/philbrookes/webgl-engine/blob/add-normals-and-lighting/webgl-engine/Renderer.js#L73
私は、ライトオブジェクトを作成する前に、まずそれを理解したいだけです。
実際の動作を見たい場合は、こちらをご覧ください: http://www.bracketbrotherhood.com/webgl-engine
私は本当にかなり行き詰まっているので、これについて何か助けていただければ幸いです。
余談ですが、これはきちんとした順序付けされた JS に対する私の最初の試みなので、コードベースをよりよく整理する方法について何かコメントがあれば、それもぜひ聞きたいと思います。照明の問題を修正するよりも、今、私に!
文字の壁でごめんなさい… ありがとうございます!
フィル、