menu

๐Ÿ‘ฉโ€๐Ÿš€ <model-viewer>

Archive of discussions about <model-viewer>, now replaced by https://github.com/google/model-viewer/discussions

Channels
Team

Blurry models until clicked *IOS*

November 16, 2020 at 7:18pm

Blurry models until clicked *IOS*

November 16, 2020 at 7:18pm
Hello, Newbie here out of my depth playing with dev tools... My problem is once my model loads in, it goes blurry until it is interacted with. My website is a wix site and I used an iframe for my code. It seems to be blurry only with IOS, and It is the same on chrome and safari. Do you have any ideas what could be causing this? Here's a short demo video, thanks!

November 16, 2020 at 9:36pm
That's very interesting! Can you file this as a Github issue? I wonder if iOS is somehow limiting GPU resources for iframes that haven't been interacted with. You can get around it for now by setting minimumRenderScale to 1: https://modelviewer.dev/docs/#entrydocs-loading-staticProperties-minimumRenderScale
like-fill
1
  • reply
  • like
That's very interesting! Can you file this as a Github issue? I wonder if iOS is somehow limiting GPU resources for iframes that haven't been interacted with. You can get around it for now by setting minimumRenderScale to 1: https://modelviewer.dev/docs/#entrydocs-loading-staticProperties-minimumRenderScale
Thanks for the reply, I will file a Github for you. I tried adding MinimumRenderScale="1" and found no effect. have I entered the attribute correctly? heres my code:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script><style> model-viewer{ width: 100%; height: 100%; margin: 0 auto; --poster-color: transparent; }
</style>
</model-viewer>
Edited
  • reply
  • like
No, it's not an attribute, it's a static property. See the example link in the docs to see how to set them.
  • reply
  • like

November 17, 2020 at 12:20pm
No, it's not an attribute, it's a static property. See the example link in the docs to see how to set them.
Ok thanks for clearing that up. From what I can understand from the example link I presume I add this to my code before the first <model-viewer> element:
<script> ModelViewerElement = self.ModelViewerElement || {}; ModelViewerElement.MinimumRenderScale = '1'; </script>
Unfortunately no change
  • reply
  • like
Have you tried the other way from that example as well? This will definitely fix the problem, so you'll need to debug on the JS console a bit to ensure you've successfully set the property.
  • reply
  • like
Have you tried the other way from that example as well? This will definitely fix the problem, so you'll need to debug on the JS console a bit to ensure you've successfully set the property.
Thanks for your time. My console comes up with this error: https://prnt.sc/vkxwtt I'm guessing there's a basic mistake I have made
  • reply
  • like

November 18, 2020 at 9:59pm
Please help me anyone
  • reply
  • like

November 19, 2020 at 11:44pm
Hello I am happy to report that I have fixed my issue. My iframe needed this at the start of it: <meta name="viewport">
like-fill
1
  • reply
  • like