Jump to content

How remove aliasing in .gltf


Fer-AR
 Share

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

Link to comment
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...

Link to comment
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.

Link to comment
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

Link to comment
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

Link to comment
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
Link to comment
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

Link to comment
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

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...