Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement minimumRenderScale API #44

Closed
DanielusG opened this issue Sep 17, 2022 · 8 comments
Closed

Implement minimumRenderScale API #44

DanielusG opened this issue Sep 17, 2022 · 8 comments
Labels
enhancement New feature or request

Comments

@DanielusG
Copy link

I recently used this package in a flutter web application of mine, it works really well, only on all the mobile devices on which I tested my site, the render quality is really low. While on pc it displays correctly. As the documentation reports this is normal and is called Dynamic scaling (https://modelviewer.dev/examples/loading/#renderScale)

I would like to have it implemented in the package, but I would also just need to be able to do it manually somehow I tried some code with the relatedJS parameter, but in the console it would come up "Removing disallowed element <SCRIPT> from [object DocumentFragment]" whatever I wrote.

Could you give me suggestions on how to implement it manually?

Thank you very much for what you do :)
@DanielusG DanielusG added the enhancement New feature or request label Sep 17, 2022
@Foldblade
Copy link
Collaborator

Foldblade commented Sep 18, 2022 •
edited
Loading

Sorry for that. This is related with #43.

Because not all the elements are allowed in HtmlElementView, that's why Removing disallowed element <SCRIPT> from [object DocumentFragment] occured. By adding:

..allowElement('script',
          attributes: [
            'src',
            'type',
            'defer',
            'async',
            'crossorigin',
            'integrity',
            'nomodule',
            'nonce',
            'referrerpolicy'
          ],
          uriPolicy: _AllowUriPolicy())

to NodeValidatorBuilder.common() in lib\src\model_viewer_plus_web.dart should make <scripts> with listed attributes available.

As a temporary solution, in PR #45, I also added a new example: example/lib/loading/render_scale.dart.

I just have no idea about how to implement the Javascript method in Dart... It would be great if you can help! 🥺

@DanielusG
Copy link
Author

hello, thanks for the reply, I tried the example and on my smartphone the quality is still low, it's like model-viewer ignores the js script
this is a picture of how it looks on my smartphone:
Screenshot_2022-09-18-15-29-04-35_40deb401b9ffe8e1df2f1cc5ba480b12

Doing research yesterday I had already applied the solution to bypass script blocking, but I got the same results, ignore js commands.
If you can create a working code snippet that renders in high quality I can implement it in dart. I am waiting to hear from you :)

@DanielusG
Copy link
Author

the biggest mystery is that the model-viewer documentation snippet works fine on my phone and shows up in high quality. it seems to be just a problem with this library

@DanielusG
Copy link
Author

I found that by removing from assets/template.html
the content parameter the render becomes in high quality but the whole page becomes small as if it were in desktop mode can this workaround be combined with something?

what i have done is change the first line of the template.html file to:
<meta name="viewport" content="" />

@Foldblade
Copy link
Collaborator

Foldblade commented Sep 26, 2022 •
edited
Loading

I found that by removing from assets/template.html the content parameter the render becomes in high quality but the whole page becomes small as if it were in desktop mode can this workaround be combined with something?

what i have done is change the first line of the template.html file to: <meta name="viewport" content="" />

Sorry for the late reply.

Could you have a try, adding <meta name="viewport" content="width=device-width, initial-scale=1" /> to your web/index.html's <head> to see if this solve the problem?

@DanielusG
Copy link
Author

YES!!! the modification works perfectly, now on the devices can be seen in very good quality, thank you very much.
I specify that the only modification I made is the one you suggested, so I did not use the JavaScript script with the minimumRenderScale

thanks a lot for the help :)

@Foldblade
Copy link
Collaborator

You are welcome 😉

Foldblade added a commit to Foldblade/model_viewer_plus.dart that referenced this issue Dec 6, 2022
@Foldblade
omchiii#44
7427cb6
@Muhammad-Faizmf
Copy link

is there any way to disable scaling in AR mode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Foldblade @DanielusG @Muhammad-Faizmf