Glitch when applying textures to a GLTF model

Questions
,
1

When I apply different textures to different parts of a GLTF model (each with its own alpha map), I see an annoying visual glitch - looks a bit like what I remember from years ago when you didn’t synchronize updates with the vertical refresh.

I set the GLTF object visibility to false before I update the texture then set to true afterwards.

I tried to make a Fiddle to show what I mean but this doesn’t exhibit the problem : Edit fiddle - JSFiddle - Code Playground

I captured a tiny video that shows it pretty clearly.

Anything I can try to fix it.

2

Any details beyond the video you can share would probably be helpful. For example:

  • is this a skinned mesh?
  • are the materials transparent? (.transparent = true)
    • if so, does it still occur if you disable that?
  • does the issue still occur when the camera is not so close to the model?
3

It is a skinned mesh - I search inside the GLTF for a named skinned mesh, apply a skin texture along with an alpha map texture. The alpha is to help conceal poke-through on the lower body - it doesn’t cover the regions (like the neck in that clip) that do not need it. I do the same operation for the upper body, lower body and the head.

The material for each skinned mesh is transparent so that the alpha map works; disabling the transparency doesn’t appear to help at all.

Same result if I move the camera further away.

I had some success only reapplying the texture if it changed but the 3 body textures combined with the 3 alpha maps (different for each piece of clothing) means that’s not a workable solution.

I hoped that only setting the GLTFs visible after the whole scene was composed would do the trick. Calling render(…) before I do that didn’t help either.

Edit: Tried just not setting the alpha map at all (previously, just didn’t set transparent flag - and now it’s flawless.

4

I think it’ll be probably necessary to access a JSFiddle exhibiting the issue. Sorting and depth-testing transparent meshes is a tricky area, there isn’t a “one size fits all” solution to that, if that’s the cause.

5

That video looks like it takes the textures a split-second to get uploaded to the GPU, so you get a few frames of delay before they can be rendered.

A way to avoid this is to run renderer.initTexture(newTexture) before you need to use the texture, that way it’s already in the GPU, ready to be used.

Read about this method in the docs: renderer.initTexture()

“Initializes the given texture. Useful for preloading a texture rather than waiting until first render (which can cause noticeable lags due to decode and GPU upload overhead).”

1 Like
6

Understood - I am not able to share anything right now and I realize that makes it next to impossible to help,.

Thank you.

7

Interesting and new to me - I’ll take a look. Thank you.