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
Comments
What do you mean with <!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> |
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
|
@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! |
I have been trying to do this but no matter what I try I can't seem to get it work...
If I uncomment the image(pg,100,100); it keeps giving the error: "17822: Uncaught TypeError: undefined is not a function" any thoughts? |
@sebmorales Have you solved the problem? I feel like p5 WEBGL renderer still doesn't support image function.... |
@kyungyunlee I don't really know, I haven't tried it since. |
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) |
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 |
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. |
had to set pg.resetMatrix() and then it worked :) |
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) |
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 |
Answering to the original question, I figured out I could disable DEPTH_TEST by doing this hack:
I figured it out by looking at p5.js/src/webgl/p5.RendererGL.js Line 146 in 964ca1a
I don't know in which systems is |
@hamoid |
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);
} |
|
Hi @FedFod ! Did you try uncommenting |
Just realised that it doesn’t work in run time, must be set in the setup() function apparently. Solved thanks! |
Interactive version: https://editor.p5js.org/abe/sketches/rJm884hTQ |
Thanks! So basically can be used everywhere apart in the draw() function? |
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?
The text was updated successfully, but these errors were encountered: