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

Add support for QUADS and QUAD_STRIP in WebGL mode #5768

Merged
merged 4 commits into from Aug 26, 2022

Conversation

davepagurek
Copy link
Contributor

Resolves #4401

Changes:
This handles the QUADS and QUAD_STRIP shape modes in the WebGL renderer.

WebGL 1 doesn't support those two modes, so they have to be drawn using other modes. I've converted QUADS to TRIANGLES and QUAD_STRIP to TRIANGLE_STRIP.

Turning QUADS into triangles requires some vertices to be duplicated:

  • I've added code into vertex() that, on the fourth vertex of each quad, duplicates two vertices so that, when the final vertex is added, two complete triangles have been added to the buffer
  • It also duplicates normal, uv, and fill color data so that nothing gets misaligned
  • This is a tad complicated, so I've added a unit test to make sure the triangle vertices are added correctly
  • When computing edges, only the external lines of the quad are used

Turning QUAD_STRIP into TRIANGLE_STRIP is simpler:

  • For fills, nothing needs to be changed! It's already in the right format
  • For edges, only lines on the outer edge of quads are used

Screenshots of the change:

I've added a manual test comparing, from left to right, TRIANGLE_STRIP, QUADS, and QUAD_STRIP modes for the same vertex data. I've added random fill colors to each vertex to make sure they get duplicated correctly.
image

PR Checklist

  • npm run lint passes
  • [Inline documentation] is included / updated
  • [Unit tests] are included / updated

@davepagurek davepagurek changed the title Add support for QUAD and QUAD_STRIP in WebGL mode Add support for QUADS and QUAD_STRIP in WebGL mode Aug 25, 2022
Copy link
Contributor

@stalgiag stalgiag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What a beautiful, considered, thorough, and speedy PR!

Minor comments inline.

test/manual-test-examples/webgl/geometryQuads/sketch.js Outdated Show resolved Hide resolved
test/manual-test-examples/webgl/geometryQuads/sketch.js Outdated Show resolved Hide resolved
test/manual-test-examples/webgl/geometryQuads/index.html Outdated Show resolved Hide resolved
src/webgl/p5.RendererGL.Immediate.js Show resolved Hide resolved
src/webgl/p5.RendererGL.Immediate.js Show resolved Hide resolved
Copy link
Contributor

@stalgiag stalgiag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me!

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

Successfully merging this pull request may close these issues.

beginShape(QUADS) does not work in WebGL mode
2 participants