Update to engine v2

package.json

@@ -61,32 +61,32 @@
     "devDependencies": {
         "@playcanvas/eslint-config": "^1.7.1",
         "@playcanvas/observer": "^1.5.1",
-        "@playcanvas/pcui": "^4.4.0",
-        "@rollup/plugin-alias": "^5.1.0",
-        "@rollup/plugin-commonjs": "^26.0.1",
+        "@playcanvas/pcui": "^4.5.0",
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-image": "^3.0.3",
         "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "@rollup/plugin-replace": "^5.0.7",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-replace": "^6.0.1",
         "@rollup/plugin-terser": "^0.4.4",
-        "@rollup/plugin-typescript": "^11.1.6",
-        "@types/react": "^18.3.7",
-        "@types/react-dom": "^18.3.0",
+        "@rollup/plugin-typescript": "^12.1.1",
+        "@types/react": "^18.3.11",
+        "@types/react-dom": "^18.3.1",
         "@typescript-eslint/eslint-plugin": "^7.14.1",
         "@typescript-eslint/parser": "^7.14.1",
         "concurrently": "^9.0.1",
         "cross-env": "^7.0.3",
         "eslint": "^8.56.0",
-        "playcanvas": "^1.74.0",
+        "playcanvas": "^2.1.0",
         "qrious": "^4.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-visibility-sensor": "^5.1.1",
-        "rollup": "^4.21.3",
+        "rollup": "^4.24.0",
         "rollup-plugin-sass": "^1.13.2",
-        "serve": "^14.2.3",
-        "tslib": "^2.7.0",
-        "typescript": "^5.6.2"
+        "serve": "^14.2.4",
+        "tslib": "^2.8.0",
+        "typescript": "^5.6.3"
     },
     "scripts": {
         "build": "rollup -c",

src/debug-lines.ts

@@ -11,15 +11,14 @@ import {
     SORTMODE_NONE,
     TYPE_FLOAT32,
     TYPE_UINT8,
-    createShaderFromCode,
     DepthState,
     Entity,
     GraphNode,
     Layer,
-    Material,
     Mesh,
     MeshInstance,
     Mat4,
+    ShaderMaterial,
     Vec3,
     VertexBuffer,
     VertexFormat,
@@ -101,11 +100,6 @@ class DebugLines {
     constructor(app: App, camera: Entity, backLayer = true) {
         const device = app.graphicsDevice as WebglGraphicsDevice;
 
-        const shader = createShaderFromCode(device, vshader, fshader, 'debug-lines', {
-            vertex_position: SEMANTIC_POSITION,
-            vertex_color: SEMANTIC_COLOR
-        });
-
         if (!debugLayerFront) {
             // construct the debug layer
             debugLayerBack = new Layer({
@@ -149,8 +143,17 @@ class DebugLines {
         mesh.primitive[0].indexed = false;
         mesh.primitive[0].count = 0;
 
-        const frontMaterial = new Material();
-        frontMaterial.shader = shader;
+        const shaderArgs = {
+            uniqueName: 'debug-lines',
+            attributes: {
+                vertex_position: SEMANTIC_POSITION,
+                vertex_color: SEMANTIC_COLOR
+            },
+            vertexCode: vshader,
+            fragmentCode: fshader
+        };
+
+        const frontMaterial = new ShaderMaterial(shaderArgs);
         frontMaterial.setParameter('uColor', [1, 1, 1, 0.7]);
         frontMaterial.blendType = BLEND_NORMAL;
         frontMaterial.update();
@@ -165,8 +168,7 @@ class DebugLines {
 
         // construct back
         if (backLayer) {
-            const backMaterial = new Material();
-            backMaterial.shader = shader;
+            const backMaterial = new ShaderMaterial(shaderArgs);
             backMaterial.setParameter('uColor', [0.5, 0.5, 0.5, 0.5]);
             backMaterial.blendType = BLEND_NORMAL;
             backMaterial.depthState.func = FUNC_GREATER;

src/index.tsx

@@ -79,7 +79,6 @@ const observerData: ObserverData = {
         blur: 1,
         domeProjection: {
             domeRadius: 20,
-            domeOffset: 0.4,
             tripodOffset: 0.1
         }
     },

src/read-depth.ts

@@ -3,52 +3,58 @@ import {
     PIXELFORMAT_RGBA8,
     SEMANTIC_POSITION,
     drawQuadWithShader,
-    shaderChunks,
     BlendState,
     RenderTarget,
     ScopeId,
     Shader,
     Texture,
-    WebglGraphicsDevice,
+    GraphicsDevice,
     createShaderFromCode
 } from 'playcanvas';
 
-// @ts-ignore
-const packDepthPS = shaderChunks.packDepthPS;
-
 const vshader = `
 attribute vec2 vertex_position;
 varying vec2 texcoord;
 void main(void) {
     gl_Position = vec4(vertex_position, 0.5, 1.0);
-    texcoord = vertex_position.xy * 0.5 + 0.5; // + texcoordOffset;
+    texcoord = vertex_position * 0.5 + 0.5;
 }
 `;
 
 const fshader = `
-varying vec2 texcoord;
-uniform sampler2D depthTex;
+uniform highp sampler2D depthTex;
 uniform vec4 texcoordRange;
-${packDepthPS}
+varying vec2 texcoord;
+
+vec4 packFloat(float depth) {
+    const vec4 bit_shift = vec4(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
+    const vec4 bit_mask  = vec4(0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
+
+    // combination of mod and multiplication and division works better
+    vec4 res = mod(depth * bit_shift * vec4(255), vec4(256) ) / vec4(255);
+    res -= res.xxyz * bit_mask;
+    return res;
+}
+
 void main(void) {
     vec2 t = mix(texcoordRange.xy, texcoordRange.zw, texcoord);
-    gl_FragColor = packFloat(texture2D(depthTex, t).x);
+    gl_FragColor = packFloat(texelFetch(depthTex, ivec2(t * vec2(textureSize(depthTex, 0))), 0).x);
 }
 `;
 
 const noBlend = new BlendState(false);
 
 // helper class for reading out the depth values from depth render targets.
 class ReadDepth {
-    device: WebglGraphicsDevice;
+    device: GraphicsDevice;
     shader: Shader;
     depthTexUniform: ScopeId;
     texcoordRangeUniform: ScopeId;
     pixels = new Uint8Array(4);
     texture: Texture = null;
     renderTarget: RenderTarget = null;
 
-    constructor(device: WebglGraphicsDevice) {
+    constructor(device: GraphicsDevice) {
         this.device = device;
 
         this.shader = createShaderFromCode(device, vshader, fshader, 'read-depth', {
@@ -94,7 +100,7 @@ class ReadDepth {
         });
     }
 
-    read(depthTexture: Texture, x: number, y: number) {
+    async read(depthTexture: Texture, x: number, y: number) {
         if (!this.texture) {
             this.create();
         }
@@ -110,22 +116,13 @@ class ReadDepth {
         device.setBlendState(noBlend);
         drawQuadWithShader(this.device, this.renderTarget, this.shader);
 
-        const gl = device.gl;
-        const oldRt = device.renderTarget;
-
-        device.setRenderTarget(this.renderTarget);
-        device.updateBegin();
-        gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);
-
-        device.updateEnd();
-        device.setRenderTarget(oldRt);
-        device.updateBegin();
+        const pixels = await this.texture.read(0, 0, 1, 1);
 
         // unpackFloat
-        return this.pixels[0] / (255 * 256 * 256 * 256) +
-               this.pixels[1] / (255 * 256 * 256) +
-               this.pixels[2] / (255 * 256) +
-               this.pixels[3] / (255);
+        return pixels[0] / (255 * 256 * 256 * 256) +
+               pixels[1] / (255 * 256 * 256) +
+               pixels[2] / (255 * 256) +
+               pixels[3] / (255);
     }
 }
 

src/types.ts

@@ -40,7 +40,7 @@ export interface ObserverData {
         options: string,
         exposure: number,
         rotation: number,
-        background: 'Solid Color' | 'Infinite Sphere' | 'Projective Dome',
+        background: 'Solid Color' | 'Infinite Sphere' | 'Projective Dome' | 'Projective Box',
         backgroundColor: {
             r: number,
             g: number,
@@ -49,7 +49,6 @@ export interface ObserverData {
         blur: number,
         domeProjection: {
             domeRadius: number,
-            domeOffset: number,
             tripodOffset: number
         }
     },