Three.js: 기능 요청: 화면 공간 반사

여기서 내 유일한 관심사는 스테레오 렌더링에서 제대로 작동하지 않는다는 것입니다. 그래서 WebVR에서는 힘들겠지만, 제가 이 기능에 반대한다고 생각하지 마세요 :) :+1:

VR에서 끄면 됩니다. 많은 비용이 드는 효과가 VR에서 제대로 작동하지 않습니다. UE4는 속도를 위해 VR 컨텍스트에서 지연보다는 포워드 렌더링을 제안합니다.

바로, 그것이 내가 반대하지 않는 이유입니다.

리플렉션 매핑의 React Native 구현을 작업하는 동안 여기를 우연히 발견했습니다. 화면 공간 리플렉션은 VR이 아닌 게임에 좋습니다.

THREE.Reflector 는 VR에서 작동합니다 ✌️
https://threejs.org/examples/webvr_sandbox.html

멋진!

Nightly에서도 "VR을 찾을 수 없음"이 표시되지만 확인하겠습니다.

내 특정 문제(OP가 아님)는 리플렉션 문제를 해결하는 것이 아니라 three.js 기본 개체를 만들고 ReactVR의 기존 장면 및 렌더러 내에서 렌더링하는 방법이었습니다. 나는 괜찮은 결과를 얻었습니다. 유일한 것은 배경 이미지가 조금 이상해서 반사가 이상하게 보입니다. 그러나 예상대로 React VR은 배경 파노라마를 위한 내부 구를 만듭니다. 큐브 맵을 시도하지 않았지만 더 잘 작동할 수 있습니다.

책의 페이지를 너무 많이 읽었으므로 기존 데모를 그대로 두겠지만 이것은 훌륭한 기술처럼 보입니다.

저는 이런 유형의 효과에 대해 더 배우고 싶었기 때문에 이에 대한 작곡가 효과를 만들어 보았습니다. 아직 수행할 수 있는 작업이 있지만 다음은 Kode80의 구현과 Morgan McGuire의 블로그 게시물을 기반으로 한 것입니다(스폰자 장면을 로드하는 데 약간의 시간이 소요됨).

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

다음에 해야 할 일은 지터 아티팩트, 광택 반사(흐림 패스 또는 밉 맵 샘플링 + 깊이 맵 피라미드 사용) 및 시간적 재투영을 통한 다중 바운스를 정리하는 것입니다.

누군가가 실제로 이 효과를 사용하는 데 관심이 있다면 누군가와 협력하여 이 효과를 조금 더 다듬을 수 있어 기쁩니다!

@gkjohnson 스윗. 그러나 장면이 너무 복잡할 수 있습니다. 어쨌든 데모는 거의 응답하지 않는 것 같습니다. 더 간단한 예를 만들 수 있습니까? 또한 on-off 토글이 좋을 것입니다.

@WestLangley

데모가 거의 응답하지 않는 것 같습니다

데모를 볼 수 있습니까? 연결에 따라 Sponza 장면을 다운로드하는 데 약간의 시간이 걸리기 때문에 화면이 몇 초 정도 검은색일 수 있습니다.

전혀 작동하지 않으면 더 간단한 것을 만들 수 있습니다. Pixel 2에서는 작동하지만

온-오프 토글이 좋을 것입니다.

"intensity" 슬라이더를 0으로 낮추는 것은 끄는 것과 같으나 레이 트레이싱은 여전히 ​​발생하므로 원하는 경우 성능 차이가 없을 것입니다.

@gkjohnson 알겠습니다. 내 Mac에서는 데모가 잠시 동안 검은색으로 표시되고 프레임 속도는 4입니다.

@WestLangley 해상도에 따라 달라지는 효과이므로 창을 작게 만들면 프레임 속도가 올라갈 수 있습니다. 더 낮은 해상도에서 광선 추적을 수행한 다음 전체 해상도 버퍼로 합성하면 효과를 더 확장할 수 있지만 최적화할 시간이 없습니다.

