littlejsengine 1.24.1 → 1.24.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.24.1",
+  "version": "1.24.2",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/gltf.js

@@ -371,11 +371,24 @@ async function loadGLTF(url)
 }
 
 /** Parse a model from GLB bytes or glTF JSON, fetching the buffers and images it refers to
+ *  - A .gltf names its .bin and image files, which are fetched from baseUrl, or found among files: what a game
+ *    has in hand, like the files dropped on the page, by their paths in the drop; with files, baseUrl is the
+ *    .gltf's own folder among them ('' or 'models/house/'), its names are read from there, and a name found nowhere
+ *    there is taken by its file name alone only when one file of the drop has it; only an http, https or blob uri
+ *    is fetched then
+ *  - A file the model needs that is not found is named in the error, and an image that can not be read is named in
+ *    a warning and left out
  *  @param {ArrayBuffer|Object|string} data - GLB bytes, or the glTF JSON as bytes, text or an object
  *  @param {string} [baseUrl] - Where the .bin and image files are, with its trailing slash; loadGLTF passes the file's folder
+ *  @param {Map<string, Blob>} [files] - The files it refers to, by their paths, in place of fetching them
  *  @return {Promise<GLTFModel>}
+ *  @example
+ *  // the files of a drop, a .gltf with its .bin and textures, by their names
+ *  const files = new Map([...dataTransfer.files].map((file)=> [file.name, file]));
+ *  const gltf = [...files.values()].find((file)=> file.name.endsWith('.gltf'));
+ *  const model = await parseGLTF(await gltf.text(), '', files);
  *  @memberof GLTF */
-async function parseGLTF(data, baseUrl='')
+async function parseGLTF(data, baseUrl='', files)
 {
     let json = data, glbBuffer;
     if (data instanceof ArrayBuffer)
@@ -419,7 +432,7 @@ async function parseGLTF(data, baseUrl='')
             ASSERT(glbBuffer && !i, 'a buffer without a uri is the GLB chunk, and only the first can be');
             return glbBuffer;
         }
-        return gltfFetch(buffer.uri, baseUrl).then(r=> r.arrayBuffer());
+        return gltfFetch(buffer.uri, baseUrl, files).then(r=> r.arrayBuffer());
     }));
 
     // the textures, decoded together first; none without WebGL, and a failed image only logs; the base color, normal
@@ -438,7 +451,7 @@ async function parseGLTF(data, baseUrl='')
             const image = json.images[source], sampler = json.samplers?.[texture.sampler] || {};
             let blob;
             if (image.uri)
-                blob = await gltfFetch(image.uri, baseUrl).then(r=> r.blob());
+                blob = await gltfFetch(image.uri, baseUrl, files).then(r=> r.blob());
             else
             {
                 const view = json.bufferViews[image.bufferView];
@@ -455,14 +468,18 @@ async function parseGLTF(data, baseUrl='')
             // REPEAT by default, and hard edged only when its sampler says NEAREST, not as the game's tiles are
             return new TextureInfo(bitmap, true, [sampler.wrapS ?? 10497, sampler.wrapT ?? 10497], sampler.magFilter === 9728);
         }
-        catch (e) { LOG('glTF image not loaded', e); }
+        catch (e) { console.warn('glTF image not loaded, left out: ' + (e?.message || e)); }
     }));
 
     // the parts: the scene's nodes walked with their transforms, every primitive of a node's mesh placed by it;
     // each node's parent and resting place are kept, so an animation can move a part from where it rests
-    const parts = [], parents = [], restInverse = [], restPose = [];
+    const parts = [], parents = [], restInverse = [], restPose = [], visited = new Set;
     const visit = (index, parentMatrix, parentIndex, parentRest)=>
     {
+        // nodes are trees, so one reached again is a cycle or a node with two parents, a file problem
+        if (visited.has(index))
+            throw new Error('glTF node ' + index + ' is reached twice, nodes must form trees');
+        visited.add(index);
         const node = json.nodes[index], local = gltfNodeMatrix(node);
         let matrix = parentMatrix ? parentMatrix.copy().multiply(local) : local;
         let rest = parentRest && parentRest.copy().multiply(local); // where it rests, when that is not where it is baked
@@ -645,8 +662,37 @@ function gltfSample(channel, time, out)
 }
 
 // fetch a uri beside the model, or decode a data uri without going out
