P5.js: is it possible to draw 2D and 3D on the same canvas?

Created on 6 Jul 2016 · 22Comments · Source: processing/p5.js

In processing we could achieve 2D and 3D in the same screen by enabling and disabling depth test. Is there something similar we can do with p5js?

Source

prasad73

👍2

All 22 comments

What do you mean with by enabling and disabling depth test? Changing the renderer at runtime? Anyway you can create multiple sketches (or canvas elements) side by side, e.g:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
  <script type="text/javascript">

  // Sketch A:
  new p5(function(p) {
    p.setup = function() {
      p.createCanvas(100, 100, p.WEBGL);  // <--- WEBGL
    };
    p.draw = function(b) {
      p.background(0);
      p.fill(255);
      p.rect(20,20,50,50);
    };
  });

  // Sketch B:
  new p5(function(p) {
    p.setup = function() {
      p.createCanvas(100, 100, p.P2D);  // <--- P2D
    };
    p.draw = function(b) {
      p.background(0);
      p.fill(255);
      p.rect(20,20,50,50);
    };
  });

  </script>
</head><body></body></html>

nok on 10 Jul 2016

Hi Darius,

Thank you for your explanation.

BTW, this could also be accomplished using CreateGraphics() right?

_Warm regards,_

_Kesava Prasad T D_

_Mob:+91 9895121918Off:+91-471-2361908_

On Sun, Jul 10, 2016 at 7:15 AM, Darius Morawiec [email protected]
wrote:

What do you mean with by enabling and disabling depth test? Changing the
renderer at runtime? Anyway you can create multiple sketches (or canvas
elements) side by side, e.g:

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js/issues/1507#issuecomment-231565854,
or mute the thread
https://github.com/notifications/unsubscribe/AEy99sYH2K252FJ6nbfS9r05eU5uxWu7ks5qUE69gaJpZM4JFqus
.

prasad73 on 10 Jul 2016

@prasad73 yes you could use createGraphics() after createCanvas(width,height,WEBGL) to render canvas2d content separate from webgl content. Going to close this issue for now. Thanks!

indefinit on 11 Jul 2016

I have been trying to do this but no matter what I try I can't seem to get it work...

var pg;
function setup() {
    createCanvas(windowWidth, windowHeight,WEBGL);
    pg = createGraphics(width-200, height-200);
    directionalLight(180, 180, 180, -.1, -.003, 1.2);
    specularMaterial(200, 20, 100);
}

function draw() {
    background(200);
    pg.background(7, 9, 10);
    //image(pg, 100, 100);
    box(200);
}

If I uncomment the image(pg,100,100); it keeps giving the error: "17822: Uncaught TypeError: undefined is not a function"

any thoughts?

sebmorales on 12 Jul 2016

@sebmorales Have you solved the problem? I feel like p5 WEBGL renderer still doesn't support image function....

kyungyunlee on 28 Mar 2017

@kyungyunlee I don't really know, I haven't tried it since.

sebmorales on 28 Mar 2017

anyone tried it the other way round (e.g. create a 2D canvas, and a WEBGL graphics? (about to give this a go, and will report back)

lxinspc on 1 Jun 2017

👍1

ok, need to do a bit more playing, but it looks like creating the canvas as P2D, and createGraphics as WEBGL is working, I've got a specific project I'm working on where I need both 2D and 3D graphics in different views - so I'll play a bit more with that, and see if I can make some progress

lxinspc on 2 Jun 2017

👍1

Did you manage to get a P2D canvas with WEBGL createGraphics?

I'm trying to do the same but can not draw anything (besides background) to the graphics buffer.

JeroenDerks on 7 Oct 2017

had to set pg.resetMatrix() and then it worked :)

JeroenDerks on 7 Oct 2017

👍1

cool! thanks for this info... just making a note here that it should be possible to mix and match 2d and 3d, with bugs filed for specific lapses (for more details about missing 2D functions in 3D mode, see #2181, #2182, #2183, #2184, #2185, #2186, #2187) :)

kjhollen on 17 Oct 2017

P5 WEBGL seems to have problems with image(): TypeError: this._renderer.image is not a function. (In 'this._renderer.image(a,s,t,u,v,x.x,x.y,x.w,x.h)', 'this._renderer.image' is undefined)

PC-Four on 7 Mar 2018

The current p5.js wiki on WEBGL does not include info about how to use image in WEBGL. Proper documentation is required to properly use this essential function in this renderer. Does this have any priority?

Sample trying the different suggestions in the forum failed: http://p5js.sketchpad.cc/sp/pad/view/En0henvcHV/latest

kfrajer on 6 Apr 2018

👍1

@kfrajer there is an open issue for this #2182. please make any further comments or requests there. thanks!

kjhollen on 6 Apr 2018

Answering to the original question, I figured out I could disable DEPTH_TEST by doing this hack:

var gl = document.getElementById('defaultCanvas0').getContext('webgl');
gl.disable(gl.DEPTH_TEST);

I figured it out by looking at https://github.com/processing/p5.js/blob/964ca1a324fa1c0768bf3d2fd4abc88cd3ba46fe/src/webgl/p5.RendererGL.js#L146

I don't know in which systems is experimental-webgl used, nor how this.attributes is used.

hamoid on 2 Jul 2018

@hamoid
Hi Abe, can you elaborate a bit on your solution? Or do you have an example? For me it didn't work.
I used the disabling/enabling of the z-buffer in processing and it is really usefull.

el-schneider on 28 Aug 2018

Hi! I only figured out how to disable depth test (commented line):

function setup() {
    createCanvas(400, 400, WEBGL);
    var gl = document.getElementById('defaultCanvas0').getContext('webgl');
    //gl.disable(gl.DEPTH_TEST);
}

function draw() {
    background(0);
    noStroke();

    fill(255, 200, 30);
    rotateY(frameCount * 0.01);
    box(200);

    fill(30, 200, 255);
    rotateY(PI * 0.25);
    box(200);
}

hamoid on 28 Aug 2018

var gl = document.getElementById('defaultCanvas0').getContext('webgl'); //gl.disable(gl.DEPTH_TEST);
Is this still working hamoid? Doesn't appear to have any effect on my sketch. Working in instance mode with one 2D sketch and one 3D sketch to which this is applied