search

google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.85k stars 809 forks source link

Exported Model not working in AR mode #887

Closed MaartenBreeedveld closed 4 years ago

MaartenBreeedveld commented 4 years ago

I'm trying to load a model that was exported using THREE.JS It loads fine in the browser but throws an error once I go into AR mode.

I'm using the GLTFExporter embedded in the NPM package (three/examples/jsm/exporters/GLTFExporter).

I've tested my exported result on sandbox.babylonjs.com and it loads just fine.

The exporter from 3ds max works fine, but I've noticed that the astronaut model was exported using THREE.GLTFExporter (see below @ generator).

{ "uri": "Astronaut%20(2).glb", "mimeType": "model/gltf-binary", "validatorVersion": "2.0.0-dev.2.7", "validatedAt": "2019-11-13T08:53:56.905Z", "issues": { "numErrors": 0, "numWarnings": 0, "numInfos": 0, "numHints": 0, "messages": [], "truncated": false }, "info": { "version": "2.0", "generator": "THREE.GLTFExporter", "resources": [ { "pointer": "/buffers/0", "mimeType": "application/gltf-buffer", "storage": "glb", "byteLength": 2867404 }, { "pointer": "/images/0", "mimeType": "image/png", "storage": "bufferView", "image": { "width": 2048, "height": 2048, "format": "RGBA", "bits": 8 } } ], "hasAnimations": false, "hasMaterials": true, "hasMorphTargets": false, "hasSkins": false, "hasTextures": true, "hasDefaultScene": true, "primitivesCount": 1, "maxAttributesUsed": 3 } }

I wonder: Where any special parameters used for the astronaut export?

Live Demo

Working example export from 3ds max Not Working example export Obj from max loaded and exported from THREE JS

Browser Affected

Versions

I hope you guys can help!

AymericDVH commented 4 years ago

I have the same kind of issue : everything looks fine with the GLTF model (in all viewers) : I can see it and rotate it in the browser, but when i choose to see it in AR, it simply goes to the same viewer full page with no AR. I'm using Blender GLTF exporter. Is there any special parameters used for the astronaut model that allows AR?

cwervo commented 4 years ago

@AymericDVH are you seeing this on Android or iOS? The two AR modes are v different under the hood.

AymericDVH commented 4 years ago

Thank you @cwervo => I encounter the issue on Android. It works perfectly on iOS as I translated the GLTF into a USDZ file (with XCode) and setup the 'ios-src' option in the html page.

AymericDVH commented 4 years ago

Hi ! I found a solution by converting the GLTF in GLB using https://glb-packer.glitch.me/ The issue remains, but that's a convenient plan B ;)

MaartenBreeedveld commented 4 years ago

@AymericDVH This is no solution for me unfortunately. The default GLTFExporter also supports the exporting to GLB files. As far as I know the GLTF exporter from THREEJS is up to spec. Also, as I pointed out, the astronaut model used the THREE.GLTFExporter as wel...

@cwervo Do you have more ideas regarding the exporter?

cdata commented 4 years ago

@MaartenBreeedveld Can you try dropping the non-working model into the Khronos glTF Validator? https://github.khronos.org/glTF-Validator/

MaartenBreeedveld commented 4 years ago

@MaartenBreeedveld Can you try dropping the non-working model into the Khronos glTF Validator? https://github.khronos.org/glTF-Validator/

For the not working example this results in:

{
    "uri": "560b0796-391c-40b2-9361-c23a6786db12_5box_4three.glb",
    "mimeType": "model/gltf-binary",
    "validatorVersion": "2.0.0-dev.2.7",
    "validatedAt": "2019-11-16T07:32:44.408Z",
    "issues": {
        "numErrors": 0,
        "numWarnings": 0,
        "numInfos": 5,
        "numHints": 0,
        "messages": [
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/0/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/1/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/2/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/3/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/4/primitives/0/material"
            }
        ],
        "truncated": false
    },
    "info": {
        "version": "2.0",
        "generator": "GLTFExporter",
        "resources": [
            {
                "pointer": "/buffers/0",
                "mimeType": "application/gltf-buffer",
                "storage": "glb",
                "byteLength": 5760
            }
        ],
        "hasAnimations": false,
        "hasMaterials": true,
        "hasMorphTargets": false,
        "hasSkins": false,
        "hasTextures": false,
        "hasDefaultScene": true,
        "primitivesCount": 5,
        "maxAttributesUsed": 3
    }
}

