Three.js: Facebookビューアと互換性のあるGLTFExporterGLB

/ ping @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たぶん1ヶ月？

より長い説明：この問題は、クライアントの実装が遅れているという点で上記の頂点の色に似ており、バックエンドのバリデーターは、まだ処理できないモデルからそれらを保護しているだけです。

明らかに、インデックス付けされていないジオメトリをサポートする必要があります。 理想的にはクライアント上ですが、それまでに、個々のクライアントのニーズに応じて、アップロードされたすべての.gltfを遅延/オンデマンドで変換する完全なDeathStarパワーまでバックエンドコードを用意する必要があります。 その時点で、クライアントの便宜のためにサーバー上にインデックス付きジオメトリを作成するなどのクールなことができます。

上記のエラーは、three.jsがランタイム表現で自然にインデックス付けされていないプリミティブをエクスポートしようとしたときに発生すると思いますか？

上記のエラーは、three.jsがランタイム表現で自然にインデックス付けされていないプリミティブをエクスポートしようとしたときに発生すると思いますか？

@zellskiそれだけです！ 3つにロードされた一部のプリミティブまたはオブジェクトはインデックス付けされていません。 Facebookのglbローダーの最初のユースケースは、 A-Painterアプリ（詳細：https：//blog.mozvr.com/tag/a-painter/）からの描画を含めることであり、そこではインデックス付けされていないジオメトリを使用しますだから、それをサポートしてくれるといいですね;）
それがロードマップにあるかどうかを知りたかったので、それがそれであり、約1か月で入手できることを知ることは、合理的以上です;）その情報を共有してくれてありがとう！

その間にダムインデックス属性を追加する必要があるかもしれません（0、1、2、3、4、5、6、7、8、...のように）😕

@mrdoob必要に応じて、インデックス付けされていないものをインデックス付けされたものに変換する方法があるということですか、それともエクスポーターに直接ハックを追加するということですか？

ええ、エクスポーターに一時的なハックを追加します...

わからない、ただ機能させたいだけで、人々に「ああ？あなたのモデルはFacebookで機能しないのですか？それは...インデックス付きのジオメトリが何であるか知っているからですか？ええ、そうすべきではありませんが...」

ええ、わかりました！ さて、私はいくつかのそれほど汚くないハックを追加できるかどうかを見てみましょう:)

コンテキストの@zellski ..。

このGLTFExporterを使用するExport GLBをhttp://threejs.org/editor/に追加しました。

ビデオ：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つの拡散マップを使用した最新のテスト。雲の1つは透明な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見つけた不足している機能を追加してもhttps ：
そこでステータスを更新する必要がありますが😇

いいですね。 エクスポートしてエディターにドラッグして戻します。
これを閉じる必要がありますか？

@mrdoob Facebook側で頂点色のRGBとRGBAの問題が解決されるまで開いたままにしておきます。そのため、人々が助けを求めてここに来ると、別の問題を開く代わりにそれについて読むことができます。

ところで、私はちょうどいくつかの有用な情報でこのリンクを見つけました： https ：

どうやらテクスチャは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以外の拡張機能はありません（現時点では）

それだけだと思います。

FBだけでなく価値があると思うので、フォースPOTテクスチャー用にPR＃13424を作りました。

GLTFExporterを使用してマルチマテリアルメッシュ（マテリアルの配列）をエクスポートすると、次のエラーが発生しました：

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

@ Ben-Mackこれは既知の問題であり、現在取り組んでいます。 （しかし、少し時間がかかります）。

@zellski fbでのdracoサポートの計画はありますか？ メッシュを40MBから5MBまで下げることができますが、最後の数MBはドロップオフしません。

@ webprofusion-chrisc（電話のキーボードとしては長い@）はい、Dracoは間違いなくロードマップに載っています。 かなりのエンジニアリング作業が必要なので、少なくとも1か月はかかりますが、多くの点で、その周りに仮定を立てています。多くのモデルでは、3MBの制限は単純に受け入れられません。 （テクスチャで何ができるかはまだわかりません。）

（テクスチャで何ができるかはまだわかりません。）

@donmccurdyはその面でいくらかの進歩を遂げています：

＃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現在のjpgとして保存するときにtexture.format === THREE.RGBFormat 。

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

