Three.js: 양면 재질이있는 메시의 일부 부분에서 법선이 뒤집 혔습니다.

@pushmatrix 이 모델이 자체 접선을 제공하는지 여부를 확인할 수 있습니까? 이것이 # 11438과 관련이 있는지 궁금합니다.

자체 접선을 지정한다고 생각하지 않습니다.

다른 테스트 케이스를 사용하여 git bisect는 메쉬가 양면이고 음의 척도가 X 인 경우 문제를 시작한 PR로 # 17586을 가리 킵니다.하지만 r.108이 아니라 r.109에있었습니다.

해당 모델을 사용할 수 없기 때문에이 PR의 모델에서 테스트되지 않았습니다.

다음은 테스트 glb입니다.
wheels.glb.zip

3 년 전부터 : https://github.com/mrdoob/three.js/issues/10331#issue -194807426

기본적으로 ... gl_FrontFace가 Adreno GPU의 양면 재질에서 제대로 작동하지 않는 것 같습니다.

이것이 _ 여전히 _ 우리가 수용해야하는 문제입니까?

//

normalmap_pars_fragment 에서 Adreno 해결 방법을 제거하면이 모델이 내 컴퓨터에서 올바르게 렌더링되는 것 같습니다.

#ifdef DOUBLE_SIDED

    // Workaround for Adreno GPUs gl_FrontFacing bug. See #15850 and #10331

    bool frontFacing = dot( cross( S, T ), N ) > 0.0;

    mapN.xy *= ( float( frontFacing ) * 2.0 - 1.0 );

#else

    mapN.xy *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );

#endif

흠, 저도 그 댓글을 읽었던 것을 기억합니다. 이 버그를 보면서 발견했다고 생각합니다. r108에서 분명히 수정되었습니다 (적어도 업그레이드는 우리를 위해 수정했습니다) : https://github.com/GoogleWebComponents/model-viewer/issues/740

아마도 관련이 있습니까? FWIW, 이전 Adreno GPU에 대한 피드백을 받았으므로 여전히 상당히 일반적입니다.

확인을 위해 dev 에서 여전히 발생합니다.

확인하기 위해 이것은 여전히 ​​dev에서 발생합니다.

권리. 그러나 Adreno 버그 해결 방법을 제거하면 아닙니다.

그러나 Adreno 버그 해결 방법을 제거하면 아닙니다.

지금은 해결 방법을 제거한 다음 다른 솔루션을 검색하는 것은 어떻습니까? 현재 구현은 사용중인 플랫폼에 관계없이 잘못된 시각으로 이어집니다.

@ Mugen87 이 특별한 경우에 저는 기하학이 서로의 거울이라고 믿지만 동일한 노멀 맵을 공유합니다.

동의합니다. 모든 사용 사례에서 올바른 Adreno 호환 해결 방법을 찾기 위해 많은 시간을 투자했습니다.

휠 모델 모델을 검사하면 각 휠에는 자체 UV 쉘이 있습니다. 하나를 공유하지 않습니다.
그리고 정점 순서는 반대입니다.

그러나 얼굴 방향은 적어도 Blender에서 동일합니다.

그래서 나는 그것이 r108의 버그인지 또는 r108이 이제 제대로 일을하고 있는지 확실하지 않습니다. ¯_ (ツ) _ / ¯

@pushmatrix 는 Unity 또는 Blender와 비교할 수 있습니까?

뿡뿡

블렌더 2.8

단일성

Sketchfab

헉헉

빛이 카메라와 같은 방향에 있기 때문에 Unity는보기 어렵지만 Unity도 잘못된 것 같습니까? 🤔

뿡뿡

예, 조명에 약간 의존하여 환상이되고 어떤 곳에서 튀어 나온 것처럼 보입니다. 하지만 회전하면 사라집니다.

여기에 다른 빛이 있으며, 올바른 것으로 보입니다.

@mrdoob 앞면은 three.js에서 시계 반대 방향으로 감기 순서를 갖습니다. 일반적으로 각면의 3 개 정점 UV도 UV 맵에서 시계 반대 방향의 감기 순서를 갖습니다.

