How remove aliasing in .gltf

Fer-AR · 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.

dbawel · 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

Fer-AR · 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.

dbawel · 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

Fer-AR · June 16, 2018

@dbawel

Thanks for your help.

I will test the 2 options, and comment on the result.

Fer-AR · 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...

Sebavan · 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.

dbawel · 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.

Fer-AR · 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.

dbawel · June 17, 2018

@Fer-AR

Make sure your code is in the Playground, so we can work with it.

Cheers,

DB

Fer-AR · 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

Nabroski · 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

Fer-AR · 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

dbawel · 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 · 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.

Sebavan · 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);

Nabroski · June 18, 2018

@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

Fer-AR · June 18, 2018

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>

Sebavan · June 18, 2018

Adding @RaananW about the viewer configuration.

Nabroski · 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 : )

Fer-AR · 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.

Nabroski · 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

Fer-AR · 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.

RaananW · 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

RaananW · 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

How remove aliasing in .gltf

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members