Add WebGL2 support #6035

davepagurek · 2023-02-26T19:56:14Z

Resolves #2536

Changes

Defaults p5 to WebGL2 mode
Adds global p5.disableWebGL2 to force WebGL1 mode
Adds webglVersion to graphics and the main canvas to read which version was picked
Updates p5 code using WebGL1-specific things to handle both environments:
- The font shader relied on a WebGL1 extension to use fwidth. This exists by default in WebGL2, but only if you upgrade the glsl version from 2 to 3. I added some glsl macros which will be the correct glsl 2 or 3 keyword depending on the environment.
- Two blend modes, LIGHTEST and DARKEST, use a WebGL1 extension that is now default in WebGL2. It now tries to use the default versions (e.g. MIN) before falling back to the extension version (e.g. MIN_EXT)

Screenshots of the change:

No visual change should occur!

I have a test sketch here https://editor.p5js.org/davepagurek/sketches/-XNYgrz_z mirroring the example added to the docs. Commenting/uncommenting the p5.disableWebGL2 line will make the sketch show "WebGL 1" or "WebGL 2" on canvas, and also demonstrates the font shader working in both environments.

PR Checklist

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

aferriss

This is great, thanks so much for pulling it together @davepagurek !

I left a few notes but one other thing I think we should include are some tests. Can you add a few for each new piece of the api, and maybe some others to make sure that font rendering is still working in both versions. Also maybe one more to make sure webGL versions are working with p5.graphics?

src/webgl/shaders/font.frag

aferriss · 2023-02-27T05:10:50Z

src/core/main.js

+ * and will fall back to a WebGL1 context if WebGL2 is not available. If you
+ * want to always use a WebGL1 context, you can set `p5.disableWebGL2 = true`.
+ *
+ * @property {Boolean} disableWebGL2


could we do this in the setAttributes function instead? It feels against the grain of existing p5 patterns to be setting something on the p5 object before the sketch is created. Something like:

setAttributes('version' 1); // or setAttributes({version: 2});

Is there a reason we wouldn't do it this way?

src/core/environment.js

aferriss · 2023-02-27T05:35:33Z

Also, I think there are a couple more spots in the library that use webGL1 extensions that might need some special handling.

There's the float textures in p5.Texture

Also this uint extension in the drawElements function

aferriss · 2023-02-27T05:37:37Z

I think in webGL two we can also do away with the power of two texture size checks as well in p5.Texture, especially if people are trying to use repeat wrap functions

p5.js/src/webgl/p5.Texture.js

Line 350 in af0fc0d

const widthPowerOfTwo = isPowerOfTwo(wrapWidth);

aferriss · 2023-02-27T05:41:54Z

Definitely not a blocker for this PR but at some point in the future it might be good for us to try and switch over the rendering to use VAO's if possible, as described in this article

davepagurek · 2023-03-04T19:04:46Z

Thanks for catching those other WebGL1 extension cases @aferriss! I've updated those parts to do nothing if using WebGL2, added some tests, and switched to using setAttributes({ version: 1 }) as the way to request a WebGL1 canvas. For now it's still using webglVersion as a property, but I can update this some more if we decide on a better way to do that. Also still using a very simple example in the docs, but let me know if you think a shader example wouldn't be too much (maybe using dFdx and dFdy in GLSL3 to do a custom normal shader?)

aferriss

Just a couple small changes and then I think we'll be good to roll!

Can we add documentation for the new setAttributes property here: https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.js#L405

Is there anywhere else in the docs that we can indicate that webGL mode uses webGL2 by default now? Maybe a note on https://p5js.org/reference/#/p5/createCanvas and https://p5js.org/reference/#/p5/createGraphics ?

Can you link the inconsolata font from the manual test examples instead of adding another copy?

aferriss · 2023-03-09T02:20:56Z

src/core/environment.js

@@ -369,6 +369,36 @@ p5.prototype.noCursor = function() {
  this._curElement.elt.style.cursor = 'none';
 };

