create-playcanvas 0.2.6 → 0.4.0

package/templates/engine/base/src/vite-env.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+declare module 'playcanvas/scripts/esm/camera-controls.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const CameraControls: typeof Script & (new () => Script);
+}
+
+declare module 'playcanvas/scripts/esm/grid.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const Grid: typeof Script & (new () => Script);
+}
+
+declare module 'playcanvas/scripts/esm/sky/procedural-sky.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const ProceduralSky: typeof Script & (new () => Script);
+}

package/templates/engine/base/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}

package/templates/engine/interactive-sphere/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PlayCanvas + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/interactive-sphere/src/App.ts

@@ -0,0 +1,180 @@
+import type { Layer, Texture } from 'playcanvas';
+import {
+    createGraphicsDevice,
+    AppBase,
+    AppOptions,
+    RenderComponentSystem,
+    CameraComponentSystem,
+    ScriptComponentSystem,
+    TextureHandler,
+    ContainerHandler,
+    FILLMODE_FILL_WINDOW,
+    RESOLUTION_AUTO,
+    Entity,
+    Color,
+    Vec3,
+    Picker,
+    EVENT_MOUSEMOVE,
+    EVENT_MOUSEUP,
+    TouchDevice,
+    Mouse,
+    StandardMaterial,
+    Asset,
+    AssetListLoader,
+    TEXTURETYPE_RGBP
+} from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+
+import { throttle } from './utils';
+
+const HOVER_COLOR = new Color(1, 0.647, 0);
+const DEFAULT_COLOR = new Color(0.827, 0.827, 0.827);
+
+// Assets to load
+const assets = {
+    envAtlas: new Asset(
+        'env-atlas',
+        'texture',
+        { url: '/environment-map.png' },
+        {
+            type: TEXTURETYPE_RGBP,
+            mipmaps: false
+        }
+    )
+};
+
+/**
+ * Setup the PlayCanvas app
+ * @param canvas - The canvas element
+ * @param onClick - The function to call when the user clicks on the sphere
+ */
+const setupApp = async (canvas: HTMLCanvasElement, onClick: () => void) => {
+    if (!canvas) {
+        throw new Error('Canvas not found');
+    }
+
+    // Create graphics device
+    const device = await createGraphicsDevice(canvas);
+
+    // Create app options
+    const createOptions = new AppOptions();
+    createOptions.graphicsDevice = device;
+    createOptions.mouse = new Mouse(document.body);
+    createOptions.touch = new TouchDevice(document.body);
+    createOptions.componentSystems = [RenderComponentSystem, CameraComponentSystem, ScriptComponentSystem];
+    createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
+
+    // Create app
+    const app = new AppBase(canvas);
+    app.init(createOptions);
+
+    // Set the canvas to fill the window
+    app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+    app.setCanvasResolution(RESOLUTION_AUTO);
+
+    // Ensure canvas is resized when window changes size
+    const resize = () => app.resizeCanvas();
+    window.addEventListener('resize', resize);
+
+    app.once('destroy', () => {
+        window.removeEventListener('resize', resize);
+    });
+
+    // Load assets
+    await new Promise<void>((resolve) => {
+        new AssetListLoader(Object.values(assets), app.assets).load(() => resolve());
+    });
+
+    app.start();
+
+    // Set up environment lighting (no skybox, just IBL)
+    app.scene.envAtlas = assets.envAtlas.resource as Texture;
+    const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
+    if (skyboxLayer) {
+        skyboxLayer.enabled = false;
+    }
+
+    // Create sphere entity
+    const sphere = new Entity('sphere');
+    sphere.setPosition(new Vec3(0, 0.5, 0));
+
+    // Create a new material
+    const material = new StandardMaterial();
+    material.diffuse.copy(DEFAULT_COLOR);
+    material.update();
+
+    sphere.addComponent('render', {
+        type: 'sphere',
+        material: material
+    });
+    app.root.addChild(sphere);
+
+    // Create camera entity
+    const camera = new Entity('camera');
+    camera.addComponent('camera', {
+        clearColor: new Color(0.09, 0.09, 0.09)
+    });
+    camera.setPosition(new Vec3(4, 1, 4));
+    app.root.addChild(camera);
+
+    // Create camera controls
+    camera.addComponent('script');
+    camera.script?.create(CameraControls);
+
+    // Create grid entity
+    const grid = new Entity('grid');
+    grid.addComponent('script');
+    grid.script?.create(Grid);
+    grid.setLocalScale(1000, 1000, 1000);
+    app.root.addChild(grid);
+
+    // Create a picker for mouse interaction
+    const picker = new Picker(app, 1, 1);
+    const worldLayer = app.scene.layers.getLayerByName('World');
+
+    const intersectsSphere = (x: number, y: number, layer: Layer) => {
+        if (!camera.camera) {
+            return Promise.resolve(false);
+        }
+
+        const pickerScale = 0.5;
+        picker.resize(canvas.clientWidth * pickerScale, canvas.clientHeight * pickerScale);
+
+        if (!layer) {
+            return Promise.resolve(false);
+        }
+
+        picker.prepare(camera.camera, app.scene, [layer]);
+
+        return picker.getSelectionAsync(x * pickerScale, y * pickerScale, 1, 1).then((items) => {
+            if (items.length === 0) return false;
+            return items[0] === sphere.render?.meshInstances[0];
+        });
+    };
+
+    // On mouse move, check if hovering over sphere and update cursor/color
+    app.mouse?.on(
+        EVENT_MOUSEMOVE,
+        throttle((event) => {
+            if (!worldLayer) return;
+            intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
+                material.diffuse.copy(intersects ? HOVER_COLOR : DEFAULT_COLOR);
+                document.body.style.cursor = intersects ? 'pointer' : 'default';
+                material.update();
+            });
+        }, 100)
+    );
+
+    // On mouse up, check if clicked on sphere and call onClick
+    app.mouse?.on(EVENT_MOUSEUP, (event) => {
+        if (!worldLayer || !onClick) return;
+        intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
+            if (intersects) {
+                onClick();
+            }
+        });
+    });
+};
+
+export { setupApp };

