janusweb 1.5.32 → 1.5.36

package/scripts/object.js

@@ -5,6 +5,36 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       'front': THREE.BackSide,
       'none': THREE.DoubleSide
     };
+    this.depthFuncMap = {
+      'never': THREE.NeverDepth,
+      'always': THREE.AlwaysDepth,
+      'equal': THREE.EqualDepth,
+      'less': THREE.LessDepth,
+      'lessequal': THREE.LessEqualDepth,
+      'greaterequal': THREE.GreaterEqualDepth,
+      'greater': THREE.GreaterDepth,
+      'notequal': THREE.NotEqualDepth,
+    };
+    this.blendModeMap = {
+      'normal': THREE.NormalBlending,
+      'no': THREE.NoBlending,
+      'additive': THREE.AdditiveBlending,
+      'subtractive': THREE.SubtractiveBlending,
+      'multiply': THREE.MultiplyBlending,
+      'custom': THREE.CustomBlending,
+    };
+    this.blendFactorsMap = {
+      'zero': THREE.ZeroFactor,
+      'one': THREE.OneFactor,
+      'src_color': THREE.SrcColorFactor,
+      'dst_color': THREE.DstColorFactor,
+      'src_alpha': THREE.SrcAlphaFactor,
+      'dst_alpha': THREE.DstAlphaFactor,
+      'one_minus_src_color': THREE.OneMinusSrcColorFactor,
+      'one_minus_src_alpha': THREE.OneMinusSrcAlphaFactor,
+      'one_minus_dst_color': THREE.OneMinusDstColorFactor,
+      'one_minus_dst_alpha': THREE.OneMinusDstAlphaFactor,
+    };
     this.postinit = function() {
       elation.engine.things.janusobject.extendclass.postinit.call(this);
       this.defineProperties({
@@ -15,7 +45,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         video_id: { type: 'string', set: this.updateVideo, comment: 'Video texture ID' },
         shader_id: { type: 'string', set: this.updateMaterial, comment: 'Shader ID' },
         shader_chunk_replace: { type: 'object' },
-        url: { type: 'string' },
+        url: { type: 'string', set: this.updateWebsurfaceURL },
         loop: { type: 'boolean' },
         websurface_id: { type: 'string', set: this.updateWebsurface, comment: 'WebSurface ID' },
         shadow: { type: 'boolean', default: true, set: this.updateMaterial },
@@ -26,10 +56,14 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         lights: { type: 'boolean', default: false, comment: 'Load lights from model' },
         lighting: { type: 'boolean', default: true, set: this.updateMaterial, comment: 'Object reacts to scene lighting' },
         cull_face: { type: 'string', default: 'back', set: this.updateMaterial, comment: 'Hide face sides (back, front, or none)' },
-        blend_src: { type: 'string', default: 'src_alpha', set: this.updateMaterial, comment: 'Blend mode (source)' },
-        blend_dest: { type: 'string', default: 'one_minus_src_alpha', set: this.updateMaterial, comment: 'Blend mode (destination)' },
+        blend_src: { type: 'string', set: this.updateMaterial, comment: 'Blend mode (source)' },
+        blend_dest: { type: 'string', set: this.updateMaterial, comment: 'Blend mode (destination)' },
+        blend_mode: { type: 'string', default: 'normal', set: this.updateMaterial, comment: 'Blend mode' },
         depth_write: { type: 'boolean', default: null, set: this.updateMaterial },
         depth_test: { type: 'boolean', default: null, set: this.updateMaterial },
+        depth_offset: { type: 'float', default: null, set: this.updateMaterial },
+        depth_func: { type: 'string', default: null, set: this.updateMaterial },
+        color_write: { type: 'boolean', default: null, set: this.updateMaterial },
         envmap_id: { type: 'string', set: this.updateMaterial, comment: 'Environment map texture ID (overrides skybox reflections)' },
         normalmap_id: { type: 'string', set: this.updateMaterial, comment: 'Normal map texture ID' },
         bumpmap_id: { type: 'string', set: this.updateMaterial, comment: 'Bumpmap texture ID' },
@@ -111,6 +145,8 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       //this.properties.collidable = false;
 
       //this.updateColliderFromGeometry(new THREE.BoxGeometry(1,1,1));
+
+      elation.events.add(this.room, 'skybox_update', ev => this.updateSkybox());
     }
     this.createForces = function() {
       elation.engine.things.janusobject.extendclass.createForces.call(this);
@@ -183,7 +219,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       var videoasset = this.getAsset('video', videoid);
       if (videoasset) {
         this.videoasset = videoasset;
-        texture = videoasset.getInstance();
+        let texture = videoasset.getInstance();
         if (!texture.image) {
           videoasset.load();
         }
@@ -235,6 +271,8 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             url = this.room.baseurl + url;
           }
           this.url = url;
+        } else {
+          this.url = this.websurface_id;
         }
 /*
         this.pickable = false;
@@ -272,6 +310,11 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         if (n.material) n.material = blankmaterial;
       });
     }
+    this.updateWebsurfaceURL = function() {
+      if (this.websurface) {
+        this.websurface.url = this.url;
+      }
+    }
     this.setTextureDirty = function() {
       this.textureNeedsUpdate = true;
     }
@@ -313,7 +356,11 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           blend_src = false,
           blend_dest = false,
           side = this.sidemap[this.properties.cull_face],
-          textureasset;
+          textureasset,
+          lightmaptextureasset,
+          emissivetextureasset,
+          roughnesstextureasset,
+          metalnesstextureasset;
 
       this.textureNeedsUpdate = false;
 
@@ -360,10 +407,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         if (textureasset) {
           texture = textureasset.getInstance();
           this.textureasset = textureasset;
-          if (!this.assetloadhandlers[image_id]) {
-            this.assetloadhandlers[image_id] = true;
+          if (!this.assetloadhandlers[texture.uuid]) {
+            this.assetloadhandlers[texture.uuid] = true;
             elation.events.add(textureasset, 'asset_load', this.refresh);
-            elation.events.add(texture, 'update', this.refresh);
+            elation.events.add(texture, 'asset_update', this.refresh);
           }
 
           //texture.offset.copy(this.texture_offset);
@@ -389,10 +436,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         let normaltextureasset = this.getAsset('image', normal_image_id, true);
         if (normaltextureasset) {
           textureNormal = normaltextureasset.getInstance();
-          if (!this.assetloadhandlers[normal_image_id]) {
-            this.assetloadhandlers[normal_image_id] = true;
+          if (!this.assetloadhandlers[textureNormal.uuid]) {
+            this.assetloadhandlers[textureNormal.uuid] = true;
             elation.events.add(textureNormal, 'asset_load', elation.bind(this, this.refresh));
-            elation.events.add(textureNormal, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureNormal, 'asset_update', elation.bind(this, this.refresh));
           }
 
           if (normaltextureasset.sbs3d) {
@@ -411,10 +458,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         let bumptextureasset = this.getAsset('image', bump_image_id, true);
         if (bumptextureasset) {
           textureBump = bumptextureasset.getInstance();
-          if (!this.assetloadhandlers[bump_image_id]) {
-            this.assetloadhandlers[bump_image_id] = true;
+          if (!this.assetloadhandlers[textureBump.uuid]) {
+            this.assetloadhandlers[textureBump.uuid] = true;
             elation.events.add(bumptextureasset, 'asset_load', elation.bind(this, this.refresh));
-            elation.events.add(textureBump, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureBump, 'asset_update', elation.bind(this, this.refresh));
           }
           if (bumptextureasset.sbs3d) {
             textureBump.repeat.set(0.5, 1);
@@ -432,10 +479,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         let alphatextureasset = this.getAsset('image', alpha_image_id, true);
         if (alphatextureasset) {
           textureAlpha = alphatextureasset.getInstance();
-          if (!this.assetloadhandlers[alpha_image_id]) {
-            this.assetloadhandlers[alpha_image_id] = true;
+          if (!this.assetloadhandlers[textureAlpha.uuid]) {
+            this.assetloadhandlers[textureAlpha.uuid] = true;
             elation.events.add(alphatextureasset, 'asset_load', elation.bind(this, this.refresh));
-            elation.events.add(textureAlpha, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureAlpha, 'asset_update', elation.bind(this, this.refresh));
           }
           if (alphatextureasset.sbs3d) {
             textureAlpha.repeat.set(0.5, 1);
@@ -453,10 +500,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         }
         if (displacementtextureasset) {
           textureDisplacement = displacementtextureasset.getInstance();
-          if (!this.assetloadhandlers[displacement_image_id]) {
-            this.assetloadhandlers[displacement_image_id] = true;
+          if (!this.assetloadhandlers[textureDisplacement.uuid]) {
+            this.assetloadhandlers[textureDisplacement.uuid] = true;
             elation.events.add(displacementtextureasset, 'asset_load', elation.bind(this, this.refresh));
-            elation.events.add(textureDisplacement, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureDisplacement, 'asset_update', elation.bind(this, this.refresh));
           }
           if (displacementtextureasset.sbs3d) {
             textureDisplacement.repeat.set(0.5, 1);
@@ -474,10 +521,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         lightmaptextureasset = this.getAsset('image', lightmap_image_id);
         if (lightmaptextureasset) {
           textureLightmap = lightmaptextureasset.getInstance();
-          if (!this.assetloadhandlers[lightmap_image_id]) {
-            this.assetloadhandlers[lightmap_image_id] = true;
+          if (!this.assetloadhandlers[textureLightmap.uuid]) {
+            this.assetloadhandlers[textureLightmap.uuid] = true;
             elation.events.add(lightmaptextureasset, 'asset_load', elation.bind(this, this.setTextureDirty));
-            elation.events.add(textureLightmap, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureLightmap, 'asset_update', elation.bind(this, this.refresh));
           }
 
           if (textureLightmap) {
@@ -492,10 +539,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         }
         if (emissivetextureasset) {
           textureEmissive = emissivetextureasset.getInstance();
-          if (!this.assetloadhandlers[emissive_image_id]) {
-            this.assetloadhandlers[emissive_image_id] = true;
+          if (!this.assetloadhandlers[textureEmissive.uuid]) {
+            this.assetloadhandlers[textureEmissive.uuid] = true;
             elation.events.add(emissivetextureasset, 'asset_load', elation.bind(this, this.setTextureDirty));
-            elation.events.add(textureEmissive, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureEmissive, 'asset_update', elation.bind(this, this.refresh));
           }
 
           if (textureEmissive) {
@@ -507,10 +554,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         roughnesstextureasset = this.getAsset('image', roughness_image_id);
         if (roughnesstextureasset) {
           textureRoughness = roughnesstextureasset.getInstance();
-          if (!this.assetloadhandlers[roughness_image_id]) {
-            this.assetloadhandlers[roughness_image_id] = true;
+          if (!this.assetloadhandlers[textureRoughness.uuid]) {
+            this.assetloadhandlers[textureRoughness.uuid] = true;
             elation.events.add(roughnesstextureasset, 'asset_load', elation.bind(this, this.setTextureDirty));
-            elation.events.add(textureRoughness, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureRoughness, 'asset_update', elation.bind(this, this.refresh));
           }
 
           if (textureRoughness) {
@@ -522,10 +569,10 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         metalnesstextureasset = this.getAsset('image', metalness_image_id);
         if (metalnesstextureasset) {
           textureMetalness = metalnesstextureasset.getInstance();
-          if (!this.assetloadhandlers[metalness_image_id]) {
-            this.assetloadhandlers[metalness_image_id] = true;
+          if (!this.assetloadhandlers[textureMetalness.uuid]) {
+            this.assetloadhandlers[textureMetalness.uuid] = true;
             elation.events.add(metalnesstextureasset, 'asset_load', elation.bind(this, this.setTextureDirty));
-            elation.events.add(textureMetalness, 'update', elation.bind(this, this.refresh));
+            elation.events.add(textureMetalness, 'asset_update', elation.bind(this, this.refresh));
           }
 
           if (textureMetalness) {
@@ -565,18 +612,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         //color.setRGB(col.x, col.y, col.z);
       }
 */
-      var srcfactors = {
-        'zero': THREE.ZeroFactor,
-        'one': THREE.OneFactor,
-        'src_color': THREE.SrcColorFactor,
-        'dst_color': THREE.DstColorFactor,
-        'src_alpha': THREE.SrcAlphaFactor,
-        'dst_alpha': THREE.DstAlphaFactor,
-        'one_minus_src_color': THREE.OneMinusSrcColorFactor,
-        'one_minus_src_alpha': THREE.OneMinusSrcAlphaFactor,
-        'one_minus_dst_color': THREE.OneMinusDstColorFactor,
-        'one_minus_dst_alpha': THREE.OneMinusDstAlphaFactor,
-      }
+      let srcfactors = this.blendFactorsMap;
       if (srcfactors[this.properties.blend_src]) {
         blend_src = srcfactors[this.properties.blend_src];
       }
@@ -617,6 +653,9 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           if (this.depth_test !== null) {
             shadermaterial.depthTest = this.depth_test;
           }
+          if (this.color_write !== null) {
+            shadermaterial.colorWrite = this.color_write;
+          }
           this.traverseObjects((n) => {
             if (n.material) {
               if (Array.isArray(n.material)) {
@@ -683,13 +722,16 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               //if (!color) m.color.setHex(0xffffff);
               m.map = texture;
               texture.encoding = THREE.sRGBEncoding;
-              elation.events.add(texture, 'asset_update', (ev) => {
-                m.map = ev.data;
-                this.updateTextureOffsets();
-                this.refresh();
-              });
+              if (false && !this.assetloadhandlers[texture.uuid]) {
+                this.assetloadhandlers[texture.uuid] = true;
+                elation.events.add(texture, 'asset_update', (ev) => {
+                  m.map = ev.data;
+                  this.updateTextureOffsets();
+                  this.refresh();
+                });
+              }
 
-              m.transparent = (textureasset && textureasset.hasalpha) || m.opacity < 1;
+              m.transparent = (this.transparent !== null ? this.transparent : (textureasset && textureasset.hasalpha) || m.opacity < 1);
             } else if (m.map && m.map.sourceFile) {
               var imagesrc = m.map.sourceFile;
               var asset = this.getAsset('image', imagesrc, true);
@@ -700,18 +742,21 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
                 }
                 m.map = asset.getInstance();
                 m.map.encoding = THREE.sRGBEncoding;
-                elation.events.add(m.map, 'asset_update', elation.bind(this, function(ev) {
-                  m.map = ev.data;
-                  this.updateTextureOffsets();
-                }));
-                elation.events.add(asset, 'asset_load', elation.bind(this, function(m, asset, ev) {
-                  if (asset.hasalpha && !m.transparent) {
-                    m.transparent = true;
-                    m.alphaTest = this.alphatest;
-                    //m.needsUpdate = true;
-                  }
-                  this.refresh();
-                }, m, asset));
+                if (!this.assetloadhandlers[m.map.uuid]) {
+                  this.assetloadhandlers[m.map.uuid] = true;
+                  elation.events.add(m.map, 'asset_update', elation.bind(this, function(ev) {
+                    m.map = ev.data;
+                    this.updateTextureOffsets();
+                  }));
+                  elation.events.add(asset, 'asset_load', elation.bind(this, function(m, asset, ev) {
+                    if (asset.hasalpha && !m.transparent) {
+                      m.transparent = true;
+                      m.alphaTest = this.alphatest;
+                      //m.needsUpdate = true;
+                    }
+                    this.refresh();
+                  }, m, asset));
+                }
               }
               if (m.map) {
                 this.assignTextureParameters(m.map, modelasset, asset);
@@ -723,11 +768,14 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               if (asset) {
                 m.normalMap = asset.getInstance();
                 m.normalMap = asset.getInstance();
-                elation.events.add(m.normalMap, 'asset_update', elation.bind(this, function(ev) {
-                  m.normalMap = ev.data; this.refresh();
-                  this.updateTextureOffsets();
-                }));
-                elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                if (!this.assetloadhandlers[m.normalMap.uuid]) {
+                  this.assetloadhandlers[m.normalMap.uuid] = true;
+                  elation.events.add(m.normalMap, 'asset_update', elation.bind(this, function(ev) {
+                    m.normalMap = ev.data; this.refresh();
+                    this.updateTextureOffsets();
+                  }));
+                  elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                }
               }
             } else if (textureBump) {
               m.bumpMap = textureBump;
@@ -738,13 +786,16 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               if (asset) {
                 m.normalMap = asset.getInstance();
                 m.normalMap = asset.getInstance();
-                elation.events.add(m.bumpMap, 'asset_update', elation.bind(this, function(ev) {
-                  m.normalMap = ev.data; this.refresh();
-                  m.normalMap.offset.copy(this.texture_offset);
-                  m.normalMap.repeat.copy(this.texture_repeat);
-                  m.normalMap.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
-                }));
-                elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                if (!this.assetloadhandlers[m.normalMap.uuid]) {
+                  this.assetloadhandlers[m.normalMap.uuid] = true;
+                  elation.events.add(m.bumpMap, 'asset_update', elation.bind(this, function(ev) {
+                    m.normalMap = ev.data; this.refresh();
+                    m.normalMap.offset.copy(this.texture_offset);
+                    m.normalMap.repeat.copy(this.texture_repeat);
+                    m.normalMap.rotation = this.texture_rotation * THREE.Math.DEG2RAD;
+                  }));
+                  elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                }
               }
             }
             if (textureNormal) {
@@ -754,8 +805,11 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
               var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false});
               if (asset) {
                 m.normalMap = asset.getInstance();
-                elation.events.add(m.normalMap, 'asset_update', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
-                elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                if (!this.assetloadhandlers[m.normalMap.uuid]) {
+                  this.assetloadhandlers[m.normalMap.uuid] = true;
+                  elation.events.add(m.normalMap, 'asset_update', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                  elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.normalMap = ev.data; this.refresh(); }));
+                }
               }
             }
 
@@ -764,14 +818,20 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
                 m.lightMap = textureLightmap; 
               } else {
               }
