Add Warp effect

Author: martinRenou

src/EffectBlock.ts

@@ -106,6 +106,17 @@ class Effect extends Block {
     }
   }
 
+  /**
+   * Add transform node to materials
+   */
+  addTransformNode (operation: NodeOperation, transformNode: Nodes.Node) {
+    for (const nodeMesh of this.meshes) {
+      nodeMesh.addTransformNode(operation, transformNode);
+    }
+
+    this.buildMaterial();
+  }
+
   /**
    * Add color node to materials
    */

src/Effects/Warp.ts

@@ -0,0 +1,66 @@
+import * as Nodes from 'three/examples/jsm/nodes/Nodes';
+
+import {
+  Effect, Input, InputDimension
+} from '../EffectBlock';
+
+import {
+  Block
+} from '../Block';
+
+import {
+  NodeOperation
+} from '../NodeMesh';
+
+
+export
+class Warp extends Effect {
+
+  constructor (parent: Block, input: Input, factor: number) {
+    super(parent, input);
+
+    this.factorNode = new Nodes.FloatNode(factor);
+
+    this.transformNode = new Nodes.OperatorNode(
+      this.inputNode,
+      this.factorNode,
+      Nodes.OperatorNode.MUL
+    );
+
+    this.addTransformNode(NodeOperation.ADD, this.transformNode);
+
+    this.buildMaterial();
+
+    this.initialized = true;
+  }
+
+  setInput(input?: Input) : void {
+    super.setInput(input);
+
+    if (this.initialized) {
+      this.transformNode.a = this.inputNode;
+
+      this.buildMaterial();
+    }
+  }
+
+  set factor (value: number) {
+    this.factorNode.value = value;
+  }
+
+  get factor () {
+    return this.factorNode.value;
+  }
+
+  get inputDimension () : InputDimension {
+    return 3;
+  }
+
+  private initialized: boolean = false;
+
+  private factorNode: Nodes.FloatNode;
+  private transformNode: Nodes.OperatorNode;
+
+  protected inputNode: Nodes.Node;
+
+}

src/Effects/effects.ts

@@ -4,3 +4,5 @@ export * from './IsoColor';
 
 export * from './IsoSurface';
 export * from './Threshold';
+
+export * from './Warp';

src/NodeMesh.ts

@@ -121,10 +121,14 @@ class NodeMesh {
   }
 
   buildMaterial () {
-    let position = new Nodes.PositionNode();
+    let position: NodeOperationResult<Nodes.Node> = new Nodes.PositionNode();
     let alpha: NodeOperationResult<Nodes.Node> = new Nodes.FloatNode(1.);
     let color: NodeOperationResult<Nodes.Node> = this.defaultColorNode;
 
+    for (const transformOperator of this.transformOperators) {
+      position = transformOperator.operate(position);
+    }
+
     for (const colorOperator of this.colorOperators) {
       color = colorOperator.operate(color);
     }
@@ -133,13 +137,11 @@ class NodeMesh {
       alpha = alphaOperator.operate(alpha);
     }
 
-    // TODO: Same for position Node, alpha Node and varyings
-
     this.material.flatShading = true;
     this.material.side = THREE.DoubleSide;
 
     // @ts-ignore
-    this.material.transform = position;
+    this.material.position = position;
     // @ts-ignore
     this.material.alpha = alpha;
     // @ts-ignore
@@ -164,7 +166,7 @@ class NodeMesh {
 
     copy.hasIndex = this.hasIndex;
 
-    // TODO: Copy other operators
+    copy.transformOperators = this.transformOperators.slice();
     copy.alphaOperators = this.alphaOperators.slice();
     copy.colorOperators = this.colorOperators.slice();
 
@@ -174,7 +176,7 @@ class NodeMesh {
   }
 
   copyMaterial (other: NodeMesh) {
-    // TODO: Copy other operators
+    this.transformOperators = other.transformOperators.slice();
     this.alphaOperators = other.alphaOperators.slice();
     this.colorOperators = other.colorOperators.slice();
 
@@ -200,6 +202,13 @@ class NodeMesh {
     return this._defaultColor;
   }
 
+  /**
+   * Add a Transform node to this mesh material
+   */
+  addTransformNode (operation: NodeOperation, transformNode: Nodes.Node) {
+    this.transformOperators.push(new NodeOperator<Nodes.Node>(operation, transformNode));
+  }
+
   /**
    * Add a Color node to this mesh material
    */
@@ -297,7 +306,7 @@ class NodeMesh {
 
   private meshCtor: MeshConstructor;
 
-  // private transformOperators: NodeOperator<Nodes.TransformNode>[];
+  private transformOperators: NodeOperator<Nodes.Node>[] = [];
   private alphaOperators: NodeOperator<Nodes.Node>[] = [];
   private colorOperators: NodeOperator<Nodes.Node>[] = [];