webgl2

[diwi]

• New feature request
• WebGL

Hi,
Are there any plans in switching from webgl1 to webgl2?
I did some tests on master; creating a webgl2 context in the p5.RendererGL and all examples I've tested seemed to work just fine.

[Spongman]

fwiw, https://caniuse.com/#feat=webgl2 shows pretty spotty support

[stalgiag]

Yeah I think for now WebGL 2 might not work with p5's investment in being usable across as many browsers as possible. WebGL 2 has significantly less support than ES6 and we are just now considering beginning to use ES6 standards.

[Spongman]

you could add a flag for setAttributes to enable it, but i doubt it'll get used much. i believe Three.js has webgl2 support if you're looking for bleeding-edge stuff.

[diwi]

wow, I wasn't aware of such bad support. Just tested edge, which I definitely expected it to support it, and it failed indeed.
thx for the link.

[diwi]

here is another one:
https://webglstats.com/

[stalgiag]

I'm going to close this for organization but this could definitely be readdressed down the line if support for 2 grows.

[diwi]

It could still be part of context creation since there are always 2 other fall-back options to pick from.

    this.drawingContext = this.canvas.getContext('webgl2', this.attributes)
                       || this.canvas.getContext('webgl', this.attributes)
                       || this.canvas.getContext('experimental-webgl', this.attributes)
                        ;

[stalgiag]

Hm yeah that would be simple enough. I guess the question is do you think there are any advantages to creating the context in gl2 if our code doesn't use any of the features of gl2?

[diwi]

Nah I agree, It's certainly not a pressing issue.

[diwi]

I've done some little experiments with the current p5-release and some raw webgl2.
Besides that little mod from above to get the webgl2 context, it works well to combine both, p5 rendercalls and my webgl2-wrapper.
Due to the mentioned support limitations it works only in firefox and chrome, ... plus in chrome I get a whole lot more fps.

https://diwi.github.io/p5.EasyCam/examples/ReactionDiffusion_Webgl2/

[Lomacar]

It could still be part of context creation since there are always 2 other fall-back options to pick from.

    this.drawingContext = this.canvas.getContext('webgl2', this.attributes)
                       || this.canvas.getContext('webgl', this.attributes)
                       || this.canvas.getContext('experimental-webgl', this.attributes)
                        ;

EDIT: Sorry, I'm an idiot. I forgot about the vertex shader.

Could somebody explain to me how this is supposed to work? I am trying to convert an old sketch from Processing (Java), in 2009 to P5. I don't know how my old shader ever worked because P5/Chrome complained that it was using features only supported in "GLSL ES 3.00 and above only", so I added the directive "#version 300 es" and THEN I got errors about all sorts of things in my shader that were from GLSL 1.0, so I updated all of those things. And once all of those were fixed I finally got the wonderful message that I was using an unsupported shader version! OK, so I found this discussion and added in the line about 'webgl2', and now I get an error saying "Snap! Error linking shader program: Versions of linked shaders have to match." But I have no idea what it is talking about, and this error is not explained anywhere on the internet.

[torinmb]

Just wanted to revisit this thread since WebGL 2 has support on all major browsers now.
The only exception is IE, but there's support for Edge.
https://caniuse.com/webgl2

Three.js opted to change their default WebGL renderer to WebGL2 and provide a helper function for WebGL1 if needed for backward compatibility.

[aferriss]

I'd be open to the change but i think we need to clearly define what the benefits to p5 would be both in terms of features and accessibility.

From glancing through the changes in webgl2, outside of some performance improvements, I'm not sure that I see big benefits for us, especially since our renderer is fairly limited in what it can do. I'd be happy to be wrong though!

Is there something specific you'd like to do that isn't possible with webGL1? I'm also not sure who would do this work, it's a pretty big project and fairly advanced to implement.