package/templates/{vanilla-ts → engine/interactive-sphere}/src/main.ts

@@ -1,7 +1,7 @@
-import './style.css'
-import typescriptLogo from './assets/typescript.svg'
-import playcanvasLogo from './assets/playcanvas.png'
-import { setupApp } from './App'
+import './style.css';
+import { setupApp } from './App';
+import playcanvasLogo from './assets/playcanvas.png';
+import typescriptLogo from './assets/typescript.svg';
 
 let count = 0;
 
@@ -16,7 +16,7 @@ document.querySelector<HTMLDivElement>('#root')!.innerHTML = `
             <img src="${playcanvasLogo}" class="playcanvas-logo logo" alt="PlayCanvas logo" />
           </a>
           <a href="https://www.typescriptlang.org/" target="_blank">
-            <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+            <img src="${typescriptLogo}" class="logo typescript" alt="TypeScript logo" />
           </a>
         </header>
       </div>
@@ -33,13 +33,13 @@ document.querySelector<HTMLDivElement>('#root')!.innerHTML = `
       </p>
     </div>
   </div>
-`
+`;
 
 const counterElement = document.getElementById('counter')!;
 
 const increment = () => {
-  count++;
-  counterElement.textContent = `Click Count: ${count}`;
+    count++;
+    counterElement.textContent = `Click Count: ${count}`;
 };
 
 setupApp(document.getElementById('application-canvas') as HTMLCanvasElement, increment);

package/templates/engine/interactive-sphere/src/style.css

