HTML <model> element does not render

Question

Created Jun ’23

Replies 6

Boosts 1

Views 1.2k

Participants 4

Hi, I'm trying to play with all the Web-related features mentioned in https://developer.apple.com/videos/play/wwdc2023/10279/ on visionOS simulator. While Quick Look and WebXR work as expected, adding a <model> element to my demo page does not result in anything rendered. I'm using this model from the developer page, and the simple HTML code below:

<body>
  <model style="width: 400px; height: 300px" interactive>
    <source src="models/sneaker.usdz" type="model/vnd.usdz+zip">
  </model>
  <div>aaa</div>
</body>

This would leave the 400x300 blank area before the <div>, with or without the type="model/vnd.usdz+zip" part. However the resource is loaded successfully according to the Inspector. And I did turn on the flags:

Any help would be much appreciated!

Boost

Answer 1

RalfYu OP

Jun ’23

If there is a demo page for this feature to work, e.g. in Safari tests, I would love to try it.

0

Answer 2

trusktr OP

Jul ’23

I can confirm, it doesn't work right now. With this example,

https://raw.githack.com/immersive-web/model-element/main/examples/index.html

in macOS M1 I get a blank rectangle:

and in visionOS I get the image fallback:

I do see that model.constructor is HTMLModelElement, and model.getCamera() eventually gives the error

Unhandled Promise Rejection: undefined

so the API is there, just not working yet It is experimental behind a flag, so the WebKit team may still be ironing out the details.

0

Answer 3

trusktr OP

Jul ’23

For reference in case the above example stops being available or changes, this example is permanently available since time of writing:

https://rawcdn.githack.com/immersive-web/model-element/ed579b5ad3fdca3bca2805e182624a23d367b534/examples/assets/FlightHelmet.usdz

0

Answer 4

RalfYu OP

Jul ’23

Thanks for the tryout and info!

0

Answer 5

kokode OP

Feb ’24

I get the same issue. Don't even get the image fallback on VisionOS with the flags enabled.

0

Answer 6

nathanv-j OP

Feb ’24

Same here, except the promise is forever pending

0