Fer-AR Posted June 16, 2018 Share Posted June 16, 2018 Hi all. I am a very new user in Babylon (I started yesterday), and I already have a project running, but you can see some error in the .gltf model: https://alboenergy.com/ar/shampu-2.html My question: How can I eliminate the aliasing that appears in my model when it is loaded on phones and tablets? I will appreciate any help for this newbie. Thanks. Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 16, 2018 Share Posted June 16, 2018 @Fer-AR No anti aliasing issues on more than 8 devices and OS I have here to test. Even at high resolution. DB Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 16, 2018 Author Share Posted June 16, 2018 @dbawel Thanks for your help. I have problems to see it on Android (5-6) with all browsers installed. In PC's there are no problems. Everything looks good, but in my phones there is a "sawtooth" around the object (artifacts), which are annoying (edges with blinking, etc). I am using the Babylon exporter for 3DS Max 2017, and I have the same problems with .gltf and with .glb Q: Anyone else that visits the demo and can check it with their phones? https://alboenergy.com/ar/shampu-2.html Thanks. Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 16, 2018 Share Posted June 16, 2018 @Fer-AR Well here is the solution - increase the size of the texture, and export from Blender to .babylon format.. This should solve all your problems. Otherwise, here is a good solution. DB Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 16, 2018 Author Share Posted June 16, 2018 @dbawel Thanks for your help. I will test the 2 options, and comment on the result. Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 16, 2018 Author Share Posted June 16, 2018 @dbawel I have tried the 2nd option and I can not find an answer. I do not use Blender, and learn now is more time for me. Q: What is "increase the resolution of the texture" ...? In the Babylon exporter? The bitmap of the material in 3D Max? (it is a .jpg 2,000 x 2,000 px). If you say increase "the resolution" in 3Ds Max I do not know how to do it. My project in 3ds has no cameras or lights... Should I add them? I think that perhaps remove the background from the Babylon stage, or replace it with another image, but I do not know how to do it (I am a newbie in Babylon). Mmmm... Quote Link to comment Share on other sites More sharing options...
Sebavan Posted June 16, 2018 Share Posted June 16, 2018 You can try to setHardwareScalingLevel(0.5) on the engine: http://doc.babylonjs.com/api/classes/babylon.engine#sethardwarescalinglevel This happens mainly cause of the dpi of the screen so the window.devicePixelRatio is pretty high on phone. Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 17, 2018 Share Posted June 17, 2018 @Fer-AR 2-000 X 2000 is far too high for a texture. I would first avoid using the gtlf format and move to .babylon format. and @Sebavan has the first solution I was going to recommend. However, I'm revisiting the gtlf format, and thus far disappointed. DB The Blender exporter is a simple plugin to install. Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 17, 2018 Author Share Posted June 17, 2018 @dbawel @Sebavan Tomorrow I will publish my current html code here and ask for help with the script that Sebavan comment. I remember that I only have 24 hours of experience with Babylon, and I never touched its extra code, so it will help me a little bit. Thanks, again. Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 17, 2018 Share Posted June 17, 2018 @Fer-AR Make sure your code is in the Playground, so we can work with it. Cheers, DB Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 17, 2018 Author Share Posted June 17, 2018 @dbawel Thanks for the interest in helping me. I appreciate your knowledge and your time in this. I could not post it on playground.babylonjs.com ( I still do not know how to do). Here the .zip with the complete project (2.1Mb). https://goo.gl/TVnmDe ----------- Here are the other formats, exported from Babylon exporter for 3DS Max: Babylon: https://goo.gl/b7R3q9 GLB: https://goo.gl/mqyooQ And the 3DS Max file of the project: https://goo.gl/PQHZpi ----------- So, how should I use in my code what Sebavan has commented? And this is my current code: <!DOCTYPE html> <html lang="es" class="no-js"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="robots" content="noindex, nofollow"> <title itemprop=name>Shampu 2</title> <meta name="HandheldFriendly" content="True"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/> <style> html{width:100%;min-height:100%;margin:auto;top:0;left:0;padding:0;overflow:hidden} body {top:0;left:0;margin:0;padding:0;overflow:hidden} .nav-container{display:none !important} babylon{ width:100%; height:720px; /* NOTE: 1100px = Desktop /// 720 = For devices 640 x 480 DPR:2 /// 680 for iPhone 4-5 /// 790 = iPhone 7 plus */ margin:0 auto } canvas { width:100%; min-height:720px; /* NOTE: 1100px = Desktop /// 720 = For devices 640 x 480 DPR:2 /// 680 for iPhone 4-5 /// 790 = iPhone 7 plus */ } </style> </head> <body> <!--<babylon extends="minimal">--> <babylon> <model url="models/shampu.gltf"> <scaling x="1" y="1" z="1"></scaling> </model> <camera> <behaviors> <auto-rotate type="1"></auto-rotate> </behaviors> </camera> </babylon> <script src="js/viewer.js"></script> </body></html> Thanks Quote Link to comment Share on other sites More sharing options...
Nabroski Posted June 17, 2018 Share Posted June 17, 2018 @Fer-AR your CSS looks advencourus ? From this far way it looks like, the BabylonJS viewport don't get its size properly, not sure how the JS Code looks like, where CSS <babylon> and <canvas> gets passed. See here: https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html If you wan't to read, just look at the picutres, it's a blocky ( staircase effect like aliasing, but that's not the problem) looking line and same goes for 3D Models. download the example a *.zip here https://www.babylonjs-playground.com/#PN1NNI#1 then add more of your desigered functions, - my recomendation for new users ? Good Luck Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 18, 2018 Author Share Posted June 18, 2018 Hi @Nabroski Sounds great. I will go to study the links with the details. A pity that the Playground Site does not download the .ZIP (the system does not work). :( Thanks Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 18, 2018 Share Posted June 18, 2018 @Fer-AR After reviewing your scenes, @Nabroski is correct - of course he's incredibly brilliant and probably picked up the potential issues with the canvas in half the time I did. DB Fer-AR 1 Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 18, 2018 Author Share Posted June 18, 2018 @dbawel @Sebavan @Nabroski Yes, I think the problem is in my lack of experience with Babylon. I will verify my work and I will make new tests. If someone here wants to try it (above are the links), I will appreciate a copy of the code. I'm just looking that my model to look clean on mobile devices and tablets. Thanks again. Quote Link to comment Share on other sites More sharing options...
Sebavan Posted June 18, 2018 Share Posted June 18, 2018 You can have a loot at this playground: https://playground.babylonjs.com/#CGJCD7 The part to try for you is: // Adapt to the DPI Ratio engine.setHardwareScalingLevel(0.5); Quote Link to comment Share on other sites More sharing options...
Nabroski Posted June 18, 2018 Share Posted June 18, 2018 (edited) @Fer-AR yes, you have to click zip as long as the babylonjs loading screen is running. hahah. works everytime. zipped for you, see attachment. Ok, i got an old Android Smarthphone Version <= 4.4.2, don't judge me, i just need to make a call. YES, i se it, and it's blinking between an aliasing and AA state. Hm, very strange. Does it happen with other model too ? Ok, maybe an unknown bug. EDIT: try to load your model with the index.html file attached, that the default and tested one frome babylonjs playground. it works fine on my mobile. so the error could be in your model ... index.html Edited June 18, 2018 by Nabroski xtra info, brainstorming, attitude Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 18, 2018 Author Share Posted June 18, 2018 @dbawel @Nabroski @Sebavan @RaananW Following the Sebavan link ( https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html ), I was able to make some adjustments (see code bellow) , which now have a good quality of the model, but I can not make it complete all the screen on mobile phones: Question: How can I include my model inside the "canvas" tags? See here: https://alboenergy.com/ar/probar-4 My current code: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Shampu</title> <style> html{width:100%;min-height:100%;margin:auto;top:0;left:0;padding:0;overflow:hidden} body {top:0;left:0;margin:0;padding:0;overflow:hidden} .nav-container{display:none !important} canvas { width: 100vw; height: 100vh; display: block } </style> </head> <body> <babylon> <model url="models/shampu/shampu.gltf"> <scaling x="1" y="1" z="1"></scaling> </model> <camera> <behaviors> <auto-rotate type="1"></auto-rotate> </behaviors> </camera> </babylon> <!--<canvas id="c"></canvas>--> <script> function resize(canvas) { var cssToRealPixels = window.devicePixelRatio || 2; // Lookup the size the browser is displaying the canvas in CSS pixels // and compute a size needed to make our drawingbuffer match it in // device pixels. var displayWidth = Math.floor(canvas.clientWidth * cssToRealPixels); var displayHeight = Math.floor(canvas.clientHeight * cssToRealPixels); // Check if the canvas is not the same size. if (canvas.width !== displayWidth || canvas.height !== displayHeight) { // Make the canvas the same size canvas.width = displayWidth; canvas.height = displayHeight; } }; </script> <script src="js/visor-2.js"></script> </body></html> Quote Link to comment Share on other sites More sharing options...
Sebavan Posted June 18, 2018 Share Posted June 18, 2018 Adding @RaananW about the viewer configuration. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted June 18, 2018 Share Posted June 18, 2018 @Fer-AR Just an experiment: remove doubleSided in our mesh or increase the skybox size. proof of concept: http://www.babylonjs-playground.com/#T7A2L7#3 ( i post a bug on this ) or wait 'til @RaananW fixed it : ) Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 18, 2018 Author Share Posted June 18, 2018 @Nabroski @Sebavan @dbawel I think my original code ( here ) works fine. My problem is in the 3D model. Here is a new one (simpler), exported in .gltf and there is no aliasing. Open your Chrome / Opera browser on your mobile phone and try: https://alboenergy.com/ar/probar-7 Now I'm going to review my 3DS MAX project. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted June 18, 2018 Share Posted June 18, 2018 hahah fun yes your model is wrong! two normals pointing the same direction https://www.google.de/search?q=3ds+max+assign+material+to+selection Quote Link to comment Share on other sites More sharing options...
Fer-AR Posted June 18, 2018 Author Share Posted June 18, 2018 @Nabroski You say my shampu.3ds model? The original is a .obj that I downloaded from Internet. Now I will make my own designs to continue learning to use Babylon. Sebavan and Nabroski 1 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted June 19, 2018 Share Posted June 19, 2018 13 hours ago, Fer-AR said: How can I include my model inside the "canvas" tags? See here: https://alboenergy.com/ar/probar-4 Hi @Fer-AR, I am sorry but I didn't understand the question. I check the link, it seems like a default viewer showing the model. Want to explain or illustrate what you are trying to achieve? BTW - for hardware scale - the new viewer has an HD feature. It is a button you can enable to allow switching between "ok"quality and high quality, if the device supports it. The PR is here - https://github.com/BabylonJS/Babylon.js/pull/4502, if you want to use it Quote Link to comment Share on other sites More sharing options...
RaananW Posted June 19, 2018 Share Posted June 19, 2018 Oh, and about fullscreen, if you want to automatically fill the entire screen (technically 100% height and width of the body), use this feature: templates.main.params.fill-screen="true" inside your babylon tag. it will use flex boxes to fill the screen automatically for you Fer-AR and Sebavan 1 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.