Three.js: Facebook 뷰어와 호환되는 GLTFExporter GLB

/핑 @zellski

이봐! 네, 그 RGBA 체크는 2주 안에 사라질 것입니다. 그 문제를 해결하지 마십시오. :)

WaltHead.obj 를 glb로 변환하려고 합니다. https://threejs.org/editor/ 에서 로드하고 거기에서 GLB로 내보내고 있습니다(이미 최신 패치가 있어야 함).

다음은 WaltHead.glb 이며 이것이 Facebook의 유효성 검사기에서 얻은 것입니다.

Your GLB File has the following errors: The 3D model could not be posted: The JSON portion of this model file is invalid.

🤔

구문상 유효한 JSON이지만 WaltHead.gltf의 이 스니펫에 있는 null은 유형 스키마를 따르지 않습니다.

    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 48480,
      "max": [
        null,
        null
      ],
      "min": [
        null,
        null
      ],
      "type": "VEC2"
    }

Khronos glTF 유효성 검사기 도구는 또한 파일에 있는 다른 오류의 약 10,000개 인스턴스도 모두 다음 순서로 나열합니다.

        /accessors/2: Accessor element at index 28922 is NaN or Infinity.

따라서 glTF 내보내기 중에 색인으로 채워지기 위해 접근자가 생성되지만 실제로는 수신하지 않는 것 같습니다.

UV는 NaN: 🙃

@mrdoob @donmccurdy 수정했습니다! https://github.com/mrdoob/three.js/pull/13400
비록 우리가 그 예를 보여드릴 수는 없지만

[msg] => Mesh primitives without indices are (temporary) unsupported.

(할 일 목록에 추가됨)

@zellski 그 기능에 대한 평가가 있습니까? ;)

@fernandojsg 이것은 조금 더 까다롭습니다. 해결되겠지만 시간이 조금 더 걸릴 수 있습니다. tl;dr 아마도 한 달?

더 긴 설명: 문제는 뒤처지는 것이 우리 클라이언트 구현이고 백엔드의 검증자가 아직 처리할 수 없는 모델로부터 보호한다는 점에서 위의 정점 색상과 유사합니다.

분명히 우리는 인덱스되지 않은 지오메트리를 지원해야 합니다. 빠를수록 좋습니다. 이상적으로는 클라이언트에 있지만 그때쯤이면 개별 클라이언트의 필요에 따라 업로드된 모든 .gltf를 지연/주문형으로 변환하는 전체 Death Star 성능까지 백엔드 코드가 있어야 합니다. 그 시점에서 우리는 클라이언트의 편의를 위해 서버에 인덱스된 지오메트리를 생성하는 것과 같은 멋진 일을 할 수 있습니다.

three.js가 런타임 표현에서 자연스럽게 인덱싱되지 않은 프리미티브를 내보내려고 할 때 위의 오류가 발생한다고 가정합니까?

three.js가 런타임 표현에서 자연스럽게 인덱싱되지 않은 프리미티브를 내보내려고 할 때 위의 오류가 발생한다고 가정합니까?

@zellski 그렇군요 ! 3에 로드된 일부 프리미티브 또는 객체는 인덱싱되지 않습니다. facebook glb 로더에 대해 내가 생각한 첫 번째 사용 사례는 A-Painter 앱 의 그림을 포함하는 것이었고(자세한 정보: https://blog.mozvr.com/tag/a-painter/) 거기에서 인덱스되지 않은 지오메트리를 사용합니다. 너무, 그래서 그것을 지원하는 것이 좋을 것입니다 ;)
나는 그것이 로드맵에 있는지 알고 싶었습니다. 그래서 그것이 그것이고 우리가 약 한 달 안에 그것을 가질 수 있다는 것을 아는 것은 합리적 이상입니다 ;) 그 정보를 공유해 주셔서 감사합니다!

그 동안 (0, 1, 2, 3, 4, 5, 6, 7, 8, ...에서와 같이) 멍청한 인덱스 속성을 추가해야 할 수도 있습니다. 😕

@mrdoob 인덱스가 아닌 것을 원하는 대로 인덱스로 변환하는 방법이 있다는 뜻

예, 수출국에 임시 해킹을 추가하십시오 ...

잘 모르겠습니다. 사람들에게 "오? 당신의 모델이 페이스북에서 작동하지 않습니까? 그 이유는... 색인된 도형이 무엇인지 아십니까? 네, 그러면 안 됩니다. ..."

그래 알았다! 좋아, 그렇게 더럽지 않은 해킹을 추가할 수 있는지 살펴보겠습니다. :)

컨텍스트에 대한 @zellski ...

이 GLTFExporter 를 사용하는 http://threejs.org/editor/ 에 Export GLB 를 추가했습니다.

동영상: Three.js 편집기에서 모델을 glTF로 내보내는 방법 :D

