Bundle PlayCanvas Engine into Editor

rollup.config.mjs

@@ -147,8 +147,12 @@ const PAGE_TARGETS = [
         output: {
             file: 'dist/js/launch.js',
             format: 'umd',
-            sourcemap
+            sourcemap,
+            globals: {
+                'playcanvas': 'pc'
+            }
         },
+        external: ['playcanvas'],
         plugins: plugins()
     }
 ];

src/common/pcui/element/element-curve-input.ts

@@ -1,4 +1,5 @@
 import { Element, Canvas } from '@playcanvas/pcui';
+import { Curve } from 'playcanvas';
 
 import { deepCopy } from '../../utils';
 import { CLASS_MULTIPLE_VALUES } from '../constants';
@@ -330,13 +331,13 @@ class CurveInput extends Element {
 
         if (value.keys[0].length !== undefined) {
             return value.keys.map((data) => {
-                const curve = new pc.Curve(data);
+                const curve = new Curve(data);
                 curve.type = value.type;
                 return curve;
             });
         }
 
-        const curve = new pc.Curve(value.keys);
+        const curve = new Curve(value.keys);
         curve.type = value.type;
         return [curve];
     }

src/common/thumbnail-renderers/thumbnail-renderer.ts

@@ -1,20 +1,13 @@
-// Required for Editor blank page, where "pc" is not loaded.
-const pc = typeof window.pc !== 'undefined' ? window.pc : {
-    Layer: class {},
-    RenderTarget: class {},
-    LayerComposition: class {}
-};
-
 import { Observer } from '@playcanvas/observer';
