[BETA] ESM Grid Renderer Script

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

@@ -1,7 +1,9 @@
 import { data } from 'examples/observer';
-import { deviceType, rootPath } from 'examples/utils';
+import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
@@ -82,6 +84,16 @@ data.set('camera', {
     fov: camera.camera.fov
 });
 
+// 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');
 light.addComponent('light');
@@ -146,24 +158,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// grid lines
-const createGridLines = (size = 1) => {
-    const lines = [];
-    for (let i = -size; i < size + 1; i++) {
-        lines.push(
-            new pc.Vec3(-size, 0, i),
-            new pc.Vec3(size, 0, i),
-            new pc.Vec3(i, 0, -size),
-            new pc.Vec3(i, 0, size)
-        );
-    }
-    return lines;
-};
-
-const lines = createGridLines(2);
-const gridCol = new pc.Color(1, 1, 1, 0.5);
-app.on('update', () => app.drawLines(lines, gridCol));
-
 app.on('destroy', () => {
     window.removeEventListener('resize', resize);
 });

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

@@ -1,7 +1,9 @@
 import { data } from 'examples/observer';
-import { deviceType, rootPath } from 'examples/utils';
+import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
@@ -82,6 +84,16 @@ data.set('camera', {
     fov: camera.camera.fov
 });
 
+// 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');
 light.addComponent('light');
@@ -150,24 +162,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// grid lines
-const createGridLines = (size = 1) => {
-    const lines = [];
-    for (let i = -size; i < size + 1; i++) {
-        lines.push(
-            new pc.Vec3(-size, 0, i),
-            new pc.Vec3(size, 0, i),
-            new pc.Vec3(i, 0, -size),
-            new pc.Vec3(i, 0, size)
-        );
-    }
-    return lines;
-};
-
-const lines = createGridLines(2);
-const gridCol = new pc.Color(1, 1, 1, 0.5);
-app.on('update', () => app.drawLines(lines, gridCol));
-
 app.on('destroy', () => {
     window.removeEventListener('resize', resize);
 });

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

@@ -1,7 +1,9 @@
 import { data } from 'examples/observer';
-import { deviceType, rootPath } from 'examples/utils';
+import { deviceType, rootPath, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
@@ -82,6 +84,16 @@ data.set('camera', {
     fov: camera.camera.fov
 });
 
+// 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');
 light.addComponent('light');
@@ -151,24 +163,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// grid lines
-const createGridLines = (size = 1) => {
-    const lines = [];
-    for (let i = -size; i < size + 1; i++) {
-        lines.push(
-            new pc.Vec3(-size, 0, i),
-            new pc.Vec3(size, 0, i),
-            new pc.Vec3(i, 0, -size),
-            new pc.Vec3(i, 0, size)
-        );
-    }
-    return lines;
-};
-
-const lines = createGridLines(2);
-const gridCol = new pc.Color(1, 1, 1, 0.5);
-app.on('update', () => app.drawLines(lines, gridCol));
-
 app.on('destroy', () => {
     window.removeEventListener('resize', resize);
 });

examples/src/examples/misc/editor.controls.mjs

@@ -5,7 +5,7 @@ import * as pc from 'playcanvas';
  * @returns {JSX.Element} The returned JSX Element.
  */
 export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, ColorPicker } = ReactPCUI;
     const { useState } = React;
 
     const [type, setType] = useState('translate');
@@ -87,6 +87,50 @@ export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
                 })
             )
         ),
+        jsx(
+            Panel,
+            { headerText: 'Grid' },
+            jsx(
+                LabelGroup,
+                { text: 'Resolution' },
+                jsx(SelectInput, {
+                    options: [
+                        { v: 3, t: 'High' },
+                        { v: 2, t: 'Medium' },
+                        { v: 1, t: 'Low' }
+                    ],
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.resolution' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Size' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.size' },
+                    min: 0,
+                    max: 10,
+                    precision: 0
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color X' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.colorX' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Z' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.colorZ' }
+                })
+            )
+        ),
         jsx(
             Panel,
             { headerText: 'Camera' },

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

@@ -1,14 +1,15 @@
 // @config DESCRIPTION <div style='text-align:center'><div>Translate (1), Rotate (2), Scale (3)</div><div>World/Local (X)</div><div>Perspective (P), Orthographic (O)</div></div>
 import { data } from 'examples/observer';
-import { deviceType, rootPath, localImport } from 'examples/utils';
+import { deviceType, rootPath, localImport, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { GridRenderer } = await fileImport(`${rootPath}/static/scripts/esm/grid-renderer.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
 // class for handling gizmo
 const { GizmoHandler } = await localImport('gizmo-handler.mjs');
-const { Grid } = await localImport('grid.mjs');
 const { Selector } = await localImport('selector.mjs');
 
 const gfxOptions = {
@@ -127,6 +128,22 @@ camera.setPosition(1, 1, 1);
 app.root.addChild(camera);
 orbitCamera.distance = 5 * camera.camera?.aspectRatio;
 
+// 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,
+    colorX: Object.values(grid.colorX),
+    colorZ: Object.values(grid.colorZ)
+});
+
 // create light entity
 const light = new pc.Entity('light');
 light.addComponent('light', {
@@ -204,6 +221,8 @@ window.addEventListener('keyup', keyup);
 window.addEventListener('keypress', keypress);
 
 // gizmo and camera set handler
+const tmpVa = new pc.Vec2();
+const tmpC1 = new pc.Color();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
     const [category, key] = path.split('.');
     switch (category) {
@@ -230,6 +249,23 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
             gizmoHandler.gizmo[key] = value;
             break;
         }
+        case 'grid': {
+            switch (key) {
+                case 'resolution':
+                    grid.resolution = value - 1;
+                    break;
+                case 'size':
+                    grid.halfExtents = tmpVa.set(value, value);
+                    break;
+                case 'colorX':
+                    grid.colorX = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'colorZ':
+                    grid.colorZ = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+            }
+            break;
+        }
     }
 });
 
@@ -246,13 +282,6 @@ selector.on('deselect', () => {
     gizmoHandler.clear();
 });
 
-// grid
-const grid = new Grid();
-
-app.on('update', (/** @type {number} */ dt) => {
-    grid.draw(app);
-});
-
 app.on('destroy', () => {
     gizmoHandler.destroy();
     selector.destroy();