From 7aa5d1c34f47785ed2d4eeb11fdc81fd54d9bee4 Mon Sep 17 00:00:00 2001
From: Martin Valigursky <mvaligursky@snapchat.com>
Date: Tue, 24 Dec 2024 15:15:09 +0000
Subject: [PATCH 1/3] Render pass tracing now logs values used to clear
 color/depth/stencil buffer

---
 src/core/math/color.js               | 18 +++++++++---------
 src/platform/graphics/render-pass.js | 12 +++++++++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/core/math/color.js b/src/core/math/color.js
index eb20a7f03b9..35d7330b026 100644
--- a/src/core/math/color.js
+++ b/src/core/math/color.js
@@ -226,24 +226,24 @@ class Color {
      * is the same format as used in HTML/CSS.
      *
      * @param {boolean} alpha - If true, the output string will include the alpha value.
+     * @param {boolean} asArray - If true, the output will be an array of numbers.
      * @returns {string} The color in string form.
      * @example
      * const c = new pc.Color(1, 1, 1);
      * // Outputs #ffffffff
      * console.log(c.toString());
      */
-    toString(alpha) {
-        let s = `#${((1 << 24) + (Math.round(this.r * 255) << 16) + (Math.round(this.g * 255) << 8) + Math.round(this.b * 255)).toString(16).slice(1)}`;
-        if (alpha === true) {
-            const a = Math.round(this.a * 255).toString(16);
-            if (this.a < 16 / 255) {
-                s += `0${a}`;
-            } else {
-                s += a;
-            }
+    toString(alpha, asArray) {
 
+        const { r, g, b, a } = this;
+
+        // If any component exceeds 1 (HDR), return the color as an array
+        if (asArray || r > 1 || g > 1 || b > 1) {
+            return `${r.toFixed(3)}, ${g.toFixed(3)}, ${b.toFixed(3)}, ${a.toFixed(3)}`;
         }
 
+        let s = `#${((1 << 24) + (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255)).toString(16).slice(1)}`;
+        s += alpha === true ? a.toString(16).padStart(2, '0') : '';
         return s;
     }
 
diff --git a/src/platform/graphics/render-pass.js b/src/platform/graphics/render-pass.js
index 2716ffe1dda..1cbda67fca8 100644
--- a/src/platform/graphics/render-pass.js
+++ b/src/platform/graphics/render-pass.js
@@ -501,7 +501,9 @@ class RenderPass {
                             `${colorOps.store ? 'store' : 'discard'} ` +
                             `${colorOps.resolve ? 'resolve ' : ''}` +
                             `${colorOps.genMipmaps ? 'mipmaps ' : ''}` +
-                            ` [format: ${colorFormat}]`);
+                            ` [format: ${colorFormat}]` +
+                            ` ${colorOps.clear ? `[clear: ${colorOps.clearValue.toString(true, true)}]` : ''}`
+                );
             }
 
             if (this.depthStencilOps) {
@@ -513,14 +515,18 @@ class RenderPass {
                                 `${this.depthStencilOps.clearDepth ? 'clear' : 'load'}->` +
                                 `${this.depthStencilOps.storeDepth ? 'store' : 'discard'}` +
                                 `${this.depthStencilOps.resolveDepth ? ' resolve' : ''}` +
-                                `${depthFormat}`);
+                                `${depthFormat}` +
+                                `${this.depthStencilOps.clearDepth ? ` [clear: ${this.depthStencilOps.clearDepthValue}]` : ''}`
+                    );
                 }
 
                 if (hasStencil) {
                     Debug.trace(TRACEID_RENDER_PASS_DETAIL, '    stencOps: ' +
                                 `${this.depthStencilOps.clearStencil ? 'clear' : 'load'}->` +
                                 `${this.depthStencilOps.storeStencil ? 'store' : 'discard'}` +
-                                `${depthFormat}`);
+                                `${depthFormat}` +
+                                `${this.depthStencilOps.clearStencil ? ` [clear: ${this.depthStencilOps.clearStencilValue}]` : ''}`
+                    );
                 }
             }
         }

From 9c5fc51f0e9156dd6ffcdd89466a3db2fb2a4f41 Mon Sep 17 00:00:00 2001
From: Martin Valigursky <mvaligursky@snapchat.com>
Date: Tue, 24 Dec 2024 15:20:15 +0000
Subject: [PATCH 2/3] change old part back as test are failing

---
 src/core/math/color.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/core/math/color.js b/src/core/math/color.js
index 35d7330b026..04c0b901c56 100644
--- a/src/core/math/color.js
+++ b/src/core/math/color.js
@@ -243,7 +243,14 @@ class Color {
         }
 
         let s = `#${((1 << 24) + (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255)).toString(16).slice(1)}`;
-        s += alpha === true ? a.toString(16).padStart(2, '0') : '';
+        if (alpha === true) {
+            const aa = Math.round(a * 255).toString(16);
+            if (this.a < 16 / 255) {
+                s += `0${aa}`;
+            } else {
+                s += aa;
+            }
+        }
         return s;
     }
 

From 501a1f0a2029e616963df193b33e1f2482620d41 Mon Sep 17 00:00:00 2001
From: Martin Valigursky <59932779+mvaligursky@users.noreply.github.com>
Date: Fri, 27 Dec 2024 07:40:55 +0000
Subject: [PATCH 3/3] Update src/core/math/color.js

Co-authored-by: Will Eastcott <will@playcanvas.com>
---
 src/core/math/color.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/math/color.js b/src/core/math/color.js
index 04c0b901c56..3f62f433882 100644
--- a/src/core/math/color.js
+++ b/src/core/math/color.js
@@ -226,7 +226,7 @@ class Color {
      * is the same format as used in HTML/CSS.
      *
      * @param {boolean} alpha - If true, the output string will include the alpha value.
-     * @param {boolean} asArray - If true, the output will be an array of numbers.
+     * @param {boolean} [asArray] - If true, the output will be an array of numbers. Defaults to false.
      * @returns {string} The color in string form.
      * @example
      * const c = new pc.Color(1, 1, 1);