@gkjohnson 반사 표면에만 어떻게 마스킹하시겠습니까? 강도를 높이면 모든 것이 반영되기 시작하고 꽤 거슬리는 인공물이 있습니다.

@bicubic 현재 표면 속성은 고려되지 않지만 기본 버전을 추가하는 것은 그리 어렵지 않습니다. 머티리얼의 스페큘러/러프니스 속성에 따라 효과를 흐리게 하거나 흐리게 할 수 있습니다.

불행히도 지금은 이 효과를 사용할 일이 없기 때문에 다른 기능을 추가하기 위해 노력하지 않았습니다. 전에도 말했지만, 무언가에 사용하는 데 관심이 있다면 기꺼이 협력하고 효과를 완성하겠습니다!

머티리얼의 스페큘러/러프니스 속성에 따라 효과를 흐리게 하거나 흐리게 할 수 있습니다.

반사/비반사 객체를 지정할 수 있는 것이 더 유용할 것입니다. 현재 커튼과 식물을 포함하여 모든 것이 반사적입니다. 이상적으로는 바닥만 이 데모에서 반사되어야 합니다.

@looeee 내 말에 동의합니다. 명확하지 않은 경우 죄송합니다. 머티리얼 속성은 타겟에 기록되어야 스크린 공간에서 샘플링되고 주어진 픽셀에서 반사를 희미하게 하거나 흐리게 하는 데 사용할 수 있습니다. 이렇게 하면 러프니스 맵 등이 반사에도 영향을 미칠 수 있습니다.

이것이 three.js 기본 기능의 일부가 되는 것을 보고 싶습니다.

지연된 렌더러 아키텍처도 기본 제공의 일부가 되어야 하는지 궁금해하게 만드는 이와 같은 것들이 많이 있습니다. 특히 webgl2.0의 경우

@gkjohnson 이 이해했습니다. 의미가 있습니다. 그러나 여전히 인공물을 방지하기 위해 일종의 마스크가 필요할 것 같습니다. 귀하의 예에서는 커튼과 식물에 대한 반사가 0이기를 원할 것입니다. 해당 재료의 속성을 기반으로 0으로 페이딩이 올바르게 작동합니까?

@비큐빅
전용 지연 렌더링 경로도 보고 싶다는 데 동의합니다. WebGL2와 다중 렌더 텍스처를 사용하면 훨씬 더 실용적입니다.

@루이
원하는 효과에 따라 다르지만 렌더링된 거칠기 값은 "이 픽셀에서 반사 없음"을 의미하는 거칠기 값 1과 "전체 렌더링"을 의미하는 값 0을 사용하여 장면의 마스크로 효과적으로 동작합니다. 이 픽셀에서 반사". 그 사이의 값은 부분 강도로 반사를 렌더링합니다. 데모의 intensity 슬라이더는 효과를 보여줍니다(그러나 분명히 픽셀당 대신 전체 장면에 대해).

또 다른 접근 방식은 거칠기 값을 기반으로 반사된 픽셀을 흐리게 처리하여 빛을 반사하는 확산 표면을 에뮬레이트하는 것입니다. 따라서 커튼에는 여전히 약간의 반사가 있지만 날카로운 것은 아닙니다. 이렇게 하면 예를 들어 밝게 빛나는 파란색 바닥으로 드레이프를 비출 수 있습니다.

거칠기 값 1은 "이 픽셀에서 반사 없음 렌더링"을 의미하고 값 0은 "이 픽셀에서 전체 반사 렌더링"을 의미합니다.

이것이 잘 작동할 수 있을 것 같습니다. Unreal은 "최대 거칠기" 매개변수를 사용하며 0.8로 설정할 것을 권장합니다.

죄송합니다

@gkjohnson
이것은 매우 흥미롭고 나는 당신의 결과를 사랑합니다. 저는 지금 WebGL2/MRT 렌더러에 통합하고 있으며 그것을 실험할 것입니다. 각 렌더 호출에서 재료를 생성한다는 사실을 알고 계셨습니까?
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestar 감사합니다! 그리고 나는 그것을 눈치 채지 못했습니다! 하지만 내가 말했듯이 아직 정리해야 할 부분이 있고 성능이 아직 매우 유용할 정도는 아니라고 생각합니다.

