Optimization question about WEBGL

p5.js Coding Questions
1

Hey, I’m doing an interactive project and I need it to be as fast as possible without delay or lags.
As part of the project, I have a video (let’s say from the webcam) on part of the canvas, and on top of the video I draw some shapes (more than one) and their textures are also the video from the camera.
I know that the texture() function has to run in WEBGL mode, so I thought about two ways to implement that:
I can make my whole canvas WEBGL, and the second option is to make the canvas regular P2D and then make a p5.Renderer object using createGraphics(WEBGL) and draw the video on it, and in the end, paste the object on the canvas. here are the two ways in code:
First option:

let vid;
function setup() {
  createCanvas(800, 800, WEBGL);
  vid = createCapture(VIDEO);
  vid.hide();
}
function draw() {
  background(100);
  push();
  translate(-width / 2, -height / 2);
  image(vid, 200, 200, 400, 400);
  pop();

  texture(vid);
  textureMode(NORMAL);
  noStroke();
  beginShape();
  vertex(0, 0, 0, 0);
  vertex(100, -100, 1, 0);
  vertex(100, 200, 1, 1);
  vertex(0, 100, 0, 1);
  endShape();

  beginShape();
  vertex(-200, -200, 0, 0);
  vertex(-100, -200, 1, 0);
  vertex(-100, -100, 1, 1);
  vertex(-200, -100, 0, 1);
  endShape();
}

Second option:

let vid;
function setup() {
  createCanvas(800, 800);
  pg = createGraphics(800, 800, WEBGL);
  vid = createCapture(VIDEO);
  vid.hide();
}
function draw() {
  background(100);
  pg.push();
  pg.translate(-width / 2, -height / 2);
  pg.image(vid, 0, 0, width, height);
  pg.pop();

  pg.texture(vid);
  pg.textureMode(NORMAL);
  pg.noStroke();
  pg.beginShape();
  pg.vertex(0, 0, 0, 0);
  pg.vertex(2 * 100, 2 * -100, 1, 0);
  pg.vertex(2 * 100, 2 * 200, 1, 1);
  pg.vertex(0, 2 * 100, 0, 1);
  pg.endShape();

  pg.beginShape();
  pg.vertex(2 * -200, 2 * -200, 0, 0);
  pg.vertex(2 * -100, 2 * -200, 1, 0);
  pg.vertex(2 * -100, 2 * -100, 1, 1);
  pg.vertex(2 * -200, 2 * -100, 0, 1);
  pg.endShape();

  image(pg, 200, 200, 400, 400);
}

My question is which one is more optimal for running time and performance (I assume that there is a difference between WEBGL and P2D)?

Here is an example of the two options in the P5 editor if that’s help:

thanks :slight_smile:

1 Like
2

Hi @Omri,

I would say that making the whole canvas WEBGL is more optimized than using createGraphics and drawing it over the canvas since you have an additional overhead during compositing the two.

Also the default mode of p5.js is not PD2 but it uses the native HTML canvas in your browser :wink: (see this)

2 Likes
3

The best way to find out is probably to try both options and use the profiler in your browser’s dev tools to analyse the performance. If you have never used the dev tools, there is a bit of a learning curve but it’s worth it! :+1: I would also recommend testing across different browsers (Chrome, Safari, Firefox) because performance can vary wildly based on which Javascript engine is running your code. Testing on mobile is also a good idea if you expect people to check out your sketch on phones or tablets.

5 Likes