-function gltfFetch(uri, baseUrl)
+function gltfFetch(uri, baseUrl, files)
 {
+    // among the files given, by its path from the model's folder, or by its name when only one file has it; a uri
+    // of the web is still fetched, and no other kind is
+    if (files && !/^(data|https?|blob):/i.test(uri))
+    {
+        let name = uri.replace(/[?#].*$/, '');
+        try { name = decodeURIComponent(name); } catch {}
+        // a path with its . and .. steps taken, the same for the keys, which may start with ./ or / or use \
+        const clean = (text)=>
+        {
+            const parts = [];
+            for (const part of text.replace(/\\/g, '/').split('/'))
+                if (part === '..' ? !parts.pop() : part && part !== '.' && !parts.push(part))
+                    return; // above the top of the files
+            return parts.join('/');
+        };
+        const path = clean(baseUrl + name);
+        if (path === undefined)
+            return Promise.reject(new Error('glTF needs ' + name + ', which is above the files given'));
+        const lower = path.toLowerCase(), file = path.slice(path.lastIndexOf('/') + 1);
+        const byPath = new Map([...files].map(([key, value])=> [clean(key)?.toLowerCase(), value]));
+        const found = files.get(path) ?? byPath.get(lower), keys = [...byPath.keys()];
+        if (found)
+            return Promise.resolve(new Response(found));
+        const named = new Set(keys.filter((k)=> k?.slice(k.lastIndexOf('/') + 1) === file).map((k)=> byPath.get(k)));
+        if (named.size === 1)
+            return Promise.resolve(new Response([...named][0]));
+        return Promise.reject(new Error('glTF needs ' + path + (named.size ? ', and more than one file has its name' :
+            ', which is not among the files given')));
+    }
     if (uri.startsWith('data:'))
     {
         const comma = uri.indexOf(','), bytes = atob(uri.slice(comma + 1)), data = new Uint8Array(bytes.length);
@@ -661,7 +707,7 @@ function gltfFetch(uri, baseUrl)
     const url = base ? new URL(uri, base).href : baseUrl + uri;
     return fetch(url).then(r=>
     {
-        if (!r.ok) throw new Error('glTF file not found: ' + url);
+        if (!r.ok) throw new Error('glTF needs ' + uri + ', not found at ' + url);
         return r;
     });
 }
@@ -692,11 +738,18 @@ function gltfAccessor(json, buffers, index)
     const size = Type.BYTES_PER_ELEMENT;
     const scales = /** @type {Array<[Object, number]>} */ ([[Int8Array, 127], [Uint8Array, 255], [Int16Array, 32767], [Uint16Array, 65535]]);
     const scale = a.normalized ? new Map(scales).get(Type) || 1 : 1;
+    // with a buffer under it the count is bounded by the buffer, without one it is all zeros and a sparse few,
+    // which no real model makes millions of
+    if (!view && !(a.count <= 1 << 20))
+        throw new Error('glTF accessor ' + index + ' has no buffer and a count of ' + a.count);
+    // its elements must lie in its buffer before so many floats are made for them
+    const viewEnd = view && (buffers[view.buffer]?.byteLength ?? 0), stride = view?.byteStride || components * size;
+    if (view && !((view.byteOffset || 0) + (a.byteOffset || 0) + (a.count - 1) * stride + components * size <= viewEnd))
+        throw new Error('glTF accessor ' + index + ' reaches past its buffer');
     const out = new Float32Array(a.count * components);
     if (view)
     {
         const buffer = buffers[view.buffer], offset = (view.byteOffset || 0) + (a.byteOffset || 0);
-        const stride = view.byteStride || components * size;
         if (stride === components * size)
             out.set(new Type(buffer, offset, a.count * components)); // packed, one view over all of it
         else
@@ -795,7 +848,7 @@ function gltfPart(json, buffers, textures, primitive, matrix, name)
 let gltfWhiteTextureInfo;
 function gltfWhiteTexture()
 {
-    if (gltfWhiteTextureInfo || !glContext || typeof OffscreenCanvas == 'undefined') return gltfWhiteTextureInfo;
+    if (gltfWhiteTextureInfo || !glContext || !canvasAvailable()) return gltfWhiteTextureInfo;
     const context = createCanvasContext(1);
     context.fillStyle = '#fff';
     context.fillRect(0, 0, 1, 1);

package/plugins/lightSystem.js

@@ -151,7 +151,7 @@ class LightSystemPlugin
             }
 
             // where Canvas2D draws go during the shadow and emissive passes
-            lightSystem.shadowContext ||= new OffscreenCanvas(1, 1).getContext('2d');
+            lightSystem.shadowContext ||= createCanvasContext(1);
 
             // resolve texture size default at init time (mainCanvasSize may
             // not be set yet at the moment the constructor first ran), and