From f7d88179975725383261cd9df88d251e59b7c406 Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Wed, 25 Jul 2018 19:50:23 -0700
Subject: [PATCH] Move sketchfab zip to worker
---
src/components/gltf-model-plus.js | 36 ++++++++++++++---------------
src/utils/media-utils.js | 2 +-
src/workers/sketchfab-zip.worker.js | 31 +++++++++++++++++++++++++
3 files changed, 49 insertions(+), 20 deletions(-)
create mode 100644 src/workers/sketchfab-zip.worker.js
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index b32e05a95..f51a2d9ab 100644
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@@ -1,5 +1,7 @@
import JSZip from "jszip";
+import SketchfabZipWorker from "../workers/sketchfab-zip.worker.js";
+
const GLTFCache = {};
AFRAME.GLTFModelPlus = {
@@ -183,6 +185,17 @@ function nextTick() {
});
}
+function getFilesFromSketchfabZip(src) {
+ return new Promise((resolve, reject) => {
+ const worker = new SketchfabZipWorker();
+ worker.onmessage = e => {
+ const [success, fileMapOrError] = e.data;
+ (success ? resolve : reject)(fileMapOrError);
+ };
+ worker.postMessage(src);
+ });
+}
+
function cachedLoadGLTF(src, basePath, contentType, preferredTechnique, onProgress) {
// Load the gltf model from the cache if it exists.
if (!GLTFCache[src]) {
@@ -190,30 +203,15 @@ function cachedLoadGLTF(src, basePath, contentType, preferredTechnique, onProgre
let gltfUrl = src;
let onLoad = resolve;
if (contentType === "model/gltf+zip") {
- const zip = await fetch(src)
- .then(r => r.blob())
- .then(JSZip.loadAsync);
-
- // Rewrite any url refferences in the GLTF to blob urls
- const gltfJson = JSON.parse(await zip.file("scene.gltf").async("text"));
- const fileMap = await Object.values(zip.files).reduce(async (prev, file) => {
- if (file.name === "scene.gltf") return prev;
- const out = await prev;
- out[file.name] = URL.createObjectURL(await file.async("blob"));
- return out;
- }, Promise.resolve({}));
- gltfJson.buffers && gltfJson.buffers.forEach(b => (b.uri = fileMap[b.uri]));
- gltfJson.images && gltfJson.images.forEach(i => (i.uri = fileMap[i.uri]));
-
- gltfUrl = fileMap["scene.gtlf"] = URL.createObjectURL(
- new Blob([JSON.stringify(gltfJson, null, 2)], { type: "text/plain" })
- );
-
+ const fileMap = await getFilesFromSketchfabZip(src);
+ gltfUrl = fileMap["scene.gtlf"];
onLoad = model => {
+ // The GLTF is now cached as a THREE object, we can get rid of the original blobs
Object.keys(fileMap).forEach(URL.revokeObjectURL);
resolve(model);
};
}
+
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.path = basePath;
gltfLoader.preferredTechnique = preferredTechnique;
diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js
index 7d699d172..112996db1 100644
--- a/src/utils/media-utils.js
+++ b/src/utils/media-utils.js
@@ -18,7 +18,7 @@ export const resolveFarsparkUrl = async url => {
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ media: { url } })
}).then(r => r.json());
- farsparkCache.set(url, resolved);
+ // farsparkCache.set(url, resolved);
return resolved;
};
diff --git a/src/workers/sketchfab-zip.worker.js b/src/workers/sketchfab-zip.worker.js
new file mode 100644
index 000000000..2ba952fb6
--- /dev/null
+++ b/src/workers/sketchfab-zip.worker.js
@@ -0,0 +1,31 @@
+import JSZip from "jszip";
+
+async function fetchZipAndGetBlobs(src) {
+ const zip = await fetch(src)
+ .then(r => r.blob())
+ .then(JSZip.loadAsync);
+
+ // Rewrite any url refferences in the GLTF to blob urls
+ const gltfJson = JSON.parse(await zip.file("scene.gltf").async("text"));
+ const fileMap = await Object.values(zip.files).reduce(async (prev, file) => {
+ if (file.name === "scene.gltf") return prev;
+ const out = await prev;
+ out[file.name] = URL.createObjectURL(await file.async("blob"));
+ return out;
+ }, Promise.resolve({}));
+ gltfJson.buffers && gltfJson.buffers.forEach(b => (b.uri = fileMap[b.uri]));
+ gltfJson.images && gltfJson.images.forEach(i => (i.uri = fileMap[i.uri]));
+
+ fileMap["scene.gtlf"] = URL.createObjectURL(new Blob([JSON.stringify(gltfJson, null, 2)], { type: "text/plain" }));
+
+ return fileMap;
+}
+
+self.onmessage = async e => {
+ try {
+ const fileMap = await fetchZipAndGetBlobs(e.data);
+ self.postMessage([true, fileMap]);
+ } catch (e) {
+ self.postMessage([false, e]);
+ }
+};
--
GitLab