Build update, working as PWA (#296)

playcanvas · May 23, 2024 · 96a1f44 · 96a1f44
1 parent 4a57060
commit 96a1f44
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 161 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "model-viewer",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "author": "PlayCanvas<[email protected]>",
   "homepage": "https://playcanvas.com",
   "description": "PlayCanvas glTF Viewer",

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -2,7 +2,6 @@
 import alias from '@rollup/plugin-alias';
 import image from '@rollup/plugin-image';
 import commonjs from "@rollup/plugin-commonjs";
-import Handlebars from 'handlebars';
 import json from "@rollup/plugin-json";
 import path from 'path';
 import resolve from "@rollup/plugin-node-resolve";
@@ -14,11 +13,6 @@ import typescript from "@rollup/plugin-typescript";
 // custom plugins
 import copyAndWatch from "./plugins/copy-and-watch.mjs";
 
-// prod is release build
-if (process.env.BUILD_TYPE === 'prod') {
-    process.env.BUILD_TYPE = 'release';
-}
-
 // debug, profile, release
 const BUILD_TYPE = process.env.BUILD_TYPE || 'release';
 const ENGINE_DIR = process.env.ENGINE_PATH || 'node_modules/playcanvas';
@@ -27,18 +21,6 @@ const PCUI_DIR = path.resolve(process.env.PCUI_PATH || 'node_modules/@playcanvas
 const ENGINE_NAME = (BUILD_TYPE === 'debug') ? 'playcanvas.dbg.mjs' : 'playcanvas.mjs';
 const ENGINE_PATH = path.resolve(ENGINE_DIR, 'build', ENGINE_NAME);
 
-// compile mustache template
-const compileMustache = (content) => {
-    return Handlebars.compile(content.toString('utf8'))({
-        hasPublicPath: !!process.env.PUBLIC_PATH,
-        hasAnalyticsID: !!process.env.ANALYTICS_ID,
-        hasOneTrustDeveloperID: !!process.env.ONETRUST_DEVELOPER_ID,
-        analyticsID: process.env.ANALYTICS_ID,
-        oneTrustDomainKey: process.env.ONETRUST_DOMAIN_KEY,
-        oneTrustDeveloperID: process.env.ONETRUST_DEVELOPER_ID
-    });
-};
-
 export default {
     input: 'src/index.tsx',
     output: {
@@ -49,15 +31,21 @@ export default {
     plugins: [
         copyAndWatch({
             targets: [
-                { src: 'src/index.mustache', destFilename: 'index.html', transform: compileMustache },
+                {
+                    src: 'src/index.html',
+                    transform: (contents) => {
+                        return contents.toString().replace('__BASE_HREF__', process.env.BASE_HREF || '').replace('__')
+                    }
+                },
+                { src: 'src/manifest.json' },
                 { src: 'src/fonts.css' },
                 { src: 'static/' }
             ]
         }),
         replace({
             values: {
+                // NOTE: this is required for react (??) - see https://github.com/rollup/rollup/issues/487#issuecomment-177596512
                 'process.env.NODE_ENV': JSON.stringify(BUILD_TYPE === 'release' ? 'production' : 'development'),
-                '__PUBLIC_PATH__': JSON.stringify(process.env.PUBLIC_PATH)
             },
             preventAssignment: true
         }),

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -1,13 +1,3 @@
-function getAssetPath(assetPath: string): string {
-    // @ts-ignore: path variable injected at build time
-    return (__PUBLIC_PATH__ ? __PUBLIC_PATH__ : '/static/') + assetPath;
-}
-
-function getRootPath(): string {
-    // @ts-ignore: path variable injected at build time
-    return (__PUBLIC_PATH__ ? './model-viewer' : '.');
-}
-
 const addEventListenerOnClickOnly = (element: any, callback: any, delta = 2) => {
     let startX: number;
     let startY: number;
@@ -70,4 +60,4 @@ const extract = (obj: any, paths: string[]) => {
     return result;
 };
 
-export { getAssetPath, getRootPath, addEventListenerOnClickOnly, extract };
+export { addEventListenerOnClickOnly, extract };
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Model Viewer</title>
+    <meta charset="utf-8" />
+    <base href="__BASE_HREF__" />
+    <meta name="description" content="Fast and lightweight glTF 2.0 and gaussian splatting PLY viewer powered by the PlayCanvas engine." />
+    <meta name="keywords" content="glTF, GLB, PLY, WebGL, WebGPU, PlayCanvas, Viewer, Gaussian Splatting" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+    <link rel="icon" type="image/png" href="static/playcanvas-logo.png" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="manifest" href="manifest.json" />
+</head>
+
+<body>
+    <a id='ar-link' rel='ar' download='asset.usdz'><img /></a>
+    <div id='app'></div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/src/index.mustache b/src/index.mustache
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,7 +8,6 @@ import {
 } from 'playcanvas';
 import { Observer } from '@playcanvas/observer';
 
-import { getAssetPath } from './helpers';
 import { ObserverData } from './types';
 import { initMaterials } from './material';
 import initializeUI from './ui';
@@ -214,20 +213,20 @@ const main = () => {
     initMaterials();
 
     basisInitialize({
-        glueUrl: getAssetPath('lib/basis/basis.wasm.js'),
-        wasmUrl: getAssetPath('lib/basis/basis.wasm.wasm'),
-        fallbackUrl: getAssetPath('lib/basis/basis.js'),
+        glueUrl: 'static/lib/basis/basis.wasm.js',
+        wasmUrl: 'static/lib/basis/basis.wasm.wasm',
+        fallbackUrl: 'static/lib/basis/basis.js',
         lazyInit: true
     });
 
     // @ts-ignore
     WasmModule.setConfig('DracoDecoderModule', {
-        glueUrl: getAssetPath('lib/draco/draco.wasm.js'),
-        wasmUrl: getAssetPath('lib/draco/draco.wasm.wasm'),
-        fallbackUrl: getAssetPath('lib/draco/draco.js')
+        glueUrl: 'static/lib/draco/draco.wasm.js',
+        wasmUrl: 'static/lib/draco/draco.wasm.wasm',
+        fallbackUrl: 'static/lib/draco/draco.js'
     });
 
-    const skyboxUrls = new Map(skyboxes.map(s => [s.label, getAssetPath(s.url)]));
+    const skyboxUrls = new Map(skyboxes.map(s => [s.label, `static/${s.url}`]));
 
     // hide / show spinner when loading files
     observer.on('ui.spinner:set', (value: boolean) => {
@@ -257,8 +256,8 @@ const main = () => {
     // create the graphics device
     createGraphicsDevice(canvas, {
         deviceTypes: url.searchParams.has('webgpu') || observer.get('enableWebGPU') ? ['webgpu'] : [],
-        glslangUrl: getAssetPath('lib/glslang/glslang.js'),
-        twgslUrl: getAssetPath('lib/twgsl/twgsl.js'),
+        glslangUrl: 'static/lib/glslang/glslang.js',
+        twgslUrl: 'static/lib/twgsl/twgsl.js',
         antialias: false,
         depth: false,
         stencil: false,

diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,32 @@
+{
+    "name": "Model Viewer",
+    "short_name": "Model Viewer",
+    "description": "Fast and lightweight viewer of glTF 2.0 and Gaussian Splat PLY files.",
+    "display": "fullscreen",
+    "start_url": "/",
+    "scope": "/",
+    "background_color": "#000000",
+    "icons": [{
+        "src": "static/playcanvas-logo.png",
+        "sizes": "512x512",
+        "type": "image/png"
+    }],
+    "screenshots": [{
+        "src": "static/screenshot-wide.png",
+        "sizes": "3004x2060",
+        "type": "image/png",
+        "form_factor": "wide"
+    }, {
+        "src": "static/screenshot-narrow.png",
+        "sizes": "1392x2786",
+        "type": "image/png",
+        "form_factor": "narrow"
+    }],
+    "file_handlers": [{
+        "action": "/",
+        "accept": {
+            "application/ply": [".ply"],
+            "model/gltf-binary": [".glb"]
+        }
+    }]
+}
diff --git a/src/ui/index.tsx b/src/ui/index.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Container, Spinner } from 'pcui';
 
-import { getAssetPath } from '../helpers';
 import { ObserverData } from '../types';
 import LeftPanel from './left-panel';
 import SelectedNode from './selected-node';
 import PopupPanel from './popup-panel';
 import LoadControls from './load-controls';
 import ErrorBox from './errors';
+import { version as appVersion } from '../../package.json';
 
 class App extends React.Component<{ observer: Observer }> {
     state: ObserverData = null;
@@ -44,12 +44,12 @@ class App extends React.Component<{ observer: Observer }> {
             <Container id="panel-left" flex resizable='right' resizeMin={220} resizeMax={800}>
                 <div className="header" style={{ display: 'none' }}>
                     <div id="title">
-                        <img src={getAssetPath('playcanvas-logo.png')}/>
-                        <div>PLAYCANVAS MODEL VIEWER</div>
+                        <img src={'static/playcanvas-logo.png'}/>
+                        <div>{`MODEL VIEWER v${appVersion}`}</div>
                     </div>
                 </div>
                 <div id="panel-toggle">
-                    <img src={getAssetPath('playcanvas-logo.png')}/>
+                    <img src={'static/playcanvas-logo.png'}/>
                 </div>
                 <LeftPanel observerData={this.state} setProperty={this._setStateProperty} />
             </Container>

diff --git a/src/ui/load-controls.tsx b/src/ui/load-controls.tsx
@@ -1,8 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { Container, Label, Button, TextInput } from 'pcui';
-import { getAssetPath } from '../helpers';
 
 import { File, SetProperty } from '../types';
+import { version as appVersion } from '../../package.json';
 
 const validUrl = (url: string) => {
     try {
@@ -56,9 +56,9 @@ const LoadControls = (props: { setProperty: SetProperty }) => {
         <div id='load-controls'>
             <Container class="load-button-panel" enabled flex>
                 <div className='header'>
-                    <img src={getAssetPath('playcanvas-logo.png')}/>
+                    <img src={'static/playcanvas-logo.png'}/>
                     <div>
-                        <Label text='PLAYCANVAS MODEL VIEWER' />
+                        <Label text={`MODEL VIEWER v${appVersion}`} />
                     </div>
                     <Button onClick={() => {
                         window.open('https://github.com/playcanvas/model-viewer', '_blank').focus();

diff --git a/static/manifest.json b/static/manifest.json
diff --git a/static/playcanvas-logo.png b/static/playcanvas-logo.png
diff --git a/static/screenshot-narrow.png b/static/screenshot-narrow.png
diff --git a/static/screenshot-wide.png b/static/screenshot-wide.png