# Optimization question about WEBGL
**URL:** https://discourse.processing.org/t/optimization-question-about-webgl/39196
**Category:** Coding Questions
**Created:** [October 10, 2022, 5:48pm UTC](https://discourse.processing.org/t/optimization-question-about-webgl/39196 "2022-10-10T17:48:56Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Omri](https://discourse.processing.org/u/Omri)
#### Post date: [October 10, 2022, 5:48pm UTC](https://discourse.processing.org/t/optimization-question-about-webgl/39196/1 "2022-10-10T17:48:57Z")
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:
```auto
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:
```auto
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:
> **[p5.js Web Editor](https://editor.p5js.org/omribergman05/sketches/r6onkMRbI)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
thanks 🙂
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [October 11, 2022, 8:53am UTC](https://discourse.processing.org/t/optimization-question-about-webgl/39196/2 "2022-10-11T08:53:58Z")
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 😉 (see [this](https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267/3))
---
### Author:  [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [October 11, 2022, 12:12pm UTC](https://discourse.processing.org/t/optimization-question-about-webgl/39196/3 "2022-10-11T12:12:10Z")
The best way to find out is probably to try both options and [use the profiler in your browser’s dev tools](https://developer.chrome.com/docs/devtools/evaluate-performance/) 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! 👍 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.