이러한 유형의 효과는 어쨌든(아마도 작업 중인 것처럼) 정방향보다 지연된 렌더러에 더 적합합니다. 저는 이 효과와 다른 고품질 효과를 결합하고 싶었지만 더 많은 시간을 투자하기 전에 적절한 지연 렌더러를 사용할 수 있을 때까지 기다리는 경향이 있습니다. 작업 중인 지연/MRT 렌더러를 Github에서 사용할 수 있습니까?

지금 통합했지만 SSR은 출력을 저해상도 RT로 전달하고 기본적으로 반사만 수행한 다음 깊이 흐림 효과를 사용하여 기본 이미지와 결합하여 오류를 제거/줄입니다. 거칠기 값을 속성 RT에 렌더링하고 다시 사용하여 조각을 버리기 위해 보이지 않는 1로 흐림 강도를 결정합니다.

블러는 또한 거리에서 더 강해지는 오류를 제거합니다. 한 가지 문제는 아직 투명도가 다시 표시되고 물체가 다른 물체를 부분적으로 덮고 있어서 다른 물체의 반사가 잘리는 것 같습니다. 기술에 대해 더 많이 읽어야 합니다.

THREE의 합성기를 사용하지 않고 THREE 위에 사용자 정의 엔진과 함께 사용하고 있습니다. THREE는 실제로 현재 WebGLRenderer에서 WebGL2 컨텍스트를 사용할 준비가 되었습니다. 거기에 MRT를 추가했습니다. 조만간 github에 올리겠습니다. 그래도 뒷면 깊이 버퍼에 대해 장면을 두 번째로 렌더링해야 하지만 너무 비싸지는 않습니다.

@파이어스타
이봐, 어떤 소식이 있니?

나는 내 자신을 작성하고 three.js에 pr을 만들었지만 지금은 OrthographicCamera만 지원하고 PerspectiveCamera를 지원하려고 합니다.
데모 데모 2

이제 PerspectiveCamera 지원이 정상입니다. https://github.com/mrdoob/three.js/pull/20156

데모

이것은 아름답고 상당한 성취입니다. 내 컴퓨터에서는 매우 느립니다. 1920x1080에서 5fps를 얻습니다. 구현과 Sketchfab의 차이점은 무엇입니까? 나는 우리가 다른 것을 알고 있다면 당신을 최적화하는 방법을 알 것이라고 생각합니다....

@buston 감사합니다!

이제 장면의 모든 것이 반사되지만 대부분의 실제 프로젝트에서는 필요하지 않습니다.
IntensityMap 속성과 같은 것을 추가하거나 거리 감쇠와 결합된 기존 Roughness Metalness 정보를 사용하여 값이 0인 픽셀에서 직접 계산을 종료하면 fps가 크게 향상될 것이라고 생각합니다.
반사 픽셀의 일부를 임의로 선택할 수도 있습니다.

Sketchfab의 코드를 보려고 했지만 실패했습니다. 다시 해보겠지만 별로 희망이 없습니다. Sketchfab의 코드가 있는 사람이 있으면 공유해 주세요. 감사합니다!

------편집하다------
또한 Sketchfab의 프레젠테이션 창은 기본적으로 전체 화면으로 표시되지 않으며 작업이 없으면 렌더링을 중지합니다.
전체 화면으로 표시하고 계속 회전하면 간단한 장면 에서도 GPU 사용량이 높아집니다.

@gonnavis 해당 예제의 셰이더 코드는 Spector.js Chrome 확장 프로그램을 통해 볼 수 있어야 합니다.

Sketchfab을 가지고 노는 것만으로도 SSR 해상도를 변경하고 개선하고 있음을 알 수 있습니다. 그들이 점진적으로 뛰어넘는 3-5개의 품질 수준이라면 나는 놀라지 않을 것입니다. 이렇게 하면 대화형 프레임 속도가 보장되지만 정적일 때는 완벽하게 개선됩니다.