-              elation.events.add(textureLightmap, 'asset_update', elation.bind(m, function(ev) { m.lightMap = ev.data; this.refresh(); }));
+              if (!this.assetloadhandlers[m.lightMap.uuid]) {
+                this.assetloadhandlers[m.lightMap.uuid] = true;
+                elation.events.add(textureLightmap, 'asset_update', elation.bind(m, function(ev) { m.lightMap = ev.data; this.refresh(); }));
+              }
             } else if (m.lightMap) {
               var imagesrc = m.lightMap.sourceFile;
-              var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false});
-              if (asset) {
-                m.lightMap = asset.getInstance();
-                elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.lightMap = ev.data; this.refresh();}));
-                elation.events.add(m.lightMap, 'asset_update', elation.bind(this, function(ev) { m.lightMap = ev.data; this.refresh(); }));
+              if (!this.assetloadhandlers[m.lightMap.uuid]) {
+                this.assetloadhandlers[m.lightMap.uuid] = true;
+                var asset = this.getAsset('image', imagesrc, {id: imagesrc, src: imagesrc, hasalpha: false});
+                if (asset) {
+                  m.lightMap = asset.getInstance();
+                  elation.events.add(asset, 'asset_load', elation.bind(this, function(ev) { m.lightMap = ev.data; this.refresh();}));
+                  elation.events.add(m.lightMap, 'asset_update', elation.bind(this, function(ev) { m.lightMap = ev.data; this.refresh(); }));
+                }
               }
             }
             if (textureDisplacement) {
@@ -829,6 +889,21 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             if (this.depth_test !== null) {
               m.depthTest = this.depth_test;
             }
+            if (this.depth_func !== null) {
+              m.depthFunc = this.depthFuncMap[this.depth_func];
+            } else {
+              m.depthFunc = this.depthFuncMap['lessequal'];
+            }
+            if (this.depth_offset !== null) {
+              m.polygonOffset = true;
+              m.polygonOffsetUnits = 1;
+              m.polygonOffsetFactor = -this.depth_offset;
+            } else {
+              m.polygonOffset = false;
+            }
+            if (this.color_write !== null) {
+              m.colorWrite = this.color_write;
+            }
             // If our diffuse texture has an alpha channel, set up a customDepthMaterial / customDistanceMaterial to allow shadows to work
             if (m.map) { //this.shadow && m.transparent && m.map) {
               if (!n.customDepthMaterial) {
@@ -990,6 +1065,17 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
       }
       return m;
     }
+    this.updateSkybox = function() {
+      let envMap = (this.isUsingPBR() ? this.getEnvmap() : null);
+      this.traverseObjects(n => {
+        if (n.material) {
+          let materials = (elation.utils.isArray(n.material) ? n.material : [n.material]);
+          materials.forEach(m => {
+            m.envMap = envMap;
+          });
+        }
+      });
+    }
     this.updateColor = function() {
       elation.engine.things.janusobject.extendclass.updateColor.call(this);
 
@@ -1348,8 +1434,12 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
           cull_face: [ 'property', 'cull_face' ],
           blend_src: [ 'property', 'blend_src' ],
           blend_dest: [ 'property', 'blend_dest' ],
+          blend_mode: [ 'property', 'blend_mode' ],
           depth_write: [ 'property', 'depth_write' ],
           depth_test: [ 'property', 'depth_test' ],
+          depth_offset: [ 'property', 'depth_offset' ],
+          depth_func: [ 'property', 'depth_func' ],
+          color_write: [ 'property', 'color_write' ],
 
           wireframe: [ 'property', 'wireframe'],
           fog: [ 'property', 'fog'],

package/scripts/portal.js

@@ -2,17 +2,15 @@ elation.require(['janusweb.janusbase'], function() {
   elation.component.add('engine.things.janusportal', function() {
     this.postinit = function() {
       this.defineProperties({
-        'url': { type: 'string' },
-        'title': { type: 'string' },
+        'url': { type: 'string', set: this.updateTitle },
+        'title': { type: 'string', set: this.updateTitle },
         'janus': { type: 'object' },
         'room': { type: 'object' },
         //'color': { type: 'color', default: new THREE.Color(0xffffff), set: this.updateMaterial },
         'size': { type: 'vector3', default: new THREE.Vector3(1.4,2.2,1), set: this.updateGeometry },
-        'url': { type: 'string', set: this.updateTitle },
         'open': { type: 'boolean', default: false },
         'collision_id': { type: 'string', default: 'cube', set: this.updateCollider },
         'collision_scale': { type: 'vector3', set: this.updateCollider },
-        'title': { type: 'string', set: this.updateTitle },
         'seamless': { type: 'boolean', default: false },
         'draw_text': { type: 'boolean', default: true, set: this.updateTitle },
         'draw_glow': { type: 'boolean', default: true, refreshGeometry: true},
@@ -26,6 +24,8 @@ elation.require(['janusweb.janusbase'], function() {
         'target': { type: 'string', default: '' },
         'round': { type: 'boolean', default: false },
         'cooldown': { type: 'float', default: 1000 },
+        'font': { type: 'string', default: 'impact' },
+        'font_weight': { type: 'string', default: 'bold' },
       });
       this.addTag('usable');
       elation.engine.things.janusportal.extendclass.postinit.call(this);
@@ -75,8 +75,8 @@ elation.require(['janusweb.janusbase'], function() {
               collidable: false,
               pickable: false,
               background: 'rgba(255,255,255,.4)',
-              font: 'impact',
-              fontWeight: 'bold',
+              font: this.font,
+              fontWeight: this.font_weight,
               textShadowBlur: 5,
               textShadowColor: 'black',
               height: .1,
@@ -94,7 +94,7 @@ elation.require(['janusweb.janusbase'], function() {
         elation.events.add(this, 'click', elation.bind(this, this.activate));
         elation.events.add(this, 'mouseover', elation.bind(this, this.hover));
         elation.events.add(this, 'mouseout', elation.bind(this, this.unhover));
-        elation.events.add(this, 'collide', (ev) => this.handleCollide());
+        elation.events.add(this, 'collide', (ev) => this.handleCollide(ev));
       }
     }
     this.createMaterial = function() {
@@ -331,7 +331,7 @@ elation.require(['janusweb.janusbase'], function() {
         console.log('load that room', this.portalroom);
 
         var scene = new THREE.Scene();
-        scene.background = this.portalroom.skyboxtexture
+        scene.background = this.portalroom.skyboxtexture;
         scene.add(this.portalroom.objects['3d']);
         this.scene = scene;
         this.scene.updateMatrixWorld(true);
@@ -615,14 +615,16 @@ elation.require(['janusweb.janusbase'], function() {
     }
     this.handleFrameUpdates = function(ev) {
       elation.engine.things.janusportal.extendclass.handleFrameUpdates.call(this, ev);
-      if (this.shader) {
+      if (this.shader && this.shader.uniforms) {
         if (this.shader.uniforms.time) {
           this.shader.uniforms.time.value = performance.now() / 1000;
           this.refresh();
         }
       }
     }
-    this.handleCollide = function() {
+    this.handleCollide = function(ev) {
+      // TODO - we could potentially handle sending other physical objects through portals here, but for now we only care about the player
+      if (ev.data.other !== player._target) return;
       // Only activate portal if the player is walking towards it
       let fwd = this.localToWorld(V(0,0,1)).sub(this.localToWorld(V(0,0,0)));
       let dot = fwd.dot(normalized(player.vel));