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

Question!

I'm drawing an image to a canvas (using the cityTexture method in http://haldean.github.com/citycanvas/city.js) 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: http://haldean.github.com/citycanvas/3d.html

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!



Answers

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