Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix batch drawing for primitive shapes #1172

Closed
obiot opened this issue Jan 24, 2023 · 2 comments
Closed

fix batch drawing for primitive shapes #1172

obiot opened this issue Jan 24, 2023 · 2 comments

Comments

@obiot
Copy link
Member

obiot commented Jan 24, 2023

Describe the bug
Running the https://github.com/Shirajuki/js-game-rendering-benchmark benchmark actually shows that batching primitive shapes drawing is actually broken in melonJS. for sprite based games, sprite batching is actually working, and primitive batching does not really matter, unless it heavily relies on manually drawing shapes everywhere, but this is still something to be fixed (noticed also the flickering when drawing sprites in the benchmark, which is a side effect of the broken primitive batching).

To Reproduce

  1. Go to `https://github.com/Shirajuki/js-game-rendering-benchmark)'
  2. Select melonJS
  3. Click on Stroke of Fill
  4. See the performance drop when count is 2500 or higher, especially for fill operations

Expected behavior
at least maintain 60fps when count is at 2500 stroke of fill operations (even Pixi fps is dropping at 5000 and higher)

Device :

  • CPU/GPU: M1 Max (for reference on fps count)
  • MacOS Ventura
  • Safari 16.3, Chrome 109
  • melonJS Version: 14.x

Additional context

Proposed solution:

  1. make sure that all primitive drawing use the same type (e.g. gl.LINES, GL.LINE_STRIP, gl_LINE_LOOP) to enable batching :

  2. use different vertex buffer instance for quads (sprite) and primitive drawing. Right now the default compositor "re-use" the Quad Vertex Buffer, leading to a waste of unused data when drawing shapes

  3. talking about the compositor, finally split the compositor into two different ones. One to draw quads/sprites, and one to draw primitives/shapes. This way they can both managed data and batching independently. There was some initial work done but it was never really finished.

Any other idea/suggestion, feel free to comment.

@obiot obiot added the Bug label Jan 24, 2023
obiot added a commit that referenced this issue Feb 11, 2023
obiot added a commit that referenced this issue Feb 19, 2023
Changes:
- use g.LINES when possible/applicable
- split the WebGLCompositor into two classes, `QuadCompositor` for Quad (Sprite) drawing, and `PrimitiveCompositor` to draw vertices
- fixed binding of active shader when switching
- color for drawing primitive is now a vertex attributes (as opposed to an uniform previously)

TODO :
- Optimize the `arcTo` function to use gl.LINES and enable batching for circle/ellipse and rounded rectangles
- Cache of optimize triangulation for filling operations. currently the bottleneck when drawing large amount  (> 1000) of shapes
@obiot
Copy link
Member Author

obiot commented Feb 19, 2023

this one is done !

@obiot obiot closed this as completed Feb 19, 2023
@obiot
Copy link
Member Author

obiot commented Feb 19, 2023

see #1178 and #1179 as a follow up ticket.

@obiot obiot added Improvement and removed Bug labels Feb 19, 2023
obiot referenced this issue Mar 3, 2023
…compositor instances

- VertexBuffer is created by the WebGLRenderer and shared by the different compositor
- renamed the previous Compositor.vertexBuffer object to Compositor.vertexData; which is better more correct name for it.
obiot added a commit that referenced this issue Mar 14, 2023
… compositors

`viewport` applies to the global gl context, so it should be defined at the [WebGL]Renderer level now, and not anymore in the Compositor class.

this follows #1172
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant