elation-engine 0.9.113 → 0.9.115

package/css/systems/render.css

@@ -1,8 +1,12 @@
+engine-systems-render-view>canvas {
+  position: relative;
+  z-index: 1;
+}
 .engine_systems_render_css3d {
   position:fixed;
   top: 0;
   left: 0;
-  z-index: -1;
+  z-index: 0;
 }
 .engine_render_bloom,
 .engine_render_scale {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elation-engine",
   "description": "WebGL/WebVR engine written in Javascript",
-  "version": "0.9.113",
+  "version": "0.9.115",
   "main": "",
   "author": "James Baicoianu",
   "license": "MIT",

package/scripts/assets.js

@@ -1,4 +1,4 @@
-elation.require(['utils.workerpool', 'engine.external.three.three', 'engine.external.libgif', 'engine.external.textdecoder-polyfill', 'engine.external.three.three-loaders', 'engine.external.three.three-vrm'], function() {
+elation.require(['utils.workerpool', 'engine.external.three.three', 'engine.external.libgif', 'engine.external.textdecoder-polyfill', 'engine.external.three.three-loaders', 'engine.external.three.three-vrm', 'engine.external.three.three-icosa'], function() {
 
   THREE.Cache.enabled = true;
 
@@ -86,6 +86,10 @@ elation.require(['utils.workerpool', 'engine.external.three.three', 'engine.exte
       basisloader.detectSupport(renderer);
       this.basisloader = basisloader;
 
+      this.ktx2loader = new THREE.KTX2Loader();
+      this.ktx2loader.setTranscoderPath(libpath);
+      this.ktx2loader.detectSupport(renderer);
+
       let pmremGenerator = new THREE.PMREMGenerator( renderer );
       pmremGenerator.compileEquirectangularShader();
       this.pmremGenerator = pmremGenerator;
@@ -397,7 +401,7 @@ if (!ENV_IS_BROWSER) return;
       var texture = new THREE.Texture();
       var uuid = this.uuidmap[url];
       if (!uuid) {
-        uuid = this.uuidmap[url] = THREE.Math.generateUUID();
+        uuid = this.uuidmap[url] = THREE.MathUtils.generateUUID();
       }
       var img = { uuid: uuid, src: url, toDataURL: function() { return url; } };
       texture.image = img;
@@ -592,8 +596,18 @@ if (!ENV_IS_BROWSER) return;
                 // FIXME - we switched loader to request Blob responses, make sure Basis textures still load
                 let blob = events[0].target.response;
                 blob.arrayBuffer()
-                  .then(buffer => loader._createTexture(buffer))
+                  .then(buffer => loader._createTexture([buffer]))
                   .then(texture => this.handleLoadBasis(texture))
+              } else if (imagetype == 'hdr') {
+                let loader = new THREE.RGBELoader();
+                loader.load(fullurl, texture => {
+                  this._texture = texture;
+                  //const envMap = elation.engine.assets.pmremGenerator.fromEquirectangular( texture );
+                  //this._texture = envMap.texture;
+                  this.loaded = true;
+                  this.uploaded = false;
+                  this.sendLoadEvents();
+                });
               } else if (imagetype == 'exr') {
                 // TODO - this should probably done off-thread if possible, it currently locks rendering for a noticable amount of time
                 let loader = new THREE.EXRLoader();
@@ -808,8 +822,17 @@ if (!ENV_IS_BROWSER) return;
       var framedelays = [];
       var framenum = -1;
       var lastframe = texture;
+//console.log('load gif?', image);
       gif.load(function() {
         var canvas = gif.get_canvas();
+/*
+console.log('gif loaded!', canvas);
+document.body.appendChild(newcanvas);
+newcanvas.style.position = 'absolute';
+newcanvas.style.zIndex = 1000;
+newcanvas.style.top = 0;
+newcanvas.style.left = 0;
+*/
 
         var doGIFFrame = function(isstatic) {
           framenum = (framenum + 1) % gif.get_length();
@@ -833,6 +856,7 @@ if (!ENV_IS_BROWSER) return;
             }
           }
           if (frame && frame.image) {
+//console.log('gifframe', frame);
             /*
             texture.image = frame.image;
             texture.needsUpdate = true;
@@ -843,6 +867,8 @@ if (!ENV_IS_BROWSER) return;
               lastframe = frametex;
             }
             elation.events.fire({element: texture, type: 'asset_update', data: frametex});
+            elation.events.fire({element: texture, type: 'update', data: frametex});
+            elation.events.fire({element: this, type: 'asset_update', data: frametex});
           }
 
           if (!isstatic) {
@@ -955,12 +981,13 @@ if (!ENV_IS_BROWSER) return;
     srgb: true,
     tex_linear: true,
     preload: false,
+    extratracks: false,
     hls: null,
     type: THREE.UnsignedByteType,
-    format: THREE.RGBFormat,
+    format: THREE.RGBAFormat,
 
     load: function() {
-      var video = this.video;
+      var video = this.video || this._video;
       if (!video && this.src) {
         var url = this.getProxiedURL(this.src);
         var video = document.createElement('video');
@@ -975,17 +1002,27 @@ if (!ENV_IS_BROWSER) return;
         if ('requestVideoFrameCallback' in video) {
           video.requestVideoFrameCallback((time, metadata) => this.updateVideoFrame(time, metadata));
         }
+        if (this.extratracks) {
+          this.extratracks.forEach(t => {
+            let track = document.createElement('track');
+            for (let k in t) {
+              track[k] = t[k];
+            }
+            video.appendChild(track);
+            console.log('- add track to video', track);
+          });
+        }
       }
       this._video = video;
-      let textureFormat = (this.format == THREE.RGBFormat && this.hasalpha ? THREE.RGBAFormat : this.format);
+      let textureFormat = this.format;
       if (false && this.sbs3d) {
         this._texture = new THREE.SBSVideoTexture(video, THREE.UVMapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, null, null, textureFormat, this.type);
         this._texture.reverse = this.reverse3d;
       } else {
         this._texture = new THREE.VideoTexture(video, THREE.UVMapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, null, null, textureFormat, this.type);
       }
-      this._texture.minFilter = THREE.LinearFilter;
-      this._texture.magFilter = THREE.LinearFilter;
+      //this._texture.minFilter = THREE.LinearFilter;
+      //this._texture.magFilter = THREE.LinearFilter;
       this._texture.encoding = (this.srgb ? THREE.sRGBEncoding : THREE.LinearEncoding);
 
       elation.events.add(video, 'loadeddata', elation.bind(this, this.handleLoad));
@@ -1017,8 +1054,8 @@ if (!ENV_IS_BROWSER) return;
           // If autoplay failed, retry with muted video
           var strerr = err.toString();
           if (strerr.indexOf('NotAllowedError') == 0) {
-            video.muted = true;
-            video.play().catch(elation.bind(this, this.handleAutoplayError));
+            //video.muted = true;
+            //video.play().catch((e) => console.log('huh what', e));
           } else if (strerr.indexOf('NotSupportedError') == 0 && this.hls !== false) {
             this.initHLS();
           }
@@ -1041,7 +1078,7 @@ if (!ENV_IS_BROWSER) return;
       elation.events.fire({element: this, type: 'asset_load_progress', data: progress});
     },
     handleError: function(ev) {
-      //console.log('video uh oh!', ev);
+      console.log('video error!', ev);
       //this._texture = false;
       //console.log('Video failed to load, try HLS', this._video.error, ev);
       /*
@@ -1079,23 +1116,47 @@ if (!ENV_IS_BROWSER) return;
     initHLS: function() {
       if (typeof Hls != 'function') {
         elation.file.get('js', 'https://cdn.jsdelivr.net/npm/hls.js@latest', elation.bind(this, this.initHLS));
+        //elation.file.get('js', 'https://baicoianu.com/~bai/janusweb/test/hls-modified.js', elation.bind(this, this.initHLS));
         return;
       }
       let hlsConfig = {
         debug: false,
-        maxBufferLength: 10,
-        maxMaxBufferLength: 60,
+        //maxBufferLength: 10,
+        maxBufferLength: 30,
+        //capLevelOnFPSDrop: true,
+        //fpsDroppedMonitoringThreshold: .05,
+        maxBufferSize: 500 * 1024 * 1024,
+/*
         xhrSetup: function (xhr,url) {
             //xhr.withCredentials = true; // do send cookie
             xhr.setRequestHeader("Access-Control-Allow-Headers","Content-Type, Accept, X-Requested-With");
             xhr.setRequestHeader("Access-Control-Allow-Origin",document.location.origin);
             xhr.setRequestHeader("Access-Control-Allow-Credentials","true");
         },
+*/
+        xhrSetup: undefined,
+        progressive: false,
+        fetchSetup: function(context, initParams) {
+          //initParams.credentials = 'include';
+          return new Request(context.url, initParams);
+
+        },
       };
+console.log('set up hls', hlsConfig);
       var hls = new Hls(hlsConfig);
 
+      let mediaErrorCount = 0,
+          lastErrorTime = null,
+          errorTimer = setInterval(() => {
+            if (lastErrorTime) {
+              let timeSinceError = Date.now() - lastErrorTime;
+              if (mediaErrorCount > 0 && timeSinceError >= 10000) {
+                mediaErrorCount--;
+              }
+            }
+          }, 10000);
       hls.on(Hls.Events.ERROR, (event, data) => {
-        console.log('HLS.Events.ERROR: ', event, data);
+        console.log('HLS.Events.ERROR: ', event, data, mediaErrorCount);
         if (data.fatal) {
           switch (data.type) {
             case Hls.ErrorTypes.NETWORK_ERROR:
@@ -1112,8 +1173,17 @@ if (!ENV_IS_BROWSER) return;
           }
         //} else if (data.details === 'internalException' && data.type === 'otherError' && isMobile()) {
         //  this.hlsDropHighestLevel();
-        } else if (data.details == 'bufferStalledError') {
+        } else if (data.type == Hls.ErrorTypes.MEDIA_ERROR) {
           //hls.recoverMediaError();
+          lastErrorTime = Date.now();
+          mediaErrorCount++;
+          if (mediaErrorCount > 4 && hls.currentLevel > 0) {
+            // after 4 media errors, try stepping down to the next lowest level
+            let newlevel = hls.currentLevel - 1;
+            console.warn(`Stepping HLS level down from ${hls.currentLevel} to ${newlevel}`, hls);
+            hls.currentLevel = newlevel;
+            mediaErrorCount = 0;
+          }
         }
       });
 
@@ -1298,6 +1368,7 @@ if (!ENV_IS_BROWSER) return;
       return m;
     },
     assignTextures: function(group, args) {
+    return;
       var minFilter = (this.tex_linear && this.tex_linear != 'false' ? THREE.LinearMipMapLinearFilter : THREE.NearestFilter);
       var magFilter = (this.tex_linear && this.tex_linear != 'false' ? THREE.LinearFilter : THREE.NearestFilter);
 
@@ -1431,11 +1502,20 @@ if (!ENV_IS_BROWSER) return;
       return isGLB;
     },
     loadglTF: function(jobdata) {
-      let proxypath = this.getProxiedURL(jobdata.src);
+      let dirpathparts = jobdata.src.split('/');
+      dirpathparts[dirpathparts.length-1] = '';
+      let proxypath = this.getProxiedURL(dirpathparts.join('/'));
       var loader = new THREE.GLTFLoader();
       if (elation.engine.assets.dracopath) {
         loader.setDRACOLoader(new THREE.DRACOLoader().setDecoderPath(elation.engine.assets.dracopath));
       }
+      if (elation.engine.assets.ktx2loader) {
+        loader.setKTX2Loader(elation.engine.assets.ktx2loader);
+      }
+      if (elation.engine.assets.icosapath) {
+        loader.register(parser => new THREE.GLTFGoogleTiltBrushMaterialExtension(parser, elation.engine.assets.icosapath));
+      }
+      loader.setMeshoptDecoder(MeshoptDecoder);
       this._model = new THREE.Group();
       this._model.userData.loaded = false;
       loader.parse(jobdata.srcdata, proxypath, elation.bind(this, function(modeldata) {
@@ -1481,7 +1561,7 @@ if (!ENV_IS_BROWSER) return;
     complete: function(object) {
       this.removePlaceholders();
       this._model.userData.loaded = true;
-      //this._model.add(scene);
+      //this._model.add(object);
       this.fillGroup(this._model, object, false);
 
       this.extractTextures(object);
@@ -1559,7 +1639,8 @@ if (!ENV_IS_BROWSER) return;
               var tex = material[texname];
               if (tex) { // && tex.image instanceof HTMLImageElement) {
                 var img = tex.image;
-                var src = img.originalSrc || img.src;
+                var src = img.originalSrc || img.src || img.data;
+                if (!src) return;
                 if (!textures[src]) {
                   //elation.engine.assets.loadJSON([{"assettype": "image", name: src, "src": src}], this.baseurl); 
                   //tex = elation.engine.assets.find('image', src);
@@ -1783,7 +1864,7 @@ if (!ENV_IS_BROWSER) return;
         }),
       });
     },
-    loadJSON: function(json) {
+    loadJSON: function(json, replaceExisting=false) {
       //this.json = json;
       elation.events.fire({element: this, type: 'asset_load_processing'});
       var baseurl = (this.baseurl && this.baseurl.length > 0 ? this.baseurl : this.getBaseURL());
@@ -1793,7 +1874,7 @@ if (!ENV_IS_BROWSER) return;
         assetdef.baseurl = baseurl;
         assetdef.assetpack = this;
         var existing = elation.utils.arrayget(this.assetmap, assetdef.assettype + '.' + assetdef.name); //elation.engine.assets.find(assetdef.assettype, assetdef.name, true);
-        if (!existing) {
+        if (!existing || replaceExisting) {
           var asset = elation.engine.assets.get(assetdef);
           this.assets.push(asset);
           if (!this.assetmap[asset.assettype]) this.assetmap[asset.assettype] = {};
@@ -2119,6 +2200,7 @@ if (!ENV_IS_BROWSER) return;
 
         let starttime = new Date().getTime();
             lasttime = starttime;
+
         setInterval(() => {
           let d = new Date();
           let now = d.getTime();
@@ -2136,6 +2218,7 @@ if (!ENV_IS_BROWSER) return;
             lasttime = now;
           }
         }, 16);
+
       }
       //this.load();
     },

package/scripts/assetworker.js

@@ -26,7 +26,7 @@ elation.require([
 
         var uuid = srcmap[url];
         if (!uuid) {
-          srcmap[url] = uuid = THREE.Math.generateUUID();
+          srcmap[url] = uuid = THREE.MathUtils.generateUUID();
         }
         var img = { uuid: uuid, src: url, toDataURL: function() { return url; } };
         scope.manager.itemStart( url );
@@ -448,6 +448,23 @@ elation.require([
       return new Promise(function(resolve, reject) { 
         var loader = new THREE.FBXLoader();
         var modeldata = loader.parse(data);
+        let mapnames = ['map', 'normalMap', 'aoMap', 'bumpMap', 'alphaMap', 'emissiveMap', 'envMap', 'lightMap', 'specularMap'];
+        let baseurl = job.data.src.substr( 0, job.data.src.lastIndexOf( "/" ) + 1 );
+        modeldata.traverse(n => {
+          if (n.material) {
+            mapnames.forEach(m => {
+              if (n.material[m]) {
+                let map = n.material[m];
+                if (map.image && map.image.src.indexOf(':') == -1) {
+                  map.image.src = baseurl + map.image.src;
+                }
+              }
+            });
+          } else if (n instanceof THREE.Bone) {
+            let name = n.name.replace('mixamorig', '');
+            n.name = name[0].toLowerCase() + name.substring(1);
+          }
+        });
         resolve(modeldata.toJSON());
       });
     }