-import type { GraphicsDevice } from 'playcanvas';
+import { type GraphicsDevice, Layer, LayerComposition, PIXELFORMAT_RGBA8, RenderTarget, Texture } from 'playcanvas';
 
 /**
  * Singleton Thumbnail Renderer
  */
 class ThumbnailRenderer extends Observer {
     static renderTargets = new Map();
 
-    static _layer = new pc.Layer({
+    static _layer = new Layer({
         name: 'ThumbnailRendererLayer',
         id: -1,
         enabled: true,
@@ -30,14 +23,14 @@ class ThumbnailRenderer extends Observer {
         let target = ThumbnailRenderer.renderTargets.get(key);
 
         if (!target) {
-            const texture = new pc.Texture(device, {
+            const texture = new Texture(device, {
                 name: `ThumbnailRendererTexture-${key}`,
                 width: width,
                 height: height,
-                format: pc.PIXELFORMAT_RGBA8
+                format: PIXELFORMAT_RGBA8
             });
 
-            target = new pc.RenderTarget({
+            target = new RenderTarget({
                 colorBuffer: texture
             });
             ThumbnailRenderer.renderTargets.set(key, target);
@@ -56,7 +49,7 @@ class ThumbnailRenderer extends Observer {
 
     get layerComposition() {
         if (!ThumbnailRenderer._layerComposition) {
-            ThumbnailRenderer._layerComposition = new pc.LayerComposition('thumbnail-renderer');
+            ThumbnailRenderer._layerComposition = new LayerComposition('thumbnail-renderer');
             ThumbnailRenderer._layerComposition.push(ThumbnailRenderer._layer);
         }
         return ThumbnailRenderer._layerComposition;

src/common/utils.ts

@@ -477,9 +477,9 @@ export const handleCallback = <T extends { on: (event: string, handler: (status:
  */
 export const validateEnginePath = (path: string) => {
     const parts = path.split('.');
-    let obj = pc;
+    let obj: any = pc;
     for (let i = 0; i < parts.length; i++) {
-        if (!obj.hasOwnProperty(parts[i]) && obj[parts[i]] === undefined) {
+        if (!(parts[i] in obj) && obj[parts[i]] === undefined) {
             return false;
         }
         obj = obj[parts[i]];

src/core/constants.ts

@@ -1,23 +1,48 @@
+import { version } from 'playcanvas';
+
+// Re-export engine constants for backward compatibility
+export {
+    // Layer IDs
+    LAYERID_WORLD,
+    LAYERID_DEPTH,
+    LAYERID_SKYBOX,
+    LAYERID_IMMEDIATE,
+    LAYERID_UI,
+    // Gamma correction modes
+    GAMMA_NONE,
+    GAMMA_SRGB,
+    // Curve types
+    CURVE_LINEAR,
+    CURVE_SMOOTHSTEP,
+    CURVE_SPLINE,
+    CURVE_STEP,
+    // Anim constants
+    ANIM_INTERRUPTION_NONE,
+    ANIM_INTERRUPTION_PREV,
+    ANIM_INTERRUPTION_NEXT,
+    ANIM_INTERRUPTION_PREV_NEXT,
+    ANIM_INTERRUPTION_NEXT_PREV,
+    ANIM_GREATER_THAN,
+    ANIM_LESS_THAN,
+    ANIM_GREATER_THAN_EQUAL_TO,
+    ANIM_LESS_THAN_EQUAL_TO,
+    ANIM_EQUAL_TO,
+    ANIM_NOT_EQUAL_TO,
+    ANIM_PARAMETER_INTEGER,
+    ANIM_PARAMETER_FLOAT,
+    ANIM_PARAMETER_BOOLEAN,
+    ANIM_PARAMETER_TRIGGER
+} from 'playcanvas';
+
 // Editor Engine version
-export const ENGINE_VERSION = typeof pc !== 'undefined' ? `${pc.version}` : '0.0.0';
+export const ENGINE_VERSION = version;
 
 // Gizmo mask
 export const GIZMO_MASK = 8;
 
 // Picker force pick tag
 export const FORCE_PICK_TAG = 'force-pick';
 
-// Layer ids
-export const LAYERID_WORLD = 0;
-export const LAYERID_DEPTH = 1;
-export const LAYERID_SKYBOX = 2;
-export const LAYERID_IMMEDIATE = 3;
-export const LAYERID_UI = 4;
-
-// Gamma correction modes
-export const GAMMA_NONE = 0;
-export const GAMMA_SRGB = 1;
-
 // Tonemapping modes
 export const TONEMAPPING = [
     'Linear',
@@ -49,36 +74,15 @@ export const SCROLLBAR_VISIBILITY_SHOW_ALWAYS = 0;
 export const SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED = 1;
 
 
-export const CURVE_LINEAR = 0;
-export const CURVE_SMOOTHSTEP = 1;
+// Editor-specific curve types (not in engine)
 export const CURVE_CATMULL = 2;
 export const CURVE_CARDINAL = 3;
-export const CURVE_SPLINE = 4;
-export const CURVE_STEP = 5;
 
 // Script Loading Type
 export const LOAD_SCRIPT_AS_ASSET = 0;
 export const LOAD_SCRIPT_BEFORE_ENGINE = 1;
 export const LOAD_SCRIPT_AFTER_ENGINE = 2;
 
-// Anim system constants
-export const ANIM_INTERRUPTION_NONE = 'NONE';
-export const ANIM_INTERRUPTION_PREV = 'PREV_STATE';
-export const ANIM_INTERRUPTION_NEXT = 'NEXT_STATE';
-export const ANIM_INTERRUPTION_PREV_NEXT = 'PREV_STATE_NEXT_STATE';
-export const ANIM_INTERRUPTION_NEXT_PREV = 'NEXT_STATE_PREV_STATE';
-
-export const ANIM_GREATER_THAN = 'GREATER_THAN';
-export const ANIM_LESS_THAN = 'LESS_THAN';
-export const ANIM_GREATER_THAN_EQUAL_TO = 'GREATER_THAN_EQUAL_TO';
-export const ANIM_LESS_THAN_EQUAL_TO = 'LESS_THAN_EQUAL_TO';
-export const ANIM_EQUAL_TO = 'EQUAL_TO';
-export const ANIM_NOT_EQUAL_TO = 'NOT_EQUAL_TO';
-
-export const ANIM_PARAMETER_INTEGER = 'INTEGER';
-export const ANIM_PARAMETER_FLOAT = 'FLOAT';
-export const ANIM_PARAMETER_BOOLEAN = 'BOOLEAN';
-export const ANIM_PARAMETER_TRIGGER = 'TRIGGER';
 
 // VERSION CONTROL
 export const MERGE_STATUS_AUTO_STARTED = 'merge_auto_started';

src/editor/assets/assets-cubemap-utils.ts

@@ -1,3 +1,5 @@
+import { ADDRESS_CLAMP_TO_EDGE, ADDRESS_REPEAT, reprojectTexture, Texture } from 'playcanvas';
+
 import {
     readGPUPixels,
     pixelsToPngBlob
@@ -32,7 +34,7 @@ editor.method('assets:textureToCubemap', (textureAsset, callback) => {
     // reproject the given equirect texture to a cubemap and compress each face to a png blob
     const createFaceBlobs = (sourceTexture) => {
         // create target cubemap texture
-        const targetCubemap = new pc.Texture(app.graphicsDevice, {
+        const targetCubemap = new Texture(app.graphicsDevice, {
             cubemap: true,
             width: sourceTexture.height / 2,
             height: sourceTexture.height / 2,
@@ -42,12 +44,12 @@ editor.method('assets:textureToCubemap', (textureAsset, callback) => {
         });
 
         // set required render state settings on source texture
-        sourceTexture.addressU = pc.ADDRESS_REPEAT;
-        sourceTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
+        sourceTexture.addressU = ADDRESS_REPEAT;
+        sourceTexture.addressV = ADDRESS_CLAMP_TO_EDGE;
         sourceTexture.anisotropy = app.graphicsDevice.maxAnisotropy;
 
         // perform reproject
-        pc.reprojectTexture(sourceTexture, targetCubemap, {
+        reprojectTexture(sourceTexture, targetCubemap, {
             numSamples: 1
         });
 

src/editor/assets/assets-preview-model-watch.ts

@@ -1,3 +1,5 @@
+import { ABSOLUTE_URL } from 'playcanvas';
+
 import { buildQueryUrl } from '@/common/utils';
 
 editor.once('load', () => {
@@ -21,7 +23,7 @@ editor.once('load', () => {
         if (file && file.url) {
             url = file.url;
 
-            if (app.assets.prefix && !pc.ABSOLUTE_URL.test(url)) {
+            if (app.assets.prefix && !ABSOLUTE_URL.test(url)) {
                 url = app.assets.prefix + url;
             }
 

src/editor/assets/assets-registry.ts

@@ -1,3 +1,5 @@
+import { Asset } from 'playcanvas';
+
 editor.once('load', () => {
     editor.method('assets:registry:bind', (assetRegistry, assetTypes) => {
         // add assets to asset registry
@@ -32,7 +34,7 @@ editor.once('load', () => {
             // add to registry
             // assetRegistry.createAndAddAsset(assetJson.id, data);
 
-            const newAsset = new pc.Asset(data.name, data.type, data.file, data.data);
+            const newAsset = new Asset(data.name, data.type, data.file, data.data);
             newAsset.id = parseInt(assetJson.id, 10);
 
             if (assetJson.i18n) {

src/editor/assets/assets-utils.ts

@@ -1,8 +1,10 @@
+import { RenderTarget } from 'playcanvas';
+
 import { WorkerClient } from '@/core/worker/worker-client';
 
 // read the pixel data of the given texture face
 const readGPUPixels = (texture, face) => {
-    const rt = new pc.RenderTarget({
+    const rt = new RenderTarget({
         name: 'ReadPrefilteredCubemapRT',
         colorBuffer: texture,
         depth: false,

src/editor/blank.ts

@@ -1,3 +1,6 @@
+// playcanvas engine (exposes window.pc for plugins)
+import './pc-global';
+
 // extensions
 import '@/common/extensions';
 

src/editor/entities/entities-context-menu.ts

@@ -1,4 +1,5 @@
 import { Menu, MenuItem } from '@playcanvas/pcui';
+import { GltfExporter, UsdzExporter } from 'playcanvas';
 
 import { formatShortcut } from '../../common/utils';
 
@@ -235,11 +236,11 @@ editor.once('load', () => {
             items: [
                 {
                     text: 'GLB',
-                    onSelect: () => exportEntity(pc.GltfExporter, 'model/gltf-binary', 'glb', 'GLB')
+                    onSelect: () => exportEntity(GltfExporter, 'model/gltf-binary', 'glb', 'GLB')
                 },
                 {
                     text: 'USDZ',
-                    onSelect: () => exportEntity(pc.UsdzExporter, 'application/octet-stream', 'usdz', 'USDZ')
+                    onSelect: () => exportEntity(UsdzExporter, 'application/octet-stream', 'usdz', 'USDZ')
                 }
             ]
         });

src/editor/entities/entities-layout-utils.ts

@@ -49,7 +49,8 @@ editor.once('load', () => {
     });
 
     editor.method('entities:layout:scheduleReflow', (entityId) => {
-        pc.app.systems.layoutgroup.scheduleReflow(getLayoutGroup(entityId));
+        const app = editor.call('viewport:app');
+        app?.systems.layoutgroup.scheduleReflow(getLayoutGroup(entityId));
     });
 
     // build the layout data block used by restoreElementChildrenLayouts

src/editor/index.ts

@@ -1,3 +1,6 @@
+// playcanvas engine (exposes window.pc for plugins)
+import './pc-global';
+
 // extensions
 import '@/common/extensions';