add node based render demo

examples/alphaTestDemo.js

@@ -14,15 +14,8 @@ import {
     Rotation3DOverLife,
     RotationOverLife,
     SpeedOverLife,
-} from './js/three.quarks.esm.js';
-import {
-    MeshBasicMaterial,
-    NormalBlending,
-    AdditiveBlending,
-    TextureLoader,
-    Vector4,
-    Vector3,
-} from './js/three.module.js';
+} from 'three.quarks';
+import {MeshBasicMaterial, NormalBlending, AdditiveBlending, TextureLoader, Vector4, Vector3} from 'three';
 import {Demo} from './demo.js';
 import {GLTFLoader} from './js/GLTFLoader.js';
 

examples/billboardDemo.js

@@ -15,7 +15,7 @@ import {
     RotationOverLife,
     SpeedOverLife,
     EulerGenerator,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {
     MeshBasicMaterial,
     NormalBlending,
@@ -25,11 +25,11 @@ import {
     Vector3,
     PlaneGeometry,
     DoubleSide,
-} from './js/three.module.js';
+} from 'three';
 import {Demo} from './demo.js';
 
 export class BillboardDemo extends Demo {
-    name = 'Horizon & Vertical BillboardDemo';
+    name = 'Horizon & Vertical Billboard';
 
     initScene() {
         super.initScene();

examples/customPluginDemo.js

@@ -1,4 +1,4 @@
-import {MeshBasicMaterial, Vector4, FrontSide, AdditiveBlending, TextureLoader} from './js/three.module.js';
+import {MeshBasicMaterial, Vector4, FrontSide, AdditiveBlending, TextureLoader} from 'three';
 import {
     Bezier,
     ColorRange,
@@ -15,7 +15,7 @@ import {
     GridEmitter,
     ValueGeneratorFromJSON,
     loadPlugin,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class SinWave {

examples/demo.js

@@ -1,33 +1,5 @@
-import {
-    Group,
-    Scene,
-    MeshStandardMaterial,
-    PlaneGeometry,
-    PointLight,
-    DoubleSide,
-    Mesh,
-    Vector4,
-    Vector3,
-    Color,
-    AdditiveBlending,
-    TextureLoader,
-} from './js/three.module.js';
-import {
-    Bezier,
-    ColorRange,
-    ConstantValue,
-    TurbulenceField,
-    IntervalValue,
-    PiecewiseBezier,
-    ColorOverLife,
-    RenderMode,
-    SizeOverLife,
-    ParticleSystem,
-    ParticleEmitter,
-    BatchedParticleRenderer,
-    ConeEmitter,
-    ApplyForce,
-} from './js/three.quarks.esm.js';
+import {Group, Scene, MeshStandardMaterial, PlaneGeometry, PointLight, DoubleSide, Mesh, Vector3, Color} from 'three';
+import {ParticleEmitter} from 'three.quarks';
 
 export class Demo {
     batchRenderer;

examples/index.html

@@ -17,9 +17,19 @@
     <!--script type="module" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r110/three.module.js" integrity="sha512-8Q+LHYWnd5k/kWiIDvLd+FKKCQUjxhnnWa29z9xnQZcEmrI/sM/ONo2NJtN4UIHY91/jEZArn+AFI3oySADsug==" crossorigin="anonymous"></script>
     <script type="module" src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js" integrity="sha512-mfOs9z5Hk96xJH71l0ptzjgGvflNJRnHA7brsEwqDZf7mJa8QDfUtcHICKMXq4Ys80g5HKQMD9rsY3R44ZlEug==" crossorigin="anonymous"></script>
     <script type="module" src="//threejs.org/examples/jsm/controls/OrbitControls.js"></script-->
-    <!--script type="module" src="./js/three.module.js"></script>
+    <!--script type="module" src="three"></script>
     <script type="module" src="./js/OrbitControls.js"></script>
     <script type="module" src="./three.quarks.esm.js"></script-->
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+    <script type="importmap">
+        {
+          "imports": {
+            "three": "./js/three.module.js",
+            "three.quarks": "./js/three.quarks.esm.js"
+          }
+        }
+    </script>
+
     <style>
         body {
             margin: 0;
@@ -66,7 +76,7 @@
             Clock,
             PerspectiveCamera,
             WebGLRenderer,
-        } from "./js/three.module.js";
+        } from "three";
         import {OrbitControls} from "./js/OrbitControls.js";
         import Stats from "./js/Stats.min.js";
         import {
@@ -80,6 +90,7 @@
         import {MeshMaterialDemo} from "./meshMaterialDemo.js";
         import {AlphaTestDemo} from "./alphaTestDemo.js";
         import {BillboardDemo} from "./billboardDemo.js";
+        import {NodeBasedVFXDemo} from "./nodeBasedVFXDemo.js";
 
         const WEBGL = {
             isWebGLAvailable: function () {
@@ -143,7 +154,7 @@
         let scene;
         let demo;
 
-        let demos = [MuzzleFlashDemo, TornadoDemo, TrailDemo, SequencerDemo, MeshMaterialDemo, TurbulenceDemo, AlphaTestDemo, CustomPluginDemo, BillboardDemo];
+        let demos = [MuzzleFlashDemo, TornadoDemo, TrailDemo, SequencerDemo, MeshMaterialDemo, TurbulenceDemo, AlphaTestDemo, CustomPluginDemo, BillboardDemo, NodeBasedVFXDemo];
         let demoIndex = 0;
 
         function init() {

examples/js/BufferGeometryUtils.js

@@ -9,7 +9,7 @@ import {
 	TriangleStripDrawMode,
 	TrianglesDrawMode,
 	Vector3,
-} from './three.module.js';
+} from 'three';
 
 function computeMikkTSpaceTangents( geometry, MikkTSpace, negateSign = true ) {
 

examples/js/GLTFLoader.js

@@ -61,7 +61,7 @@ import {
 	Vector3,
 	VectorKeyframeTrack,
 	SRGBColorSpace
-} from './three.module.js';
+} from 'three';
 import { toTrianglesDrawMode } from './BufferGeometryUtils.js';
 
 class GLTFLoader extends Loader {

examples/js/OrbitControls.js

@@ -6,7 +6,7 @@ import {
 	TOUCH,
 	Vector2,
 	Vector3
-} from "./three.module.js";
+} from "three";
 
 // This set of controls performs orbiting, dollying (zooming), and panning.
 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).

examples/meshMaterialDemo.js

@@ -1,4 +1,4 @@
-import {Group, MeshStandardMaterial, BoxGeometry, Vector4, Color, AdditiveBlending} from './js/three.module.js';
+import {Group, MeshStandardMaterial, BoxGeometry, Vector4, Color, AdditiveBlending} from 'three';
 import {
     BatchedParticleRenderer,
     RandomQuatGenerator,
@@ -10,7 +10,7 @@ import {
     ConstantColor,
     RenderMode,
     IntervalValue,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class MeshMaterialDemo extends Demo {

examples/muzzleFlashDemo.js

@@ -9,7 +9,7 @@ import {
     NormalBlending,
     TextureLoader,
     MeshBasicMaterial,
-} from './js/three.module.js';
+} from 'three';
 import {
     Bezier,
     ColorOverLife,
@@ -28,7 +28,7 @@ import {
     ParticleSystem,
     ParticleEmitter,
     BatchedParticleRenderer,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class MuzzleFlashDemo extends Demo {

examples/nodeBasedVFXDemo.js

@@ -0,0 +1,97 @@
+import {BatchedParticleRenderer, Node, NodeGraph, NodeTypes, NodeVFX, RenderMode, Wire} from 'three.quarks';
+import {Demo} from './demo.js';
+import {AdditiveBlending, MeshBasicMaterial, NormalBlending, TextureLoader, Vector3, Vector4} from 'three';
+
+export class NodeBasedVFXDemo extends Demo {
+    name = 'Node Based VFX';
+    initScene() {
+        super.initScene();
+
+        this.batchRenderer = new BatchedParticleRenderer();
+        this.scene.add(this.batchRenderer);
+
+        const emissionGraph = new NodeGraph('emission');
+        const start = new Node(NodeTypes['startEvent'], 0);
+
+        const repeater = new Node(NodeTypes['repeater'], 0);
+        repeater.inputs[1] = {getValue: () => 1};
+
+        const emit = new Node(NodeTypes['emit'], 0);
+
+        emissionGraph.addNode(start);
+        emissionGraph.addNode(repeater);
+        emissionGraph.addNode(emit);
+        emissionGraph.addWire(new Wire(start, 0, repeater, 0));
+        emissionGraph.addWire(new Wire(repeater, 0, emit, 0));
+
+        const updateGraph = new NodeGraph('test');
+        const age = new Node(NodeTypes['particleProperty'], 0, {property: 'age'});
+        const time = new Node(NodeTypes['time']);
+        const add = new Node(NodeTypes['add'], 0);
+        add.inputs[1] = {getValue: () => 1};
+        const pos = new Node(NodeTypes['vec3'], 0);
+        pos.inputs[0] = {getValue: () => 1};
+        pos.inputs[1] = {getValue: () => 1};
+        pos.inputs[2] = {getValue: () => 1};
+        const pos2 = new Node(NodeTypes['vec3'], 0);
+        pos2.inputs[0] = {getValue: () => 1};
+        pos2.inputs[1] = {getValue: () => 1};
+        pos2.inputs[2] = {getValue: () => 1};
+
+        const life = new Node(NodeTypes['particleProperty'], 0, {property: 'life'});
+        life.inputs[0] = {getValue: () => 5};
+        const ppos = new Node(NodeTypes['particleProperty'], 0, {property: 'position'});
+        const pvel = new Node(NodeTypes['particleProperty'], 0, {property: 'velocity'});
+
+        updateGraph.addNode(age);
+        updateGraph.addNode(time);
+        updateGraph.addNode(add);
+        updateGraph.addNode(pos);
+        updateGraph.addNode(pos2);
+        updateGraph.addNode(ppos);
+        updateGraph.addNode(pvel);
+        updateGraph.addNode(life);
+        updateGraph.addWire(new Wire(age, 0, add, 0));
+        updateGraph.addWire(new Wire(add, 0, pos, 1));
+        updateGraph.addWire(new Wire(pos, 0, ppos, 0));
+        updateGraph.addWire(new Wire(pos2, 0, pvel, 1));
+
+        const texture = new TextureLoader().load('textures/particle_default.png');
+        const config = {
+            duration: 5,
+            looping: true,
+            //instancingGeometry: new PlaneGeometry(1, 1),//.rotateX((-90 / 180) * Math.PI),
+            worldSpace: false,
+            maxParticle: 100,
+            emissionGraph: emissionGraph,
+            updateGraph: updateGraph,
+
+            material: new MeshBasicMaterial({
+                blending: AdditiveBlending,
+                transparent: true,
+                map: texture,
+                //side: DoubleSide,
+            }),
+            uTileCount: 1,
+            vTileCount: 1,
+            renderOrder: 2,
+            renderMode: RenderMode.BillBoard,
+        };
+
+        // Create particle system based on your configuration
+        this.billboard1 = new NodeVFX(config);
+        this.billboard1.emitter.name = 'billboard';
+        this.billboard1.emitter.position.x = 0;
+
+        this.batchRenderer.addSystem(this.billboard1);
+
+        this.scene.add(this.billboard1.emitter);
+        this.scene.add(this.batchRenderer);
+
+        return this.scene;
+    }
+
+    render(delta) {
+        super.render(delta);
+    }
+}

examples/sequencerDemo.js

@@ -11,7 +11,7 @@ import {
     AdditiveBlending,
     NormalBlending,
     TextureLoader,
-} from './js/three.module.js';
+} from 'three';
 import {
     Bezier,
     ColorRange,
@@ -31,7 +31,7 @@ import {
     TextureSequencer,
     ApplySequences,
     RandomColor,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class SequencerDemo extends Demo {

examples/tornadoDemo.js

@@ -1,4 +1,4 @@
-import {BatchedParticleRenderer, QuarksLoader, ParticleEmitter} from './js/three.quarks.esm.js';
+import {BatchedParticleRenderer, QuarksLoader, ParticleEmitter} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class TornadoDemo extends Demo {

examples/trailDemo.js

@@ -9,7 +9,7 @@ import {
     Color,
     AdditiveBlending,
     TextureLoader,
-} from './js/three.module.js';
+} from 'three';
 import {
     Bezier,
     ColorRange,
@@ -27,7 +27,7 @@ import {
     ApplyForce,
     ApplyCollision,
     Gradient,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class TrailDemo extends Demo {

examples/turbulenceDemo.js

@@ -9,7 +9,7 @@ import {
     Color,
     AdditiveBlending,
     TextureLoader,
-} from './js/three.module.js';
+} from 'three';
 import {
     Bezier,
     ColorRange,
@@ -25,7 +25,7 @@ import {
     BatchedParticleRenderer,
     ConeEmitter,
     ApplyForce,
-} from './js/three.quarks.esm.js';
+} from 'three.quarks';
 import {Demo} from './demo.js';
 
 export class TurbulenceDemo extends Demo {

package.json

@@ -23,7 +23,7 @@
     "type-check:watch": "npm run type-check -- --watch",
     "build:types": "tsc --emitDeclarationOnly",
     "build:js": "rollup -c",
-    "build:production": "npm run build:types && cross-env NODE_ENV=production npm run build:js && cpx ./dist/three.quarks.esm.js ./examples/js/ && replace-in-file \"'three';\" \"'./three.module.js';\" examples/js/three.quarks.esm.js",
+    "build:production": "npm run build:types && cross-env NODE_ENV=production npm run build:js && cpx ./dist/three.quarks.esm.js ./examples/js/",
     "build": "npm run build:production",
     "lint": "eslint . --ext .ts",
     "prepublishOnly": "npm run build:production",

src/BatchedRenderer.ts

@@ -3,7 +3,7 @@ import {BufferGeometry, Layers, Material, Object3D} from 'three';
 import {SpriteBatch} from './SpriteBatch';
 import {TrailBatch} from './TrailBatch';
 import {ParticleEmitter} from './ParticleEmitter';
-import {Particle} from './Particle';
+import {IParticle, Particle} from './Particle';
 
 export interface VFXBatchSettings {
     // 5 component x,y,z,u,v
@@ -22,7 +22,7 @@ export interface IParticleSystem {
     speedFactor: number;
     worldSpace: boolean;
     particleNum: number;
-    particles: Array<Particle>;
+    particles: Array<IParticle>;
     emitter: ParticleEmitter<any>;
     _renderer?: BatchedRenderer;