@@ -0,0 +1,107 @@
+:root {
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 2rem;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    pointer-events: auto;
+    text-decoration: inherit;
+}
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+h1 {
+    font-size: 2.4em;
+    line-height: 1.1;
+    opacity: 0.85;
+}
+
+.logo {
+    height: 2em;
+    padding: 0.5em;
+    will-change: filter;
+    transition: filter 300ms;
+}
+
+.playcanvas-logo {
+    border-radius: 100%;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.typescript:hover {
+    filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.read-the-docs {
+    color: #888;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+}
+
+.overlay {
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: stretch;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+}
+
+.overlay > .grow {
+    flex-grow: 1;
+}
+
+.absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.pill {
+    background-color: #000;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+}

package/templates/engine/interactive-sphere/src/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * Simple throttle helper
+ * @param fn - The function to throttle
+ * @param interval - The interval in milliseconds
+ * @returns A throttled function
+ */
+export const throttle = <T extends unknown[]>(fn: (...args: T) => void, interval = 100) => {
+    let last = 0;
+    return (...args: T) => {
+        const now = Date.now();
+        if (now - last >= interval) {
+            last = now;
+            fn(...args);
+        }
+    };
+};

package/templates/engine/model-viewer/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PlayCanvas + TS</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/model-viewer/src/main.ts

@@ -0,0 +1,81 @@
+import type { ContainerResource } from 'playcanvas';
+import {
+    AppBase,
+    AppOptions,
+    Asset,
+    AssetListLoader,
+    CameraComponentSystem,
+    ContainerHandler,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    RESOLUTION_AUTO,
+    RenderComponentSystem,
+    ScriptComponentSystem,
+    TONEMAP_ACES2,
+    TextureHandler,
+    createGraphicsDevice
+} from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+
+import './style.css';
+
+// Swap this for your own model - anything you drop in public/ is served from the site root
+const MODEL_URL = '/playcanvas-cube.glb';
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
+const device = await createGraphicsDevice(canvas);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [RenderComponentSystem, CameraComponentSystem, ScriptComponentSystem];
+createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
+
+const app = new AppBase(canvas);
+app.init(createOptions);
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
+// Load the model before starting, so the first frame already has something in it
+const model = new Asset('model', 'container', { url: MODEL_URL });
+
+await new Promise<void>((resolve) => {
+    new AssetListLoader([model], app.assets).load(() => resolve());
+});
+
+app.start();
+
+// A container asset holds the whole glTF scene, so instantiate it to get an entity hierarchy
+app.root.addChild((model.resource as ContainerResource).instantiateRenderEntity());
+
+// The procedural sky is both the background and the image-based lighting, so no light or
+// environment map asset is needed. Its default luminance is scene-scale bright, so turn it down to
+// keep the model out of clipping
+const sky = new Entity('sky');
+sky.addComponent('script');
+sky.script?.create(ProceduralSky, {
+    properties: { luminance: 0.2 }
+});
+app.root.addChild(sky);
+
+// Create camera entity with orbit controls. The sky is HDR, so it needs tone mapping to bring it
+// back into displayable range - without it the whole image blows out to white
+const camera = new Entity('camera');
+camera.addComponent('camera', {
+    toneMapping: TONEMAP_ACES2
+});
+camera.setPosition(0, 0, 3);
+camera.addComponent('script');
+camera.script?.create(CameraControls);
+app.root.addChild(camera);

package/templates/engine/model-viewer/src/style.css

@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+canvas {
+    display: block;
+}

package/templates/engine/spinning-cube/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PlayCanvas + TS</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/spinning-cube/src/main.ts

@@ -0,0 +1,65 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    Color,
+    ContainerHandler,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RESOLUTION_AUTO,
+    RenderComponentSystem,
+    TextureHandler,
+    createGraphicsDevice
+} from 'playcanvas';
+
+import './style.css';
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
+const device = await createGraphicsDevice(canvas);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem];
+createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
+
+const app = new AppBase(canvas);
+app.init(createOptions);
+app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
+// Create box entity
+const box = new Entity('cube');
+box.addComponent('render', {
+    type: 'box'
+});
+app.root.addChild(box);
+
+// Create camera entity
+const camera = new Entity('camera');
+camera.addComponent('camera', {
+    clearColor: new Color(0.5, 0.6, 0.9)
+});
+camera.setPosition(0, 0, 3);
+app.root.addChild(camera);
+
+// Create directional light entity
+const light = new Entity('light');
+light.addComponent('light');
+light.setEulerAngles(45, 0, 0);
+app.root.addChild(light);
+
+// Rotate the box according to the delta time since the last frame
+app.on('update', (dt: number) => box.rotate(10 * dt, 20 * dt, 30 * dt));

package/templates/engine/spinning-cube/src/style.css

@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+canvas {
+    display: block;
+}

package/templates/engine/splat-viewer/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PlayCanvas + TS</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/splat-viewer/src/main.ts

@@ -0,0 +1,74 @@
+import {
+    AppBase,
+    AppOptions,
+    Asset,
+    AssetListLoader,
+    CameraComponentSystem,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    GSplatComponentSystem,
+    GSplatHandler,
+    RESOLUTION_AUTO,
+    ScriptComponentSystem,
+    TextureHandler,
+    createGraphicsDevice
+} from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+
+import './style.css';
+
+// Hosted so the template stays small. Capture or edit your own splat at https://superspl.at, then
+// drop the .sog or .ply in public/ and point this at it instead
+const SPLAT_URL = 'https://developer.playcanvas.com/assets/toy-cat.sog';
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
+// Antialiasing is disabled - splat rendering is fragment bound, so MSAA costs a lot and adds little
+const device = await createGraphicsDevice(canvas, { antialias: false });
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [CameraComponentSystem, GSplatComponentSystem, ScriptComponentSystem];
+
+// TextureHandler is required as well as GSplatHandler - a .sog is a container whose splat data is
+// stored as textures, and without it the splat loads but silently renders nothing
+createOptions.resourceHandlers = [TextureHandler, GSplatHandler];
+
+const app = new AppBase(canvas);
+app.init(createOptions);
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
+// Load the splat before starting, so the first frame already has something in it
+const splat = new Asset('splat', 'gsplat', { url: SPLAT_URL });
+
+await new Promise<void>((resolve) => {
+    new AssetListLoader([splat], app.assets).load(() => resolve());
+});
+
+app.start();
+
+// Splats are captured in their own space, so this one needs offsetting and flipping upright
+const toyCat = new Entity('toy cat');
+toyCat.addComponent('gsplat', { asset: splat });
+toyCat.setPosition(0, -0.7, 0);
+toyCat.setEulerAngles(0, 0, 180);
+app.root.addChild(toyCat);
+
+// Create camera entity with orbit controls
+const camera = new Entity('camera');
+camera.addComponent('camera');
+camera.setPosition(0, 0, 2.5);
+camera.addComponent('script');
+camera.script?.create(CameraControls);
+app.root.addChild(camera);