0

WebGLRenderer の PhongMaterial で THREE.SpotLight にライト クッキー (またはゴボ、ライト テクスチャ、またはライト マスク) を実装しようとしています。目的は、次のようなライトのテクスチャをアタッチできるようにすることです。投影。

スポットライト コーン/スポットでの位置の計算に問題があるため、テストはできていませんが、「ライトにテクスチャをアタッチし、シェーダーでルックアップ用のユニフォームとして渡す」はカバーされていると思います。

スポットライトの光の寄与がここで計算されていることがわかります (独自のマテリアルを作成するのではなく、Three.js ソースを直接変更しています)。

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1013

スポットライトのスポットは丸ですよね？または、角度がある場合は楕円。そのため、ここにコードを追加する必要があります。これにより、スポットライト スポットのどこにいるか (xy 座標) がわかります。これらの座標をテクスチャ ルックアップにマッピングし、それに応じてスポット拡散を下げ、できればゴボ プロジェクションが機能するようにします。

各ライトに関連してこれらの座標を計算するにはどうすればよいですか?

または、Three.js でライト クッキー / ゴボ / ライト テクスチャ / ライト マスクを実装するより良い方法はありますか? これはゲーム エンジンで人気のある機能だと思います。そのような機能が組み込まれているとよいでしょう。http://docs.unity3d.com/Documentation/Components/class-Light.htmlは、私が探しているもの (クッキーの部分) をかなりよく説明しています。

4

1 に答える 1

6

こちらをご覧ください: http://www.evpopov.com/threejstest/test_spot_projtexture.html

私はそれがあなたが望むことをしていると思います。

これは、テクスチャが「そのまま」使用されず、代わりに照明計算を減衰させることを除いて、実際には標準の射影テクスチャリングです。

このサンプルでは、​​射影テクスチャのアルファ チャネルを減衰係数として使用しました。

私が使用する頂点/フラグメント シェーダーを作成するために、フォン マテリアルから頂点/フラグメント シェーダーを取得し、スポット ライト レンダリングに関連する部分のみを保持しました。また、黒の領域 (スポット範囲外) を避けるために、一定の環境色を設定しました。

射影テクスチャリングの特定のコードには、独自のシェーダーで再利用する場合に、頂点/フラグメント シェーダーで // で始まるコメントがあります。

また、ライトに対応するプロジェクション マトリックスを生成する必要があります。makeProjectiveMatrixForLight関数が自動的に実行します => シャドウ マッピング用の 3 つの JS ソース コードにあるコードとほぼ同じです。

サンプルを起動すると、壁が回転し、スポット ライトは固定されたままになります。moveLightTargetに変更することで、スポット ライトのターゲットを移動させることができtrueます。rotateCubefalse

于 2013-03-31T17:03:00.140 に答える