yiheyang

It seems that gl.drawElementsInstanced() cannot help on dynamic transforming matrix, and I'll try to make a shader to solve it!

For Q1 & Q4, I found these two problems seem to be the same: only need to upload draw data once and the only difference between renderings is the transforming matrix. I have gone through the code from Renderer.render(...) to the batch renderer's drawBatches(). It seems that I could try to solve the two problems by gl.drawElementsInstanced(). Is that a way out?

Thanks a lot. I'm working on those concepts and understanding those low-level implementations! At the moment, the main target is still on its prototype, and I need to know the tech boundaries as much as possible!

So many thanks for replying. I still confuse about the following point: Q1: I implemented this by scale and position and it looks good. My doubt is if it's a more proper way to implement this. Q4: To realize this, do i need to write native WebGL myself? Or is there an alternative way of implementation in Pixi.js? (even it will be a little bit slow)

Sorry for having so many problems again?!

I am using Pixi.js to make a 2d graphics editing engine similar to Figma. The demand scenario is that users need to create up to 10k+ graphics in the Container and have free editing, grouping, and sorting functions. Besides, the visual area needs to be moved and zoomed. For the various performance issues that might be involved in this scenario, I searched a lot of existing posts and learned the following optimization measures: I am optimistic about the performance of Pixi.js in this scenario. I believe that algorithm-level optimizations can solve most performance problems, but there are still problems remaining: Finally, even if I am very satisfied with the performance, various out-of-the-box features, and powerful extendibility of Pixi.js, I still want to know, in the scenario of the 2d graphics editing engine: I searched a lot of posts and information, but still have a lot of confusion above, I am very sorry for asking so many questions?! You can cite relevant documents or links to answer my questions as much as possible, and I will learn more about it, which can save you precious time! If possible, I hope that my product will eventually become an excellent example of Pixi.js, and I have confidence in this! I would like to thank the Pixi.js team for their continuous contribution to the WebGL field!