From f68a3d197f9976b3c559fd229bb5d14fdc56d36f Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Sun, 2 Feb 2025 11:07:06 +0000
Subject: [PATCH 1/2] [FIX] Apply a constant screen size for hotspots

---
 examples/annotations.html              |  2 +-
 examples/assets/scripts/annotation.mjs | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/examples/annotations.html b/examples/annotations.html
index 8197026..5e33ceb 100644
--- a/examples/annotations.html
+++ b/examples/annotations.html
@@ -34,7 +34,7 @@
                 <!-- Camera (with XR support) -->
                 <pc-entity name="camera root">
                     <pc-entity name="camera" position="0 1.75 8">
-                        <pc-camera clear-color="black"></pc-camera>
+                        <pc-camera></pc-camera>
                         <pc-scripts>
                             <pc-script name="cameraControls" attributes='{
                                 "focusPoint": "vec3:0,1.75,0",
diff --git a/examples/assets/scripts/annotation.mjs b/examples/assets/scripts/annotation.mjs
index 10e0bd5..03b7a61 100644
--- a/examples/assets/scripts/annotation.mjs
+++ b/examples/assets/scripts/annotation.mjs
@@ -446,10 +446,19 @@ export class Annotation extends Script {
      * @private
      */
     _calculateScreenSpaceScale() {
+        const DESIRED_PIXEL_SIZE = 25; // Match this to your hotspot DOM element size
+
         const cameraPos = this.camera.entity.getPosition();
-        const cameraForward = this.camera.entity.forward;
         const toAnnotation = this.entity.getPosition().sub(cameraPos);
-        const distanceToNearPlane = toAnnotation.dot(cameraForward);
-        return distanceToNearPlane * Math.tan(this.camera.fov * Math.PI / 180) * 0.025;
+        const distance = toAnnotation.length();
+
+        // Get the camera's projection matrix vertical scale factor
+        const projMatrix = this.camera.projectionMatrix;
+        const screenHeight = this.app.graphicsDevice.height;
+
+        // Calculate world size needed for desired pixel size
+        const worldSize = (DESIRED_PIXEL_SIZE / screenHeight) * (2 * distance / projMatrix.data[5]);
+
+        return worldSize;
     }
 }

From 931947518580badd5c4f977b7f811e620567c490 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Sun, 2 Feb 2025 11:10:00 +0000
Subject: [PATCH 2/2] Remove comment

---
 examples/assets/scripts/annotation.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/assets/scripts/annotation.mjs b/examples/assets/scripts/annotation.mjs
index 03b7a61..6d705e2 100644
--- a/examples/assets/scripts/annotation.mjs
+++ b/examples/assets/scripts/annotation.mjs
@@ -446,7 +446,7 @@ export class Annotation extends Script {
      * @private
      */
     _calculateScreenSpaceScale() {
-        const DESIRED_PIXEL_SIZE = 25; // Match this to your hotspot DOM element size
+        const DESIRED_PIXEL_SIZE = 25;
 
         const cameraPos = this.camera.entity.getPosition();
         const toAnnotation = this.entity.getPosition().sub(cameraPos);