three.js textures working with CanvasRenderer, but show up as black with WebGLRenderer


I'm drawing an image to a canvas (using the cityTexture method in and then using that as a texture. This works perfectly when I use three.js's CanvasRenderer, but the textures show up as black when using a WebGLRenderer. I'm generating the textures as squares with side lengths of 256.

Demo and code is here, with a CanvasRenderer on top, and a WebGLRenderer on the bottom:

This wouldn't be an issue, except that the performance of the CanvasRenderer is pretty poor when there's lots of geometry being rendered, and WebGL seems to perform a lot better. (With that in mind, if anyone has any suggestions to make CanvasRenderer more efficient, that would be great too). Thanks!


Problem solved: I needed to add mesh.dynamic = true to my mesh, and texture.needsUpdate = true to my texture.

This video can help you solving your question :)
By: admin