two.js
two.js copied to clipboard
Performance question: Mark Two.Textures from HTMLCanvasElement as immutable?
Hi all!
I'm new to two.js so forgive me if the question is stupid.
I'm running into performance issues with the WebGLRenderer with large numbers of Two.Sprite all using the same single instance of Two.Texture created from a HTMLCanvasElement. In fact, it runs slower then using Two.Group.clone() from a Two.Group created by Two.interpret()?!
For me it appears as the underlying gl texture is reloaded each frame (gl.texImage2D())? Can that be the reason for the performance drop?
Thanks for the message @joergplewe. You're correct, unfortunately I haven't wired up the registry of textures to be indexed in WebGL 👎 What that means is that while the textures are the same, each one is uploaded... We'll definitely need to fix/improve this.
Thx for the quick response...
It can also be seen as a feature, just painting things on a canvas and automatically have it in a texture. Maybe an immutable-flag (or such) can turn the issue into a feature?
Yeah, I think that would be a great feature. The problem with the WebGL renderer at the moment is that each shape is drawn on a canvas and then uploaded to the graphics card. So, the texture needs to be decoupled and drawn directly in the shader in order to see these benefits. This is what I'll aim to do. This way, anyone who uses that renderer received those benefits. Should cut down on GPU memory, but doesn't cut down on draw calls. I'm still mulling over smart ways to instance shapes.