이 예에서 내 _conjecture_는 왼쪽의 모델이 시계 반대 방향의 UV를 가지고 있고 오른쪽의 모델은 _clockwise_ UV를 가지고 있습니다. doubleSide 이 true 때 오른쪽 모델이 three.js에서 잘못 렌더링됩니다.

AFAIK, Adreno 해결 방법을 제거하면 Adreno가 아닌 GPU의 문제가 해결됩니다.

@pushmatrix Unity 예제에는 두 방향의 방향 조명이있는 것 같습니다. 그것은 무슨 일이 일어나고 있는지 분별하기 어렵게 만듭니다. 단일 조명이 바람직 할 수 있습니다.

@WestLangley 모델 뷰어 가 사용하는 것과 동일한 환경 맵을 사용하고 있지만 동일한 회전이 없을 가능성이 높습니다. 나는 하나의 빛으로 시도 할 것입니다.

@WestLangley 단일 방향 조명이 회전합니다. 착시 현상을 보는 것 같아

Unity가 빛이 닿는 방식에 따라 그루브가 튀어 나오게 만드는 것처럼 보이지만 적어도 둘 다 일관됩니다.

Threejs도 일관성이 있지만 분명히 항상 튀어 나온 것처럼 보입니다.

Unity One에 문제가있는 것 같습니다 ...
같은 것이 필요합니다. material.normalMapScale.x = -1

뿡 빵뀨

@mrdoob 앞면은 three.js에서 시계 반대 방향으로 감기 순서를 갖습니다. 일반적으로 각면의 3 개 정점 UV도 UV 맵에서 시계 반대 방향의 감기 순서를 갖습니다.

이 예에서 내 _conjecture_는 왼쪽의 모델이 시계 반대 방향의 UV를 가지고 있고 오른쪽의 모델은 _clockwise_ UV를 가지고 있습니다. doubleSide 이 true 때 오른쪽 모델이 three.js에서 잘못 렌더링됩니다.

AFAIK, Adreno 해결 방법을 제거하면 Adreno가 아닌 GPU의 문제가 해결됩니다.

감사합니다. 그래도 더 많은 조사가 필요하다고 생각합니다. Sketchfab이 모든 장치에서 올바르게 보이면 셰이더를 살펴 봐야 할 수 있습니다.

오늘 각각의 셰이더 코드를 살펴 봤는데 "픽셀 당 접선 공간 노멀 매핑"을 사용하지 않는 것 같습니다.

이 게시물 에 따르면 Sketchfab은 자산의 탄젠트 정의 또는 이러한 데이터가
UV 좌표를 기반으로 생성합니다. 그것은 내가 GLSL 코드에서 본 것과 일치합니다.

BufferGeometryUtils.computeTangents() 를 통해 모델에 접선을 추가하고 Material.vertexTangents 을 true 로 설정하면 결과가 괜찮아 보입니다.

BTW :이 게시물에서 Sketchfab의 코드 스 니펫을 공유해도 되나요 ^^? 결국 오픈 소스가 아닙니다.

일관성을 위해 다음은 1 개의 방향 조명이 앞뒤로 움직이는 Sketchfab입니다.

예, 명심해야 할 한 가지는 Sketchfab이 모델을 업로드 할 때 처리를 수행하므로 무언가를 생성하거나 변경할 가능성이 매우 높습니다. 보고있는 것은 glTF가 아니라 자체 형식으로 변환 된 glTF 파일입니다.

@pushmatrix # 17958이 모델에 적용된다는 것을 _please_ 보여줄 수 있습니까?

three.js는 프래그먼트 셰이더에서 탄젠트를 계산합니다. 특정 버그가있는 Adreno GPU를 수용하기위한 해킹이 제거되면 제대로 작동한다고 생각합니다. # 17958을 참조하십시오.

//

Sketchfab은 접선이 필요하지만 모델에서 제공하지 않는 경우 CPU에서 접선을 계산합니다. ( @donmccurdy 이것이 glTF 사양에 필요한 것입니다.)

