# Implementing WEBGL 3D with graphics objects

**URL:** <https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 20, 2020, 8:37pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989 "2020-09-20T20:37:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlteredPhoenix](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AlteredPhoenix](https://discourse.processing.org/u/AlteredPhoenix)\
**Post date:** [September 20, 2020, 8:37pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/1 "2020-09-20T20:37:07Z")

</div>

Hello, I’m currently working on adding 3D functionality to a music visualizer program. Initially I planned to just add the WEBGL argument to the existing createCanvas(), but it caused formatting problems, so I switched to creating a graphics object.

For testing purposes I am starting with a simple spinning sphere, but I am running into an issue where the black lines used to define the sphere draw over each other, causing it to become a black circle after it revolves once.

I am using seperate .js files with a constructor function for each visualizer, and they get called individually from the main .js file. For this post, I have reduced everything to one simple file which still produces the same issue for me:

```auto
function setup(){
	 createCanvas(windowWidth, windowHeight);
     pg = createGraphics(windowWidth, windowHeight, WEBGL);
	 background(0);
}

function draw(){
    push();
    pg.rotateY(0.01);
    pg.sphere(50);
    image(pg, 0,0);
    pop();
}

```

I have tried several variations of push() and pop(), including pg.push() and pg.pop(), to see if it’s a strange formatting issue, but I can’t find the root cause. I don’t see any errors in the console, and all methods I have tried to fix it either slow down the process, change nothing, or freeze the sphere with no rotation.

Thanks!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 20, 2020, 9:24pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/2 "2020-09-20T21:24:41Z")

</div>

?

```auto
let pg;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  pg = createGraphics(120, 120, WEBGL);
  pg.background(0);
  pg.stroke(255);
  pg.noFill();
  pg.rotateY(millis() / 1000);
  pg.sphere(50);
  image(pg, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![AlteredPhoenix](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AlteredPhoenix](https://discourse.processing.org/u/AlteredPhoenix)\
**Post date:** [September 20, 2020, 9:35pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/3 "2020-09-20T21:35:11Z")

</div>

Well… that would explain it. Moving the createGraphics() line into the draw function fixes it.

Thanks for the help, I assumed it functioned virtually the same as createCanvas(), probably because I saw them both in setup() on the reference page. Didn’t realize implementing an animation required it to be moved to draw().

Thanks again!

---

<div class="post-metadata">

**Author:** ![AlteredPhoenix](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AlteredPhoenix](https://discourse.processing.org/u/AlteredPhoenix)\
**Post date:** [September 20, 2020, 10:09pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/4 "2020-09-20T22:09:34Z")

</div>

After examining further, it seems that this implementation causes lag followed by a crash.

Console shows “WARNING: Too many active WebGL contexts. Oldest context will be lost.” and the number rockets up into the hundreds…

is this fixable in some way?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 20, 2020, 10:52pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/5 "2020-09-20T22:52:51Z")

</div>

Wild guess, maybe writing pg = null; below image(pg, 0, 0);?

---

<div class="post-metadata">

**Author:** ![AlteredPhoenix](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AlteredPhoenix](https://discourse.processing.org/u/AlteredPhoenix)\
**Post date:** [September 20, 2020, 11:09pm UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/6 "2020-09-20T23:09:31Z")

</div>

Doesn’t seem to work, I have tried a few other things like pg.remove(), nothing appears to have an influence so far, other than limiting the framerate slowing the process. I’m getting concerned this may be an issue with using graphics objects with WEBGL in general.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 12:18am UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/7 "2020-09-21T00:18:08Z")

</div>

Well, I use Processing’s custom IDE and let it run for 10 minutes without getting any warning or error in Google Chrome.  
I can’t use the P5.js Web editor with this code, because their seems to be a bug there with the WEBGL renderer. Just writing:

```auto
function setup() {
	createCanvas(150, 100, WEBGL);
}

```

already gives the error:

```auto
🌸 p5.js says: An error with message "Error creating webgl context" occured inside the p5js library when createCanvas was called (on line 72 in about:srcdoc [about:srcdoc:72:2])

If not stated otherwise, it might be an issue with the arguments passed to createCanvas. (http://p5js.org/reference/#/p5/createCanvas)

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 1:22am UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/8 "2020-09-21T01:22:34Z")

</div>

But do you really need a PGraphics?  
This code works really smooth on my machine:

```auto

function setup() {
  createCanvas(400, 400, WEBGL);
  fill(200, 50, 50);
  stroke(170, 0, 0);
}

function draw() {
  background(0, 0, 150);
  ambientLight(250);
  pointLight(255, 255, 255, -width, -height, 2*height);
  rotateY(millis() / 1000);
  sphere(120);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 21, 2020, 9:23am UTC](https://discourse.processing.org/t/implementing-webgl-3d-with-graphics-objects/23989/9 "2020-09-21T09:23:47Z")

</div>

> [@AlteredPhoenix](#):
>
> … where the black lines used to define the sphere draw over each other, causing it to become a black circle after it revolves once.

- [reference | p5.js](http://p5js.org/reference/#/p5/clear)

```javascript
"use strict";

var pg;

function setup() {
  createCanvas(300, 200);
  background(0);
  pg = createGraphics(width, height, WEBGL);
}

function draw() {
  pg.clear().rotateY(.01).sphere(50);
  image(pg, 0, 0);
}

```