https://twitter.com/superhoge/status/966689549803053056

저를 믿으십시오. 해킹을 추가하는 것을 꺼리는 것을 이해합니다. 우리가 출시한 지금 참을성 있는 관점을 유지하는 것은 꽤 힘든 일입니다...

http://threejs.org/editor/ 에서는 사용되지만 다른 곳에서는 사용되지 않는 포크에서 GLTFExporter를 해킹할 수 있습니까? 나는 우리가 r91이 나올 때까지 이 결함을 수정하기를 바랍니다. 그래서 여러분이 이에 대해 신중하고 책임감 있는 코드를 작성하는 것은 약간 무의미해 보입니다.

http://threejs.org/editor/ 에서는 사용되지만 다른 곳에서는 사용되지 않는 포크에서 GLTFExporter를 해킹할 수 있습니까?

네, 걱정 마세요!

r91이 나올 때까지 이 결함을 수정했으면 합니다.

아, ~3월 1일 발매를 목표로 하고 있습니다. 적절한 월 릴리스를 갖기 위해 릴리스 주기를 월초로 변경했습니다.

어쨌든 이것을 홍보하기 전에 추가할 기능이 더 있는 것 같습니다. 러프니스, 메탈릭, 노멀 또는 알파 맵을 내보내고 있다고 생각하지 않습니다.

2개의 확산 맵을 사용하는 최신 테스트, 구름 중 하나는 투명한 png:
https://www.facebook.com/fakemrdoob/posts/950266411809572

명백한 alphaTest: 0.5 이 어디에서 오는지 확실하지 않습니다...

인덱스에 대한 해결 방법을 사용하기만 하면 됩니다. :)
https://www.facebook.com/fernandojsg/posts/10156405595122044

거기 우리가 간다 https://github.com/mrdoob/three.js/pull/13410

@mrdoob 이 문제에 대한 Facebook 요구 사항과 관련이 없는 누락된 기능을 추가 https://github.com/mrdoob/three.js/issues/11951
상태를 업데이트해야 하지만 😇

잘 들린다. 내보내기 및 편집기로 다시 드래그하여 테스트합니다.
이걸 닫아야 하나?

@mrdoob 꼭짓점 색상에 대한 RGB 대 RGBA 문제가 Facebook 측에서 해결될 때까지 열어 두겠습니다. 따라서 사람들이 여기에 도움을 요청하면 다른 문제를 여는 대신 해당 문제에 대해 읽을 수 있습니다.

Btw 방금 유용한 정보가 있는 이 링크를 찾았습니다. https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials

분명히 텍스처는 2의 거듭 제곱이어야합니다 ...
https://twitter.com/drupalati/status/967486854630055936

Three.js는 이미지를 2의 거듭제곱이 아닌 이미지를 즉석에서 2의 거듭제곱으로 자동 변환하지 않습니까?

네 죄송합니다. 모바일 클라이언트는 아직 크기가 조정되지 않으므로 잠시 동안 유효성 검사 중에 거부해야 합니다. 전달 파이프라인을 완전히 제어할 수 있으므로 서버에서 크기 조정을 수행할 것입니다. 이 제한도 2-3주 안에 해제되기를 바랍니다.

@takahirox 예, three.js는 즉석에서 크기가 조정됩니다. 그러나 Facebook의 기본 클라이언트는 three.js를 사용하지 않습니다.

Facebook이 아직 지원하지 않는 glTF 기능의 전체 목록(대략적인 ETA 순서):

• RGB 정점 색상이 없습니다. RGBA여야 합니다.
• 특정 클램핑/필터 조합에 대한 NPOT 텍스처 없음
• 인덱싱된 삼각형 지오메트리만.
• 애니메이션 없음(조용히 무시됨)
• 희소 접근자 없음(검증 실패)
• 모프 타겟 없음(메쉬에 'target' 속성이 있는 경우 모델이 유효성 검사에 실패함)
• 카메라 없음(조용히 무시됨)(현재)

또한:

• 최대 파일 크기 3MB
• 4096보다 큰 텍스처 치수 없음
• KHR_material_unlit 이외의 확장 없음(현재)

그게 다야.

포스 POT 텍스처용으로 PR #13424를 만들었습니다. FB용으로만 사용하는 것이 아니라 가치가 있다고 생각하기 때문입니다.

GLTFExporter를 사용하여 다중 재료 메시(재료 배열)를 내보낼 때 다음 오류가 발생했습니다.

GLTFExporter.js:623 Uncaught TypeError: Cannot read property 'toArray' of undefined
    at processMaterial (GLTFExporter.js:623)

@Ben-Mack 그것은 알려진 문제이며 지금 작업 중입니다. (하지만 시간이 조금 걸릴 것입니다).

@zellski fb에서

