Previous Texture Still Visible Through Transparency Of New Texture

Questions
,
1

The issue I’m having is that after I change the texture of a model, the parts of the previous texture show through the transparent pixels of the new texture, despite the previous texture having been replaced by the new.

In the video, after I click the button that adds a sweater to the Minecraft skin and then click the button that removes the sweater from the skin, the second layer of the sweater is still visible because the new texture does not have solid pixels covering the same area.

I believe this is an issue with my three.js code and not my canvas logic, because when I console log the dataURL, the outputted image does not share the same issue.

Not sure if the attachment will work, but here’s the video:


And here’s my code: three.js (2.2 KB)

If there are any questions please let me know, and thanks in advance!

2

  1. Please copy the part of code related to changing texture into the post - downloading and going through code is unnecessarily lengthy :smiling_face_with_tear:

  2. There’s no old & new texture from three’s perspective. WebGL is a state machine - so if you’d indeed override one texture with another, there’d be no trace of the previous texture at all, GPU does not merge textures based on alpha (on the other hand - CanvasContext.drawImage does do that, so if you’re drawing one image over another, only opaque pixels will be overridden.)

  3. Make sure you’re not recreating the mesh on each skin change, they’ll start overlapping one another.

3

Thank you very much for your reply, and I apologize for not including a smaller sample of code. will make sure to do so in the future.

I’ve rechecked my canvas logic, and when I console.log the dataURL (the texture for the three.js model), it doesn’t have the issue. so I’ve ruled that out as the cause.
I also don’t think it’s overlapping because there would be z-fighting present.

That said, I really do appreciate you taking the time to try and help solve my problem.

Currently, I’m looking into caches, thinking that might have something to do with it. 🤷‍♂

4

Not sure what you mean - there’s not such a thing as WebGL, texture, or canvas cache :sweat_smile: consider applying content of your canvas using a CanvasTexture onto a simple plane and see what appears there.

5

Sorry, I’m new to much of this.

When I say texture, I’m referring to this: three.js manual
And to clarify, I was not referring to a “Canvas cache.” Like I stated before, I don’t believe the canvas is related to my problem.

Could you elaborate on why you think CanvasTexture would be helpful? I don’t understand, as that seems to only fix something that doesn’t need to be fixed.

6

If they were doubled up but at the exact same position/scale/rotation, they would not show z-fighting… they would layer. z-fighting should/would only happen if the objects are using slightly different transforms / or different vertex shader calculations.

1 Like
7

Debugging is not about believing - placing a CanvasTexture on a flat PlaneGeometry with MeshBasicMaterial will answer you whether the issue is with canvas in 0.5s. Just a matter of quick debugging - since models have complex UVs, and plane UV map is just from edge to edge.

8

That was it; the scenes were layering. Thank you for taking the time to explain that to me!