Add tests + get varyings working

davepagurek · davepagurek · commit 63ed35589a8a · 2025-11-01T18:20:09.000-04:00
diff --git a/src/strands/p5.strands.js b/src/strands/p5.strands.js
@@ -25,6 +25,7 @@ function strands(p5, fn) {
     ctx.vertexDeclarations = new Set();
     ctx.fragmentDeclarations = new Set();
     ctx.hooks = [];
+    ctx.globalAssignments = [];
     ctx.backend = backend;
     ctx.active = active;
     ctx.previousFES = p5.disableFriendlyErrors;
@@ -42,6 +43,7 @@ function strands(p5, fn) {
     ctx.vertexDeclarations = new Set();
     ctx.fragmentDeclarations = new Set();
     ctx.hooks = [];
+    ctx.globalAssignments = [];
     ctx.active = false;
     p5.disableFriendlyErrors = ctx.previousFES;
     for (const key in ctx.windowOverrides) {
diff --git a/src/strands/strands_api.js b/src/strands/strands_api.js
@@ -149,10 +149,17 @@ export function initGlobalStrandsAPI(p5, fn, strandsContext) {
       strandsContext.uniforms.push({ name, typeInfo, defaultValue });
       return createStrandsNode(id, dimension, strandsContext);
     };
+    fn[`varying${pascalTypeName}`] = function(name) {
+      const { id, dimension } = build.variableNode(strandsContext, typeInfo, name);
+      strandsContext.vertexDeclarations.add(`out ${typeInfo.fnName} ${name};`);
+      strandsContext.fragmentDeclarations.add(`in ${typeInfo.fnName} ${name};`);
+      return createStrandsNode(id, dimension, strandsContext);
+    };
     if (pascalTypeName.startsWith('Vec')) {
       // For compatibility, also alias uniformVec2 as uniformVector2, what we initially
       // documented these as
       fn[`uniform${pascalTypeName.replace('Vec', 'Vector')}`] = fn[`uniform${pascalTypeName}`];
+      fn[`varying${pascalTypeName.replace('Vec', 'Vector')}`] = fn[`varying${pascalTypeName}`];
     }
     const originalp5Fn = fn[typeInfo.fnName];
     fn[typeInfo.fnName] = function(...args) {
diff --git a/src/strands/strands_codegen.js b/src/strands/strands_codegen.js
@@ -28,13 +28,26 @@ export function generateShaderCode(strandsContext) {
       tempNames: {},
       declarations: [],
       nextTempID: 0,
+      visitedNodes: new Set(),
     };
 
     const blocks = sortCFG(cfg.outgoingEdges, entryBlockID);
     for (const blockID of blocks) {
       backend.generateBlock(blockID, strandsContext, generationContext);
     }
 
+    // Process any unvisited global assignments to ensure side effects are generated
+    for (const assignmentNodeID of strandsContext.globalAssignments) {
+      if (!generationContext.visitedNodes.has(assignmentNodeID)) {
+        // This assignment hasn't been visited yet, so we need to generate it
+        backend.generateAssignment(generationContext, strandsContext.dag, assignmentNodeID);
+        generationContext.visitedNodes.add(assignmentNodeID);
+      }
+    }
+    
+    // Reset global assignments for next hook
+    strandsContext.globalAssignments = [];
+
     const firstLine = backend.hookEntry(hookType);
     let returnType = hookType.returnType.properties
       ? structType(hookType.returnType)
diff --git a/src/strands/strands_glslBackend.js b/src/strands/strands_glslBackend.js
@@ -40,6 +40,7 @@ const cfgHandlers = {
       }
       if (nodeType === NodeType.ASSIGNMENT) {
         glslBackend.generateAssignment(generationContext, dag, nodeID);
+        generationContext.visitedNodes.add(nodeID);
       }
     }
   },
@@ -127,6 +128,7 @@ const cfgHandlers = {
       }
       if (node.nodeType === NodeType.ASSIGNMENT) {
         glslBackend.generateAssignment(generationContext, dag, nodeID);
+        generationContext.visitedNodes.add(nodeID);
       }
     }
 
@@ -195,16 +197,25 @@ export const glslBackend = {
   },
   generateAssignment(generationContext, dag, nodeID) {
     const node = getNodeDataFromID(dag, nodeID);
-    // dependsOn[0] = phiNodeID, dependsOn[1] = sourceNodeID
-    const phiNodeID = node.dependsOn[0];
+    // dependsOn[0] = targetNodeID, dependsOn[1] = sourceNodeID
+    const targetNodeID = node.dependsOn[0];
     const sourceNodeID = node.dependsOn[1];
-    const phiTempName = generationContext.tempNames[phiNodeID];
+    const targetNode = getNodeDataFromID(dag, targetNodeID);
+    
+    // Check if this is a varying variable assignment (target has identifier)
+    let targetName;
+    if (targetNode && targetNode.identifier) {
+      targetName = targetNode.identifier; // Use variable identifier directly
+    } else {
+      targetName = generationContext.tempNames[targetNodeID]; // Use temp name for phi nodes
+    }
+    
     const sourceExpr = this.generateExpression(generationContext, dag, sourceNodeID);
     const semicolon = generationContext.suppressSemicolon ? '' : ';';
-
-    // Skip assignment if target and source are the same variable
-    if (phiTempName && sourceExpr && phiTempName !== sourceExpr) {
-      generationContext.write(`${phiTempName} = ${sourceExpr}${semicolon}`);
+    
+    // Generate assignment if we have both target and source
+    if (targetName && sourceExpr && targetName !== sourceExpr) {
+      generationContext.write(`${targetName} = ${sourceExpr}${semicolon}`);
     }
   },
   generateDeclaration(generationContext, dag, nodeID) {
@@ -311,7 +322,11 @@ export const glslBackend = {
       }
       case NodeType.PHI:
       // Phi nodes represent conditional merging of values
-      // They should already have been declared as temporary variables
+      // If this phi node has an identifier (like varying variables), use that
+      if (node.identifier) {
+        return node.identifier;
+      }
+      // Otherwise, they should have been declared as temporary variables
       // and assigned in the appropriate branches
       if (generationContext.tempNames?.[nodeID]) {
         return generationContext.tempNames[nodeID];
diff --git a/src/strands/strands_node.js b/src/strands/strands_node.js
@@ -1,13 +1,92 @@
-import { swizzleTrap } from './ir_builders';
+import { swizzleTrap, primitiveConstructorNode, variableNode } from './ir_builders';
+import { BaseType, NodeType } from './ir_types';
+import { getNodeDataFromID, createNodeData, getOrCreateNode } from './ir_dag';
+import { recordInBasicBlock } from './ir_cfg';
 export class StrandsNode {
   constructor(id, dimension, strandsContext) {
     this.id = id;
     this.strandsContext = strandsContext;
     this.dimension = dimension;
+    
+    // Store original identifier for varying variables
+    const dag = this.strandsContext.dag;
+    const nodeData = getNodeDataFromID(dag, this.id);
+    if (nodeData && nodeData.identifier) {
+      this._originalIdentifier = nodeData.identifier;
+      this._originalBaseType = nodeData.baseType;
+      this._originalDimension = nodeData.dimension;
+    }
   }
   copy() {
     return createStrandsNode(this.id, this.dimension, this.strandsContext);
   }
+  bridge(value) {
+    const { dag, cfg } = this.strandsContext;
+    const orig = getNodeDataFromID(dag, this.id);
+    const baseType = orig?.baseType ?? BaseType.FLOAT;
+    
+    let newValueID;
+    if (value instanceof StrandsNode) {
+      newValueID = value.id;
+    } else {
+      const newVal = primitiveConstructorNode(
+        this.strandsContext, 
+        { baseType, dimension: this.dimension }, 
+        value
+      );
+      newValueID = newVal.id;
+    }
+    
+    // For varying variables, we need both assignment generation AND a way to reference by identifier
+    if (this._originalIdentifier) {
+      // Create a variable node for the target (the varying variable)
+      const { id: targetVarID } = variableNode(
+        this.strandsContext,
+        { baseType: this._originalBaseType, dimension: this._originalDimension },
+        this._originalIdentifier
+      );
+      
+      // Create assignment node for GLSL generation
+      const assignmentNode = createNodeData({
+        nodeType: NodeType.ASSIGNMENT,
+        dependsOn: [targetVarID, newValueID],
+        phiBlocks: []
+      });
+      const assignmentID = getOrCreateNode(dag, assignmentNode);
+      recordInBasicBlock(cfg, cfg.currentBlock, assignmentID);
+      
+      // Track for global assignments processing
+      this.strandsContext.globalAssignments.push(assignmentID);
+      
+      // Simply update this node to be a variable node with the identifier
+      // This ensures it always generates the variable name in expressions
+      const variableNodeData = createNodeData({
+        nodeType: NodeType.VARIABLE,
+        baseType: this._originalBaseType,
+        dimension: this._originalDimension,
+        identifier: this._originalIdentifier
+      });
+      const variableID = getOrCreateNode(dag, variableNodeData);
+      
+      this.id = variableID; // Point to the variable node for expression generation
+    } else {
+      this.id = newValueID; // For non-varying variables, just update to new value
+    }
+    
+    return this;
+  }
+  getValue() {
+    if (this._originalIdentifier) {
+      const { id, dimension } = variableNode(
+        this.strandsContext,
+        { baseType: this._originalBaseType, dimension: this._originalDimension },
+        this._originalIdentifier
+      );
+      return createStrandsNode(id, dimension, this.strandsContext);
+    }
+    
+    return this;
+  }
 }
 export function createStrandsNode(id, dimension, strandsContext, onRebind) {
   return new Proxy(
diff --git a/src/strands/strands_transpiler.js b/src/strands/strands_transpiler.js
@@ -38,6 +38,21 @@ function nodeIsUniform(ancestor) {
       )
     );
 }
+
+function nodeIsVarying(node) {
+  return node?.type === 'CallExpression'
+    && (
+      (
+        // Global mode
+        node.callee?.type === 'Identifier' &&
+        node.callee?.name.startsWith('varying')
+      ) || (
+        // Instance mode
+        node.callee?.type === 'MemberExpression' &&
+        node.callee?.property.name.startsWith('varying')
+      )
+    );
+}
 const ASTCallbacks = {
   UnaryExpression(node, _state, ancestors) {
     if (ancestors.some(nodeIsUniform)) { return; }
@@ -101,7 +116,7 @@ const ASTCallbacks = {
       }
       node.init.arguments.unshift(uniformNameLiteral);
     }
-    if (node.init.callee && node.init.callee.name?.startsWith('varying')) {
+    if (nodeIsVarying(node.init)) {
       const varyingNameLiteral = {
         type: 'Literal',
         value: node.id.name
diff --git a/test/unit/webgl/p5.Shader.js b/test/unit/webgl/p5.Shader.js
@@ -1067,6 +1067,108 @@ suite('p5.Shader', function() {
       });
     });
 
+    suite('passing data between shaders', () => {
+      test('handle passing a value from a vertex hook to a fragment hook', () => {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+
+        const testShader = myp5.baseMaterialShader().modify(() => {
+          let worldPos = myp5.varyingVec3();
+          myp5.getWorldInputs((inputs) => {
+            worldPos = inputs.position.xyz;
+            return inputs;
+          });
+          myp5.getFinalColor((c) => {
+            return [myp5.abs(worldPos / 25), 1];
+          });
+        }, { myp5 });
+
+        myp5.background(0, 0, 255); // Make the background blue to tell it apart
+        myp5.noStroke();
+        myp5.shader(testShader);
+        myp5.plane(myp5.width, myp5.height);
+
+        // The middle should have position 0,0 which translates to black
+        const midColor = myp5.get(25, 25);
+        assert.approximately(midColor[0], 0, 5);
+        assert.approximately(midColor[1], 0, 5);
+        assert.approximately(midColor[2], 0, 5);
+
+        // The corner should have position 1,1 which translates to yellow
+        const cornerColor = myp5.get(0, 0);
+        assert.approximately(cornerColor[0], 255, 5);
+        assert.approximately(cornerColor[1], 255, 5);
+        assert.approximately(cornerColor[2], 0, 5);
+      });
+
+      test.only('handle passing a value from a vertex hook to a fragment hook', () => {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+
+        const testShader = myp5.baseMaterialShader().modify(() => {
+          let worldPos = myp5.varyingVec3();
+          myp5.getWorldInputs((inputs) => {
+            worldPos.xyz = inputs.position.xyz;
+            return inputs;
+          });
+          myp5.getFinalColor((c) => {
+            return [myp5.abs(worldPos / 25), 1];
+          });
+        }, { myp5 });
+
+        console.log('VERTEX SHADER OUTPUT:');
+        console.log(testShader.vertSrc());
+
+        myp5.background(0, 0, 255); // Make the background blue to tell it apart
+        myp5.noStroke();
+        myp5.shader(testShader);
+        myp5.plane(myp5.width, myp5.height);
+
+        // The middle should have position 0,0 which translates to black
+        const midColor = myp5.get(25, 25);
+        assert.approximately(midColor[0], 0, 5);
+        assert.approximately(midColor[1], 0, 5);
+        assert.approximately(midColor[2], 0, 5);
+
+        // The corner should have position 1,1 which translates to yellow
+        const cornerColor = myp5.get(0, 0);
+        assert.approximately(cornerColor[0], 255, 5);
+        assert.approximately(cornerColor[1], 255, 5);
+        assert.approximately(cornerColor[2], 0, 5);
+      });
+
+      test('handle passing a value from a vertex hook to a fragment hook as part of hook output', () => {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+
+        const testShader = myp5.baseMaterialShader().modify(() => {
+          let worldPos = myp5.varyingVec3();
+          myp5.getWorldInputs((inputs) => {
+            worldPos = inputs.position.xyz;
+            inputs.position.xyz = worldPos + [25, 25, 0];
+            return inputs;
+          });
+          myp5.getFinalColor((c) => {
+            return [myp5.abs(worldPos / 25), 1];
+          });
+        }, { myp5 });
+
+        myp5.background(0, 0, 255); // Make the background blue to tell it apart
+        myp5.noStroke();
+        myp5.shader(testShader);
+        myp5.plane(myp5.width, myp5.height);
+
+        // The middle (shifted +25,25) should have position 0,0 which translates to black
+        const midColor = myp5.get(49, 49);
+        assert.approximately(midColor[0], 0, 5);
+        assert.approximately(midColor[1], 0, 5);
+        assert.approximately(midColor[2], 0, 5);
+
+        // The corner (shifted +25,25) should have position 1,1 which translates to yellow
+        const cornerColor = myp5.get(25, 25);
+        assert.approximately(cornerColor[0], 255, 5);
+        assert.approximately(cornerColor[1], 255, 5);
+        assert.approximately(cornerColor[2], 0, 5);
+      });
+    });
+
     suite('filter shader hooks', () => {
       test('handle getColor hook with non-struct return type', () => {
         myp5.createCanvas(50, 50, myp5.WEBGL);
