Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

is it possible to draw 2D and 3D on the same canvas? #1507

Closed
prasad73 opened this issue Jul 6, 2016 · 22 comments
Closed

is it possible to draw 2D and 3D on the same canvas? #1507

prasad73 opened this issue Jul 6, 2016 · 22 comments

Comments

@prasad73
Copy link

prasad73 commented Jul 6, 2016

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?

@nok
Copy link
Contributor

nok commented Jul 10, 2016

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>

@prasad73
Copy link
Author

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 notifications@github.com
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:

<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>


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1507 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AEy99sYH2K252FJ6nbfS9r05eU5uxWu7ks5qUE69gaJpZM4JFqus
.

@indefinit
Copy link
Contributor

@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!

@sebmorales
Copy link

sebmorales commented Jul 12, 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?

@kyungyunlee
Copy link

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

@sebmorales
Copy link

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

@lxinspc
Copy link

lxinspc commented Jun 1, 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
Copy link

lxinspc commented Jun 2, 2017

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

@JeroenDerks
Copy link

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
Copy link

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

@kjhollen
Copy link
Member

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) :)

@PC-Four
Copy link

PC-Four commented Mar 7, 2018

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)

@kfrajer
Copy link
Contributor

kfrajer commented Apr 6, 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

Kf

@kjhollen
Copy link
Member

kjhollen commented Apr 6, 2018

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

@hamoid
Copy link
Contributor

hamoid commented Jul 2, 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

gl.enable(gl.DEPTH_TEST);

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

@el-schneider
Copy link

@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.

@hamoid
Copy link
Contributor

hamoid commented Aug 28, 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);
}

1
2

@FedFod
Copy link

FedFod commented Nov 16, 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

@hamoid
Copy link
Contributor

hamoid commented Nov 16, 2018

Hi @FedFod ! Did you try uncommenting gl.disable(gl.DEPTH_TEST); to disable depth test?

@FedFod
Copy link

FedFod commented Nov 16, 2018

Just realised that it doesn’t work in run time, must be set in the setup() function apparently. Solved thanks!

@hamoid
Copy link
Contributor

hamoid commented Nov 16, 2018

Interactive version: https://editor.p5js.org/abe/sketches/rJm884hTQ

@FedFod
Copy link

FedFod commented Nov 16, 2018

Thanks! So basically can be used everywhere apart in the draw() function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests