Fer-AR

How remove aliasing in .gltf

Recommended Posts

@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.

 

 

 

IMG_20180616_090218_313.JPG

Share this post


Link to post
Share on other sites

@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...

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

@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 by Nabroski
xtra info, brainstorming, attitude

Share this post


Link to post
Share on other sites

@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>

 

Captura.png

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.