이렇게 하면 대화형 프레임 속도가 보장되지만 정적일 때는 완벽하게 개선됩니다.

단점은 카메라가 움직이지 않고 품질 수준이 전환될 때 눈에 띄는 점프가 있다는 것입니다. 어떤 장면에서는 다른 장면보다 더 분명합니다. 여기 아주 분명한 곳이 있습니다.

편집: 그들은 단순한 반사 이상으로 그것을 수행합니다. 빛, 그림자, 반사 및 아마도 텍스처 해상도가 점진적으로 향상되는 것처럼 보입니다. 이 장면의 뒷벽에 있는 빛/그림자를 보십시오.

위의 SSRR을 실험할 때 여기 에서 Morgan Mcguire의 기사를 꽤 참조했습니다.

특히 픽셀 스트라이드가 증가하여 더 적은 수의 픽셀 픽셀이 샘플링될 수 있으며 이는 픽셀당 규칙적인 지터와 결합될 수 있으므로 형제 픽셀은 스테핑하는 동안 서로 다른 깊이 샘플을 "건너뛸 수 있습니다. 광선의 보폭이 충분히 높으면 깊이 버퍼에서 무언가가 교차하면 끝에 이진 검색을 추가하여 광선이 먼저 닿았을 픽셀을 찾을 수 있습니다. 반사되지 않는 조각을 일찍 반환하면 이미 @gonnavis에 대해 언급한 것처럼 도움이 될 것입니다.

또한 저해상도 raymarch의 깊이와 일반 인식 업스케일을 실험했지만 보기에 만족스러운 지점에 도달하지 못했습니다. 게임에서 이 기술은 사용 가능한 해상도가 종종 2로 나눌 수 있다는 사실에서 상당한 이점을 얻을 수 있다고 생각합니다.

그러나 Sketchfab이 반사 거리에 따라 흐려지는 거친 반사를 처리하는 방법이 궁금합니다. 나는 Godot 엔진이 광선 거리와 표면 거칠기에 기반한 반경으로 블러를 하는 것을 보았지만 그 결과 여기에서 보고 있는 것처럼 느껴지지 않는 아티팩트가 생깁니다. 기회가 있을 때 Spector.js를 둘러봐야 할 것입니다(@WestLangley 팁 감사합니다!). Frostbite paper @bhouston 은 처음에 광선 행진을 할 때 깊이 피라미드를 사용할 것을 제안하지만 webgl1(그리고 아마도 2?)에서 고통이 될 수 있는 생성을 제안합니다.

잘생겼어 @gonnavis! 그것이 도서관에 들어갈 수 있다는 것을 알게 되어 기쁩니다.

@WestLangley 감사합니다! 그러나 Sketchfab에서 Spector.js를 사용할 때 "gl 명령이 있는 프레임이 감지되지 않습니다. 카메라를 움직여 보세요."라는 메시지가 나타납니다. 오류.

앞서 말했듯이 SSRPass가 최적화된 후에도 Sketchfab의 성능이 여전히 크게 향상될 지는 의문입니다. 특히 @bhouston @looeee가 언급한 것처럼 연속 렌더링 및 다운그레이드 전략이 없는 경우. 구현 세부 사항에 대해 이야기하지 않는다면 이 SSRPass의 핵심 개념이 이미 최적의 솔루션일 수 있다고 생각합니다.

@gkjohnson 정보와 지원에 감사드립니다! 계속 개선하겠습니다.

@gonnavis

Safari의 그래픽 탭을 권장합니다.

Linux를 사용하는 경우 Epiphany(일명 Gnome Web)를 사용할 수 있습니다.
https://webkit.org/downloads/

Windows 용 WebKit 빌드가 없다고 생각하지만 ...

@mrdoob 감사합니다! 저는 주로 Windows를 사용하지만 필요하면 Mac에서 사용해 보겠습니다.

하지만 glsl 함수와 같은 유용한 항목을 찾으면 Sketchfab의 코드를 오픈 소스 라이브러리에 업로드할 수 있는지 궁금합니다.

