remove more unneeded bits, rename main files and get ply loading corr…

…ectly

rollup.config.mjs

@@ -44,7 +44,7 @@ const pipeline = input => {
             sourcemap: true
         },
         plugins: [
-            input === 'src/main.ts' &&
+            input === 'src/bootstrap.ts' &&
                 copyAndWatch({
                     targets: [
                         {
@@ -90,6 +90,6 @@ export default [
             })
         ]
     },
-    pipeline('src/main.ts'),
-    pipeline('src/app.ts')
+    pipeline('src/bootstrap.ts'),
+    pipeline('src/main.ts')
 ];

src/asset-loader.ts

@@ -35,6 +35,7 @@ class AssetLoader {
                 'container',
                 {
                     url: loadRequest.url,
+                    filename: loadRequest.filename,
                     contents: loadRequest.contents
                 },
                 null,

src/bootstrap.ts

@@ -0,0 +1,202 @@
+import {GlobalState} from './types';
+import {Debug} from './debug';
+import {startSpinner, stopSpinner} from './spinner';
+import {CreateDropHandler} from './drop-handler';
+
+// BOOTSTRAP
+
+declare global {
+    interface Window {
+        snap: any;
+        viewerBootstrap: Promise<GlobalState>;
+        ready: Promise<number>;
+    }
+
+    interface Navigator {
+        xr: any;
+    }
+}
+
+// create the target canvas and gl context
+const createCanvas = () => {
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    canvas.setAttribute('id', 'canvas');
+    document.getElementById('app').appendChild(canvas);
+
+    // fit the window with it
+    const ratio = window.devicePixelRatio;
+    const width = document.body.clientWidth;
+    const height = document.body.clientHeight;
+    const w = Math.ceil(width * ratio);
+    const h = Math.ceil(height * ratio);
+
+    canvas.width = w;
+    canvas.height = h;
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+
+    // create gl context
+    const deviceOptions = {
+        alpha: true,
+        antialias: false,
+        depth: false,
+        preserveDrawingBuffer: true,
+        powerPreference: 'high-performance',
+        // create xrCompatible context if xr is available since we're not
+        // sure whether xr mode will be requested or not at this point.
+        xrCompatible: !!navigator.xr
+    };
+
+    const names = ['webgl2', 'webgl', 'experimental-webgl'];
+    let gl: RenderingContext;
+    for (let i = 0; i < names.length; ++i) {
+        gl = canvas.getContext(names[i], deviceOptions);
+        if (gl) {
+            break;
+        }
+    }
+
+    return {
+        canvas: canvas,
+        gl: gl
+    };
+};
+
+// takes a relative URL and returns the absolute version
+const url = (() => {
+    const scripts = Array.from(document.getElementsByTagName('script')).filter(s => s.src);
+    const urlBase = scripts[scripts.length - 1].src.split('/').slice(0, -1).join('/');
+
+    return (url: string) => {
+        return `${urlBase}/${url}`;
+    };
+})();
+
+Debug.time('load');
+
+startSpinner();
+
+// prefetch static assets
+const envImage = fetch(url('static/env/VertebraeHDRI_v1_512.png'))
+    .then(r => r.arrayBuffer())
+    .then(arrayBuffer => URL.createObjectURL(new File([arrayBuffer], 'env.png', {type: 'image/png'})));
+
+const dracoJs = fetch(url('static/lib/draco_decoder.js'))
+    .then(r => r.text())
+    .then(text => URL.createObjectURL(new File([text], 'draco.js', {type: 'application/javascript'})));
+
+const dracoWasm = fetch(url('static/lib/draco_decoder.wasm'))
+    .then(r => r.arrayBuffer())
+    .then(arrayBuffer => URL.createObjectURL(new File([arrayBuffer], 'draco.wasm', {type: 'application/wasm'})));
+
+// construct the canvas and gl context
+const {canvas, gl} = createCanvas();
+
+// application listens for this promise to resolve
+let resolver: (globalState: GlobalState) => void;
+window.viewerBootstrap = new Promise<GlobalState>(resolve => {
+    resolver = resolve;
+});
+
+window.snap = {
+    ar: {
+        experience: {
+            onLoad: (modelUrl: string, modelFilename: string, config: any) => {
+                resolver({
+                    canvas: canvas,
+                    gl: gl,
+                    config: config,
+                    modelUrl: modelUrl,
+                    modelFilename: modelFilename,
+                    envImage: envImage,
+                    dracoJs: dracoJs,
+                    dracoWasm: dracoWasm,
+                    loadComplete: () => {
+                        stopSpinner();
+                        Debug.timeEnd('load');
+                    },
+                    modelLoadComplete: (timing: number) => {
+
+                    },
+                });
+            },
+            getEngagementContext: () => 'ARES_CONTEXT_VISUALIZATION'
+        }
+    }
+};
+
+const startBootstrap = () => {
+    // this block is removed from prod builds
+    let readyResolver: (loadTime: number) => void;
+    window.ready = new Promise(resolve => {
+        readyResolver = resolve;
+    });
+
+    // manually invoke the object viewer onLoad function using a mockup'd
+    // aresSdkConfig object
+    const start = (url: string, filename: string) => {
+        const config = {
+            // scene config overrides
+            camera: {
+                pixelScale: 1,
+                toneMapping: 'aces2'
+            },
+            controls: {
+                autoRotate: true
+            },
+            shadow: {
+                fade: true
+            },
+
+            onViewReady: () => {
+                readyResolver(0);
+            }
+        };
+
+        window.snap.ar.experience.onLoad(url, filename, config);
+    };
+
+    // handle load param and ready promise for visual testing harness
+    const url = new URL(window.location.href);
+
+    // handle load model (used in visual testing and debugging)
+    const loadUrl = url.searchParams.get('load');
+    if (loadUrl) {
+        const decodedUrl = decodeURIComponent(loadUrl);
+        start(decodedUrl, decodedUrl);
+    } else {
+        let loaded = false;
+        const load = (url: string, filename: string) => {
+            if (!loaded) {
+                loaded = true;
+                start(url, filename);
+            }
+        };
+
+        // add a 'choose file' button
+        const selector = document.createElement('input');
+        selector.setAttribute('id', 'file-selector');
+        selector.setAttribute('type', 'file');
+        selector.setAttribute('accept', '.gltf,.glb,.ply');
+        selector.onchange = () => {
+            const files = selector.files;
+            if (files.length > 0) {
+                document.body.removeChild(selector);
+                load(URL.createObjectURL(selector.files[0]), selector.files[0].name);
+            }
+        };
+        document.body.appendChild(selector);
+
+        // also support user dragging and dropping a local glb file onto the canvas
+        CreateDropHandler(canvas, urls => {
+            const modelExtensions = ['.glb', '.gltf', '.ply']
+            const model = urls.find(url => modelExtensions.some(extension => url.filename.endsWith(extension)));
+            if (model) {
+                document.body.removeChild(selector);
+                load(model.url, model.filename);
+            }
+        });
+    }
+}
+
+startBootstrap();

src/camera.ts

@@ -278,9 +278,6 @@ class Camera extends Element {
                 this.autoRotateDelayValue = Math.max(0, this.autoRotateDelayValue - deltaTime);
                 this.autoRotateTimer = 0;
             } else {
-                if (this.autoRotateTimer === 0 && deltaTime > 0) {
-                    this.scene.inputEventHandlers.onCameraAutoRotate();
-                }
                 this.autoRotateTimer += deltaTime;
                 const rotateSpeed = Math.min(1, Math.pow(this.autoRotateTimer * 0.5 - 1, 5) + 1); // soften the initial rotation speedup
                 this.setAzimElev(

src/controllers.ts

@@ -134,17 +134,6 @@ class MouseController {
             case MOUSEBUTTON_LEFT:
                 this.leftButton = false;
                 this.camera.notify('mouseEnd');
-                const eventTarget = event.event.target as Node,
-                    snapLogo = document.querySelector('.snap-logo'),
-                    privacyPolicyTooltip = document.querySelector('#privacy-text');
-                if (
-                    !this.hasDragged(event) &&
-                    !snapLogo?.contains(eventTarget) &&
-                    !privacyPolicyTooltip?.contains(eventTarget)
-                ) {
-                    this.camera.scene.inputEventHandlers.onModelClicked();
-                }
-
                 break;
             case MOUSEBUTTON_MIDDLE:
                 this.middleButton = false;
@@ -157,7 +146,6 @@ class MouseController {
         }
 
         if (this.hasDragged(event)) {
-            this.camera.scene.inputEventHandlers.onModelDragged();
             this.xMouse = event.x;
             this.yMouse = event.y;
         }
@@ -186,7 +174,6 @@ class MouseController {
         this.camera.notify('mouseZoom');
         event.event.preventDefault();
         if (event.wheelDelta !== this.zoomedIn) {
-            this.camera.scene.inputEventHandlers.onModelZoomed();
             this.zoomedIn = event.wheelDelta;
         }
     }
@@ -256,23 +243,13 @@ class TouchController {
             this.camera.notify('touchStart');
             this.xTouch = touches[0].x;
             this.yTouch = touches[0].y;
-            // check if user just ended a zoom manoeuvre
-            if (event.event.type === 'touchend' && this.enableZoom) {
-                this.camera.scene.inputEventHandlers.onModelZoomed();
-            }
         } else if (touches.length === 2) {
             // If there are 2 touches on the screen, then set the pinch distance
             this.lastPinchDistance = this.getPinchDistance(touches[0], touches[1]);
             this.calcMidPoint(touches[0], touches[1], this.lastPinchMidPoint);
             this.camera.notify('touchStart');
         } else {
             this.camera.notify('touchEnd');
-            if (
-                (this.enableOrbit && Math.abs(this.lastTouchPoint.x - this.xTouch) >= 10) ||
-                Math.abs(this.lastTouchPoint.y - this.yTouch) >= 10
-            ) {
-                this.camera.scene.inputEventHandlers.onModelDragged();
-            }
         }
     }
 

src/index.html

@@ -41,6 +41,7 @@
 
     <body>
         <div id="app"></div>
-        <script src="./main.js"></script>
+        <script type="module" src="./bootstrap.js"></script>
+        <script type="module" src="./main.js"></script>
     </body>
 </html>