Hi all,
does babylonjs have settings so that objects in the scene don’t break on mobile devices?
I want to be like this:
It looks so perfect.
This my PG:
I open it on mobile device,
Hello! I opened your playground in my phone (Galaxy S21 Ultra) and it looks fine:
What do you see in your device? A screenshot would help.
Optimizing web graphics to mobile is a pretty broad and discussed area, there’s still a lot of experimentation going on. I recommend taking a look at the general scene optimization tips:
Optimizing Your Scene | Babylon.js Documentation (babylonjs.com)
especially the section on device ratio: Optimizing Your Scene | Babylon.js Documentation (babylonjs.com)
You can also create versions of your assets with a lower triangle count, check the user’s device and switch between versions based on it. Here are some more articles with tips, you can find more by googling “3D model optimization”:
3D model optimization for mobile devices – SaphireStudio
3D Model Optimization and Why It’s Critical for 3D Ecommerce (vntana.com)
2 Likes
Hi @carolhmj,
I made code to load the model in angular framework. it turns out that there is a fairly clear difference on mobile devices regarding the quality of the scene between using native javascript and angular.
wait a minute I will make the repository
this is sample code using native javascript:
and this using angular framework:
the difference will be visible if you open them simultaneously on mobile devices
Can you provide these codes on an online environment like CodeSandbox ( CodeSandbox: Online Code Editor and IDE for Rapid Web Development), JSFiddle ( JSFiddle - Code Playground) or Codepen ( CodePen: Online Code Editor and Front End Web Developer Community) so we can help you better?
2 Likes
I think the problem is not in the code. but because I’m using angular.
I don’t know why, but after I compared between angular and native javascript I see the difference on mobile devices.
can you explain why it happened? I realy dont understand.
why is the result when using babylonjs in angular and in native javascript different. the difference is visible on mobile devices
It may relate to meta viewport parameters and/or other CSS rules.
Check and compare HTML/CSS between your two versions.
2 Likes
1 Like
but can i use the viewport meta tag without compromising the quality of the scene ?
There is nothing bad in viewport itself so I don’t see any problems to use it if correctly (for example, at https://babylonpress.org/ with <meta name="viewport" content="width=device-width, initial-scale=1"> it works without any problems).
2 Likes
Yes you are right, I was too quick to conclude. 
turns out i just need to add property “adaptToDeviceRatio : true” to config on Engine
new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
disableWebGL2Support: false,
adaptToDeviceRatio : true
}
2 Likes