이 SSRPass의 구조는 three.js SSAOPass를 기반으로 하며 데모 장면은 three.js webgl_shading_physical example을 사용 하고 key pointToLineDistance 함수는 wolfram.com 에서

감사 해요! 그러나 Sketchfab에서 Spector.js를 사용할 때 "gl 명령이 있는 프레임이 감지되지 않습니다. 카메라를 움직여 보세요."라는 메시지가 나타납니다. 오류.

마우스를 스크롤하여 카메라를 확대/축소합니다. 스펙터를 발동시키기에 충분합니다.

또한 렌더 루프가 필요하지 않은 정적 장면을 예제에서 사용하십시오. 현재 프레임 속도가 너무 낮아 수용할 수 없습니다.

@WestLangley 이 장면 에서 성공했습니다, 감사합니다!

Sketchfab의 코드를 게시하지 마십시오. 나는 단지 우리가 이해하도록 제안했을뿐입니다.
그들의 기술. 코드를 공유하지 않고도 할 수 있는 작업입니다. 너도
저작권에 위배되는 코드에서 아무 것도 복사할 수 없습니다.

2020년 8월 25일 화요일 오전 6시 21분 Vis [email protected]에서 다음과 같이 작성했습니다.

@WestLangley https://github.com/WestLangley 이 장면에서 성공
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ,
감사 해요!

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANNCNFSM4B4V62SQ
.

--
벤 휴스턴 , CTO
남 : +1-613-762-4113
[email protected]
캐나다 오타와
ThreeKit 시각화 플랫폼: 3D, 2D, AR, VR
http://https//threekit.com/

@bhouston OK, 필요한 경우에만 참조하십시오.

영감을 받은 후에도 다른 사람의 논문과 코드를 계속 보는 것이 내가 직접 작성하는 것보다 어렵다는 것을 종종 느끼기도 합니다. 특히 다른 환경에서는 더욱 그렇습니다.

예를 들어 이번에는 주로 이 tut 에서 영감을 받았는데, 처음에는 텍스트의 의미를 명확하게 이해하기 어렵고 그가 사용하는 좌표계가 다르기 때문에 . cxx 파일이므로 약간의 텍스트만 읽고 코드는 거의 읽지 않습니다. 그래서 결국 가장 도움이 된 두 장의 사진 imgA imgB .

몇 가지 데모를 추가합니다.

데모, Demo2, Demo3, SelectiveDemo, OrthographicDemo가.

@gonnavis에서 영감을

새로운 기능 중 일부:

• 블루 노이즈 레이 지터를 지원하여 교차 패턴이 덜 규칙적입니다.
• 세부 사항을 보존하기 위해 저해상도 행진 텍스처에서 깊이 및 일반 가중치 업스케일/흐림 효과.
• 지터가 있는 샘플 및 밉맵을 사용하여 광택 반사를 렌더링하는 몇 가지 눈에 띄게 조정된 접근 방식입니다.
• 노멀 맵과 알파 맵을 지원합니다.

꽤 집중적인 효과지만 반사 업스케일링, 흐림, 지터 및 낮은 단계 수를 혼합하여 전체 창 앱보다는 특히 작은 임베디드 캔버스에서 잘 작동하는 무언가를 할 수 있을 것 같습니다. https://github.com/mrdoob/three.js/issues/14048 에서 논의된 것과 같이 여러 프레임에 걸쳐 최종 이미지를 해결하면 적절한 광택 반사도 얻을 수 있습니다. 물론 다른 곳에서 언급했듯이 반사는 확산 및 기타에 대한 별도의 패스 없이는 여전히 옳지 않지만 항상 개선해야 할 것이 있습니다.

다음은 걸음 수가 더 많은 몇 가지 스크린샷입니다.

| 광택 없음 | 다중 샘플 광택 | 깊이 계층 광택 |
|---|---|---|
| | | |

데모는 다음과 같습니다.

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Siggraph 2015에는 "Stochastic Screen-Space Reflections"에 대한 슬라이드가 있습니다. http://advances.realtimerendering.com/s2015/index.html