4 ms·

Interestingly WebGL is way slower than SVG and Canvas in this case (Chrome, rMBP): https://jonobr1.github.io/two.js/examples/particle-sandbox.html?type=webgl&sh

• jonobr1 11y ago
  Yes! This is because when a shape is first created the WebGL Renderer draws the shape as a texture in Canvas2d and then uploads that texture to GL. The operations "Vertices" and "Scale" force each shape to be redrawn so there are a lot of textures being uploaded and deleted every frame this scenario. If you keep things to translation / rotation you can make the WebGL renderer push wayyyy more shapes than the other 2 renderers. I'm currently developing a way to "cache" textures that don't change much so if you had a Two.Group that doesn't change much you can turn that into 1 texture. This will greatly increase performance as well. Thanks for checking it out! #themoreyouknow
  • zlnimda 11y ago
    Why don't you draw directly your vertices in gl instead of create a tex ? And you could use optimisation of culling to be faster. (drawing object : front to back)
    • jonobr1 11y ago
      Because the eng team that implements WebGL on Chrome recommended this way. I have an implementation as you're describing as the first tag of Two.js. It actually was a 2D drawing API for Three.js initially..!