Model is black while the texture is loading

Questions
1

As far as I understand, the texture loader immediately returns something like one pixel buffer with (0,0,0,0) color to use till the texture is loaded, and that color, multiplied by diffuse color makes the model black.

Is that correct?

If it is, why not to make that color (1, 1, 1, 1) to preserve the diffuse color of the model while loading?

2

A WebGLTexture object is only created when the texture is fully loaded. Up to that point, the renderer just binds undefined to the respective texture slot. So it’s not possible to define a different default color since there is not default WebGLTexture.

1 Like
4

OK, I looked at the code, there is emptyTextures object there that is used while the texture is being loaded.

It contains zero pixel, that makes the model black, so here is what I changed:

function createTexture( type, target, count ) {
  const data = new Uint8Array([255, 255, 255, 255]); //new Uint8Array( 4 ); // 4 is required to match default unpack alignment of 4.
  const texture = gl.createTexture();

so now, the material preserves color while texture is loading, if you re-run this fiddle you can see the effect on modified and unmodified code.

So back to my original question - why not make this change in the library, so models always show the color and then acquire texture on top when it’s ready?

5

dont render while the model is loading

6

This way you can give an “average” texture color to your model first and then swap it to white when the texture is ready to deliver a smoother loading experience:

7

I’ve totally missed the code in WebGLState. Indeed, gl.bindTexture() uses an “empty” instance of WebGLTexture. Meaning with no data defined.

I’m not sure what the reason was for using a black color. However, other engines use an even more distinctive default color like purple so it’s clear for the dev when textures are missing or not loaded.

Normally, you should not render an asset when its resources are not fully loaded. LoadingManager is helpful in this context, other loaders like GLTFLoader already fire their onLoad event when textures are ready.

So yes, using white as the default texture color would be more neutral however a potential error would not be so clear anymore.

8

I see, thank you. To me it seemed more natural to render the scene right away with some adequate “flat” colors and then acquire textures as they get downloaded (and rather show an “error” texture if download fails) but I recall now, you’re right, it’s not how other engines work as well.

Luckily, I can fix it in the local copy of the library, so it’s not a problem.

1 Like