jpgを再圧縮しているので、これは理想的ではありません...しかし、特大のエクスポートよりも優れていると思いますか？

FBX2glTFにコードを追加して、RGBA画像のアルファ値を実際に検査する必要がありました。これは、人（より正確には人のツール）がデフォルトでアルファ値を作成し、PNGとして保持する必要がまったくないためです。 最も残忍なGPU対応の非線形最適化PNGクランチャーを試した後でも、JPEGがねぐらを本当に支配しているようです...サイズの違いはかなり信じられないほどです！

各コンポーネントが他のコンポーネントのデータから完全に独立したデータを運ぶORMテクスチャ（オクルージョン/ラフネス/メタル）のようなもののチャネル間ブリードについて少し心配しています...しかし実際にはそれはうまく機能しているようです。

エクスポータは、canvas.toDataURL（mimeType）を使用するときに品質レベルをオプションにすることもできます-私のテクスチャは実行時に合成画像から生成されます。これも役立ちます。

@zellski for fbのパイプライン/ビューアーsketchfabのように、低解像度のテクスチャバージョンを提供し、高解像度/フル解像度のテクスチャをストリーミングして、ロード時にモデルに置き換えることができると思います。 小さな仕事ではありませんが、実行可能です。

@ webprofusion-chriscはい、そうすることになるかもしれません。 現時点では、送信エンティティとして.glbをすべて使用していますが、これを選択的なLODタイプのストリーミングと組み合わせるのは困難です（ランダムアクセスのないシーケンシャルファイルが1つしかないため）。 しかし、状況に応じて、基本的な仮定を頻繁に再評価することを期待しています。 :)

GLTFExporterは、 BufferGeometryをエクスポートして、Facebookに正常にインポートできます。 ただし、メソッドfromGeometryを使用して変換されたGeometryまたはBufferGeometry fromGeometryは、Facebookでは機能しません。 私は常にこれをFBバリデーターで受け取ります：

[msg] =>タイプRGBの頂点COLOR_0属性は（一時的に）サポートされていません。 RGBAである必要があります。

再現する手順：

• 開発の最新のmisc_exporter_gltf例を使用すると、Export SphereまたはWaltheadはFBで正常に機能しますが、 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が作成されるためです。ほとんどの場合、ゼロでいっぱいの属性。

したがって、1つの「解決策」（および最適化）は、 material.vertexColorsがTHREE.NoColors設定されている場合、 color属性をエクスポートしないことです。

Ops私はそれを知りませんでした：Dそれは確かに必須の最適化です：D

@fernandojsg更新していただき、ありがとうございます。 追加する価値のあるものがさらに2つあります。

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 ：

THREE.GLTFExporterがTHREE.Geometryをエクスポートできない「本当の」理由は、THREE.GeometryをTHREE.BufferGeometryに変換すると、ほとんどの場合、ゼロでいっぱいの色属性が作成されるためです。

したがって、1つの「解決策」（および最適化）は、material.vertexColorsがTHREE.NoColorsに設定されている場合にcolor属性をエクスポートしないことです。

+1これがすぐに修正されることを願っています。 まだTHREE.Geometry基づいて実行しているThree.jsのライブラリがたくさんあります。

（FBはまだTHREE.Geometryエラー...must be RGBAを持っています）

@ Ben-Mack、まだジオメトリを使用しているライブラリを使用していますか？ おそらく、所有者と協力して更新することができます。

@looeeeこのライブラリをご覧ください： //github.com/a-jie/threejs-geometry-modifiers

みなさん、今朝の時点で、FacebookはRGB（VEC3）頂点の色を「無効」として拒否しなくなりました。

2の累乗のテクスチャ要件は今のところ残っていますが、私もそれに取り組んでいます。

@zellski coool！ :)私はa-painterを完全にサポートすることに非常に近いです：D残りのプリミティブモードを実装する計画はありますか？ 今のところ、TRIANGLEだけがサポートされていると思います。残りをサポートするのは素晴らしいことかもしれません。たとえば、A-painterでは、スペースを節約するためにTRIANGLE_STRIPを使用しています👼

それらを実装しないのはおかしいでしょう？ 理想的には、すべての有効なglTFを受け入れる必要があります。 ただし、その作業がどのように優先されるかはわかりません。 私たちは小さなチームであり、強い衝動がたくさんあります。 :)

この問題は解決できると思いますか？