Aframe: Validated binary GLTF 2.0 file is not appearing in scene

Created on 4 Jan 2019 · 9Comments · Source: aframevr/aframe

Description: I am loading a validated binary gltf file into a simple scene, but it does not appear to be loaded in the page. I have tried adjusting the scale parameter, but that is not successful in loading the file (I have checked the inspector and the bounding box isn't showing, although the entity is listed).

I have, however, been able to get it running on a local webserver with all of the files in the same directory, but not when using the aframe.io mirror. I have created a glitch.com example page as an example which closely mirrors the code in the documentation (with an added box so I knew it was loading and rendering).

Code:
https://glitch.com/edit/#!/alert-wildcat

Sample page:
https://alert-wildcat.glitch.me

A-Frame Version: 0.8.2
Platform / Device: Firefox / Safari / Chrome
Reproducible Code Snippet or URL:

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene environment>
      <a-assets>
        <a-asset-item id="gltf" src="https://cdn.glitch.com/72bd45d2-a268-44a2-a146-317ea77fd23e%2Felmat.glb?1546403389737" ></a-asset-item>
      </a-assets>
      <a-entity gltf-model="#gltf" scale="0.01 0.01 0.01" position="-3 0 -5"></a-entity>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-entity camera wasd-controls look-controls></a-entity>
    </a-scene>
  </body>
</html>

GLTF:

{
  "scenes": [
    {
      "nodes": [
        0,
        1
      ]
    }
  ],
  "nodes": [
    {
      "mesh": 0
    },
    {
      "mesh": 1
    }
  ],
  "meshes": [
    {
      "primitives": [
        {
          "attributes": {
            "POSITION": 1,
            "TEXCOORD_0": 2
          },
          "indices": 0,
          "material": 0
        }
      ]
    },
    {
      "primitives": [
        {
          "attributes": {
            "POSITION": 3
          },
          "material": 1
        }
      ]
    }
  ],
  "buffers": [
    {
      "uri": "elmat.bin",
      "byteLength": 7171292
    }
  ],
  "images": [
    {
      "uri": "texture.png"
    }
  ],
  "bufferViews": [
    {
      "buffer": 0,
      "byteOffset": 0,
      "byteLength": 3840000,
      "target": 34963
    },
    {
      "buffer": 0,
      "byteOffset": 3840000,
      "byteLength": 1929612,
      "byteStride": 12,
      "target": 34962
    },
    {
      "buffer": 0,
      "byteOffset": 5769612,
      "byteLength": 1286408
    },
    {
      "buffer": 0,
      "byteOffset": 7056020,
      "byteLength": 115272
    }
  ],
  "accessors": [
    {
      "bufferView": 0,
      "byteOffset": 0,
      "componentType": 5125,
      "count": 960000,
      "type": "SCALAR",
      "max": [
        160800
      ],
      "min": [
        0
      ]
    },
    {
      "bufferView": 1,
      "byteOffset": 0,
      "componentType": 5126,
      "count": 160801,
      "type": "VEC3",
      "max": [
        401,
        26.7438983917236,
        401
      ],
      "min": [
        1,
        -58.0825958251953,
        1
      ]
    },
    {
      "bufferView": 2,
      "byteOffset": 0,
      "componentType": 5126,
      "count": 160801,
      "type": "VEC2",
      "max": [
        1,
        1
      ],
      "min": [
        0,
        0
      ]
    },
    {
      "bufferView": 3,
      "byteOffset": 0,
      "componentType": 5126,
      "count": 9606,
      "type": "VEC3",
      "max": [
        401,
        24.2907199859619,
        401
      ],
      "min": [
        1,
        -75.0478973388672,
        1
      ]
    }
  ],
  "textures": [
    {
      "source": 0
    }
  ],
  "materials": [
    {
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 0
        },
        "metallicFactor": 0,
        "roughnessFactor": 1
      }
    },
    {
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          0.19921875,
          0.19921875,
          0.19921875,
          1
        ],
        "metallicFactor": 0,
        "roughnessFactor": 1
      }
    }
  ],
  "asset": {
    "version": "2.0"
  }
}

Source

tylermorganwall

Most helpful comment

Actually, what you need is response-type="arraybuffer", which I believe is required when using glb binary in 0.8.2; I'm not sure it's still required with master, though.

https://humdrum-bobolink.glitch.me/

dsinni on 4 Jan 2019

👍2

All 9 comments

Maybe try adding crossorigin="anonymous" to the asset item.

dsinni on 4 Jan 2019

Actually, what you need is response-type="arraybuffer", which I believe is required when using glb binary in 0.8.2; I'm not sure it's still required with master, though.

https://humdrum-bobolink.glitch.me/

dsinni on 4 Jan 2019

👍2

Remove the query parameter from the URL. https://cdn.glitch.com/72bd45d2-a268-44a2-a146-317ea77fd23e%2Felmat.glb instead of https://cdn.glitch.com/72bd45d2-a268-44a2-a146-317ea77fd23e%2Felmat.glb?1546403389737

Not sure what you mean by aframe.io mirror.

dmarcos on 4 Jan 2019

@dsinni Thanks! I tried using master at one point with the same HTML, but still had this issue (so I assume it's still required).
@dmarcos I tried removing the query parameter, but the GLB file still doesn't load, so that's not the issue.

tylermorganwall on 4 Jan 2019

@tylermorganwall the model is rendering for me after removing the query parameter:

https://glitch.com/edit/#!/open-tendency?path=index.html:9:108

Turn the camera if you don’t see the model.

model

dmarcos on 4 Jan 2019

I figured out the issue: it worked on Glitch but not on my server due to Cloudflare's Rocket Loader, which was causing this warning:

"core:a-node:warn You are attempting to attach outside of an A-Frame scene. Append this element to <a-scene> instead. "

even though the HTML file was structured correctly. The glb (or gltf) file was being loaded, but I would have to go into the inspector and click "Clone entity" to get it to render. Turning rocket loader off for the script by adding:

<script data-cfasync="false" src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

fixed the issue and the page renders fine now.

So if anyone is having problems with gltf and glb files rendering and uses Cloudflare, this might be your issue.

tylermorganwall on 5 Jan 2019

Well, this is interesting: the gltf file is loading fine on mobile, but disappearing once I move into Cardboard VR mode _unless_ the box entity is also loaded. The visibility of the GLTF model seems to be determined by the box's visibility, and when the box is not in view the GLTF model disappears.

Mobile: iPhone 6S, iOS 12.0.1

@dmarcos Your version loads fine in on mobile in cardboard mode with the box (except the model disappears when I rotate the box off screen):

https://glitch.com/edit/#!/open-tendency
https://open-tendency.glitch.me

But without the box does not:

https://glitch.com/edit/#!/mountain-sagittarius
https://mountain-sagittarius.glitch.me

tylermorganwall on 5 Jan 2019

i have some issue load the GLTF also and i already googling for hours, it said components:gltf-model:warn Unexpected token < in JSON at position 0
i did what Documentation aframe said but still can't load my Model in gltf ,

and it said my model id not found on assets also

dikawai on 18 Apr 2019

@dikawai After switching to current A-Frame master branch, I had similar error on .glb file. Adding response-type="arraybuffer" on the a-asset-item got it loading. Thanks to @dsinni for the tip.