From 9cdeb398d04e7623a50c2790bdea0944ca2aff87 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Thu, 23 Nov 2023 17:36:46 -0500 Subject: [PATCH 1/4] Add clearDepth() method for feedback effects --- src/core/rendering.js | 76 +++++++++++++++++++++++++++++++++++--- src/webgl/p5.RendererGL.js | 9 +++++ 2 files changed, 79 insertions(+), 6 deletions(-) diff --git a/src/core/rendering.js b/src/core/rendering.js index 6d5aa5804a..47a6826fac 100644 --- a/src/core/rendering.js +++ b/src/core/rendering.js @@ -326,12 +326,11 @@ p5.prototype.createGraphics = function(w, h, renderer, canvas) { * @example *
* - * let prev, next, cam; + * let prev, next; * function setup() { * createCanvas(100, 100, WEBGL); * prev = createFramebuffer({ format: FLOAT }); * next = createFramebuffer({ format: FLOAT }); - * cam = createCamera(); * noStroke(); * } * @@ -345,12 +344,11 @@ p5.prototype.createGraphics = function(w, h, renderer, canvas) { * background(255); * * push(); - * // Draw the previous texture farther away, but scaled - * // up to fill the screen, plus a bit extra scale so it grows - * translate(0, 0, -200); - * scale(1.001 * (200 + cam.eyeZ) / cam.eyeZ); * tint(255, 253); * image(prev, -width/2, -height/2); + * // Make sure the image plane doesn't block you from seeing any part + * // of the scene + * clearDepth(); * pop(); * * push(); @@ -375,6 +373,72 @@ p5.prototype.createFramebuffer = function(options) { return new p5.Framebuffer(this, options); }; +/** + * This makes the canvas forget how far from the camera everything that has + * been drawn was. Use this if you want to make sure the next thing you draw + * will not draw behind anything that is already on the canvas. + * + * This is useful for things like feedback effects, where you want the previous + * frame to act like a background for the next frame, and not like a plane in + * 3D space in the scene. + * + * This method is only available in WebGL mode. Since 2D mode does not have + * 3D depth, anything you draw will always go on top of the previous content on + * the canvas anyway. + * + * @method clearDepth + * + * @example + *
+ * + * let prev, next; + * function setup() { + * createCanvas(100, 100, WEBGL); + * prev = createFramebuffer({ format: FLOAT }); + * next = createFramebuffer({ format: FLOAT }); + * noStroke(); + * } + * + * function draw() { + * // Swap prev and next so that we can use the previous + * // frame as a texture when drawing the current frame + * [prev, next] = [next, prev]; + * + * // Draw to the framebuffer + * next.begin(); + * background(255); + * + * push(); + * tint(255, 253); + * image(prev, -width/2, -height/2); + * // Make sure the image plane doesn't block you from seeing any part + * // of the scene + * clearDepth(); + * pop(); + * + * push(); + * normalMaterial(); + * translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0); + * rotateX(frameCount * 0.01); + * rotateY(frameCount * 0.01); + * box(12); + * pop(); + * next.end(); + * + * image(next, -width/2, -height/2); + * } + * + *
+ * + * @alt + * A red, green, and blue box (using normalMaterial) moves and rotates around + * the canvas, leaving a trail behind it that slowly grows and fades away. + */ +p5.prototype.clearDepth = function() { + this._assert3d('clearDepth'); + this._renderer.clearDepth(); +}; + /** * Blends the pixels in the display window according to the defined mode. * There is a choice of the following modes to blend the source pixels (A) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 171b4aa622..195f785e8a 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -1507,6 +1507,15 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT); } + /** + * Resets all depth information so that nothing previously drawn will + * occlude anything subsequently drawn. + */ + clearDepth() { + this.GL.clearDepth(1); + this.GL.clear(this.GL.DEPTH_BUFFER_BIT); + } + applyMatrix(a, b, c, d, e, f) { if (arguments.length === 16) { p5.Matrix.prototype.apply.apply(this.uMVMatrix, arguments); From b7894ae642408c9b9cecde4ba19e66a9800d9e2a Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 16 Dec 2023 14:59:33 -0500 Subject: [PATCH 2/4] Add depth parameter --- src/core/rendering.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/core/rendering.js b/src/core/rendering.js index 47a6826fac..eb5952f9e8 100644 --- a/src/core/rendering.js +++ b/src/core/rendering.js @@ -387,6 +387,10 @@ p5.prototype.createFramebuffer = function(options) { * the canvas anyway. * * @method clearDepth + * @parameter [depth] The value, between 0 and 1, to reset the depth to, where + * 0 corresponds to a value as close as possible to the camera before getting + * clipped, and 1 corresponds to a value as far away from the camera as possible. + * The default value is 1. * * @example *
@@ -434,9 +438,9 @@ p5.prototype.createFramebuffer = function(options) { * A red, green, and blue box (using normalMaterial) moves and rotates around * the canvas, leaving a trail behind it that slowly grows and fades away. */ -p5.prototype.clearDepth = function() { +p5.prototype.clearDepth = function(depth) { this._assert3d('clearDepth'); - this._renderer.clearDepth(); + this._renderer.clearDepth(depth); }; /** From d7b0aa01246705b1a1719cfe4d28842fbe6d98e2 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 16 Dec 2023 15:00:01 -0500 Subject: [PATCH 3/4] Add default value for cleared depth --- src/webgl/p5.RendererGL.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 195f785e8a..80f2132124 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -1511,8 +1511,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer { * Resets all depth information so that nothing previously drawn will * occlude anything subsequently drawn. */ - clearDepth() { - this.GL.clearDepth(1); + clearDepth(depth = 1) { + this.GL.clearDepth(depth); this.GL.clear(this.GL.DEPTH_BUFFER_BIT); } From 4ba8c67b164d73c519e381d5e1a16b9bb271b698 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Sat, 16 Dec 2023 15:01:29 -0500 Subject: [PATCH 4/4] Fix typo in parameter docs --- src/core/rendering.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/rendering.js b/src/core/rendering.js index eb5952f9e8..0d7d53d26a 100644 --- a/src/core/rendering.js +++ b/src/core/rendering.js @@ -387,7 +387,7 @@ p5.prototype.createFramebuffer = function(options) { * the canvas anyway. * * @method clearDepth - * @parameter [depth] The value, between 0 and 1, to reset the depth to, where + * @param {Number} [depth] The value, between 0 and 1, to reset the depth to, where * 0 corresponds to a value as close as possible to the camera before getting * clipped, and 1 corresponds to a value as far away from the camera as possible. * The default value is 1.