Three.js: GLTFExporter GLB 与 Facebook 查看器兼容

/ping @zellski

嘿！ 是的，RGBA 检查应该在两周内消失。 不要解决它。 :)

我正在尝试将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 中的这个片段中的空值不符合类型模式：

    {
      "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。 在这一点上，我们可以做一些很酷的事情，比如为了我们的客户的方便，在服务器上创建索引几何。

我假设当three.js试图导出在其运行时表示中自然没有索引的原语时会出现上述错误？

我假设当three.js试图导出在其运行时表示中自然没有索引的原语时会出现上述错误？

@zellski就是这样！ 加载在三个上的一些基元或对象是非索引的。 我为 facebook glb 加载器想到的第一个用例是包含来自我们A-Painter 应用程序的绘图（更多信息：https://blog.mozvr.com/tag/a-painter/），我们在那里使用非索引几何也一样，所以能得到支持会很棒;)
我只是想知道这是否在路线图上，所以知道是这样，我们可以在大约一个月内完成，这是非常合理的 ;) 感谢分享这些信息！

与此同时，我们可能不得不添加一个愚蠢的索引属性（如 0, 1, 2, 3, 4, 5, 6, 7, 8, ...）😕

@mrdoob你的意思是有一些方法可以根据需要将非索引转换为索引，还是直接在导出器上添加 hack？

是的，在导出器中添加一个时间黑客......

我不知道，我只是想让东西起作用，而不必告诉人们，“哦？你的模型在 Facebook 上不起作用？那是因为……你知道索引几何是什么？是的，你不应该但是……”

是的，我明白了！ 好的，我会看看是否可以添加一些不那么脏的 hack :)

@zellski上下文...

我在http://threejs.org/editor/中添加了一个Export GLB使用这个GLTFExporter 。

视频：如何在 Three.js 编辑器上将模型导出为 glTF :D

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

相信我，我理解不愿意添加黑客。 既然我们已经推出了，要保持耐心的前景是相当困难的……

您能否在http://threejs.org/editor/ 中使用但不在其他地方使用的叉子中进行 GLTFExporter hack？ 我希望我们能在 r91 出来的时候修复这个缺陷，所以对于你们来说，为它编写仔细、负责任的代码似乎有点没有意义。

您能否在http://threejs.org/editor/ 中使用但不在其他地方使用的叉子中进行 GLTFExporter hack？

是的，不用担心！

我希望我们能在 r91 出来的时候修复这个缺陷

哦，我的目标是发布~3 月 1 日。 将发布周期更改为月初以进行适当的月份发布。

无论如何，在推广之前，我们似乎还有更多功能要添加。 我认为我们不会导出粗糙度、金属、法线或 alpha 贴图。

最新测试，使用 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 :
虽然我需要更新那里的状态😇

听起来不错。 我将通过导出并拖回编辑器进行测试。
我们应该关闭这个吗？

@mrdoob我会让它保持打开状态，直到顶点颜色的 RGB 与 RGBA 问题在 Facebook 方面得到解决，所以如果人们来这里寻求帮助，他们可以阅读它而不是打开另一个问题。

顺便说一句，我刚刚找到了一些有用信息的链接： https :

显然纹理需要是 2 的幂......
https://twitter.com/drupalati/status/967486854630055936

Three.js 不会自动将图像从非 2 的幂动态转换为 2 的幂吗？

是的，对不起。 移动客户端还没有调整大小，所以我们必须在验证期间拒绝它一段时间。 我们可能会在服务器上调整大小，因为我们可以完全控制交付管道。 我希望这个限制也能在 2-3 周内取消。

@takahirox是的，three.js 会即时调整大小。 但是 Facebook 的本地客户端不使用three.js。

Facebook 尚不支持的 glTF 功能的完整列表，按预计到达时间排序：

• 没有 RGB 顶点颜色； 必须是RGBA。
• 某些钳位/过滤器组合没有 NPOT 纹理
• 仅索引，三角形几何。
• 没有动画（被默默忽略）
• 没有稀疏访问器（验证失败）
• 没有变形目标（如果任何网格具有“目标”属性，则模型验证失败）
• 没有摄像头（被默默忽略）（暂时）

还：

• 最大文件大小 3 MB
• 没有大于 4096 的纹理尺寸
• 除了 KHR_material_unlit（暂时）之外没有扩展

我想就是这样。

我为 force 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 上支持 draco 的计划吗？ 我可以将我的网格从 40MB 减少到 5MB，但最后几个 MB 不会下降。

@webprofusion-chrisc（电话键盘很长@ 的人）是的，Draco 绝对在路线图上。 它需要相当多的工程工作，所以至少需要一个月的时间，但是——在很多方面，我们已经围绕它建立了我们的假设——正如你所说，对于许多模型来说，3 MB 的限制根本站不住脚。 （我仍然不确定我们可以为纹理做些什么。）

（我仍然不确定我们可以为纹理做些什么。）

@donmccurdy在这方面取得了一些进展： https :

我们可以期待使用 #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

但是是的，当texture.format === THREE.RGBFormat时， GLTFExpoter当前保存为 jpg 。

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

这并不理想，因为我们正在重新压缩 jpg ……但我猜比超大的导出更好？

我不得不向 FBX2glTF 添加代码，它实际上检查甚至 RGBA 图像的 alpha 值，因为人们（或者更准确地说，人们的工具）默认创建它们，而且通常完全没有必要将它们保留为 PNG。 即使在尝试了最残酷的支持 GPU、非线性优化的 PNG 处理器之后，JPEG 似乎真的占据了主导地位……大小差异非常令人难以置信！

我有点担心 ORM 纹理（遮挡/粗糙度/金属）之类的通道间出血，其中每个组件携带的数据完全独立于其他组件的数据......但实际上它似乎工作正常。

导出器还可以在使用 canvas.toDataURL( mimeType ) 时将质量级别设为可选——我的纹理是在运行时从合成图像生成的，这也有帮助。

@zellski用于 fb 的管道/查看器我猜你可以像 Sketchfab 一样提供低分辨率纹理版本，然后流式传输高分辨率/全分辨率纹理并在加载时在模型中替换它们。 不是一件小事，而是可以做的。

@webprofusion-chrisc 是的，我们最终可能会这样做。 目前，我们全力以赴将 .glb 作为传输实体，这很难与选择性 LOD 类型流相结合（因为只有一个没有随机访问的顺序文件）。 但我希望我们会经常重新评估基本假设，这取决于事情的进展。 :)

GLTFExporter 可以导出BufferGeometry并导入到 Facebook 中。 但是任何使用fromGeometry方法转换的Geometry或BufferGeometry在 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

从构建 161 和主 FB 应用程序的（当前 App Store 版本是 160）开始，这将不再是崩溃者，我们将删除此验证检查。 我希望这会在一周内发生。

@zellski太棒了！ 谢谢 ：）

虽然让我想知道...

THREE.GLTFExporter不能导出THREE.Geometry的“真正”原因是因为当我们将THREE.Geometry转换THREE.BufferGeometry我们正在创建一个color属性，在大多数情况下，全是零。

因此，如果material.vertexColors设置为THREE.NoColors ，则一个“解决方案”（和优化）将不导出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 时，我们正在创建一个颜色属性，在大多数情况下，该属性全为零。

因此，如果 material.vertexColors 设置为 THREE.NoColors，一个“解决方案”（和优化）将不导出颜色属性？

+1 希望这会很快得到解决。 Three.js 的许多库仍然基于THREE.Geometry 。

（FB 仍然有错误...must be RGBA和THREE.Geometry ）

@Ben-Mack，您使用的哪些库仍然使用 Geometry？ 也许我们可以与业主合作，让他们更新。

@looeee请看一下这个库： https :

大家好——从今天早上开始，Facebook 不再将 RGB (VEC3) 顶点颜色拒绝为“无效”。

两个纹理的幂次要求暂时保留，但我也在努力。

@zellski 酷！ :) 我非常接近完全支持 a-painter :D 有没有计划实现其余的原始模式？ 现在我相信只支持 TRIANGLE，支持其余部分可能会很棒，例如在 A-painter 中我们使用 TRIANGLE_STRIP 来节省一些空间👼

不实施它们会很疯狂，对吧？ 理想情况下，应接受所有有效的 glTF。 不过，我不知道如何优先考虑这项工作。 我们是一个有很多强烈冲动的小团队。 :)

我想这个问题现在可以关闭了吗？