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분이 걸립니다.

이에 대한 또 다른 잠재적인 흥미로운 사용 사례는 환경 조명의 방향을 실시간으로 변경할 수 있다는 것입니다. 저는 현재 PMREM 환경 맵을 실시간 그림자를 위한 방향 조명과 결합하고 있으며 맵을 스카이박스로 사용하여 상당히 괜찮은 일광 효과를 제공합니다.
분명히 환경 맵의 색상을 변경하지 않고 할 수 있는 일에는 제한이 있지만 .envMapIntensity 를 조정하면서 방향 조명과 동기화하여 맵을 회전하여 적어도 몇 시간 동안의 일광을 시뮬레이션할 수 있습니다. .

내 관심사는 또한 성능에 관한 것입니다. 현재 저는 위쪽 및 아래쪽 텍스처를 회전하고 다른 텍스처를 교체하려는 해킹을 구현했습니다. JS에서 1024x1024 텍스처를 회전하는 데 약 10ms가 걸립니다.

또는 CubeTexture 방향에 대해 현재 가지고 있는 옵션과 3D 형식(X3D, VRML 등 .). 두 형식을 모두 처리하기 위해 머티리얼 리플렉션의 일관성을 쉽게 조정할 수 있습니까?

이것은 친숙하게 들린다 #11103

CubeMap.rotation = matrix3 구현한다면 r105에 병합하시겠습니까?

내 관심사는 또한 성능에 관한 것입니다. 현재 저는 위쪽 및 아래쪽 텍스처를 회전하고 다른 텍스처를 교체하려는 해킹을 구현했습니다. JS에서 1024x1024 텍스처를 회전하는 데 약 10ms가 걸립니다.

앱에서 얼마나 자주 이 작업을 수행합니까?

@WestLangley 여기에서 자세한 답변을 드리겠습니다. https://github.com/mrdoob/three.js/pull/16507#discussion_r286337864

앱에서 얼마나 자주 이 작업을 수행합니까?

별로. 클라이언트당 로드 시 한 번, 배경이 변경될 때마다 한 번(매우 드문 경우). DEFINE도 작업을 수행합니다.

내 관심사는 또한 성능에 관한 것입니다 ... 약 10ms가 걸립니다.

앱에서 얼마나 자주 이 작업을 수행합니까?

별로. 클라이언트당 로드 시 한 번, 배경이 변경될 때마다 한 번(매우 드문 경우).

죄송합니다. 나는 그 논리를 따르지 않습니다.

불행히도 @WestLangley 는 런타임 오버헤드(보충 mat3 곱셈) 때문에 CubeTexture.rotation에 대한 수정 사항을 병합하고 싶지 않습니다. 이 경우 threejs에서 깔끔하게 해결할 아이디어가 부족합니다.
threejs 기여자가 이 문제를 해결하지 못하면 이 문제를 닫으십시오.

이 기능의 구현을 기다립니다.

@FishOrBear 불행히도 threejs 유지 관리자는 이것을 구현하지 않기로 결정했습니다. 이 병합되지 않은 패치를 프로젝트에 포함하려면 포크에 적용할 수 있습니다.

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

@mrdoob #18157에서 이 기능 요청을 재고할 수 있을까요?

AutoCAD와 유사한 응용 프로그램을 만들기 위해 threejs를 사용하고 있으므로 xy를 사용하여 평면에 앉습니다.

현재 CubeTexture는 우리 것과 약간 충돌합니다.

BTW: 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

조각당 단일 추가 행렬/벡터 곱셈이 성능에 눈에 띄게 영향을 미칠지 의심됩니다.

내 앱에는 여전히 동일한 문제가 있으며, 이를 해결하기 위한 해킹은 추악하고 비용이 많이 듭니다... 또한 이 개선 사항을 수락하는 것이 좋습니다.

저도 이 기능이 추가되었으면 좋겠습니다.

차단기는 잠재적인 성능 저하인 것처럼 보이지만 테스트하기 쉬워야 합니다. 추가를 시도할 수 있으며 수용할 수 없는 성능 저하가 있는 경우 다시 제거할 수 있습니다.

여기에서도 마찬가지로 내 배경 렌더링을 다시 구현하는 대신 이 기능을 사용할 수 있습니다. :)

성능 문제에 대해 확신이 서지 않습니다. 정점 셰이더에서 직접 광선 방향을 생성하는 것을 방해하는 것은 없습니까? 그러면 다른 modelMatrix 변환만큼 비용이 듭니다.

제 경우에는 카메라로 캡처하여 사용자가 업로드한 큐브맵을 렌더링하기 때문에 이 기능을 사용할 수 있습니다. 사진의 방향이 항상 올바른 것은 아니므로 업로드 후 수동으로 수정해야 합니다.

내가 이 작업을 수행한 한 가지 방법은 회전을 변수로 저장하고 렌더링 직전 장면에 적용한 다음 렌더링 직후 장면의 회전을 ID quat로 재설정하는 것입니다.

이로 인해 모든 장면 개체의 세계 행렬이 두 번 불필요하게 업데이트됩니다. 또한 onBeforeRender에서 위치 업데이트를 수행할 수 없음을 의미합니다. 그러나 그렇지 않으면 장면을 정상적인 상태로 유지합니다.

Btw(아무도 언급하지 않았기 때문에) 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://woodenraft.games/demos/skybox-rotation-threejs.html

@wmcmurray 제대로 작동하려면 이 스카이박스를 카메라와 함께 움직여야 하고 상자 크기가 X < Math.sqrt(0.75 * camera.far * camera.far)인지 확인해야 합니다. 항상 보기에 맞지만 장면을 회전/회전 해제하는 해킹보다 더 쉬워 보입니다.

이를 위해 PR을 다시 열어야 합니까? 두 가지 사용 사례가 있으며 성능에 영향을 미치지 않으려면 셰이더를 사용할 수 있습니다.

• 사용 사례 1: 환경은 한 번 미리 계산되며 셰이더에서 회전할 필요가 없습니다. 이것은 사용자가 CPU에서 또는 원하는 경우 GPU에서 수행할 수 있습니다.
• 사용 사례 2: 뷰어에서 작업할 때 예를 들어 마우스를 사용하여 실시간으로 배경을 회전하는 것은 매우 일반적입니다.

사용 사례 1 의 사용자가 행렬 곱셈의 영향을 받는 것을 방지하기 위해 다음과 같은 플래그를 간단히 추가할 수 있습니다.

renderer.dynamicBackground = true;

그에 따라 배경 셰이더를 컴파일하시겠습니까?

그동안

@wmcmurray 와 @capnmidnight가 지적했듯이 기본적으로 자신의 배경 렌더링을 다시 코딩할 수 있으며 그렇게 어렵지 않습니다. 보기 평면(근거리 및 원거리 값)에 특히 주의하십시오.

MeshBasicMaterial 를 사용하는 대신 ShaderMaterial 확장하는 자체 셰이더를 직접 생성하고 큐브맵을 샘플링할 수도 있습니다.