Gizmo cleanup and bug fixes

examples/src/examples/misc/gizmos/example.mjs

@@ -20,7 +20,7 @@ class GizmoHandler {
     /**
      * Object to reference each gizmo.
      *
-     * @type {Record<string, pc.Gizmo>}
+     * @type {Record<string, pc.TransformGizmo>}
      * @private
      */
     _gizmos;
@@ -91,6 +91,7 @@ class GizmoHandler {
      * @param {string} type - The transform gizmo type.
      */
     _updateData(type) {
+        /** @type {any} */
         const gizmo = this.gizmo;
         this._skipSetFire = true;
         data.set('gizmo', {
@@ -153,8 +154,10 @@ class GizmoHandler {
      */
     switch(type) {
         this.gizmo.detach();
+        const coordSpace = this.gizmo.coordSpace;
         this._type = type ?? 'translate';
         this.gizmo.attach(this._nodes);
+        this.gizmo.coordSpace = coordSpace;
         this._updateData(type);
     }
 
@@ -181,9 +184,11 @@ createOptions.componentSystems = [
     pc.RenderComponentSystem,
     pc.CameraComponentSystem,
     pc.LightComponentSystem,
-    pc.ScriptComponentSystem
+    pc.ScriptComponentSystem,
+    pc.ScreenComponentSystem,
+    pc.ElementComponentSystem
 ];
-createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler];
+createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler, pc.FontHandler];
 
 const app = new pc.AppBase(canvas);
 app.init(createOptions);
@@ -198,7 +203,8 @@ window.addEventListener('resize', resize);
 
 // load assets
 const assets = {
-    script: new pc.Asset('script', 'script', { url: rootPath + '/static/scripts/camera/orbit-camera.js' })
+    script: new pc.Asset('script', 'script', { url: rootPath + '/static/scripts/camera/orbit-camera.js' }),
+    font: new pc.Asset('font', 'font', { url: rootPath + '/static/assets/fonts/courier.json' })
 };
 /**
  * @param {pc.Asset[] | number[]} assetList - The asset list.
@@ -214,7 +220,6 @@ function loadAssets(assetList, assetRegistry) {
 await loadAssets(Object.values(assets), app.assets);
 
 app.start();
-
 /**
  * @param {pc.Color} color - The color.
  * @returns {pc.Material} - The standard material.
@@ -226,6 +231,32 @@ function createColorMaterial(color) {
     return material;
 }
 
+// scene settings
+app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
+
+// create screen
+const screen = new pc.Entity('screen');
+screen.addComponent('screen', {
+    referenceResolution: new pc.Vec2(1280, 720),
+    scaleBlend: 0.5,
+    scaleMode: pc.SCALEMODE_BLEND,
+    screenSpace: true
+});
+app.root.addChild(screen);
+
+const instr = new pc.Entity('instructions');
+instr.setLocalPosition(0, 200, 0);
+instr.addComponent('element', {
+    pivot: new pc.Vec2(0.5, 0.5),
+    anchor: new pc.Vec4(0, 1, 1, 0.8),
+    margin: new pc.Vec4(0, 0, 0, 0),
+    fontAsset: assets.font.id,
+    fontSize: 18,
+    text: 'Translate (1), Rotate (2), Scale (3)\nWorld/Local (X)\nPerspective (P), Orthographic (O)',
+    type: pc.ELEMENTTYPE_TEXT
+});
+screen.addChild(instr);
+
 // create entities
 const box = new pc.Entity('box');
 box.addComponent('render', {
@@ -279,27 +310,13 @@ camera.setPosition(1, 1, 1);
 app.root.addChild(camera);
 orbitCamera.distance = 14;
 
-// create 3-point lighting
-const backLight = new pc.Entity('light');
-backLight.addComponent('light', {
-    intensity: 0.5
-});
-app.root.addChild(backLight);
-backLight.setEulerAngles(-60, 0, 90);
-
-const fillLight = new pc.Entity('light');
-fillLight.addComponent('light', {
-    intensity: 0.5
-});
-app.root.addChild(fillLight);
-fillLight.setEulerAngles(45, 0, 0);
-
-const keyLight = new pc.Entity('light');
-keyLight.addComponent('light', {
+// create light entity
+const light = new pc.Entity('light');
+light.addComponent('light', {
     intensity: 1
 });
-app.root.addChild(keyLight);
-keyLight.setEulerAngles(0, 0, -60);
+app.root.addChild(light);
+light.setEulerAngles(0, 0, -60);
 
 // create layers
 const gizmoLayer = new pc.Layer({

src/extras/gizmo/axis-shapes.js

@@ -9,7 +9,7 @@ import { BLEND_NORMAL } from '../../scene/constants.js';
 import { createShaderFromCode } from '../../scene/shader-lib/utils.js';
 
 import { COLOR_GRAY } from './default-colors.js';
-import { MeshTriData } from './mesh-tri-data.js';
+import { TriData } from './tri-data.js';
 import { Mesh } from '../../scene/mesh.js';
 import { BoxGeometry } from '../../scene/geometry/box-geometry.js';
 import { CylinderGeometry } from '../../scene/geometry/cylinder-geometry.js';
@@ -21,16 +21,20 @@ import { TorusGeometry } from '../../scene/geometry/torus-geometry.js';
 const SHADOW_DAMP_SCALE = 0.25;
 const SHADOW_DAMP_OFFSET = 0.75;
 const SHADOW_MESH_MAP = new Map();
+
 const TORUS_RENDER_SEGMENTS = 80;
 const TORUS_INTERSECT_SEGMENTS = 20;
+
 const LIGHT_DIR = new Vec3(1, 2, 3);
-const MESH_TEMPLATES = {
+
+const GEOMETRIES = {
     box: BoxGeometry,
     cone: ConeGeometry,
     cylinder: CylinderGeometry,
     plane: PlaneGeometry,
     torus: TorusGeometry
 };
+
 const SHADER = {
     vert: /* glsl */`
         attribute vec3 vertex_position;
@@ -68,12 +72,12 @@ const tmpV2 = new Vec3();
 const tmpQ1 = new Quat();
 
 function createShadowMesh(device, entity, type, color = Color.WHITE, templateOpts) {
-    const geomTemplate = MESH_TEMPLATES[type];
-    if (!geomTemplate) {
+    const Geometry = GEOMETRIES[type];
+    if (!Geometry) {
         throw new Error('Invalid primitive type.');
     }
 
-    const geom = new geomTemplate(templateOpts);
+    const geom = new Geometry(templateOpts);
     geom.colors = [];
 
     const wtm = entity.getWorldTransform().clone().invert();
@@ -83,7 +87,12 @@ function createShadowMesh(device, entity, type, color = Color.WHITE, templateOpt
     const numVertices = geom.positions.length / 3;
     const shadow = calculateShadow(tmpV1, numVertices, geom.normals);
     for (let i = 0; i < shadow.length; i++) {
-        geom.colors.push(shadow[i] * color.r * 255, shadow[i] * color.g * 255, shadow[i] * color.b * 255, color.a * 255);
+        geom.colors.push(
+            shadow[i] * color.r * 0xFF,
+            shadow[i] * color.g * 0xFF,
+            shadow[i] * color.b * 0xFF,
+            color.a * 0xFF
+        );
     }
 
     const shadowMesh = Mesh.fromGeometry(device, geom);
@@ -145,7 +154,7 @@ class AxisShape {
 
     entity;
 
-    meshTriDataList = [];
+    triData = [];
 
     meshInstances = [];
 
@@ -256,9 +265,9 @@ class AxisArrow extends AxisShape {
     constructor(device, options = {}) {
         super(device, options);
 
-        this.meshTriDataList = [
-            new MeshTriData(Mesh.fromGeometry(this.device, new ConeGeometry())),
-            new MeshTriData(Mesh.fromGeometry(this.device, new CylinderGeometry()), 1)
+        this.triData = [
+            new TriData(new ConeGeometry()),
+            new TriData(new CylinderGeometry(), 1)
         ];
 
         this._createArrow();
@@ -342,7 +351,7 @@ class AxisArrow extends AxisShape {
         tmpV1.set(0, this._gap + this._arrowLength * 0.5 + this._lineLength, 0);
         tmpQ1.set(0, 0, 0, 1);
         tmpV2.set(this._arrowThickness, this._arrowLength, this._arrowThickness);
-        this.meshTriDataList[0].setTransform(tmpV1, tmpQ1, tmpV2);
+        this.triData[0].setTransform(tmpV1, tmpQ1, tmpV2);
 
         this._head.setLocalPosition(0, this._gap + this._arrowLength * 0.5 + this._lineLength, 0);
         this._head.setLocalScale(this._arrowThickness, this._arrowLength, this._arrowThickness);
@@ -353,7 +362,7 @@ class AxisArrow extends AxisShape {
         tmpV1.set(0, this._gap + this._lineLength * 0.5, 0);
         tmpQ1.set(0, 0, 0, 1);
         tmpV2.set(this._lineThickness + this._tolerance, this._lineLength, this._lineThickness + this._tolerance);
-        this.meshTriDataList[1].setTransform(tmpV1, tmpQ1, tmpV2);
+        this.triData[1].setTransform(tmpV1, tmpQ1, tmpV2);
 
         // render
         this._line.setLocalPosition(0, this._gap + this._lineLength * 0.5, 0);
@@ -369,8 +378,8 @@ class AxisBoxCenter extends AxisShape {
     constructor(device, options = {}) {
         super(device, options);
 
-        this.meshTriDataList = [
-            new MeshTriData(Mesh.fromGeometry(this.device, new BoxGeometry()), 2)
+        this.triData = [
+            new TriData(new BoxGeometry(), 2)
         ];
 
         this._createCenter();
@@ -422,9 +431,9 @@ class AxisBoxLine extends AxisShape {
     constructor(device, options = {}) {
         super(device, options);
 
-        this.meshTriDataList = [
-            new MeshTriData(Mesh.fromGeometry(this.device, new BoxGeometry())),
-            new MeshTriData(Mesh.fromGeometry(this.device, new CylinderGeometry()), 1)
+        this.triData = [
+            new TriData(new BoxGeometry()),
+            new TriData(new CylinderGeometry(), 1)
         ];
 
         this._createBoxLine();
@@ -500,7 +509,7 @@ class AxisBoxLine extends AxisShape {
         tmpV1.set(0, this._gap + this._boxSize * 0.5 + this._lineLength, 0);
         tmpQ1.set(0, 0, 0, 1);
         tmpV2.set(this._boxSize, this._boxSize, this._boxSize);
-        this.meshTriDataList[0].setTransform(tmpV1, tmpQ1, tmpV2);
+        this.triData[0].setTransform(tmpV1, tmpQ1, tmpV2);
 
         // render
         this._box.setLocalPosition(0, this._gap + this._boxSize * 0.5 + this._lineLength, 0);
@@ -512,7 +521,7 @@ class AxisBoxLine extends AxisShape {
         tmpV1.set(0, this._gap + this._lineLength * 0.5, 0);
         tmpQ1.set(0, 0, 0, 1);
         tmpV2.set(this._lineThickness + this._tolerance, this._lineLength, this._lineThickness + this._tolerance);
-        this.meshTriDataList[1].setTransform(tmpV1, tmpQ1, tmpV2);
+        this.triData[1].setTransform(tmpV1, tmpQ1, tmpV2);
 
         // render
         this._line.setLocalPosition(0, this._gap + this._lineLength * 0.5, 0);
@@ -538,23 +547,23 @@ class AxisDisk extends AxisShape {
         this._ringRadius = options.ringRadius ?? this._ringRadius;
         this._sectorAngle = options.sectorAngle ?? this._sectorAngle;
 
-        this.meshTriDataList = [
-            new MeshTriData(this._createIntersectTorus())
+        this.triData = [
+            new TriData(this._createTorusGeometry())
         ];
 
         this._createDisk();
     }
 
-    _createIntersectTorus() {
-        return Mesh.fromGeometry(this.device, new TorusGeometry({
+    _createTorusGeometry() {
+        return new TorusGeometry({
             tubeRadius: this._tubeRadius + this._tolerance,
             ringRadius: this._ringRadius,
             sectorAngle: this._sectorAngle,
             segments: TORUS_INTERSECT_SEGMENTS
-        }));
+        });
     }
 
-    _createRenderTorus(sectorAngle) {
+    _createTorusMesh(sectorAngle) {
         const color = this._disabled ? this._disabledColor : this._defaultColor;
         return createShadowMesh(this.device, this.entity, 'torus', color, {
             tubeRadius: this._tubeRadius,
@@ -569,8 +578,8 @@ class AxisDisk extends AxisShape {
 
         // arc/circle
         this._addRenderMeshes(this.entity, [
-            this._createRenderTorus(this._sectorAngle),
-            this._createRenderTorus(360)
+            this._createTorusMesh(this._sectorAngle),
+            this._createTorusMesh(360)
         ]);
         this.drag(false);
     }
@@ -604,11 +613,11 @@ class AxisDisk extends AxisShape {
 
     _updateTransform() {
         // intersect
-        this.meshTriDataList[0].setTris(this._createIntersectTorus());
+        this.triData[0].fromGeometry(this._createTorusGeometry());
 
         // render
-        this.meshInstances[0].mesh = this._createRenderTorus(this._sectorAngle);
-        this.meshInstances[1].mesh = this._createRenderTorus(360);
+        this.meshInstances[0].mesh = this._createTorusMesh(this._sectorAngle);
+        this.meshInstances[1].mesh = this._createTorusMesh(360);
     }
 
     drag(state) {
@@ -637,8 +646,8 @@ class AxisPlane extends AxisShape {
     constructor(device, options = {}) {
         super(device, options);
 
-        this.meshTriDataList = [
-            new MeshTriData(Mesh.fromGeometry(this.device, new PlaneGeometry()))
+        this.triData = [
+            new TriData(new PlaneGeometry())
         ];
 
         this._createPlane();

src/extras/gizmo/gizmo.js

@@ -10,11 +10,7 @@
 const tmpV1 = new Vec3();
 const tmpM1 = new Mat4();
 const tmpM2 = new Mat4();
-
-const xstart = new Vec3();
-const xdir = new Vec3();
-
-const ray = new Ray();
+const tmpR1 = new Ray();
 
 // constants
 const MIN_GIZMO_SCALE = 1e-4;
@@ -224,8 +220,7 @@
 
     /**
      * @typedef IntersectData
-     * @property {import('./mesh-tri-data.js').MeshTriData[]} meshTriDataList -
-     * The array of {@link MeshTriData}
+     * @property {import('./tri-data.js').TriData[]} triData - The array of {@link TriData}
      * @property {import('../../scene/graph-node.js').GraphNode} parent - The mesh parent node.
      * @property {import('../../scene/mesh-instance.js').MeshInstance[]} meshInstances -
      * array of mesh instances for rendering
@@ -241,7 +236,8 @@
      * Creates a new Gizmo object.
      *
      * @param {import('../../framework/app-base.js').AppBase} app - The application instance.
-     * @param {import('../../framework/components/camera/component.js').CameraComponent} camera - The camera component.
+     * @param {import('../../framework/components/camera/component.js').CameraComponent} camera - 
+     * The camera component.
      * @param {import('../../scene/layer.js').Layer} layer - The render layer.
      * @example
      * const gizmo = new pc.Gizmo(app, camera, layer);
@@ -385,19 +381,18 @@
 
         const selection = [];
         for (let i = 0; i < this.intersectData.length; i++) {
-            const { meshTriDataList, parent, meshInstances } = this.intersectData[i];
+            const { triData, parent, meshInstances } = this.intersectData[i];
             const wtm = parent.getWorldTransform().clone();
-            for (let j = 0; j < meshTriDataList.length; j++) {
-                const { tris, ptm, priority } = meshTriDataList[j];
+            for (let j = 0; j < triData.length; j++) {
+                const { tris, ptm, priority } = triData[j];
                 tmpM1.copy(wtm).mul(ptm);
                 tmpM2.copy(tmpM1).invert();
-                tmpM2.transformPoint(start, xstart);
-                tmpM2.transformVector(dir, xdir);
-                xdir.normalize();
+                tmpM2.transformPoint(start, tmpR1.origin);
+                tmpM2.transformVector(dir, tmpR1.direction);
+                tmpR1.direction.normalize();
 
                 for (let k = 0; k < tris.length; k++) {
-                    ray.set(xstart, xdir);
-                    if (tris[k].intersectsRay(ray, tmpV1)) {
+                    if (tris[k].intersectsRay(tmpR1, tmpV1)) {
                         selection.push({
                             dist: tmpM1.transformPoint(tmpV1).sub(start).length(),
                             meshInstances: meshInstances,