elation-engine 0.9.113 → 0.9.115

package/scripts/geometries.js

@@ -99,14 +99,14 @@ elation.require([], function() {
             phiLength = params.phiLength || Math.PI * 2,
             thetaStart = params.thetaStart || 0,
             thetaLength = params.thetaLength || Math.PI;
-        var geo = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);
+        var geo = new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);
         return geo;
       },
       'box': function(params) {
         var size = params.size || new THREE.Vector3(1,1,1),
             offset = params.offset;
 
-        var geo = new THREE.BoxBufferGeometry(size.x, size.y, size.z, 1, 1, 1);
+        var geo = new THREE.BoxGeometry(size.x, size.y, size.z, 1, 1, 1);
         
         if (offset) {
           geo.applyMatrix4(new THREE.Matrix4().makeTranslation(offset.x, offset.y, offset.z));

package/scripts/math.js

@@ -15,20 +15,20 @@ Object.defineProperties(EulerDegrees.prototype, {
   x: {
     enumerable: true,
     configurable: true,
-    set: function(x) { this.radians.x = x * THREE.Math.DEG2RAD; },
-    get: function() { return this.radians.x * THREE.Math.RAD2DEG; }
+    set: function(x) { this.radians.x = x * THREE.MathUtils.DEG2RAD; },
+    get: function() { return this.radians.x * THREE.MathUtils.RAD2DEG; }
   },
   y: {
     enumerable: true,
     configurable: true,
-    set: function(y) { this.radians.y = y * THREE.Math.DEG2RAD; },
-    get: function() { return this.radians.y * THREE.Math.RAD2DEG; }
+    set: function(y) { this.radians.y = y * THREE.MathUtils.DEG2RAD; },
+    get: function() { return this.radians.y * THREE.MathUtils.RAD2DEG; }
   },
   z: {
     enumerable: true,
     configurable: true,
-    set: function(z) { this.radians.z = z * THREE.Math.DEG2RAD; },
-    get: function() { return this.radians.z * THREE.Math.RAD2DEG; }
+    set: function(z) { this.radians.z = z * THREE.MathUtils.DEG2RAD; },
+    get: function() { return this.radians.z * THREE.MathUtils.RAD2DEG; }
   },
   order: {
     enumerable: true,

package/scripts/systems/admin.js

@@ -842,7 +842,7 @@ elation.require([
         if (properties[k] instanceof THREE.Vector2) {
           root[k]['value'] = properties[k].x.toFixed(4) + ' ' + properties[k].y.toFixed(4);
         } else if (properties[k] instanceof THREE.Vector3 || properties[k] instanceof THREE.Euler) {
-          root[k]['value'] = (properties[k].x * THREE.Math.RAD2DEG).toFixed(2) + ' ' + (properties[k].y * THREE.Math.RAD2DEG).toFixed(2) + ' ' + (properties[k].z * THREE.Math.RAD2DEG).toFixed(2);
+          root[k]['value'] = (properties[k].x * THREE.MathUtils.RAD2DEG).toFixed(2) + ' ' + (properties[k].y * THREE.MathUtils.RAD2DEG).toFixed(2) + ' ' + (properties[k].z * THREE.MathUtils.RAD2DEG).toFixed(2);
         } else if (properties[k] instanceof THREE.Vector4 || properties[k] instanceof THREE.Quaternion) {
           root[k]['value'] = properties[k].x.toFixed(4) + ' ' + properties[k].y.toFixed(4) + ' ' + properties[k].z.toFixed(4) + ' ' + properties[k].w.toFixed(4);
         } else if (properties[k] instanceof THREE.Texture) {

package/scripts/systems/controls.js

@@ -448,18 +448,18 @@ elation.require(['ui.window', 'ui.panel', 'ui.toggle', 'ui.slider', 'ui.label',
               if (this.state[bindname_x] != values[0]) {
                 this.changes.push(bindname_x);
                 this.state[bindname_x] = values[0];
-                this.state[bindname_x + '_full'] = THREE.Math.mapLinear(gamepad.axes[a], -1, 1, 0, 1);
+                this.state[bindname_x + '_full'] = THREE.MathUtils.mapLinear(gamepad.axes[a], -1, 1, 0, 1);
                 this.changes.push(bindname_any_x);
                 this.state[bindname_any_x] = values[0];
-                this.state[bindname_any_x + '_full'] = THREE.Math.mapLinear(gamepad.axes[a], -1, 1, 0, 1);
+                this.state[bindname_any_x + '_full'] = THREE.MathUtils.mapLinear(gamepad.axes[a], -1, 1, 0, 1);
               }
               if (this.state[bindname_y] != values[1]) {
                 this.changes.push(bindname_y);
                 this.state[bindname_y] = values[1];
-                this.state[bindname_y + '_full'] = THREE.Math.mapLinear(gamepad.axes[a+1], -1, 1, 0, 1);
+                this.state[bindname_y + '_full'] = THREE.MathUtils.mapLinear(gamepad.axes[a+1], -1, 1, 0, 1);
                 this.changes.push(bindname_any_y);
                 this.state[bindname_any_y] = values[1];
-                this.state[bindname_any_y + '_full'] = THREE.Math.mapLinear(gamepad.axes[a+1], -1, 1, 0, 1);
+                this.state[bindname_any_y + '_full'] = THREE.MathUtils.mapLinear(gamepad.axes[a+1], -1, 1, 0, 1);
               }
             }
             for (var b = 0; b < gamepad.buttons.length; b++) {
@@ -845,6 +845,7 @@ elation.require(['ui.window', 'ui.panel', 'ui.toggle', 'ui.slider', 'ui.label',
     }
 
     this.touchstart = function(ev) {
+return;
       var newev = {
         button: 0,
         type: 'mousedown',
@@ -862,6 +863,7 @@ elation.require(['ui.window', 'ui.panel', 'ui.toggle', 'ui.slider', 'ui.label',
       //ev.preventDefault();
     }
     this.touchmove = function(ev) {
+return;
       //if (ev.touches.length == 1) {
         var newev = {
           type: 'mousemove',

package/scripts/systems/physics.js

@@ -6,8 +6,8 @@ elation.require(["physics.cyclone"], function() {
     this.debugwindows = {};
     this.debugvis = {};
     this.debugthings = {};
-    this.async = false;
-    this.asyncframerate = 60;
+    this.async = true;
+    this.asyncframerate = 120;
 
     this.system_attach = function(ev) {
       console.log('INIT: physics');
@@ -20,7 +20,7 @@ elation.require(["physics.cyclone"], function() {
     }
     this.engine_start = function(ev) {
       //console.log("PHYSICS: starting");
-      this.system.start();
+      this.system.start({subprocessor: 'cpu', processorargs: { path: 'https://baicoianu.com/~bai/janusweb/build/1.5.32/media/lib/physx/'}});
       this.lasttime = new Date().getTime();
       if (this.interval) {
         clearInterval(this.interval);
@@ -390,7 +390,7 @@ elation.require(["physics.cyclone"], function() {
       }
 */
       //var boxgeo = new THREE.BoxGeometry(bbox.max.x - bbox.min.x, bbox.max.y - bbox.min.y, bbox.max.z - bbox.min.z);
-      let boxgeo = new THREE.BoxBufferGeometry(bbox.max.x - bbox.min.x, bbox.max.y - bbox.min.y, bbox.max.z - bbox.min.z, 10, 10, 10);
+      let boxgeo = new THREE.BoxGeometry(bbox.max.x - bbox.min.x, bbox.max.y - bbox.min.y, bbox.max.z - bbox.min.z, 10, 10, 10);
       var boxmat = new THREE.LineBasicMaterial({color: 0x0000ff, transparent: true, depthWrite: false, depthTest: false, opacity: .2, blending: THREE.AdditiveBlending});
       var outline = new THREE.LineSegments(boxgeo, boxmat, THREE.LinePieces);
 
@@ -416,7 +416,7 @@ elation.require(["physics.cyclone"], function() {
       return outline;
     }
     this.createBoundingSphere = function(collider) {
-      var spheregeo = new THREE.SphereBufferGeometry(collider.radius, 18, 9);
+      var spheregeo = new THREE.SphereGeometry(collider.radius, 18, 9);
       //var spheregeo = new THREE.IcosahedronGeometry(collider.radius, 2);
       var spheremat = new THREE.MeshBasicMaterial({color: 0x00ffff, transparent: true, opacity: .2, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1, wireframe: false, blending: THREE.AdditiveBlending});
       var spherewiremat = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: true, opacity: .1, depthWrite: false, depthTest: false, wireframe: true, blending: THREE.AdditiveBlending});
@@ -426,7 +426,7 @@ elation.require(["physics.cyclone"], function() {
       return outline;
     }
     this.createBoundingPlane = function(collider) {
-      var plane = new THREE.PlaneBufferGeometry(1000, 1000);
+      var plane = new THREE.PlaneGeometry(1000, 1000);
       var planemat = new THREE.MeshBasicMaterial({color: 0x00ffff, transparent: true, opacity: .04, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -5, polygonOffsetUnits: 1, wireframe: false, blending: THREE.AdditiveBlending });
   // FIXME - this only really works for horizontal planes
   var mat = new THREE.Matrix4().makeRotationFromQuaternion(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0), -Math.PI/2));
@@ -435,7 +435,7 @@ elation.require(["physics.cyclone"], function() {
       return mesh;
     }
     this.createBoundingCylinder = function(collider) {
-      var cyl = new THREE.CylinderBufferGeometry(collider.radius, collider.radius, collider.height, 32, 1);
+      var cyl = new THREE.CylinderGeometry(collider.radius, collider.radius, collider.height, 32, 1);
       //var cylmat = new THREE.MeshBasicMaterial({color: 0x00ffff, transparent: true, opacity: .1, depthWrite: false, depthTest: false, wireframe: true, blending: THREE.AdditiveBlending});
       var cylmat = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: true, opacity: .1, depthWrite: false, depthTest: false, wireframe: true, blending: THREE.AdditiveBlending});
       var mesh = new THREE.Mesh(cyl, cylmat);
@@ -487,7 +487,7 @@ console.log('my offset', collider.offset, collider);
       tex.minFilter = tex.maxFilter = THREE.LinearFilter;
       tex.needsUpdate = true; 
 
-      var cg = new THREE.Mesh(new THREE.SphereBufferGeometry(.05), new THREE.MeshPhongMaterial({emissive: 0x666600, map: tex, transparent: true, depthWrite: false, depthTest: false, opacity: 1}));
+      var cg = new THREE.Mesh(new THREE.SphereGeometry(.05), new THREE.MeshPhongMaterial({emissive: 0x666600, map: tex, transparent: true, depthWrite: false, depthTest: false, opacity: 1}));
       return cg;
     }
     /*
@@ -557,7 +557,7 @@ console.log('my offset', collider.offset, collider);
     this.createObject3D = function() {
       this.materials = [];
       var collision = this.properties.collision;
-      var planegeo = new THREE.PlaneBufferGeometry(1, 1);
+      var planegeo = new THREE.PlaneGeometry(1, 1);
       var planemat = new THREE.MeshBasicMaterial({
         map: this.texture, 
         wireframe: false, 
@@ -813,7 +813,7 @@ console.log('ffff', collision.impulses[i], len);
       var bbox = this.properties.boundingbox;
       var size = [bbox.max.x - bbox.min.x, bbox.max.y - bbox.min.y, bbox.max.z - bbox.min.z];
       var offset = [(bbox.max.x + bbox.min.x) / 2, (bbox.max.y - bbox.min.y) / 2, (bbox.max.z + bbox.min.z) / 2];
-      var insidegeo = new THREE.BoxBufferGeometry(size[0], size[1], size[2]);
+      var insidegeo = new THREE.BoxGeometry(size[0], size[1], size[2]);
       insidegeo.applyMatrix(new THREE.Matrix4().makeTranslation(offset[0], size[1]/2 + offset[1], offset[2]));
       var insidemat_side = new THREE.MeshPhongMaterial({emissive: 0x006666, color: 0x00ffff, opacity: 0.8, transparent: true, depthWrite: false, depthTest: false});
       var insidemat_top = new THREE.MeshPhongMaterial({emissive: 0x006666, color: 0x00ffff, opacity: 0.5, transparent: true, depthWrite: false, depthTest: false});

package/scripts/systems/render.js

@@ -11,6 +11,7 @@ elation.require([
   "engine.external.three.three-extras",
   "engine.external.three.CSS3DRenderer",
   "engine.external.three.CubemapToEquirectangular",
+  "engine.external.holoplay",
 
   "engine.external.webxr-polyfill",
 
@@ -53,7 +54,9 @@ elation.require([
         alpha: true,
         preserveDrawingBuffer: true,
         enableWebXR: false,
-        stencil: false
+        stencil: false,
+        powerPreference: 'high-performance',
+        //precision: 'lowp',
       };
       if (webglmode == 'webgl2') {
         rendererargs.canvas = document.createElement( 'canvas' );
@@ -61,6 +64,13 @@ elation.require([
       }
       this.renderer = new THREE.WebGLRenderer(rendererargs);
       this.cssrenderer = new THREE.CSS3DRenderer();
+      /*
+      this.holorenderer = new HoloPlay.Renderer(rendererargs);
+      this.holorenderer.quiltResolution = 3360;
+      this.holorenderer.tileCount.set(8, 6);
+      document.body.appendChild(this.holorenderer.domElement);
+      */
+
       //this.renderer.autoClear = true;
       this.renderer.setClearColor(0x000000, 1);
       this.renderer.shadowMap.enabled = true;
@@ -68,17 +78,19 @@ elation.require([
       this.renderer.xr.enabled = false;
       //this.renderer.xr.manageCameraPosition = true;
       this.lastframetime = performance.now();
+
       this.renderer.setAnimationLoop((time, frame) => {
         this.render(time - this.lastframetime, frame);
         this.lastframetime = time;
       });
+
       //this.renderer.setAnimationLoop((ev) => { this.render(); });
 
       //this.renderer.gammaInput = true;
       //this.renderer.gammaOutput = false;
       //this.renderer.outputEncoding = THREE.LinearEncoding;
       //this.renderer.outputEncoding = THREE.sRGBEncoding;
-      this.renderer.outputEncoding = THREE.LinearEncoding;
+      this.renderer.outputEncoding = THREE.sRGBEncoding;
       this.renderer.gammaFactor = 1.3;
 
 /*
@@ -87,7 +99,7 @@ elation.require([
       this.renderer.toneMappingWhitePoint = 1;
 */
 
-      this.renderer.debug.checkShaderErrors = false;
+      this.renderer.debug.checkShaderErrors = true;
 
       this.lastframetime = 0;
 
@@ -98,6 +110,7 @@ elation.require([
 
       // Hide the canvas from accessibility API
       this.renderer.domElement.setAttribute('aria-hidden', true);
+
     }
     this.setclearcolor = function(color, opacity) {
       if (typeof color == 'undefined') color = 0xffffff;
@@ -138,7 +151,7 @@ elation.require([
     }
     this.textureSampleMipmapLevel = (function() {
       let scene = new THREE.Scene();
-      let plane = new THREE.PlaneBufferGeometry(2, 2);
+      let plane = new THREE.PlaneGeometry(2, 2);
       let material = new THREE.MeshBasicMaterial({color: 0xffffff});
       let mesh = new THREE.Mesh(plane, material);
       mesh.position.set(0,0,-1);
@@ -177,7 +190,7 @@ elation.require([
     })();
     this.textureHasAlpha = (function() {
       let scene = new THREE.Scene();
-      let plane = new THREE.PlaneBufferGeometry(2, 2);
+      let plane = new THREE.PlaneGeometry(2, 2);
       let material = new THREE.MeshBasicMaterial({color: 0xff0000});
       let mesh = new THREE.Mesh(plane, material);
       mesh.position.set(0,0,-1);
@@ -344,7 +357,7 @@ elation.require([
       //console.log(this.engine.systems.world.scene['world-3d']);
 
       // Depth shader, used for SSAO, god rays, etc
-      if (!this.depthTarget) {
+      if (false && !this.depthTarget) {
         var depthShader = THREE.ShaderLib[ "depth" ];
         var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
 
@@ -371,7 +384,7 @@ elation.require([
       this.rendertarget.depthTexture.type = THREE.UnsignedInt248Type;
       this.rendertarget.depthTexture.format = THREE.DepthStencilFormat;
       //this.composer = this.createRenderPath(['clear', /*'portals', 'masktest',*/ this.rendermode, 'fxaa'/*, 'msaa'*/, 'bloom', 'maskclear', 'recording'], this.rendertarget);
-      this.composer = this.createRenderPath(['clear', this.rendermode,/* 'tonemapping',*/ 'unrealbloom', /*'fxaa',*/ 'gamma'], this.rendertarget);
+      this.composer = this.createRenderPath(['clear', this.rendermode,/* 'tonemapping',*/ 'unrealbloom', 'fxaa', 'gamma'], this.rendertarget);
       //this.composer = this.createRenderPath(['clear', this.rendermode, 'fxaa'/*, 'msaa'*/, 'bloom', 'maskclear'], this.rendertarget);
       //this.effects['msaa'].enabled = false;
       //this.composer = this.createRenderPath([this.rendermode, 'ssao', 'recording']);
@@ -423,7 +436,7 @@ elation.require([
             }
           })
         });
-        this.engine.systems.controls.addBindings('view', {'keyboard_f7': 'picking_debug'});
+        //this.engine.systems.controls.addBindings('view', {'keyboard_f7': 'picking_debug'});
         this.engine.systems.controls.addBindings('view', {'gamepad_any_button_0': 'picking_select'});
         this.engine.systems.controls.activateContext('view');
       }
@@ -543,6 +556,14 @@ elation.require([
           break;
         case 'unrealbloom':
           pass = new THREE.UnrealBloomPass(this.size, 0, 0, 0);
+
+          pass.renderTargetsHorizontal.forEach(element => {
+              element.texture.type = THREE.FloatType;
+          });
+          pass.renderTargetsVertical.forEach(element => {
+              element.texture.type = THREE.FloatType;
+          });
+
           break;
         case 'fxaa':
           pass = new THREE.ShaderPass( THREE.FXAAShader );
@@ -658,7 +679,7 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
         this.xrscenetexture.magFilter = THREE.NearestFilter;
 
         // Set up the plane to render only one eye, centered in the middle of the screen
-        this.xrsceneplane = new THREE.Mesh(new THREE.PlaneBufferGeometry(w, h), new THREE.MeshBasicMaterial({map: this.xrscenetexture, side: THREE.DoubleSide, color: 0xffffff}));
+        this.xrsceneplane = new THREE.Mesh(new THREE.PlaneGeometry(w, h), new THREE.MeshBasicMaterial({map: this.xrscenetexture, side: THREE.DoubleSide, color: 0xffffff}));
         this.xrsceneplane.position.set(w / 4, 0, -10);
         //this.xrsceneplane.rotation.set(Math.PI/4, 0, 0);
         this.xrscene.add(this.xrsceneplane);
@@ -688,7 +709,7 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
       this.enabled = false;
       elation.html.removeclass(this, 'webxr_session_active');
       this.xrsession = false;
-      this.rendersystem.renderer.outputEncoding = THREE.LinearEncoding;
+      this.rendersystem.renderer.outputEncoding = THREE.sRGBEncoding;
       setTimeout(() => {
         elation.events.fire({type: 'resize', element: window, data: true });
       }, 100);
@@ -772,12 +793,10 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
             this.updatePickingTarget();
           //}
         }
-        /*
-        this.scene.overrideMaterial = this.depthMaterial;
+        //this.scene.overrideMaterial = this.depthMaterial;
         //this.rendersystem.renderer.render(this.scene, this.actualcamera, this.depthTarget, true);
 
-        this.scene.overrideMaterial = null;
-        */
+        //this.scene.overrideMaterial = null;
         //this.rendersystem.renderer.render(this.scene, this.actualcamera);
 
         this.effects[this.rendermode].camera = this.actualcamera;
@@ -821,7 +840,7 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
                   renderer.setRenderTarget( renderer.getRenderTarget() );
 
                   let oldOutputEncoding = renderer.outputEncoding;
-                  renderer.outputEncoding = THREE.LinearEncoding;
+                  renderer.outputEncoding = THREE.sRGBEncoding;
                   renderer.setViewport(0, 0, layer.framebufferWidth, layer.framebufferHeight);
                   renderer.render(this.xrscene, this.xrscenecam);
                   renderer.xr.enabled = true;
@@ -848,6 +867,12 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
             //this.rendersystem.renderer.state.bindXRFramebuffer(null);
             //this.rendersystem.renderer.setRenderTarget( renderer.getRenderTarget() );
             this.rendersystem.renderer.render(this.scene, this.camera);
+            //this.holocamera.position.setFromMatrixPosition(this.camera.matrixWorld);
+            //this.holocamera.quaternion.setFromRotationMatrix(this.camera.matrixWorld);
+
+            //this.holocamera.position.set(0, 10, 10).applyMatrix4(this.camera.matrixWorld);
+            //this.holocamera.target.set(0, 0, 0).applyMatrix4(this.camera.matrixWorld);
+            //this.rendersystem.holorenderer.render(this.scene, this.holocamera);
           }
         }
 
@@ -905,6 +930,15 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
         camera = camera.objects['3d'];
       }
       this.camera = camera;
+      /*
+      this.holocamera = new HoloPlay.Camera();
+      this.holocamera.fov = 90;
+      console.log('my holocamera', this.holocamera, this.holocamera.fov);
+      //camera.add(this.holocamera);
+      this.holocamera.position.set(0,0,0);
+      this.holocamera.target.set(0,0,1);
+      this.holocamera.quaternion.set(0,0,0,1);
+      */
       this.setscene(this.getscene(camera));
       this.updateCameras();
       if (this.size[0] > 0 && this.size[1] > 0) {
@@ -946,7 +980,7 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
         var frustum = new THREE.Frustum();
         var frustmat = new THREE.Matrix4().makePerspective( this.camera.fov, this.camera.aspect, 0.00001, 9e99).multiply(this.camera.matrixWorldInverse);
         //frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( this.camera.projectionMatrix, this.camera.matrixWorldInverse ) );
-        frustum.setFromMatrix(frustmat);
+        frustum.setFromProjectionMatrix(frustmat);
         var within = [], nearnode = null, farnode = null;
 
         this.scene.traverse(elation.bind(this, function(node) {
@@ -974,9 +1008,10 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
         if (within.length > 0) {
           var vpos = new THREE.Vector3();
           for (var n = 0; n < within.length; n++) {
-            if (within[n].geometry instanceof THREE.Geometry) {
-              for (var i = 0; i < within[n].geometry.vertices.length; i++) {
-                vpos.copy(within[n].geometry.vertices[i]);
+            if (within[n].geometry instanceof THREE.BufferGeometry) {
+              let positions = within[n].geometry.attributes.position;
+              for (var i = 0; i < positions.count; i++) {
+                vpos.set(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
                 within[n].localToWorld(vpos);
                 if (true) { //frustum.containsPoint(vpos)) {
                   var dsq = vpos.distanceToSquared(campos);
@@ -1081,6 +1116,9 @@ console.log('toggle render mode: ' + this.rendermode + ' => ' + mode, passidx, l
       if (this.pickingcomposer) {
         this.pickingcomposer.setSize(scaledwidth, scaledheight);
       }
+      if (this.depthTarget) {
+        this.depthTarget.setSize(scaledwidth, scaledheight);
+      }
       if (this.effects['SSAO']) {
         this.effects['SSAO'].uniforms[ 'size' ].value.set( width, height);
         this.effects['SSAO'].uniforms[ 'tDepth' ].value = this.depthTarget;
@@ -1957,7 +1995,7 @@ console.log('dun it', msaafilter);
         while (intersects.length > 0) {
           hit = intersects.shift();
           let thing = this.view.getParentThing(hit.object);
-          if (thing.pickable && !(hit.object instanceof THREE.EdgesHelper)) {
+          if (thing.pickable) { // && !(hit.object instanceof THREE.EdgesHelper)) {
             if (hit !== this.lasthit) {
               this.lasthit = hit; // FIXME - hack for demo
             }

package/scripts/systems/render2.js

@@ -0,0 +1,38 @@
+elation.require([], () => {
+  elation.extend("engine.systems.render2", function(args) {
+    elation.implement(this, elation.engine.systems.system);
+    this.views = {};
+    this.forcerefresh = false;
+
+    this.view_init = function(viewname, viewargs) {
+      var newview = new elation.engine.systems.render2.view(viewargs);
+      return this.view_add(viewname, newview);
+    }
+    this.view_add = function(viewname, view) {
+      this.views[viewname] = view;
+      elation.events.fire({type: 'render_view_add', element: this, data: this.views[viewname]});
+      return this.views[viewname];
+    }
+    this.view_remove = function(viewname) {
+      if (viewname in this.views) {
+        this.views[viewname].destroy();
+        delete this.views[viewname];
+      }
+    }
+
+    this.system_attach = function(ev) {
+      console.log('INIT: render2');
+    }
+    this.engine_stop = function(ev) {
+      console.log('SHUTDOWN: render2');
+      for (var k in this.views) {
+        this.views[k].destroy();
+      };
+    }
+    this.engine_frame = function(ev) {
+      this.lastframetime += ev.data.delta;
+      //this.render();
+    }
+  });
+});
+

package/scripts/things/camera.js

@@ -2,7 +2,7 @@ elation.require(['engine.things.generic'], function() {
   elation.component.add('engine.things.camera', function() {
     this.postinit = function() {
       this.defineProperties({
-        fov: { type: 'float', default: 75 },
+        fov: { type: 'float', default: 75, set: this.updateFOV },
         near: { type: 'float', default: .01 },
         far: { type: 'float', default: 1000 },
         aspect: { type: 'float', default: 4/3 },
@@ -23,5 +23,10 @@ elation.require(['engine.things.generic'], function() {
 */
       //scene.add(camhelper);
     }
+    this.updateFOV = function() {
+      if (this.camera) {
+        this.camera.fov = this.fov;
+      }
+    }
   }, elation.engine.things.generic);
 });