Working example

{
    "uri": "82b362ea-4caf-46d0-b67c-edc37ac311f9_5box_4.glb",
    "mimeType": "model/gltf-binary",
    "validatorVersion": "2.0.0-dev.2.7",
    "validatedAt": "2019-11-16T07:35:48.881Z",
    "issues": {
        "numErrors": 0,
        "numWarnings": 0,
        "numInfos": 6,
        "numHints": 0,
        "messages": [
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/0/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/1/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/2/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/3/primitives/0/material"
            },
            {
                "code": "MESH_PRIMITIVE_UNUSED_TEXCOORD",
                "message": "Material does not use texture coordinates sets with indices (0).",
                "severity": 2,
                "pointer": "/meshes/4/primitives/0/material"
            },
            {
                "code": "NODE_EMPTY",
                "message": "Empty node encountered.",
                "severity": 2,
                "pointer": "/nodes/5"
            }
        ],
        "truncated": false
    },
    "info": {
        "version": "2.0",
        "generator": "babylon.js glTF exporter for 3dsmax 2018 v20191016.5",
        "resources": [
            {
                "pointer": "/buffers/0",
                "mimeType": "application/gltf-buffer",
                "storage": "glb",
                "byteLength": 6120
            }
        ],
        "hasAnimations": false,
        "hasMaterials": true,
        "hasMorphTargets": false,
        "hasSkins": false,
        "hasTextures": false,
        "hasDefaultScene": true,
        "primitivesCount": 5,
        "maxAttributesUsed": 3
    }
}

The following things differ meaningfully:

cdata commented 4 years ago

@MaartenBreeedveld thanks for checking that 👍 when you wrote:

It loads fine in the browser but throws an error once I go into AR mode.

Are you talking about AR mode on an Android device? Are you using the unstable-webxr flag?

Please also check the broken model in this tool: https://vr.google.com/scene-viewer-preview

If the model is also broken in Scene Viewer Preview, there may be a Scene Viewer bug. If you can drop the model in that previewer and share any debug information it shows you, that would be very helpful.

MaartenBreeedveld commented 4 years ago

@cdata Thanks for your answer. I'm not using the webxr flag The scene-viewer-preview shows the following error: 

viewer_embind.js:1 Error: Loader.tryLoad: Primitive had no indices
put_char @ viewer_embind.js:1
write @ viewer_embind.js:1
write @ viewer_embind.js:1
doWritev @ viewer_embind.js:1
_fd_write @ viewer_embind.js:1
(anonymous) @ wasm-00a57ce2-4145:1
(anonymous) @ wasm-00a57ce2-2270:1
(anonymous) @ wasm-00a57ce2-4133:1
(anonymous) @ wasm-00a57ce2-2829:1
(anonymous) @ wasm-00a57ce2-1388:1
(anonymous) @ wasm-00a57ce2-1829:1
(anonymous) @ wasm-00a57ce2-548:1
(anonymous) @ wasm-00a57ce2-7846:1
(anonymous) @ wasm-00a57ce2-5544:1
(anonymous) @ wasm-00a57ce2-1916:1
(anonymous) @ wasm-00a57ce2-3644:1
Module.dynCall_iiii @ viewer_embind.js:1
dynCall_iiii_85 @ VM1098:2
Loader$tryLoad @ VM1163:7
ar.sceneform.viewer.Viewer.finishLoad_ @ compiled.js:386
(anonymous) @ compiled.js:383
load (async)
ar.sceneform.viewer.Viewer.loadModel @ compiled.js:382
ar.sceneform.viewer.Viewer.canvasDrop_ @ compiled.js:384
(anonymous) @ compiled.js:368

So here's the solution for me, adding this to the exporter options fixed the problem. Thanks for the link to the tool @cdata!

    const options: GLTFExporterOptions = {
      binary: true,
      forcePowerOfTwoTextures: true,
      forceIndices: true
    };

This issue can be closed

cdata commented 4 years ago

@MaartenBreeedveld thanks for trying that out. That will be useful for us if we add built-in support for exporting a glTF from the <model-viewer> element 🙌