revert to debug mode (cameraLookUp false), init FireShader class - ch…

…ange old Fire.js to Flame.js

TODO.md

@@ -0,0 +1,20 @@
+## TODO
+
+- [ ] Fix Fire class and shader import
+- [ ] Fix audio quality in recordings
+- [ ] Other shapes besides spheres - each shape has different sound / wave type
+- [ ] Contact surfaces light up based on note color
+- [ ] Keep camera in line with ballX position
+- [ ] Dynamically set zPos based on note position in staff (position.z in instrumentMapping getter)
+- [ ] Clean up instrumentMapping template and getters
+- [ ] Drum machine wheel or metronome for repeating snare and kick synths
+- [ ] Different contact surfaces with different restitution
+- [ ] UI for editable 'instrument - shape - note - keyboard' mapping object
+- [ ] Web MIDI API support to connect to keyboard
+- [x] Arrow key controls
+- [x] support PolySynth in getInstrumentMappingTemplate to allow chords
+- [x] variation added for striped balls
+- [x] configurable static row positioning of ball array using globalShowStaticRows
+- [x] dynamic associatation of keyName with keyMapped options for dropped balls
+- [x] set fill styles from instrumentMapping obj instead of THREEx.createPoolBall
+- [x] How to drop balls without stacking?

index.html

@@ -17,8 +17,9 @@
     <script src="vendor/Cannon/cannon.min.js"></script>
     <script src="vendor/Cannon/CannonDebugRenderer.js"></script>
 
-    <script src="vendor/FlyControls.js"></script>
-    <script src="vendor/OrbitControls.js"></script>
+    <!-- <script src="vendor/FlyControls.js"></script> -->
+    <!-- <script src="vendor/OrbitControls.js"></script> -->
+
     <!-- <script src="vendor/ObjectLoader.js"></script> -->
 
     <!-- https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html -->

src/js/Fire.js

@@ -1,55 +1,54 @@
-import globals from './globals.js';
+import FireShader from './FireShader.js';
 
-/*
- *** FIRE ***
+/**
+ * see: mattatz / http://github.com/mattatz
+ * Ray tracing based real-time procedural volumetric fire object for three.js
  */
 
+// THREE.Fire = function ( fireTex, color ) {
 export default class Fire {
-
-    constructor(fireParam) {
-        // https://googlechrome.github.io/samples/classes-es6/
-        // this.name = 'Polygon';
-        // this.height = height;
-        // this.width = width;
-        // this.volumetricFire = fireParam;
-        this.triggerTime = fireParam;
-    }
-
-    initFire() {
-        globals.loader.crossOrigin = '';
-        var fireTex = globals.loader.load("./assets/flame/FireOrig.png");
-        var wireframeMat = new THREE.MeshBasicMaterial({
-            color : new THREE.Color(0xffffff),
-            wireframe : true
-        });
-
-        const volumetricFire = new THREE.Fire(fireTex);
-        volumetricFire.position.set(globals.posBehindX + 22, 0, globals.posBehindZ);
-
-        // volumetricFire.scale.set(3, 3.4, 3.0); //width, height, z
-        volumetricFire.scale.set(6, 6.8, 6.0); //width, height, z
-
-        // console.log(volumetricFire.material.uniforms);
-        // volumetricFire.material.uniforms.magnitude.value = 0.5; //higher = spaciness
-        // volumetricFire.material.uniforms.lacunarity.value = 0.1;   //lower = more cartoony
-        // volumetricFire.material.uniforms.lacunarity.gain = 0.1;     //more = less height
 
-        var wireframe = new THREE.Mesh(volumetricFire.geometry, wireframeMat.clone());
-        volumetricFire.add(wireframe);
-        wireframe.visible = false;
-
-        // console.log({volumetricFire});
-        // scene.add(volumetricFire);
-        globals.scene.add(volumetricFire);
+    constructor() {
+        // super();
     }
 
-    addFire(posX = globals.posBehindX + 22, currentTime) {
-        // console.log(this);
-        // if (currentTime === this.triggerTime) {
-            // console.log('addFire active......');
-            volumetricFire.position.set(posX, 0, globals.posBehindZ);
-            scene.add(volumetricFire);
-        // }
+    init() {
+        var fireMaterial = new THREE.ShaderMaterial( {
+            defines         : FireShader.defines,
+            uniforms        : THREE.UniformsUtils.clone( FireShader.uniforms ),
+            vertexShader    : FireShader.vertexShader,
+            fragmentShader  : FireShader.fragmentShader,
+            transparent     : true,
+            depthWrite      : false,
+            depthTest       : false
+        } );
+
+        // initialize uniforms 
+
+        fireTex.magFilter = fireTex.minFilter = THREE.LinearFilter;
+        fireTex.wrapS = fireTex.wrapT = THREE.ClampToEdgeWrapping;
+
+        fireMaterial.uniforms.fireTex.value = fireTex;
+        fireMaterial.uniforms.color.value = color || new THREE.Color( 0xeeeeee );
+        fireMaterial.uniforms.invModelMatrix.value = new THREE.Matrix4();
+        fireMaterial.uniforms.scale.value = new THREE.Vector3( 1, 1, 1 );
+        fireMaterial.uniforms.seed.value = Math.random() * 19.19;
+
+        THREE.Mesh.call( this, new THREE.BoxGeometry( 1.0, 1.0, 1.0 ), fireMaterial );
+
+        // THREE.Fire.prototype = Object.create( THREE.Mesh.prototype );
+        // THREE.Fire.prototype.constructor = THREE.Fire;
     }
 
-}
+    // update = function ( time ) {
+    //     var invModelMatrix = this.material.uniforms.invModelMatrix.value;
+    //     this.updateMatrixWorld();
+    //     invModelMatrix.getInverse( this.matrixWorld );
+    //     if( time !== undefined ) {
+    //         this.material.uniforms.time.value = time;
+    //     }
+    //     this.material.uniforms.invModelMatrix.value = invModelMatrix;
+    //     this.material.uniforms.scale.value = this.scale;
+    // };
+
+};