Merge branch 'dev-2.0' into stencil_test

Author: Vaivaswat2244

package-lock.json

@@ -22,7 +22,7 @@
       "node ./utils/sample-linter.mjs"
     ]
   },
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "acorn": "^8.12.1",

package.json

@@ -14,6 +14,11 @@ import filterThresholdFrag from '../webgl/shaders/filters/threshold.frag';
 import filterShaderVert from '../webgl/shaders/filters/default.vert';
 import { filterParamDefaults } from "./const";
 
+
+import filterBaseFrag from "../webgl/shaders/filters/base.frag";
+import filterBaseVert from "../webgl/shaders/filters/base.vert";
+import webgl2CompatibilityShader from "../webgl/shaders/webgl2Compatibility.glsl";
+
 class FilterRenderer2D {
   /**
    * Creates a new FilterRenderer2D instance.
@@ -27,7 +32,12 @@ class FilterRenderer2D {
     this.canvas.height = pInst.height;
 
     // Initialize the WebGL context
-    this.gl = this.canvas.getContext('webgl');
+    let webglVersion = constants.WEBGL2;
+    this.gl = this.canvas.getContext('webgl2');
+    if (!this.gl) {
+      webglVersion = constants.WEBGL;
+      this.gl = this.canvas.getContext('webgl');
+    }
     if (!this.gl) {
       console.error("WebGL not supported, cannot apply filter.");
       return;
@@ -38,7 +48,7 @@ class FilterRenderer2D {
       registerEnabled: new Set(),
       _curShader: null,
       _emptyTexture: null,
-      webglVersion: 'WEBGL',
+      webglVersion,
       states: {
         textureWrapX: this.gl.CLAMP_TO_EDGE,
         textureWrapY: this.gl.CLAMP_TO_EDGE,
@@ -54,6 +64,8 @@ class FilterRenderer2D {
       },
     };
 
+    this._baseFilterShader = undefined;
+
     // Store the fragment shader sources
     this.filterShaderSources = {
       [constants.BLUR]: filterBlurFrag,
@@ -90,6 +102,45 @@ class FilterRenderer2D {
     this._bindBufferData(this.texcoordBuffer, this.gl.ARRAY_BUFFER, this.texcoords);
   }
 
+  _webGL2CompatibilityPrefix(shaderType, floatPrecision) {
+    let code = "";
+    if (this._renderer.webglVersion === constants.WEBGL2) {
+      code += "#version 300 es\n#define WEBGL2\n";
+    }
+    if (shaderType === "vert") {
+      code += "#define VERTEX_SHADER\n";
+    } else if (shaderType === "frag") {
+      code += "#define FRAGMENT_SHADER\n";
+    }
+    if (floatPrecision) {
+      code += `precision ${floatPrecision} float;\n`;
+    }
+    return code;
+  }
+
+  baseFilterShader() {
+    if (!this._baseFilterShader) {
+      this._baseFilterShader = new Shader(
+        this._renderer,
+        this._webGL2CompatibilityPrefix("vert", "highp") +
+          webgl2CompatibilityShader +
+          filterBaseVert,
+        this._webGL2CompatibilityPrefix("frag", "highp") +
+          webgl2CompatibilityShader +
+          filterBaseFrag,
+        {
+            vertex: {},
+            fragment: {
+              "vec4 getColor": `(FilterInputs inputs, in sampler2D canvasContent) {
+                return getTexture(canvasContent, inputs.texCoord);
+              }`,
+            },
+          }
+      );
+    }
+    return this._baseFilterShader;
+  }
+
   /**
    * Set the current filter operation and parameter. If a customShader is provided,
    * that overrides the operation-based shader.

src/image/filterRenderer2D.js

@@ -287,13 +287,13 @@ function image(p5, fn){
       const framebuffer = args[0];
       temporaryGraphics = this.createGraphics(framebuffer.width,
         framebuffer.height);
-      temporaryGraphics.pixelDensity(pixelDensity());
+      temporaryGraphics.pixelDensity(framebuffer.pixelDensity());
       framebuffer.loadPixels();
       temporaryGraphics.loadPixels();
       temporaryGraphics.pixels.set(framebuffer.pixels);
       temporaryGraphics.updatePixels();
 
-      htmlCanvas = temporaryGraphics.elt;
+      htmlCanvas = temporaryGraphics._renderer.canvas;
       args.shift();
     } else {
       htmlCanvas = this._curElement && this._curElement.elt;

src/image/image.js

@@ -1520,6 +1520,82 @@ function material(p5, fn){
     return this._renderer.baseMaterialShader();
   };
 
+  /**
+   * Get the base shader for filters.
+   *
+   * You can then call <a href="#/p5.Shader/modify">`baseFilterShader().modify()`</a>
+   * and change the following hook:
+   *
+   * <table>
+   * <tr><th>Hook</th><th>Description</th></tr>
+   * <tr><td>
+   *
+   * `vec4 getColor`
+   *
+   * </td><td>
+   *
+   * Output the final color for the current pixel. It takes in two parameters:
+   * `FilterInputs inputs`, and `in sampler2D canvasContent`, and must return a color
+   * as a `vec4`.
+   *
+   * `FilterInputs inputs` is a scruct with the following properties:
+   * - `vec2 texCoord`, the position on the canvas, with coordinates between 0 and 1. Calling
+   *   `getTexture(canvasContent, texCoord)` returns the original color of the current pixel.
+   * - `vec2 canvasSize`, the width and height of the sketch.
+   * - `vec2 texelSize`, the size of one real pixel relative to the size of the whole canvas.
+   *   This is equivalent to `1 / (canvasSize * pixelDensity)`.
+   *
+   * `in sampler2D canvasContent` is a texture with the contents of the sketch, pre-filter. Call
+   * `getTexture(canvasContent, someCoordinate)` to retrieve the color of the sketch at that coordinate,
+   * with coordinate values between 0 and 1.
+   *
+   * </td></tr>
+   * </table>
+   *
+   * Most of the time, you will need to write your hooks in GLSL ES version 300. If you
+   * are using WebGL 1, write your hooks in GLSL ES 100 instead.
+   *
+   * @method baseFilterShader
+   * @beta
+   * @returns {p5.Shader} The filter shader
+   *
+   * @example
+   * <div modernizr='webgl'>
+   * <code>
+   * let img;
+   * let myShader;
+   *
+   * async function setup() {
+   *   img = await loadImage('assets/bricks.jpg');
+   *   createCanvas(100, 100, WEBGL);
+   *   myShader = baseFilterShader().modify({
+   *     uniforms: {
+   *       'float time': () => millis()
+   *     },
+   *     'vec4 getColor': `(
+   *       FilterInputs inputs,
+   *       in sampler2D canvasContent
+   *     ) {
+   *       inputs.texCoord.y +=
+   *         0.01 * sin(time * 0.001 + inputs.position.x * 5.0);
+   *       return getTexture(canvasContent, inputs.texCoord);
+   *     }`
+   *   });
+   * }
+   *
+   * function draw() {
+   *   image(img, -50, -50);
+   *   filter(myShader);
+   *   describe('an image of bricks, distorting over time');
+   * }
+   * </code>
+   * </div>
+   */
+  fn.baseFilterShader = function() {
+    return (this._renderer.filterRenderer || this._renderer)
+      .baseFilterShader();
+  };
+
   /**
    * Get the shader used by <a href="#/p5/normalMaterial">`normalMaterial()`</a>.
    *