+/**
+ * If the was created in WebGL mode, then `weglVersion` will indicate which


nit— should probably say: "If the sketch was created...."

aferriss · 2023-03-09T02:30:00Z

test/unit/webgl/p5.RendererGL.js

+        HTMLCanvasElement.prototype.getContext = prevGetContext;
+      });
+
+      test('should return WEBGL1', function() {


I think you added this test twice?

oops good catch, I left the setAttributes({ version: 1}) in there by accident! I'll take that line out again so that it tests to make sure you still end up with webgl1 even when you don't request it if the browser doesn't support webgl2 (mocked in the suite this is nested in.)

davepagurek · 2023-03-09T13:16:48Z

Updated those tests and docs! I have an idea for a better visual example of the difference between webgl1 and 2 so I'll make one more update after work with that.

davepagurek · 2023-03-10T00:19:15Z

Updated the webglVersion example to show a visual difference in the capabilities of WebGL2!

aferriss

lgtm! 🚀

Qianqianye · 2023-03-10T00:57:20Z

Oh wow, this is exciting! Thanks @davepagurek and @aferriss for working on it. Hi @stalgiag, does this PR look good to you to be merged?

stalgiag

Amazing! This is so exciting! Thanks for the hard work @aferriss and @davepagurek!

stalgiag · 2023-03-10T15:01:31Z

src/webgl/p5.RendererGL.js

-      defaultShaders.fontFrag
+      this._webGL2CompatibilityPrefix('vert', 'mediump') +
+        defaultShaders.fontVert,
+      this._webGL2CompatibilityPrefix('frag', 'mediump') +


I am curious if this float precision is always guaranteed to work well on a device that supports WebGL2. Not sure but it is irrelevant because this design will make adjustments to precision based on the device easier in the future.

stalgiag · 2023-03-10T15:08:48Z

src/webgl/p5.Texture.js

-    if (widthPowerOfTwo && heightPowerOfTwo) {
+    if (
+      this._renderer.webglVersion === constants.WEBGL2 ||
+      (widthPowerOfTwo && heightPowerOfTwo)


Might be worth rolling this into a simple function that returns a boolean just to improve readability. I find the nested conditionals and multiline conditions to be a challenge to read in this section (and many other sections of the GL code). Not a new problem with this PR by any means but one worth keeping in mind.

Add WebGL2 support

38abe49

davepagurek requested a review from aferriss February 26, 2023 19:56

aferriss suggested changes Feb 27, 2023

View reviewed changes

davepagurek added 2 commits March 4, 2023 13:56

Specify webgl version in setAttributes(), add tests

34a7f11

Update outdated comment

7a7cc1d

davepagurek mentioned this pull request Mar 5, 2023

Support for drawing to/reading from framebuffers #6018

Closed

17 tasks

aferriss suggested changes Mar 9, 2023

View reviewed changes

Update tests + docs

9d754c5

Add more interesting webglVersion example

a8ea6dd

aferriss approved these changes Mar 10, 2023

View reviewed changes

Qianqianye requested a review from stalgiag March 10, 2023 00:57

stalgiag approved these changes Mar 10, 2023

View reviewed changes

Qianqianye merged commit 70d5887 into processing:main Mar 10, 2023

davepagurek deleted the feat/webgl2 branch March 10, 2023 16:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add WebGL2 support #6035

Add WebGL2 support #6035

davepagurek commented Feb 26, 2023 •

edited by aferriss

Loading

aferriss left a comment

aferriss Feb 27, 2023

aferriss commented Feb 27, 2023

aferriss commented Feb 27, 2023

aferriss commented Feb 27, 2023

davepagurek commented Mar 4, 2023

aferriss left a comment

aferriss Mar 9, 2023

aferriss Mar 9, 2023

davepagurek Mar 9, 2023

davepagurek commented Mar 9, 2023

davepagurek commented Mar 10, 2023

aferriss left a comment

Qianqianye commented Mar 10, 2023 •

edited

Loading

stalgiag left a comment

stalgiag Mar 10, 2023

stalgiag Mar 10, 2023

Add WebGL2 support #6035

Add WebGL2 support #6035

Conversation

davepagurek commented Feb 26, 2023 • edited by aferriss Loading

Changes

Screenshots of the change:

PR Checklist

aferriss left a comment

Choose a reason for hiding this comment

aferriss Feb 27, 2023

Choose a reason for hiding this comment

aferriss commented Feb 27, 2023

aferriss commented Feb 27, 2023

aferriss commented Feb 27, 2023

davepagurek commented Mar 4, 2023

aferriss left a comment

Choose a reason for hiding this comment

aferriss Mar 9, 2023

Choose a reason for hiding this comment

aferriss Mar 9, 2023

Choose a reason for hiding this comment

davepagurek Mar 9, 2023

Choose a reason for hiding this comment

davepagurek commented Mar 9, 2023

davepagurek commented Mar 10, 2023

aferriss left a comment

Choose a reason for hiding this comment

Qianqianye commented Mar 10, 2023 • edited Loading

stalgiag left a comment

Choose a reason for hiding this comment

stalgiag Mar 10, 2023

Choose a reason for hiding this comment

stalgiag Mar 10, 2023

Choose a reason for hiding this comment

davepagurek commented Feb 26, 2023 •

edited by aferriss

Loading

Qianqianye commented Mar 10, 2023 •

edited

Loading