Updated to engine 1.70.0

iframe/animation_blend-trees-1d.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_blend-trees-1d.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_blend-trees-1d.example.mjs",
                     controlsUrl: "./animation_blend-trees-1d.controls.mjs"
                 });

iframe/animation_blend-trees-2d-cartesian.controls.mjs

@@ -6,8 +6,10 @@ export function controls({ React, jsx, fragment }) {
     const { createRef, Component } = React;
     class JsxControls extends Component {
         position = new pc.Vec2();
+
         /** @type {React.RefObject<HTMLCanvasElement>} */
         refCanvas = createRef();
+
         mouseEvent(e) {
             const { position, modelEntity, width, canvas } = this;
             if (e.targetTouches) {

iframe/animation_blend-trees-2d-cartesian.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_blend-trees-2d-cartesian.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_blend-trees-2d-cartesian.example.mjs",
                     controlsUrl: "./animation_blend-trees-2d-cartesian.controls.mjs"
                 });

iframe/animation_blend-trees-2d-directional.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_blend-trees-2d-directional.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_blend-trees-2d-directional.example.mjs",
                     controlsUrl: "./animation_blend-trees-2d-directional.controls.mjs"
                 });

iframe/animation_component-properties.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_component-properties.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_component-properties.example.mjs",
                     controlsUrl: "./animation_component-properties.controls.mjs"
                 });

iframe/animation_events.example.mjs

@@ -111,8 +111,9 @@ assetListLoader.load(() => {
     }
 
     /**
-     * light up a box at the given position with a random color using the emissive material property
-     * @param {pc.Vec3} pos
+     * Light up a box at the given position with a random color using the emissive material property.
+     *
+     * @param {pc.Vec3} pos - The position of the box to light up.
      */
     const highlightBox = (pos) => {
         const i = Math.floor(pos.x + 0.5);

iframe/animation_events.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_events.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_events.example.mjs",
                     controlsUrl: "./animation_events.controls.mjs"
                 });

iframe/animation_layer-masks.example.mjs

@@ -189,11 +189,11 @@ assetListLoader.load(() => {
             upperBodyLayer.weight = value;
         }
     });
+
     /**
-     * @param {pc.Entity} entity
-     * @param {pc.Color} color
+     * @param {pc.Entity} entity - The entity to draw the skeleton for.
      */
-    const drawSkeleton = (entity, color) => {
+    const drawSkeleton = (entity) => {
         entity.children.forEach((/** @type {pc.Entity} */ c) => {
             const target = modelEntity.anim._targets[entity.path + '/graph/localPosition'];
             if (target) {
@@ -204,15 +204,15 @@ assetListLoader.load(() => {
                     false
                 );
             }
-            drawSkeleton(c, color);
+            drawSkeleton(c);
         });
     };
 
     app.start();
 
     app.on('update', () => {
         if (data.get('options.skeleton')) {
-            drawSkeleton(modelEntity, new pc.Color(1, 0, 0, modelEntity.anim.baseLayer.weight * 0.5));
+            drawSkeleton(modelEntity);
         }
     });
 });

iframe/animation_layer-masks.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_layer-masks.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_layer-masks.example.mjs",
                     controlsUrl: "./animation_layer-masks.controls.mjs"
                 });

iframe/animation_locomotion.example.mjs

@@ -333,9 +333,10 @@ assetListLoader.load(() => {
     };
 
     /**
-     * defines how many units the character should move per second given its current animation state
-     * @param {string} state
-     * @returns {number}
+     * Defines how many units the character should move per second given its current animation state.
+     *
+     * @param {string} state - The animation state.
+     * @returns {number} The speed of the character.
      */
     function speedForState(state) {
         switch (state) {

iframe/animation_locomotion.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_locomotion.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_locomotion.example.mjs",
                     controlsUrl: "./animation_locomotion.controls.mjs"
                 });

iframe/animation_tween.example.mjs

@@ -52,12 +52,12 @@ assetListLoader.load(() => {
     /**
      * Utility function to create a text element-based entity
      *
-     * @param {pc.Asset} fontAsset
-     * @param {string} message
-     * @param {number} x
-     * @param {number} y
-     * @param {number} z
-     * @param {number} rot
+     * @param {pc.Asset} fontAsset - The font asset to use.
+     * @param {string} message - The message to display.
+     * @param {number} x - The x position.
+     * @param {number} y - The y position.
+     * @param {number} z - The z position.
+     * @param {number} rot - The rotation.
      */
     const createText = function (fontAsset, message, x, y, z, rot) {
         const text = new pc.Entity();

iframe/animation_tween.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./animation_tween.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./animation_tween.example.mjs",
                     controlsUrl: "./animation_tween.controls.mjs"
                 });

iframe/camera_first-person.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./camera_first-person.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./camera_first-person.example.mjs",
                     controlsUrl: "./camera_first-person.controls.mjs"
                 });

iframe/camera_fly.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./camera_fly.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./camera_fly.example.mjs",
                     controlsUrl: "./camera_fly.controls.mjs"
                 });

iframe/camera_orbit.html

@@ -15,7 +15,7 @@
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "./playcanvas.mjs",
+                    "playcanvas": "./playcanvas/src/index.js",
                     "fflate": "../../modules/fflate/esm/browser.js",
                     "@examples/config": "./camera_orbit.config.mjs",
                     "@examples/utils": "./utils.mjs",
@@ -38,8 +38,7 @@
 
             document.addEventListener('DOMContentLoaded', () => {
                 loader.start({
-                    engineUrl: "./playcanvas.mjs",
-                    extrasUrl: './playcanvas-extras.mjs/index.js',
+                    engineUrl: "./playcanvas/src/index.js",
                     exampleUrl: "./camera_orbit.example.mjs",
                     controlsUrl: "./camera_orbit.controls.mjs"
                 });

iframe/compute_histogram.config.mjs

@@ -0,0 +1,28 @@
+/**
+ * @type {import('../../../../types.mjs').ExampleConfig}
+ */
+export default {
+    WEBGPU_REQUIRED: true,
+    FILES: {
+        'compute-shader.wgsl': /* wgsl */ `
+
+            @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+            @group(0) @binding(1) var<storage, read_write> bins: array<atomic<u32>>;
+    
+            fn luminance(color: vec3f) -> f32 {
+                return saturate(dot(color, vec3f(0.2126, 0.7152, 0.0722)));
+            }
+            
+            @compute @workgroup_size(1, 1, 1)
+            fn main(@builtin(global_invocation_id) global_invocation_id: vec3u) {
+                let numBins = f32(arrayLength(&bins));
+                let lastBinIndex = u32(numBins - 1);
+                let position = global_invocation_id.xy;
+                let color = textureLoad(inputTexture, position, 0);
+                let v = luminance(color.rgb);
+                let bin = min(u32(v * numBins), lastBinIndex);
+                atomicAdd(&bins[bin], 1u);
+            }
+        `
+    }
+};

iframe/compute_histogram.controls.mjs

@@ -0,0 +1,7 @@
+/**
+ * @param {import('../../../app/components/Example.mjs').ControlOptions} options - The options.
+ * @returns {JSX.Element} The returned JSX Element.
+ */
+export function controls({ fragment }) {
+    return fragment();
+}