Use Webgl2 in p5js

p5.js Project Guidance
1

Is there any way (with example prefered), to use WEBGL2?
I have to make quite advanced shaders, that at this point I would prefer to move to three.js then missing out on certain shader features.

2

This is the top part of the “hidden” method which creates the drawing context:

So it should be a matter of replacing that method w/ 1 that uses the string “webgl2” in place of “webgl”:

p5.RendererGL.prototype._initContext = function() {
  try {
    this.drawingContext =
      this.canvas.getContext('webgl2', this._pInst._glAttributes) ||
      this.canvas.getContext('webgl', this._pInst._glAttributes) ||
      this.canvas.getContext('experimental-webgl', this._pInst._glAttributes);
    if (this.drawingContext === null) {
      throw new Error('Error creating webgl context');
    } else {
      const gl = this.drawingContext;
      gl.enable(gl.DEPTH_TEST);
      gl.depthFunc(gl.LEQUAL);
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      this._viewport = this.drawingContext.getParameter(
        this.drawingContext.VIEWPORT
      );
    }
  } catch (er) {
    throw er;
  }
};

I believe you can place that method re-assignment within callback preload().

Alternatively within callback setup() before invoking createCanvas().

1 Like