In my scene, there is a textured cube that renders well until I draw a quad. When I draw the quad, the texture on the cube disappears. Here is the sequence of rendering:
// draw the textured cube
gl.render(scene, camera);
// draw a quad on the screen for checking purposes (different texture from the cube)
drawQuad(tex);
The pseudo code inside the drawQuad function is as follows:
setupVertexBuffer();
gl.activeTexture(...);
gl.bindTexture(...);
gl.drawArrays(...);
gl.bindTexture(null);
I suspect the issue lies in gl.bindTexture replacing TEXTURE0 with null or another texture. Therefore, when rendering the textured cube, its texture is either missing or incorrect. Shouldn't WebGL re-bind the texture for geometries every time before rendering?
To remedy this, I attempted to rebind the texture to the textured cube right before rendering the scene like so:
cube.map.texture = cubeTexture;
gl.render(scene, camera);
However, this approach did not yield the desired results.
Subsequently, I tried to backup the old texture before binding a new one in drawQuad as shown below:
const lastTex = gl.getParameter(gl.TEXTURE_BINDING_2D);
Unfortunately, the value of lastTex always turned out to be undefined, thus rendering this method ineffective as well.
What would be the most effective way to ensure that both components work correctly simultaneously?