three.js도 그렇게 할 수 있지만 모든 내장 도형에 올바른 접선을 추가하는 것을 의미합니다. three.js는 또한 MIKKTSpace 알고리즘을 구현하여 ComputeTangents() 를 대체해야합니다. three.js는 인덱싱 된 지오메트리와 비 인덱싱 된 지오메트리를 모두 지원하므로 상당한 노력이 필요할 것으로 예상됩니다.

그것을 고친다!

좋습니다. 여기서 해결책은 Adreno 해결 방법 (# 17958)을 되돌리고 모델에 탄젠트가없고 Adreno GPU (# 15850)를 지원하려는 경우 사람들에게 BufferGeometryUtils.computeTangents() 를 사용하도록 권장하는 것 같습니다. .

좋은가요?

또 다른 해결책은 제공되지 않을 때 엔진에서 자동으로 BufferGeometryUtils.computeTangents() 를 호출하고 프래그먼트 셰이더에서 탄젠트를 계산하는 모든 코드를 제거하는 것입니다 ... 🤔

BufferGeometryUtils.computeTangents() 현재 인덱스가 필요하므로 코어에서 사용할 수 없습니다. 그러나 three.js 가 MIKKTSpace에 따라 어떤 지점에서 탄젠트를 생성 한 다음 perturbNormal2Arb() 제거하는 것이 바람직하다고 생각합니다.

@WestLangley 는 다음

이는 모든 내장 형상에 올바른 접선을 추가하는 것을 의미합니다.

마음을 바꾸는 중 ... 접선이 반드시 필요한 것은 아닙니다. 대신, BufferGeometry.computeTangents() 메서드를 복원하고 분석적으로 정확한 접선을 설정할 수있는 모든 내장 지오메트리에 대해 해당 메서드를 "재정의"합니다.

//

또 다른 해결책은 엔진에서 BufferGeometryUtils.computeTangents ()가 제공되지 않을 때 자동으로 호출하고 조각 셰이더에서 탄젠트를 계산하는 모든 코드를 제거하는 것입니다.

저에게 맞는 것 같습니다.

BufferGeometryUtils.computeTangents ()는 현재 인덱스가 필요하므로 코어에서 사용할 수 없습니다.

쉽게 고칠 수 있다고 생각합니다. 그리고 https://github.com/mrdoob/three.js/issues/17804#issuecomment -557135610을 지원하도록 수정해야합니다.

three.js가 어떤 지점에서 MIKKTSpace에 따라 탄젠트를 생성 한 다음 perturbNormal2Arb ()를 제거 할 수 있다면 더 좋을 것입니다.

MikkTSpace가 반드시 프래그먼트 쉐이더 계산을 대체해야하는지 모르겠습니다. 셰이더는 성능 비용이 거의 없으며 대부분의 모델에서 잘 작동합니다. 접선을 미리 계산하면 매번 정점 당 선행 비용이 발생하며 이러한 특정 경우를 제외하고는 이점이 없습니다. 😕 glTF 사양에 명시된 내용에도 불구하고 기본적으로이를 정당화하는 데 어려움을 겪고 있습니다.

BufferGeometryUtils.computeTangents 가 MikkTSpace 접근 방식을 구현할 수 있다면 좋을 것입니다. 미리 계산해야한다면 이것이 최고의 알고리즘입니다. 그러나 기존의 기본 구현을 사용할 수있는 glTF-Pipeline 또는 gltfpack과 같은 도구에 MikkTSpace를 넣고 오프라인에서 미리 계산을 수행하는 것이 더 쉬울 것입니다.

뿡뿡

하지만 <model-viewer> 사용 사례에서 사용자가 Adreno GPU를 가지고 있는지 알 수있는 신뢰할 수있는 방법이 없다고 생각하지만 올바르게 보이길 원합니다 (https : // github. com / GoogleWebComponents / model-viewer / issues / 740).

접선이 제공되지 않을 때 <model-viewer> (및 x-gpu 지원을 원하는 다른 프로젝트)에서 BufferGeometryUtils.computeTangents 호출해야합니까? 아니면 3 개를 사용해야합니까?

헉헉

하하,이 바퀴가 어디에서 왔는지 방금 깨달았습니다 😁

https://bumbleride.com/products/era?variant=20719969599599

@mrdoob 🕵

이제 해결 방법을 되돌릴 수 있습니다.