Three.js: CubeTextureの向き

scene.backgroundを回転できるということですか？ もしそうなら...はい、間違いなく興味があります。

おそらく新しいAPIが必要です...

scene.background = new THREE.Background( cubeTexture );`
scene.background.rotation.y = Math.PI / 2;

私は今まさにこれに苦労しています。 キューブマップから太陽の方向に一致するように焼き付けられた地面の影を取得しようとしています。
キューブマップが180度反転している途中のどこかにあるようです。 キューブマップを複数回再レンダリングして、それがどこで起こっているのかを理解しようとするのではなく、ここでそれを修正できれば素晴らしいと思います。

@fabienrohrerお試しください

scene.rotation.y = Math.PI;

それがうまくいかない場合は、あなたがしていることを正確に示すための実例を提供してください。

ああ、それはうまくいきますか？ 😮カメラはシーンの子である必要がありますか？

カメラはシーンの子である必要がありますか？

私はそれは重要ではないと思います。

@mrdoobこれはまさに私も必要なものです:-)

@WestLangley ：

シーン全体を回転させるのはやり過ぎで、アプリに多くの副作用を引き起こす可能性があります。

背景のみを回転できるようにしたいのですが、確かに、環境マップは同じように機能するはずです。

APIがないため、ライブデモを行うことはできません。 背景キューブマップ（https://threejs.org/examples/#webgl_materials_cubemapなど）を持ち、y軸を中心に背景のみを回転できる例を取り上げることは重要です。 または、より一般的には、背景に回転を適用します。

カスタム回転行列/クォータニオンを任意のキューブマップに適用できることは、私にとって最も一般的な解決策のようです。

three.jsは、マテリアルの反射が、ワールド空間座標系で定義されているマテリアルenvMapと一致するように注意しています。 ユーザーがシーンの背景を回転できるようにすると、背景がマテリアルの反射と一致しなくなります。

アプリで正しいワールドスペースキューブマップを作成してみませんか？

カメラはシーンの子である必要がありますか？

私はそれは重要ではないと思います。

webgl_materials_standardのコンソールでscene.rotation.y ++を実行しようとすると、銃が回転します。 次に、 scene.add( camera )を実行してみましたが、 scene.rotation.y ++すると、目的の処理が実行されますが、カメラのコントロールが台無しになります😁

THREE.Backgroundオブジェクトを導入する場合、これを処理するAPIを追加できます。さらに、レンダラーで次のアイデアを導入することもできます。

var envMap = material.envMap;
if ( scene.background && scene.background.isBackground && envMap === null ) {
    envMap = scene.background.texture;
}

私は言った

scene.rotation.y = Math.PI;を試してください。 それが機能しない場合は、...

それはそれが機能しないかもしれないことを意味します。 :-)

ユースケースによって異なります。 OrbitControls試してみましたが、問題なく動作しました。

無関係： webgl_materials_standard例では、とにかくIMOの軌道制御を使用する必要があります。

scene.backgroundを回転できるということですか？ もしそうなら...はい、間違いなく興味があります。

これをテクスチャレベルで行う方が理にかなっています。そうしないと、IBLライティングが背景と一致しないと思います。

通常のテクスチャの回転を許可しますが、立方体のテクスチャに対して同じことをしたくない理由はありますか？ 実装するには複雑すぎますか？

アプリで正しいワールドスペースキューブマップを作成してみませんか？

これは非常に時間がかかります。 私は過去数日間キューブマップの生成に取り組んできましたが、変更を加えてからキューブマップを再レンダリングすると、変更ごとに約15〜20分かかります。

これのもう1つの潜在的な興味深い使用例は、環境照明の方向をリアルタイムで変更できることです。 私は現在、PMREM環境マップをリアルタイムシャドウ用の指向性ライトと組み合わせており、マップをスカイボックスとして使用しています。これにより、かなり適切な昼光効果が得られます。
明らかに、環境マップの色を変更せずに実行できることには制限がありますが、 .envMapIntensityを調整しながら、指向性ライトと同期してマップを回転させることにより、少なくとも2時間の日光の通過をシミュレートできます。 。

私の懸念はパフォーマンスにもあります。 現在、上下のテクスチャを回転させて他のテクスチャを交換するハックを実装しました。 JSで1024x1024のテクスチャを回転させるのに約10msかかります。

あるいは、CubeTextureの向きに2つのオプションしか持たない可能性があります。1つは現在使用しているもので、もう1つは（180度回転）、主に3D形式で使用される他の標準（X3D、VRMLなど）と使いやすいものです。 。）。 両方のフォーマットを処理するために、マテリアルの反射との一貫性を簡単に適応させることができるでしょうか？

これはおなじみのようですね＃11103

CubeMap.rotation = matrix3を実装する場合、r105にマージしますか？

私の懸念はパフォーマンスにもあります。 現在、上下のテクスチャを回転させて他のテクスチャを交換するハックを実装しました。 JSで1024x1024のテクスチャを回転させるのに約10msかかります。

そして、あなたはあなたのアプリでこれをどのくらいの頻度でやっていますか？

@WestLangleyここで詳細な回答を提供します： https ：

そして、あなたはあなたのアプリでこれをどのくらいの頻度でやっていますか？

あまりない。 クライアントごとに1回、バックグラウンドが変更されるたびに1回（非常にまれなケース）。 DEFINEもその役割を果たします。

私の懸念はパフォーマンスにもあります...それは約10msかかります。

そして、あなたはあなたのアプリでこれをどのくらいの頻度でやっていますか？

あまりない。 クライアントごとに1回、バックグラウンドが変更されるたびに1回（非常にまれなケース）。

申し訳ありませんが、私はその論理に従っていません。

残念ながら、 @ WestLangleyは、実行時のオーバーヘッド（補足のmat3乗算）のために、CubeTexture.rotationに関する私の変更をマージしたくありません。 この場合、threejsでこれをきれいに解決するためのアイデアが不足しています。
threejsの貢献者がこれを解決しない場合は、この問題を閉じてください。

この機能の実装を待ちます。

@FishOrBear残念ながら、 threejsメンテナはこれを実装しないことにしました。 プロジェクトでこれを使用したい場合は、このマージされていないパッチをフォークに適用できます。

https://github.com/mrdoob/three.js/pull/16507

@mrdoobたぶん私たちは＃18157でこの機能のリクエストを再考することができますか？

私はthreejsを使用してAutoCADに似たアプリケーションを作成しているので、xyを使用して平面として配置します。

現在のCubeTextureは私たちのものと少し矛盾しています。

ところで：Babylon.jsを使用すると、少なくともスカイボックスをy軸を中心に回転させることができます。

https://www.babylonjs-playground.com/#UU7RQ＃447

エンジンは、フラグメントシェーダーで反射ベクトルを変換することにより、これをサポートします。 つまり、＃16507では受け入れられなかったアプローチです。 Babylon.jsフラグメントシェーダーからのコード：

https://github.com/BabylonJS/Babylon.js/blob/1c4627141f83c08fe4a7e30e2621c916b4e6c9c9/src/Shaders/ShadersInclude/reflectionFunction.fx#L114 -L117

@mrdoobこの機能を実装する必要があると思います。 フォーラムには別のリクエストがあります。

https://discourse.threejs.org/t/rotate-a-scenes-background-skybox-texture/12199

フラグメントごとに1つの追加の行列/ベクトル乗算がパフォーマンスに著しく影響することはないと思います。

私はまだ私のアプリで同じ問題を抱えています、そしてそれを解決するためのハックは醜くてとても費用がかかります...私もこの改善を受け入れることをお勧めします。

また、この機能が追加されるのを楽しみにしています。

ブロッカーはパフォーマンスを低下させる可能性があるようですが、テストは簡単です。 追加してみることができます。パフォーマンスが低下した場合は、再度削除できます。

ここでも同じですが、バックグラウンドレンダリングを再実装する代わりに、この機能を使用できます:)

パフォーマンスの問題についてフォローするかどうかはわかりません。 頂点シェーダーで光線の方向を直接生成することを妨げるものはありませんか？ その場合、他のmodelMatrix変換と同じくらいのコストがかかります。

私の場合、カメラによってキャプチャされ、ユーザーによってアップロードされたキューブマップをレンダリングしているので、この機能を使用できます。 写真は常に北向きであるとは限らないため、アップロード後に手動で修正する必要があります。

これを行う1つの方法は、回転を変数として保存し、レンダリングの直前にシーンに適用してから、レンダリングの直後にシーンの回転をIDクワットにリセットすることです。

これにより、すべてのシーンオブジェクトのワールドマトリックスに2つの不要な更新が発生します。 また、onBeforeRenderで位置の更新を実行できないことも意味します。 ただし、それ以外の場合はシーンを通常の状態に保ちます。

ところで（誰も言及していなかったので）、6つのマテリアルの配列を使用して回転する「クラシック」スカイボックスを作成することは可能であるようです。

このようなもの ：

const urls = [
  '/assets/skybox/right.png',
  '/assets/skybox/left.png',
  '/assets/skybox/top.png',
  '/assets/skybox/bottom.png',
  '/assets/skybox/front.png',
  '/assets/skybox/back.png',
];

const materials = urls.map((url) => {
  const texture = new THREE.TextureLoader().load(url);

  return new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    fog: false,
    depthWrite: false,
  });
});

const skybox = new THREE.Mesh( new THREE.BoxBufferGeometry(10000, 10000, 10000), materials );
scene.add(skybox);

skybox.rotation.y = Math.PI / 2;

ここに示されているように： https ：

@wmcmurray正しく機能させるには、このスカイボックスをカメラと一緒に移動する必要があります。また、ボックスの寸法がX <Math.sqrt（0.75 * camera.far * camera.far）になるように、コーナーを確認する必要があります。常にビューに収まりますが、シーンを回転/回転解除するという私のハックよりも簡単なようです。

そのためのPRを再開する必要がありますか？ 2つのユースケースがあり、パフォーマンスに影響を与えたくない場合は、シェーダー定義を使用できます。

• ユースケース1：環境は一度事前に計算されているため、シェーダーで回転させる必要はありません。 これは、ユーザーがCPUで実行することも、必要に応じてGPUで実行することもできます。
• ユースケース2：ビューアで作業する場合、たとえばマウスを使用して背景をリアルタイムで回転させるのは非常に簡単です。

ユースケース1のユーザーが行列の乗算の影響を受けないようにするために、次のようなフラグを追加するだけでよい

renderer.dynamicBackground = true;

それに応じて背景シェーダーをコンパイルしますか？

その間

@wmcmurrayと@capnmidnightが指摘したように、基本的に独自のバックグラウンドレンダリングを再コーディングでき、それほど難しくはありません。 表示面（近い値と遠い値）には特に注意してください。

MeshBasicMaterialを使用する代わりに、 ShaderMaterialを拡張する独自のシェーダーを直接作成し、キューブマップをサンプリングすることもできます。