@webprofusion-chrisc(전화 키보드의 경우 @가 긴 사람) 예, Draco는 로드맵에 가장 확실하게 포함되어 있습니다. 상당한 엔지니어링 작업이 필요하므로 적어도 한 달은 걸릴 수 있지만 — 여러 면에서 이에 대한 가정을 구축했습니다 — 귀하가 말했듯이 많은 모델에서 3MB 제한은 단순히 지지할 수 없습니다. (아직도 우리가 텍스처에 대해 무엇을 할 수 있는지 잘 모르겠습니다.)

(아직도 우리가 텍스처에 대해 무엇을 할 수 있는지 잘 모르겠습니다.)

@donmccurdy 는 그 면에서 약간의 진전을 이루고 있습니다: https://github.com/mrdoob/three.js/pull/12877 😀

#12877을 사용하여 GLTFExporter에서 25-30% 더 작은 텍스처를 기대할 수 있습니다.

장기적으로 Binomial은 Khronos와 협력하여 glTF에서 플랫폼 간 압축 텍스처에 대한 확장을 생성합니다: https://www.khronos.org/blog/call-for-participation-gltf-creating-a-compressed-texture-extension .

좋아요... #12877 및 #13451 이후에 3.3MB였던 GLB 내보내기가 이제 480KB입니다 😊

멋있는! #13451은 jpg를 png로 변환하면 이미지 파일 크기가 더 커진다는 뜻인가요?

멋있는! #13451은 jpg를 png로 변환하면 이미지 파일 크기가 더 커진다는 뜻인가요?

예. #13451은 편집기가 현재 텍스처 형식 변경을 허용하지 않기 때문에 약간의 해결 방법입니다. 하지만 우리는 어쨌든 도서관에서 똑같은 일을 합니다...

https://github.com/mrdoob/three.js/blob/dev/src/loaders/TextureLoader.js#L34

하지만 예, GLTFExpoter 현재 texture.format === THREE.RGBFormat 때 jpg로 저장됩니다.

https://github.com/mrdoob/three.js/blob/dev/examples/js/exporters/GLTFExporter.js#L493

jpg를 다시 압축하기 때문에 어느 쪽이 이상적이지는 않습니다... 하지만 크기가 큰 내보내기보다 더 나은 것 같습니까?

RGBA 이미지의 알파 값을 실제로 검사하는 코드를 FBX2glTF에 추가해야 했습니다. 사람(또는 더 정확하게는 사람의 도구)이 기본적으로 생성하고 PNG로 유지하는 것이 완전히 불필요하기 때문입니다. 가장 잔인한 GPU 지원, 비선형 최적화 PNG 크런처를 시도한 후에도 JPEG가 실제로 보금자리를 지배하는 것 같습니다... 크기 차이는 꽤 굉장합니다!

각 구성 요소가 다른 구성 요소의 데이터와 완전히 독립적인 데이터를 전달하는 ORM 텍스처(폐색/거칠기/금속)와 같은 것에 대한 채널 간 블리드가 약간 걱정되지만 실제로는 잘 작동하는 것 같습니다.

내보내기는 canvas.toDataURL( mimeType )을 사용할 때 품질 수준을 선택 사항으로 만들 수도 있습니다. 내 텍스처는 런타임에 합성 이미지에서 생성되므로 이것도 도움이 됩니다.

fb의 파이프라인/뷰어를 위한 @zellski 스케치팹 처럼 저해상도 텍스처 버전을 제공한 다음 고해상도 텍스처를 스트리밍하고 로드할 때 모델에서 교체할 수 있다고 생각합니다. 작은 작업은 아니지만 할 수 있습니다.

@webprofusion-chrisc 예, 결국 그렇게 할 수 있습니다. 현재로서는 선택적 LOD 유형 스트리밍과 결합하기 어려운 .glb를 전송된 엔터티로 사용했습니다(임의 액세스가 없는 단일 순차 파일만 있기 때문에). 하지만 상황에 따라 기본적인 가정을 꽤 자주 재평가할 것으로 예상합니다. :)

GLTFExporter는 BufferGeometry 를 내보내고 Facebook으로 가져올 수 있습니다. 그러나 fromGeometry 메서드를 사용하여 변환된 Geometry 또는 BufferGeometry fromGeometry 는 Facebook에서 작동하지 않습니다. 나는 항상 이것을 FB 유효성 검사기에서 받습니다.

[msg] => RGB 유형의 정점 COLOR_0 속성은 (일시적으로) 지원되지 않습니다. RGBA여야 합니다.

재현 단계:

• misc_exporter_gltf 최신 개발 예제를 사용하면 FB에서 Sphere 또는 Walthead 내보내기가 제대로 작동하지만 export Scene1 결과를 FB로 가져올 수 없습니다.

