Big Picture question on WebGL 2.0

I am trying to learn so please bear with me:
I have printed out the Kronos’ ‘WebGL 2.0 API Quick Reference Guide’. While I do see some things on these pages that are used often in p5js sketches (createShader, obviously). There is a lot on the Quick Reference pages that I see rarely if ever used in p5js sketches. So, I am thinking about buying Kronos’ the ‘WebGL 2.0’ programing bible from Amazon but don’t know about its useability/ advantage to me for p5js, so my question is:

Are the features and functions in the WebGL 2.0 spec accessible from p5js?

https://p5js.org/examples/3d-basic-shader.html

https://itp-xstory.github.io/p5js-shaders/#/

If you are asking about WebGL 2.0 specifically (as opposed to WebGL 1.0), I’m fairly certain that you won’t be able to use new functionality in WebGL 2.0 with p5.js for the time being. In order to create a WebGL2RenderingContext you need to call getContext('webgl2') on the HTML canvas element, and when you specify the WEBGL render when calling createCanvas p5.js is going to create a WebGL 1.0 context by calling getContext('webgl'). However WebGL 1.0 and WebGL 2.0 have a lot in common, so a book on WebGL 2.0 will mostly apply to both (take special note of the functions highlighted in blue in that quick reference guide you linked to, since those are WebGL 2.0 only).

That said, if p5.js is intended to significantly simplify the code needed to draw 3d graphics compared to WebGL itself. So with the exception of GLSL (shaders), you should rarely need to utilize the underlying WebGL functionality directly. So if you intend to use p5.js for your 3d graphics programming needs, such a book would likely be overkill. Instead I suggest you check out the links that paulgoux posted above.

1 Like

Okay, thanks. I wasn’t certain on whether p5js was WebGL 1.0 or 2.0. So p5js is WebGL 1.0.

I was trying to benchmark p5js performance with and without a custom shader. Trying a particle physics shader and passing particle position, color and lifespan using an array did not seem too great performance wise. (Used Jason Labbe’s ‘Magical Trail Shader’ example but greatly pared down.) I hope to try this using textures rather than an array but not quite certain yet how to do the texture route. So I was looking for info source on using textures for data.

Here’s an example of using a p5.Graphics object (created with createGraphics) as data input to a shader: Conway's Game of Life Shader (as Texture) - OpenProcessing. The shader is WebGL 1.0/GLSL 2.0, and uses a sampler2D uniform and the texture2D function to read color data from the graphics object (I believe this would also work with a p5.Image object). There are definitely more advanced techniques for packing data into texture buffers, but this is a simple one.

1 Like