two.js icon indicating copy to clipboard operation
two.js copied to clipboard

Performance question: Mark Two.Textures from HTMLCanvasElement as immutable?

Open joergplewe opened this issue 5 years ago • 3 comments

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?

joergplewe avatar Mar 09 '20 19:03 joergplewe

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.

jonobr1 avatar Mar 09 '20 22:03 jonobr1

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?

joergplewe avatar Mar 10 '20 09:03 joergplewe

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.

jonobr1 avatar Mar 10 '20 10:03 jonobr1