Passing blob into model-viewer src, webxr errors

[ZackARC-solutions]

Description

I have a threejs scene I export on button click, this exported glb is passed as a blob to the src of my model-viewer.

function AR() { // modelViewer = document.getElementById("ar-viewer"); exporter = new THREE.GLTFExporter(); exporter.parse( group, function (gltf) { var Url = saveArrayBuffer(gltf, "scene.glb"); modelViewer.setAttribute("src", Url); setTimeout(() => { URL.revokeObjectURL(Url); }, 2000); }, { binary: true } ); console.log(exporter); }
function saveArrayBuffer(buffer, filename) { const blob = new Blob([buffer], { type: "application/octet-stream" }); const url = URL.createObjectURL(blob); return url; }

This works perfectly for iOS and has worked for webxr (scene-viewer won't accept a blob). However, I now receive an error on my Samsung S20Plus with Android 12:

I have used the same model with a hardcoded src and it works fine, so the issue is passing the blob.

Live Demo

https://arc-solutions.co.uk/fit-show/
Press the AR button on the right once it has loaded.

Version

• model-viewer: v1.12.0

Browser Affected

• Chrome, version: 104.0.5112.97
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[elalish]

So, I'd bet this is an async issue. WebXR has always required "user activation": basically you can't just have JS start a WebXR session, there has to be a user click that caused it. The trick is, that's slightly heuristic on Chrome's side. If they click something and you immediately start WebXR (like when you have a hardcoded src), then it's all fine. If you click, then wait a while for the scene to export, and then start WebXR, it may have taken long enough that your click doesn't count anymore.

I think there are a number of ways around this. You might just put in a dummy src, then on click, start WebXR first and then do your scene export and src swap in the background.

[ZackARC-solutions]

Putting a 'dummy src' loading model seems to work, thanks for your help!

[HannesAnWang]

does it work really? I use two glb url. The first one is a real glb src, and the second url is blob url. But it only show the first glb.

[elalish]

@HannesAnWang are you actually talking about the same issue as above? If not, you might be better off filing a new discussion with a repro link and screenshot.

[adrianposteuca]

Hi @ZackARC-solutions You have a beautiful setting on glass. Can you share with me what your values are on PBR glass material? it looks looks realistic

[ZackARC-solutions]

Thank you!
materials[i].roughness = 0.1; materials[i].opacity = 0.05; materials[i].color.set(0xffffff);

Is currently what I have set