Update engine (#340)

Author: slimbuck

package-lock.json

@@ -42,7 +42,7 @@
         "eslint": "^9.29.0",
         "eslint-import-resolver-typescript": "^4.4.3",
         "globals": "^16.2.0",
-        "playcanvas": "^2.10.6",
+        "playcanvas": "^2.11.0",
         "qrious": "^4.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

package.json

@@ -16,11 +16,7 @@ import { copyAndWatch } from './plugins/copy-and-watch.mjs';
 
 // debug, profile, release
 const BUILD_TYPE = process.env.BUILD_TYPE || 'release';
-const ENGINE_DIR = process.env.ENGINE_PATH || 'node_modules/playcanvas';
-
-const ENGINE_NAME = (BUILD_TYPE === 'debug') ? 'playcanvas.dbg/src/index.js' : 'playcanvas/src/index.js';
-const ENGINE_PATH = path.resolve(ENGINE_DIR, 'build', ENGINE_NAME);
-const PCUI_DIR = path.resolve(process.env.PCUI_PATH || 'node_modules/@playcanvas/pcui');
+const ENGINE_DIR = path.resolve(`node_modules/playcanvas/build/playcanvas${BUILD_TYPE === 'debug' ? '.dbg' : ''}/src/index.js`);
 
 const BLUE_OUT = '\x1b[34m';
 const BOLD_OUT = '\x1b[1m';
@@ -31,7 +27,6 @@ const title = [
     'Building PlayCanvas Model Viewer',
     `type ${BOLD_OUT}${BUILD_TYPE}${REGULAR_OUT}`,
     `engine ${BOLD_OUT}${ENGINE_DIR}${REGULAR_OUT}`,
-    `pcui ${BOLD_OUT}${PCUI_DIR}${REGULAR_OUT}`
 ].map(l => `${BLUE_OUT}${l}`).join('\n');
 console.log(`${BLUE_OUT}${title}${RESET_OUT}\n`);
 
@@ -74,20 +69,13 @@ export default {
         image({ dom: true }),
         alias({
             entries: {
-                'playcanvas': ENGINE_PATH,
-                '@playcanvas/pcui': PCUI_DIR
+                'playcanvas': ENGINE_DIR
             }
         }),
         commonjs(),
         resolve(),
         typescript({
-            compilerOptions: {
-                baseUrl: '.',
-                paths: {
-                    'playcanvas': [ENGINE_DIR],
-                    '@playcanvas/pcui': [PCUI_DIR]
-                }
-            }
+            tsconfig: './tsconfig.json'
         }),
         json(),
         (BUILD_TYPE !== 'debug') && terser({

rollup.config.mjs

@@ -36,10 +36,12 @@ class PngExporter {
             return result;
         };
 
-        const main = async () => {
-            const lodepng = await initLodepng();
+        const main = () => {
+            const init = initLodepng();
+
+            self.onmessage = async (message) => {
+                const lodepng = await init;
 
-            self.onmessage = (message) => {
                 const data = message.data;
 
                 // compress

src/png-exporter.ts

@@ -275,9 +275,6 @@ class Viewer {
         observer.set('camera.multisampleSupported', multisampleSupported);
         observer.set('camera.multisample', multisampleSupported && observer.get('camera.multisample'));
 
-        // create the exporter
-        this.pngExporter = new PngExporter();
-
         // create drop handler
         CreateDropHandler(document.getElementById('app'), (files: Array<File>, resetScene: boolean) => {
             this.loadFiles(files, resetScene);
@@ -1023,6 +1020,12 @@ class Viewer {
 
     downloadPngScreenshot() {
         const texture = this.camera.camera.renderTarget.colorBuffer;
+
+        // construct exporter on demand
+        if (!this.pngExporter) {
+            this.pngExporter = new PngExporter();
+        }
+
         texture.read(0, 0, texture.width, texture.height).then((typedArray: Uint32Array) => {
             this.pngExporter.export(
                 'model-viewer.png',
@@ -1156,8 +1159,7 @@ class Viewer {
                 buffer: {
                     processAsync: processBuffer.bind(this)
                 }
-            }
-            );
+            });
             containerAsset.on('load', () => resolve(containerAsset));
             containerAsset.on('error', (err: string) => reject(err));
             this.app.assets.add(containerAsset);
@@ -1191,7 +1193,7 @@ class Viewer {
 
     isGSplatFilename(filename: string) {
         const parts = filename.split('?')[0].split('/').pop().split('.');
-        const result = parts.length > 0 && ['ply', 'json'].includes(parts.pop().toLowerCase());
+        const result = parts.length > 0 && ['ply', 'json', 'sog'].includes(parts.pop().toLowerCase());
         return result;
     }