From ba0f02ea38c913e2977bc3aaef923218d14bcf46 Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 12 Jan 2024 23:57:05 +0530 Subject: [PATCH 01/11] Solves issue #4214 --- src/webgl/p5.RendererGL.js | 9 +++++++++ src/webgl/p5.Shader.js | 13 +++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 097c9ab8c1..3c95d335f6 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -23,6 +23,15 @@ const defineStrokeJoinEnum = function (key, val) { STROKE_JOIN_ENUM[constants[key]] = val; }; +p5.prototype.linePerspective = function (enable) { + if (enable) { + this.drawingContext.linePerspective = true; + } else { + this.drawingContext.linePerspective = false; + } +}; + + // Define constants in line shaders for each type of cap/join, and also record // the values in JS objects defineStrokeCapEnum('ROUND', 0); diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index 3bb6c63a1a..90bbca439f 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -325,10 +325,15 @@ p5.Shader = class { if (this.isStrokeShader()) { if (this._renderer._curCamera.cameraType === 'default') { - // strokes scale up as they approach camera, default - this.setUniform('uPerspective', 1); - } else { - // strokes have uniform scale regardless of distance from camera + // Check if line perspective is enabled + if (this._renderer.drawingContext.linePerspective) { + // strokes scale up as they approach camera, default + this.setUniform('uPerspective', 1); + } else { + this.setUniform('uPerspective', 0); + } + }else{ + // Strokes have a uniform scale regardless of the distance from the camera this.setUniform('uPerspective', 0); } } From 656f80cc3d2ff8f42ae87aee6cbb00fef2f3c1c4 Mon Sep 17 00:00:00 2001 From: Garima Date: Sat, 13 Jan 2024 02:12:30 +0530 Subject: [PATCH 02/11] Updated inline docs for linePerspective() --- src/webgl/p5.RendererGL.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 3c95d335f6..618ffdc671 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -23,6 +23,21 @@ const defineStrokeJoinEnum = function (key, val) { STROKE_JOIN_ENUM[constants[key]] = val; }; +/** + * + * Enable or disable perspective for lines in the WebGL renderer. + * When linePerspective is enabled, lines will be affected by the current camera's perspective. + * When linePerspective is disabled, lines will have a uniform scale regardless of the camera's perspective. + + * + * @method linePerspective + * @memberof p5.prototype + * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. + *
+ * @example + * @TODO + */ + p5.prototype.linePerspective = function (enable) { if (enable) { this.drawingContext.linePerspective = true; From 2e945b22e129775e3dbbf774938d75bcce816361 Mon Sep 17 00:00:00 2001 From: Garima Date: Thu, 18 Jan 2024 22:18:41 +0530 Subject: [PATCH 03/11] Some fixes for linePerspective() --- src/webgl/p5.RendererGL.js | 7 +++++-- src/webgl/p5.Shader.js | 18 +++++++++++++----- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 618ffdc671..6b66de1b00 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -35,14 +35,17 @@ const defineStrokeJoinEnum = function (key, val) { * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. *
* @example - * @TODO + * @todo */ -p5.prototype.linePerspective = function (enable) { +p5.prototype.linePerspective = function (enable = true) { if (enable) { + // Enable line perspective this.drawingContext.linePerspective = true; } else { + // Disable line perspective this.drawingContext.linePerspective = false; + // this.perspective(); } }; diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index 90bbca439f..5effd4bfd0 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -325,18 +325,26 @@ p5.Shader = class { if (this.isStrokeShader()) { if (this._renderer._curCamera.cameraType === 'default') { - // Check if line perspective is enabled - if (this._renderer.drawingContext.linePerspective) { + // strokes scale up as they approach camera, default + this.setUniform('uPerspective', 1); + } else { + // strokes have uniform scale regardless of distance from camera + if (this._renderer.drawingContext.linePerspective || + this._renderer.drawingContext.linePerspective === undefined) { // strokes scale up as they approach camera, default this.setUniform('uPerspective', 1); } else { + // strokes have uniform scale regardless of distance from camera this.setUniform('uPerspective', 0); } - }else{ - // Strokes have a uniform scale regardless of the distance from the camera - this.setUniform('uPerspective', 0); } } + // else { + // // This part is for a different condition or fallback behavior + // // Strokes have a uniform scale regardless of the distance from the camera + // this.setUniform('uPerspective', 0); + // } + this.setUniform('uViewMatrix', viewMatrix.mat4); this.setUniform('uProjectionMatrix', projectionMatrix.mat4); this.setUniform('uModelViewMatrix', modelViewMatrix.mat4); From ceec7469d54fbc46c96d4043eb3da081e0bd8af8 Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 26 Jan 2024 14:15:44 +0530 Subject: [PATCH 04/11] Minor changes --- src/webgl/p5.Camera.js | 19 ++++++++++++++++++- src/webgl/p5.RendererGL.js | 26 -------------------------- src/webgl/p5.Shader.js | 15 +-------------- 3 files changed, 19 insertions(+), 41 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index a661c357b0..990144552d 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -193,6 +193,23 @@ p5.prototype.perspective = function (...args) { return this; }; +/** + * + * Enable or disable perspective for lines in the WebGL renderer. + * When linePerspective is enabled, lines will be affected by the current camera's perspective. + * When linePerspective is disabled, lines will have a uniform scale regardless of the camera's perspective. + * + * @method linePerspective + * @memberof p5.prototype + * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. + *
+ * @example + * @todo + */ +p5.prototype.linePerspective = function (enable) { + this._renderer._curCamera.useLinePerspective = enable; +}; + /** * Sets an orthographic projection for the current camera in a 3D sketch * and defines a box-shaped viewing frustum within which objects are seen. @@ -488,7 +505,7 @@ p5.Camera = class Camera { this._renderer = renderer; this.cameraType = 'default'; - + this.useLinePerspective = true; this.cameraMatrix = new p5.Matrix(); this.projMatrix = new p5.Matrix(); this.yScale = 1; diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index d5ff4a5419..1718897662 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -23,32 +23,6 @@ const defineStrokeJoinEnum = function (key, val) { STROKE_JOIN_ENUM[constants[key]] = val; }; -/** - * - * Enable or disable perspective for lines in the WebGL renderer. - * When linePerspective is enabled, lines will be affected by the current camera's perspective. - * When linePerspective is disabled, lines will have a uniform scale regardless of the camera's perspective. - - * - * @method linePerspective - * @memberof p5.prototype - * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. - *
- * @example - * @todo - */ - -p5.prototype.linePerspective = function (enable = true) { - if (enable) { - // Enable line perspective - this.drawingContext.linePerspective = true; - } else { - // Disable line perspective - this.drawingContext.linePerspective = false; - // this.perspective(); - } -}; - // Define constants in line shaders for each type of cap/join, and also record // the values in JS objects diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index 5effd4bfd0..b918ef1574 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -329,22 +329,9 @@ p5.Shader = class { this.setUniform('uPerspective', 1); } else { // strokes have uniform scale regardless of distance from camera - if (this._renderer.drawingContext.linePerspective || - this._renderer.drawingContext.linePerspective === undefined) { - // strokes scale up as they approach camera, default - this.setUniform('uPerspective', 1); - } else { - // strokes have uniform scale regardless of distance from camera - this.setUniform('uPerspective', 0); - } + this.setUniform('uPerspective', this._renderer._curCamera.useLinePerspective ? 1 : 0); } } - // else { - // // This part is for a different condition or fallback behavior - // // Strokes have a uniform scale regardless of the distance from the camera - // this.setUniform('uPerspective', 0); - // } - this.setUniform('uViewMatrix', viewMatrix.mat4); this.setUniform('uProjectionMatrix', projectionMatrix.mat4); this.setUniform('uModelViewMatrix', modelViewMatrix.mat4); From e0ed90a47b2f5a4e68a6e05ef54e522620adc1ba Mon Sep 17 00:00:00 2001 From: Garima Date: Sat, 3 Feb 2024 13:34:46 +0530 Subject: [PATCH 05/11] Minor changes in linePerspective() --- src/webgl/p5.Camera.js | 66 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 62 insertions(+), 4 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index e6aae656ec..6388aeab8f 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -193,23 +193,81 @@ p5.prototype.perspective = function (...args) { return this; }; + /** * * Enable or disable perspective for lines in the WebGL renderer. - * When linePerspective is enabled, lines will be affected by the current camera's perspective. - * When linePerspective is disabled, lines will have a uniform scale regardless of the camera's perspective. + * + * The behavior of `linePerspective()` is associated with the type of camera projection being used. + * + * When using `perspective()`, which simulates realistic perspective, linePerspective + * is set to `true` by default. This means that lines will be affected by the current + * camera's perspective, resulting in a more natural appearance. + * + * When using `ortho()` or `frustum()`, which do not simulate realistic perspective, + * linePerspective is set to `false` by default. In this case, lines will have a uniform + * scale regardless of the camera's perspective, providing a more predictable and + * consistent appearance. + * + * You can override the default behavior by explicitly calling `linePerspective()` after + * using perspective(), ortho(), or frustum(). This allows you to customize the line + * perspective based on your specific requirements. * * @method linePerspective * @memberof p5.prototype * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. + * @return {boolean} The boolean value representing the current state of linePerspective(). *
* @example - * @todo + *
+ * + * function setup() { + * createCanvas(100, 100, WEBGL); + * linePerspective(true); + * strokeWeight(3); + * describe( + * 'rotated 3D boxes have their stroke weights affected after mouse is clicked.' + * ); + * } + * + * function draw() { + * background(220); + * rotateY(PI/8); + * rotateZ(PI/8); + * translate(0, 0, 100); + * for (let i = 0; i < 12; i++) { + * translate(0, 0, -200); + * box(30); + * } + * } + * + * function mousePressed() { + * perspective(PI/12, width/height, 1, 10000); + * } + * + *
+ * + * @alt + * Demonstrates the dynamic control of line perspective in a 3D environment with rotating boxes. */ + p5.prototype.linePerspective = function (enable) { - this._renderer._curCamera.useLinePerspective = enable; + p5._validateParameters('linePerspective', arguments); + + if (!this._renderer._curCamera) { + this._renderer._curCamera = new p5.Camera(this._renderer); + } + + if (enable !== undefined) { + // Set the line perspective if enable is provided + this._renderer._curCamera.useLinePerspective = enable; + } else { + // If no argument is provided, return the current value + return this._renderer._curCamera.useLinePerspective; + } }; + /** * Sets an orthographic projection for the current camera in a 3D sketch * and defines a box-shaped viewing frustum within which objects are seen. From 3ea9737b9cc2c903a23c1e5cc5c52abe5c9eca7c Mon Sep 17 00:00:00 2001 From: Garima Date: Mon, 5 Feb 2024 02:19:32 +0530 Subject: [PATCH 06/11] Improved docs for linePerspective() --- src/webgl/p5.Camera.js | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 6388aeab8f..f42b3c6a75 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -197,21 +197,18 @@ p5.prototype.perspective = function (...args) { /** * * Enable or disable perspective for lines in the WebGL renderer. - * * The behavior of `linePerspective()` is associated with the type of camera projection being used. * - * When using `perspective()`, which simulates realistic perspective, linePerspective - * is set to `true` by default. This means that lines will be affected by the current - * camera's perspective, resulting in a more natural appearance. - * - * When using `ortho()` or `frustum()`, which do not simulate realistic perspective, - * linePerspective is set to `false` by default. In this case, lines will have a uniform - * scale regardless of the camera's perspective, providing a more predictable and - * consistent appearance. - * - * You can override the default behavior by explicitly calling `linePerspective()` after - * using perspective(), ortho(), or frustum(). This allows you to customize the line - * perspective based on your specific requirements. + * - When using `perspective()`, which simulates realistic perspective, linePerspective + * is set to `true` by default. This means that lines will be affected by the current + * camera's perspective, resulting in a more natural appearance. + * - When using `ortho()` or `frustum()`, which do not simulate realistic perspective, + * linePerspective is set to `false` by default. In this case, lines will have a uniform + * scale regardless of the camera's perspective, providing a more predictable and + * consistent appearance. + * - You can override the default behavior by explicitly calling `linePerspective()` after + * using `perspective()`, `ortho()`, or `frustum()`. This allows you to customize the line + * perspective based on your specific requirements. * * @method linePerspective * @memberof p5.prototype @@ -223,7 +220,6 @@ p5.prototype.perspective = function (...args) { * * function setup() { * createCanvas(100, 100, WEBGL); - * linePerspective(true); * strokeWeight(3); * describe( * 'rotated 3D boxes have their stroke weights affected after mouse is clicked.' @@ -234,15 +230,16 @@ p5.prototype.perspective = function (...args) { * background(220); * rotateY(PI/8); * rotateZ(PI/8); - * translate(0, 0, 100); + * translate(0, 0, 350); * for (let i = 0; i < 12; i++) { - * translate(0, 0, -200); + * translate(0, 0, -70); * box(30); * } * } * * function mousePressed() { * perspective(PI/12, width/height, 1, 10000); + * linePerspective(false); * } * * From 6640e17d6a0eaadc03c81d4119f650ffdd73e9c5 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 20 Feb 2024 00:21:41 +0530 Subject: [PATCH 07/11] Updated inline docs+code for linePerspective() --- src/webgl/p5.Camera.js | 44 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index f42b3c6a75..711b4948a3 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -213,8 +213,7 @@ p5.prototype.perspective = function (...args) { * @method linePerspective * @memberof p5.prototype * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. - * @return {boolean} The boolean value representing the current state of linePerspective(). - *
+ * * @example *
* @@ -244,9 +243,50 @@ p5.prototype.perspective = function (...args) { * *
* + *
+ * + * function setup() { + * createCanvas(100, 100, WEBGL); + * strokeWeight(4); + * } + * + * function draw() { + * background(220); + * + * // Using orthographic projection + * ortho(); + * + * // Enable line perspective explicitly + * linePerspective(true); + * + * // Draw a rotating cube + * rotateX(frameCount * 0.01); + * rotateY(frameCount * 0.01); + * box(25); + * + * // Move to a new position + * translate(0, -60, 0); + * + * // Using perspective projection + * perspective(); + * + * // Disable line perspective explicitly + * linePerspective(false); + * + * // Draw another rotating cube with perspective + * rotateX(frameCount * 0.01); + * rotateY(frameCount * 0.01); + * box(25); + * } + * + *
* @alt * Demonstrates the dynamic control of line perspective in a 3D environment with rotating boxes. */ +/** + * @method linePerspective + * @return {boolean} The boolean value representing the current state of linePerspective(). + */ p5.prototype.linePerspective = function (enable) { p5._validateParameters('linePerspective', arguments); From fbd12d9e1ae4c7249b9f1c5badb80ef8e3462f83 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 20 Feb 2024 00:43:51 +0530 Subject: [PATCH 08/11] fixed linting errors --- src/webgl/p5.Camera.js | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 711b4948a3..5a697ae841 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -246,37 +246,37 @@ p5.prototype.perspective = function (...args) { *
* * function setup() { - * createCanvas(100, 100, WEBGL); - * strokeWeight(4); + * createCanvas(100, 100, WEBGL); + * strokeWeight(4); * } * * function draw() { - * background(220); + * background(220); * - * // Using orthographic projection - * ortho(); + * // Using orthographic projection + * ortho(); * - * // Enable line perspective explicitly - * linePerspective(true); + * // Enable line perspective explicitly + * linePerspective(true); * - * // Draw a rotating cube - * rotateX(frameCount * 0.01); - * rotateY(frameCount * 0.01); - * box(25); + * // Draw a rotating cube + * rotateX(frameCount * 0.01); + * rotateY(frameCount * 0.01); + * box(25); * - * // Move to a new position - * translate(0, -60, 0); + * // Move to a new position + * translate(0, -60, 0); * - * // Using perspective projection - * perspective(); + * // Using perspective projection + * perspective(); * - * // Disable line perspective explicitly - * linePerspective(false); + * // Disable line perspective explicitly + * linePerspective(false); * - * // Draw another rotating cube with perspective - * rotateX(frameCount * 0.01); - * rotateY(frameCount * 0.01); - * box(25); + * // Draw another rotating cube with perspective + * rotateX(frameCount * 0.01); + * rotateY(frameCount * 0.01); + * box(25); * } * *
From 2e72d2e61fdc77abb378bc6e290270fd6c1c8216 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 27 Feb 2024 01:36:50 +0530 Subject: [PATCH 09/11] Minor fixes --- src/webgl/p5.Camera.js | 7 +------ src/webgl/p5.Shader.js | 8 +------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 5a697ae841..62b2ba6a29 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -211,7 +211,7 @@ p5.prototype.perspective = function (...args) { * perspective based on your specific requirements. * * @method linePerspective - * @memberof p5.prototype + * @for p5 * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable. * * @example @@ -237,7 +237,6 @@ p5.prototype.perspective = function (...args) { * } * * function mousePressed() { - * perspective(PI/12, width/height, 1, 10000); * linePerspective(false); * } * @@ -291,10 +290,6 @@ p5.prototype.perspective = function (...args) { p5.prototype.linePerspective = function (enable) { p5._validateParameters('linePerspective', arguments); - if (!this._renderer._curCamera) { - this._renderer._curCamera = new p5.Camera(this._renderer); - } - if (enable !== undefined) { // Set the line perspective if enable is provided this._renderer._curCamera.useLinePerspective = enable; diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index 45c52f2566..649b609a24 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -324,13 +324,7 @@ p5.Shader = class { modelViewProjectionMatrix.mult(projectionMatrix); if (this.isStrokeShader()) { - if (this._renderer._curCamera.cameraType === 'default') { - // strokes scale up as they approach camera, default - this.setUniform('uPerspective', 1); - } else { - // strokes have uniform scale regardless of distance from camera - this.setUniform('uPerspective', this._renderer._curCamera.useLinePerspective ? 1 : 0); - } + this.setUniform('uPerspective', this._renderer._curCamera.useLinePerspective ? 1 : 0); } this.setUniform('uViewMatrix', viewMatrix.mat4); this.setUniform('uProjectionMatrix', projectionMatrix.mat4); From 9ebeceac7322c3ab250369ff292642683df380b2 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 27 Feb 2024 15:07:54 +0530 Subject: [PATCH 10/11] Updated linePerspective --- src/webgl/p5.Camera.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 62b2ba6a29..65a95de117 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -289,7 +289,9 @@ p5.prototype.perspective = function (...args) { p5.prototype.linePerspective = function (enable) { p5._validateParameters('linePerspective', arguments); - + if (!(this._renderer instanceof p5.RendererGL)) { + throw new Error('linePerspective() must be called in WebGL mode.'); + } if (enable !== undefined) { // Set the line perspective if enable is provided this._renderer._curCamera.useLinePerspective = enable; From bbb4a3f431805ea7a040541d5bebc99ec88c6d9f Mon Sep 17 00:00:00 2001 From: Garima Date: Wed, 28 Feb 2024 01:07:48 +0530 Subject: [PATCH 11/11] Minor updates on inline doc --- src/webgl/p5.Camera.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 65a95de117..b096af803c 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -219,15 +219,16 @@ p5.prototype.perspective = function (...args) { * * function setup() { * createCanvas(100, 100, WEBGL); + * setAttributes({ antialias: true }); * strokeWeight(3); * describe( - * 'rotated 3D boxes have their stroke weights affected after mouse is clicked.' + * 'rotated 3D boxes have their stroke weights affected if toggled back and forth with mouse clicks.' * ); * } * * function draw() { * background(220); - * rotateY(PI/8); + * rotateY(PI/24); * rotateZ(PI/8); * translate(0, 0, 350); * for (let i = 0; i < 12; i++) { @@ -237,7 +238,7 @@ p5.prototype.perspective = function (...args) { * } * * function mousePressed() { - * linePerspective(false); + * linePerspective(!linePerspective()); * } * *