Merge branch 'dev-2.0' into transform/Clip

Author: perminder-17

package-lock.json

@@ -19,7 +19,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.2.0-rc.3",
+  "version": "2.2.0-rc.4",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "@japont/unicode-range": "^1.0.0",

package.json

@@ -1,12 +1,18 @@
 import * as constants from './constants';
 
 /*
- * Creates p5.strands filter shaders for cross-platform compatibility
+ * Creates p5.strands filter shaders for cross-platform compatibility.
+ *
+ * NOTE: These work a little differently than p5.js web editor shaders work!
+ * Firstly, it uses instance mode, so we have to explicitly pass in context
+ * variables in an argument to your callback and as a second argument to `modify`.
+ * Secondly, always manually specify uniform names, as variable names will change
+ * in minified builds.
  */
 export function makeFilterShader(renderer, operation, p5) {
   switch (operation) {
     case constants.GRAY:
-      return renderer.baseFilterShader().modify(() => {
+      return renderer.baseFilterShader().modify(({ p5 }) => {
         p5.getColor((inputs, canvasContent) => {
           const tex = p5.getTexture(canvasContent, inputs.texCoord);
           // weighted grayscale with luminance values
@@ -16,7 +22,7 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.INVERT:
-      return renderer.baseFilterShader().modify(() => {
+      return renderer.baseFilterShader().modify(({ p5 }) => {
         p5.getColor((inputs, canvasContent) => {
           const color = p5.getTexture(canvasContent, inputs.texCoord);
           const invertedColor = p5.vec3(1.0) - color.rgb;
@@ -25,8 +31,8 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.THRESHOLD:
-      return renderer.baseFilterShader().modify(() => {
-        const filterParameter = p5.uniformFloat();
+      return renderer.baseFilterShader().modify(({ p5 }) => {
+        const filterParameter = p5.uniformFloat('filterParameter');
         p5.getColor((inputs, canvasContent) => {
           const color = p5.getTexture(canvasContent, inputs.texCoord);
           // weighted grayscale with luminance values
@@ -38,8 +44,8 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.POSTERIZE:
-      return renderer.baseFilterShader().modify(() => {
-        const filterParameter = p5.uniformFloat();
+      return renderer.baseFilterShader().modify(({ p5 }) => {
+        const filterParameter = p5.uniformFloat('filterParameter');
         const quantize = (color, n) => {
           // restrict values to N options/bins
           // and floor each channel to nearest value
@@ -60,9 +66,9 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.BLUR:
-      return renderer.baseFilterShader().modify(() => {
-        const radius = p5.uniformFloat();
-        const direction = p5.uniformVec2();
+      return renderer.baseFilterShader().modify(({ p5 }) => {
+        const radius = p5.uniformFloat('radius');
+        const direction = p5.uniformVec2('direction');
 
         // This isn't a real Gaussian weight, it's a quadratic weight
         const quadWeight = (x, e) => {
@@ -120,7 +126,7 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.ERODE:
-      return renderer.baseFilterShader().modify(() => {
+      return renderer.baseFilterShader().modify(({ p5 }) => {
         const luma = (color) => {
           return p5.dot(color.rgb, p5.vec3(0.2126, 0.7152, 0.0722));
         };
@@ -150,7 +156,7 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.DILATE:
-      return renderer.baseFilterShader().modify(() => {
+      return renderer.baseFilterShader().modify(({ p5 }) => {
         const luma = (color) => {
           return p5.dot(color.rgb, p5.vec3(0.2126, 0.7152, 0.0722));
         };
@@ -180,7 +186,7 @@ export function makeFilterShader(renderer, operation, p5) {
       }, { p5 });
 
     case constants.OPAQUE:
-      return renderer.baseFilterShader().modify(() => {
+      return renderer.baseFilterShader().modify(({ p5 }) => {
         p5.getColor((inputs, canvasContent) => {
           const color = p5.getTexture(canvasContent, inputs.texCoord);
           return p5.vec4(color.rgb, 1.0);

src/core/filterShaders.js

@@ -1911,14 +1911,14 @@ export class Renderer3D extends Renderer {
   _getSphereMapping(img) {
     if (!this.sphereMapping) {
       const p5 = this._pInst;
-      this.sphereMapping = this.baseFilterShader().modify(() => {
-        const uEnvMap = p5.uniformTexture();
-        const uFovY = p5.uniformFloat();
-        const uAspect = p5.uniformFloat();
+      this.sphereMapping = this.baseFilterShader().modify(({ p5 }) => {
+        const uEnvMap = p5.uniformTexture('uEnvMap');
+        const uFovY = p5.uniformFloat('uFovY');
+        const uAspect = p5.uniformFloat('uAspect');
         // Hack: we don't have matrix uniforms yet; use three vectors
-        const uN1 = p5.uniformVec3();
-        const uN2 = p5.uniformVec3();
-        const uN3 = p5.uniformVec3();
+        const uN1 = p5.uniformVec3('uN1');
+        const uN2 = p5.uniformVec3('uN2');
+        const uN3 = p5.uniformVec3('uN3');
         p5.getColor((inputs) => {
           const uFovX = uFovY * uAspect;
           const angleY = p5.mix(uFovY/2.0,  -uFovY/2.0, inputs.texCoord.y);

src/core/p5.Renderer3D.js

@@ -75,7 +75,7 @@ function strands(p5, fn) {
 
   p5.Shader.prototype.modify = function (shaderModifier, scope = {}) {
     try {
-      if (shaderModifier instanceof Function) {
+      if (shaderModifier instanceof Function || typeof shaderModifier === 'string') {
         // Reset the context object every time modify is called;
         // const backend = glslBackend;
         initStrandsContext(strandsContext, this._renderer.strandsBackend, {
@@ -92,7 +92,9 @@ function strands(p5, fn) {
         if (options.parser) {
           // #7955 Wrap function declaration code in brackets so anonymous functions are not top level statements, which causes an error in acorn when parsing
           // https://github.com/acornjs/acorn/issues/1385
-          const sourceString = `(${shaderModifier.toString()})`;
+          const sourceString = typeof shaderModifier === 'string'
+            ? `(${shaderModifier})`
+            : `(${shaderModifier.toString()})`;
           strandsCallback = transpileStrandsToJS(
             p5,
             sourceString,

src/strands/p5.strands.js

@@ -359,7 +359,7 @@ export class StrandsFor {
     CFG.popBlock(cfg);
 
     const loopVarNode = createStrandsNode(phiNode.id, phiNode.dimension, this.strandsContext);
-    this.bodyResults = this.bodyCb(loopVarNode, phiVars);
+    this.bodyResults = this.bodyCb(loopVarNode, phiVars) || {};
     for (const key in this.bodyResults) {
       this.bodyResults[key] = this.strandsContext.p5.strandsNode(this.bodyResults[key]);
     }