Removed grid dependency being on entity with camera

examples/src/examples/gizmos/transform-rotate.example.mjs

@@ -2,7 +2,7 @@ import { data } from 'examples/observer';
 import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
-const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/grid-renderer.mjs`);
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
 
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
@@ -84,12 +84,15 @@ data.set('camera', {
     fov: camera.camera.fov
 });
 
-// attach grid renderer
-camera.script.create(GridRenderer, {
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.addComponent('script');
+gridEntity.script.create(GridRenderer, {
     attributes: {
         halfExtents: new pc.Vec2(2, 2)
     }
 });
+app.root.addChild(gridEntity);
 
 // create light entity
 const light = new pc.Entity('light');

examples/src/examples/gizmos/transform-scale.example.mjs

@@ -2,7 +2,7 @@ import { data } from 'examples/observer';
 import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
-const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/grid-renderer.mjs`);
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
 
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
@@ -84,12 +84,15 @@ data.set('camera', {
     fov: camera.camera.fov
 });
 
-// attach grid renderer
-camera.script.create(GridRenderer, {
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.addComponent('script');
+gridEntity.script.create(GridRenderer, {
     attributes: {
         halfExtents: new pc.Vec2(2, 2)
     }
 });
+app.root.addChild(gridEntity);
 
 // create light entity
 const light = new pc.Entity('light');

examples/src/examples/gizmos/transform-translate.example.mjs

@@ -2,7 +2,7 @@ import { data } from 'examples/observer';
 import { deviceType, rootPath, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';
 
-const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/grid-renderer.mjs`);
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
 
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
@@ -84,12 +84,15 @@ data.set('camera', {
     fov: camera.camera.fov
 });
 
-// attach grid renderer
-camera.script.create(GridRenderer, {
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.addComponent('script');
+gridEntity.script.create(GridRenderer, {
     attributes: {
         halfExtents: new pc.Vec2(2, 2)
     }
 });
+app.root.addChild(gridEntity);
 
 // create light entity
 const light = new pc.Entity('light');

examples/src/examples/misc/editor.example.mjs

@@ -3,7 +3,7 @@ import { data } from 'examples/observer';
 import { deviceType, rootPath, localImport, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';
 
-const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/grid-renderer.mjs`);
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
 
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
@@ -129,11 +129,15 @@ app.root.addChild(camera);
 orbitCamera.distance = 5 * camera.camera?.aspectRatio;
 
 // attach grid renderer
-const grid = /** @type {GridRenderer} */ (camera.script.create(GridRenderer, {
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.addComponent('script');
+const grid = /** @type {GridRenderer} */ (gridEntity.script.create(GridRenderer, {
     attributes: {
         halfExtents: new pc.Vec2(4, 4)
     }
 }));
+app.root.addChild(gridEntity);
 data.set('grid', {
     resolution: grid.resolution + 1,
     size: grid.halfExtents.x,
@@ -249,16 +253,16 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
         case 'grid': {
             switch (key) {
                 case 'resolution':
-                    grid.resolution = value - 1;
+                    gridEntity.resolution = value - 1;
                     break;
                 case 'size':
-                    grid.halfExtents = tmpVa.set(value, value);
+                    gridEntity.halfExtents = tmpVa.set(value, value);
                     break;
                 case 'colorX':
-                    grid.colorX = tmpC1.set(value[0], value[1], value[2]);
+                    gridEntity.colorX = tmpC1.set(value[0], value[1], value[2]);
                     break;
                 case 'colorZ':
-                    grid.colorZ = tmpC1.set(value[0], value[1], value[2]);
+                    gridEntity.colorZ = tmpC1.set(value[0], value[1], value[2]);
                     break;
             }
             break;

scripts/esm/grid-renderer.mjs

@@ -309,14 +309,11 @@ class GridRenderer extends Script {
 
         const targetLayer = layer ?? GridRenderer.createLayer(this.app, undefined, 1);
 
-        const camera = this.entity.camera;
-        if (!camera) {
-            throw new Error('GridRenderer script must be attached to a camera entity.');
-        }
+        this.app.scene.on('prerender:layer', (camera, layer, transparent) => {
+            if (!camera.layers.includes(targetLayer.id)) {
+                camera.layers = camera.layers.concat(targetLayer.id);
+            }
 
-        // attach to camera
-        camera.layers = camera.layers.concat(targetLayer.id);
-        camera.onPreRenderLayer = (layer, transparent) => {
             if (layer !== targetLayer || transparent) {
                 return;
             }
@@ -369,7 +366,7 @@ class GridRenderer extends Script {
             this._set('depthMode', true);
             this._device.setBlendState(BlendState.NOWRITE);
             this._quadRender.render();
-        };
+        });
     }
 
     /**
@@ -456,7 +453,6 @@ class GridRenderer extends Script {
     }
 
     destroy() {
-        this.detach();
         this._quadRender.destroy();
     }
 }