이것은 일부 예상된 동작이며 FB 측을 기다려야 합니까?

fromGeometry 를 사용하는 BufferGeometry가 일반 BufferGeometry처럼 정상적으로 작동할 것으로 예상했습니다. 이 문제를 극복하기 위한 몇 가지 빠른 수정 사항을 안내해 주세요.

@Ben-Mack 이것은 @zellski -> https://github.com/mrdoob/three.js/issues/13397#issuecomment -367534958에 따라 다음 주에 수정되어야 할 사항입니다.

기본 FB 앱의 빌드 161 이상(현재 App Store 버전은 160)에서는 더 이상 충돌이 발생하지 않으며 이 유효성 검사를 제거합니다. 나는 이것이 일주일 안에 일어날 것으로 예상한다.

@zellski 굉장합니다! 감사 해요 :)

궁금하지만...

THREE.GLTFExporter 가 THREE.Geometry 내보낼 수 없는 "진짜" 이유는 THREE.Geometry 를 THREE.BufferGeometry 로 변환할 때 color 대부분의 경우 0으로 가득 찬 속성입니다.

따라서 한 가지 "솔루션"(및 최적화)은 material.vertexColors 가 THREE.NoColors 설정된 경우 material.vertexColors color 속성을 내보내지 않는 것입니다.

Ops 나는 그것을 몰랐습니다 :D 그것은 반드시해야 할 최적화입니다 :D

@fernandojsg 업데이트해주셔서 감사합니다. 감사합니다. 추가할 가치가 있는 두 가지가 더 있습니다.

1. 다중 재료 메쉬 지원. Mesh.material 의 기하 구조 및 배열에 그룹이 있는 항목 - 현재 제대로 내보낼 수 없습니다.
2. 유일하게 지원되는 MeshStandardMaterial과 Facebook에 있는 결과 간의 호환성이 향상되었습니다. 지금까지 금속 및 확산 표면은 three.js와 Facebook에서 상당히 다르게 보입니다. 언젠가 특별한 "Facebook" 자료를 갖게 될까요?

감사합니다

@ov 나는 둘 다 r91 주변에서 수정될 가능성이 있다고 생각합니다.

1. 다중 재료 내보내기 https://github.com/mrdoob/three.js/pull/13536
2. 금속/거칠기 수정 https://github.com/mrdoob/three.js/pull/13501

Facebook의 자료가 아직 정확하지 않을 수도 있지만 glTF는 사물이 어떻게 나타나야 하는지에 대해 매우 구체적이므로 결국 수렴해야 합니다.

오, KHR_materials_unlit 내보내기 기능도 추가해야 합니다...

편집: https://github.com/mrdoob/three.js/pull/13566 열림

THREE.GLTFExporter가 THREE.Geometry를 내보낼 수 없는 "진짜" 이유는 THREE.Geometry를 THREE.BufferGeometry로 변환할 때 대부분의 경우 0으로 가득 찬 색상 속성을 생성하기 때문입니다.

따라서 한 가지 "솔루션"(및 최적화)은 material.vertexColors가 THREE.NoColors로 설정된 경우 색상 속성을 내보내지 않는 것입니다.

+1 이것이 곧 수정되기를 바랍니다. 여전히 THREE.Geometry 기반으로 작동하는 Three.js용 라이브러리가 많이 있습니다.

(FB에 THREE.Geometry 오류가 여전히 있습니다. ...must be RGBA THREE.Geometry )

@Ben-Mack, 아직도 Geometry를 사용하는 라이브러리는 무엇입니까? 아마도 소유자와 협력하여 업데이트할 수 있습니다.

@looeee 이 라이브러리를 살펴보십시오: https://github.com/a-jie/threejs-geometry-modifiers

안녕하세요 여러분 -- 오늘 아침부터 Facebook은 더 이상 RGB(VEC3) 정점 색상을 "유효하지 않은" 것으로 거부하지 않습니다.

2의 거듭제곱 텍스처 요구 사항은 잠시 동안 남아 있지만 저도 이에 대해 작업 중입니다.

@zellski 멋지다 ! :) 나는 화가를 완벽하게 지원하기 위해 매우 가깝습니다 :D 나머지 기본 모드를 구현할 계획이 있습니까? 지금은 TRIANGLE만 지원된다고 생각합니다. 나머지를 지원하는 것이 좋을 수 있습니다. 예를 들어 A-painter에서 공간을 절약하기 위해 TRIANGLE_STRIP을 사용하고 있습니다 👼

구현하지 않는 것은 미친 짓이겠죠? 이상적으로는 모든 유효한 glTF가 허용되어야 합니다. 하지만 그 작업의 우선 순위가 어떻게 될지는 모르겠습니다. 우리는 강한 충동을 가진 작은 팀입니다. :)

이제 이 문제를 닫을 수 있습니까?