@driftengine/ui2d 4.11.1 → 4.13.0

package/dist/spritePass.js

@@ -1,4 +1,5 @@
 /** The 2D layer as a pass a consumer registers: one batch of quads, drawn where the caller says. */
+import { interfaceGrade } from '@driftengine/core';
 import { SPRITE_BINDINGS } from './shaders/generated/sprite.wgsl.js';
 import { createAffine2D } from './camera2d.js';
 import { createSpriteBatch, resetSpriteBatch } from './spriteBatch.js';
@@ -101,7 +102,7 @@ export function createSpritePass(options = {}) {
                 if (gl === null)
                     return;
                 uploadWebgl2Instances(ctx.gl, gl, batch);
-                drawWebgl2Sprites(ctx.gl, gl, batch, toNdc, clipCorrection, ctx.outputTransform, ctx.outputExposure);
+                drawWebgl2Sprites(ctx.gl, gl, batch, toNdc, clipCorrection, interfaceGrade(ctx.outputTransform), 1);
                 return;
             }
             if (gpu === null || device === null)
@@ -114,8 +115,9 @@ export function createSpritePass(options = {}) {
             f[VERT.fields.uToNdc1.offset / 4] = toNdc[4];
             f[VERT.fields.uToNdc1.offset / 4 + 1] = toNdc[5];
             f.set(clipCorrection, VERT.fields.uClipCorrection.offset / 4);
-            gpu.fragmentInts[FRAG.fields.uOutputTransform.offset / 4] = ctx.outputTransform;
-            gpu.fragmentFloats[FRAG.fields.uOutputExposure.offset / 4] = ctx.outputExposure;
+            /* A 2D layer is painted for the screen: encoded, never put through the scene's curve. */
+            gpu.fragmentInts[FRAG.fields.uOutputTransform.offset / 4] = interfaceGrade(ctx.outputTransform);
+            gpu.fragmentFloats[FRAG.fields.uOutputExposure.offset / 4] = 1;
             /*
              * Written from inside an open render pass, which is allowed and ordered: a queue write
              * issued now lands before the command buffer this pass is being recorded into is submitted.

package/dist/theme.d.ts

@@ -1,10 +1,4 @@
-/**
- * Named colours and sizes, so an interface stops repeating its own constants.
- *
- * **Flattened at derivation rather than chained at lookup.** A token is read per node per frame, so
- * a chain of parent themes would be a walk on every one of those reads. Spreading once when a
- * theme is derived costs a record and makes every lookup a single property access.
- */
+/** Named colours, packed as `0xRRGGBBAA`, and sizes, flattened when the theme is derived. */
 export interface Theme {
     readonly values: Readonly<Record<string, number>>;
 }
@@ -14,7 +8,14 @@ export declare function deriveTheme(base: Theme, overrides: Record<string, numbe
 export declare function themeColour(theme: Theme, name: string, fallback: number): number;
 export declare function themeSize(theme: Theme, name: string, fallback: number): number;
 /**
- * A packed `0xRRGGBBAA` token as the four floats a node's `background` and `tint` are.
+ * A packed `0xRRGGBBAA` token as the four floats a node's `background` and `tint` are: the colour
+ * decoded from sRGB to the linear light the renderer draws in, the coverage as it is.
+ *
+ * **Decoded, because a hex colour is a display colour** wherever one is written, CSS included, and
+ * the renderer grades everything it draws: read as linear, `0x336699` came out as `0x7caacb` under
+ * the default `outputTransform`, every panel a washed-out version of the one picked. What it gives
+ * up is a token meant as an amount rather than a look, which a colour token is not. A renderer
+ * asked for `outputTransform: 'none'` draws these darker than picked, as it does every colour.
  *
  * **Two of this package's own APIs did not meet**: a theme token is one number and a `UiNode`
  * colour is a `Float32Array`, so every consumer wrote the same four shifts. The editor found it by

package/dist/theme.js

@@ -1,3 +1,11 @@
+/**
+ * Named colours and sizes, so an interface stops repeating its own constants.
+ *
+ * **Flattened at derivation rather than chained at lookup.** A token is read per node per frame, so
+ * a chain of parent themes would be a walk on every one of those reads. Spreading once when a
+ * theme is derived costs a record and makes every lookup a single property access.
+ */
+import { srgbToLinear } from '@driftengine/core';
 export function createTheme(values) {
     return { values: { ...values } };
 }
@@ -12,7 +20,14 @@ export function themeSize(theme, name, fallback) {
     return theme.values[name] ?? fallback;
 }
 /**
- * A packed `0xRRGGBBAA` token as the four floats a node's `background` and `tint` are.
+ * A packed `0xRRGGBBAA` token as the four floats a node's `background` and `tint` are: the colour
+ * decoded from sRGB to the linear light the renderer draws in, the coverage as it is.
+ *
+ * **Decoded, because a hex colour is a display colour** wherever one is written, CSS included, and
+ * the renderer grades everything it draws: read as linear, `0x336699` came out as `0x7caacb` under
+ * the default `outputTransform`, every panel a washed-out version of the one picked. What it gives
+ * up is a token meant as an amount rather than a look, which a colour token is not. A renderer
+ * asked for `outputTransform: 'none'` draws these darker than picked, as it does every colour.
  *
  * **Two of this package's own APIs did not meet**: a theme token is one number and a `UiNode`
  * colour is a `Float32Array`, so every consumer wrote the same four shifts. The editor found it by
@@ -24,9 +39,9 @@ export function themeSize(theme, name, fallback) {
  * number, which is exactly the shape of bug that survives review.
  */
 export function unpackRgba(packed, out) {
-    out[0] = ((packed >>> 24) & 0xff) / 255;
-    out[1] = ((packed >>> 16) & 0xff) / 255;
-    out[2] = ((packed >>> 8) & 0xff) / 255;
+    out[0] = srgbToLinear(((packed >>> 24) & 0xff) / 255);
+    out[1] = srgbToLinear(((packed >>> 16) & 0xff) / 255);
+    out[2] = srgbToLinear(((packed >>> 8) & 0xff) / 255);
     out[3] = (packed & 0xff) / 255;
     return out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@driftengine/ui2d",
-  "version": "4.11.1",
+  "version": "4.13.0",
   "description": "The 2D layer: batched sprites, sheets, tilemaps, and a retained interface tree over them",
   "license": "Apache-2.0",
   "type": "module",
@@ -27,7 +27,7 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
-    "@driftengine/core": "4.11.1"
+    "@driftengine/core": "4.13.0"
   },
   "author": "Drift Technologies",
   "repository": {

package/src/spritePass.ts

@@ -1,5 +1,6 @@
 /** The 2D layer as a pass a consumer registers: one batch of quads, drawn where the caller says. */
 
+import { interfaceGrade } from '@driftengine/core';
 import type { PassContext, PassDefinition, PassDevice } from '@driftengine/core';
 
 import { SPRITE_BINDINGS } from './shaders/generated/sprite.wgsl.ts';
@@ -191,8 +192,8 @@ export function createSpritePass(options: SpritePassOptions = {}): SpritePass {
           batch,
           toNdc,
           clipCorrection,
-          ctx.outputTransform,
-          ctx.outputExposure,
+          interfaceGrade(ctx.outputTransform),
+          1,
         );
         return;
       }
@@ -205,8 +206,11 @@ export function createSpritePass(options: SpritePassOptions = {}): SpritePass {
       f[VERT.fields.uToNdc1.offset / 4] = toNdc[4] as number;
       f[VERT.fields.uToNdc1.offset / 4 + 1] = toNdc[5] as number;
       f.set(clipCorrection, VERT.fields.uClipCorrection.offset / 4);
-      gpu.fragmentInts[FRAG.fields.uOutputTransform.offset / 4] = ctx.outputTransform;
-      gpu.fragmentFloats[FRAG.fields.uOutputExposure.offset / 4] = ctx.outputExposure;
+      /* A 2D layer is painted for the screen: encoded, never put through the scene's curve. */
+      gpu.fragmentInts[FRAG.fields.uOutputTransform.offset / 4] = interfaceGrade(
+        ctx.outputTransform,
+      );
+      gpu.fragmentFloats[FRAG.fields.uOutputExposure.offset / 4] = 1;
       /*
        * Written from inside an open render pass, which is allowed and ordered: a queue write
        * issued now lands before the command buffer this pass is being recorded into is submitted.

package/src/theme.ts

@@ -5,6 +5,9 @@
  * a chain of parent themes would be a walk on every one of those reads. Spreading once when a
  * theme is derived costs a record and makes every lookup a single property access.
  */
+import { srgbToLinear } from '@driftengine/core';
+
+/** Named colours, packed as `0xRRGGBBAA`, and sizes, flattened when the theme is derived. */
 export interface Theme {
   readonly values: Readonly<Record<string, number>>;
 }
@@ -27,7 +30,14 @@ export function themeSize(theme: Theme, name: string, fallback: number): number
 }
 
 /**
- * A packed `0xRRGGBBAA` token as the four floats a node's `background` and `tint` are.
+ * A packed `0xRRGGBBAA` token as the four floats a node's `background` and `tint` are: the colour
+ * decoded from sRGB to the linear light the renderer draws in, the coverage as it is.
+ *
+ * **Decoded, because a hex colour is a display colour** wherever one is written, CSS included, and
+ * the renderer grades everything it draws: read as linear, `0x336699` came out as `0x7caacb` under
+ * the default `outputTransform`, every panel a washed-out version of the one picked. What it gives
+ * up is a token meant as an amount rather than a look, which a colour token is not. A renderer
+ * asked for `outputTransform: 'none'` draws these darker than picked, as it does every colour.
  *
  * **Two of this package's own APIs did not meet**: a theme token is one number and a `UiNode`
  * colour is a `Float32Array`, so every consumer wrote the same four shifts. The editor found it by
@@ -39,9 +49,9 @@ export function themeSize(theme: Theme, name: string, fallback: number): number
  * number, which is exactly the shape of bug that survives review.
  */
 export function unpackRgba(packed: number, out: Float32Array): Float32Array {
-  out[0] = ((packed >>> 24) & 0xff) / 255;
-  out[1] = ((packed >>> 16) & 0xff) / 255;
-  out[2] = ((packed >>> 8) & 0xff) / 255;
+  out[0] = srgbToLinear(((packed >>> 24) & 0xff) / 255);
+  out[1] = srgbToLinear(((packed >>> 16) & 0xff) / 255);
+  out[2] = srgbToLinear(((packed >>> 8) & 0xff) / 255);
   out[3] = (packed & 0xff) / 255;
   return out;
 }