Texture Artifacts

Hi guys (@yaustar ) …

I am getting really strange artifacts on my textures that i imported using GLTF. I put a grid texture and is looks really sharp and artifacts at distance… really close looks good but ANY distance looks crappy.

Take a look… Is there some kind of internal “Generate MipMap” for a texture that is really just a jpg or png
that i am supposed to use:

That same texture in the Editor looks great… So the engine only version MUST NOT be doing something
with the “GRAPHICS RENDERING” that the editor sets up for you… Here is an Editor Shot:

Does anyone know the deal about that :frowning:

I don’t know if the engine can generate mip maps or if that is an editor only feature.

There’s support to use it in the texture asset.

On another note, it be worth seeing what the default filtering on the texture is. In your engine only screenshot, it looks like it could be on POINT rather than LINEAR.

Where would I set the filter to linear. I assume it’s the default setting , because I don’t do anything to set to point .

I tried just setting mipmaps options to true on construction but still shows artifacts… weird … but th editor look crystal clear perfect … near and far

Can you share the texture?

Yep…

Note… It flipped because its used as GLTF Texture.

Where do i check and or set default Texture format… so i can see if its Linear or point ?

Just to check, is this the problem you are having (see far corner)?

Yes… But mine looks a bit worse than that, especially when camera is more level to the plane… Nut when view from i higher camera angle… Yes the corners are messed up.

But if i upload that same text in edit is smooth

So this is the effect you are getting?

YES… But if you go in closer… they look smooth

It’s mips maps and upping the anisotropy (for making it look better at shallow angles) values that will make the difference

Where what settings… i am settings mipmaps = true in the GLTF Parser

    // Specification:
    //   https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#texture
    function translateTexture(data, resources) {
        var texture = new pc.Texture(resources.device, {
            mipmaps: true,
            flipY: false
        });

        if (data.hasOwnProperty('name')) {
            texture.name = data.name;
        }

        if (data.hasOwnProperty('sampler')) {
            var gltf = resources.gltf;
            var sampler = gltf.samplers[data.sampler];

            console.log("*** SAMPLER ***");
            console.log(sampler);

            if (sampler.hasOwnProperty('minFilter')) {
                texture.minFilter = getFilter(sampler.minFilter);
            }
            if (sampler.hasOwnProperty('magFilter')) {
                texture.magFilter = getFilter(sampler.magFilter);
            }
            if (sampler.hasOwnProperty('wrapS')) {
                texture.addressU = getWrap(sampler.wrapS);
            }
            if (sampler.hasOwnProperty('wrapT')) {
                texture.addressV = getWrap(sampler.wrapT);
            }
        }

        texture.anisotropy = 1;
        texture.magFilter = 1;
        texture.minFilter = 5;
        texture.autoMipmap = true;

        console.log("*** TEXTURE ***");
        console.log(texture);

        return texture;
    }

Why does the Editor look so good… And anisotropy is to 1 in editor ?

All the screengrabs are from the editor and me messing about with the texture settings. If you could create a simple scene that demos the problem. ie a plane with a camera, light etc that I can download and edit, that will save me a lot of time.

4 or 8 IIRC to get that nicer look in the last screengrab. The default in the editor is 1.

Do you want my Engine Only Project… If so, i am using a GLTF scene file. That is where the plane and light and camera are coming from… NOT using code to create items.

I can zip up and send my my Engine Only Project with play and cube defines in the GLTF ???

Do you want that project ???

I think it might be the way GLTF parser sets these values:

        texture.magFilter = 1;
        texture.minFilter = 5;

If i hard code those values in the parser… Looks smoother at angle.

Yo @yaustar … Hey Steven… Is there a performance impact to running at max ansiotropy ???

        texture.anisotropy = resources.device.maxAnisotropy;
        texture.magFilter = pc.FILTER_LINEAR;
        texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;

What do you think about running this as a default in my GLTF Parser for Textures ???

BTW… Look much better with these settings

Yo @yaustar

This the original Unity Scene:

And this is the Exported Scene To GLTF then loaded using my modded playcanvas-gltf.js

Looks Pretty Good… But wondering about always running at GraphicsDevice.MaxAnsoitropy :slight_smile:

Note all the Meta Stuff you WOULD NEVER get on a regular export like EXACT MATCHING LIGHTS AND SHADOWS :slight_smile:

https://developer.playcanvas.com/en/user-manual/assets/textures/#anisotropy

Out of interest, will you be releasing this work under open source/etc?