feat(web): add scene color management authoring

web/app/src/app/App.tsx

@@ -940,6 +940,7 @@ function Properties({ snapshot, selectedFaceIndices, selectedVertexIndices, grea
       {activeLight ? <div className="property-section" data-testid="light-workbench"><h3>Light</h3><output>{activeLight.energy.toFixed(1)} energy</output><button type="button" onClick={() => onCommand(animationRenderCommands.setLightProperties(activeLight.id, { energy: Math.min(1e9, activeLight.energy + 10) }))}>增加能量</button><button type="button" onClick={() => onCommand(animationRenderCommands.setLightProperties(activeLight.id, { castsShadow: !(activeLight.castsShadow ?? true) }))}>切换阴影</button></div> : null}
       {activeWorld ? <div className="property-section" data-testid="world-workbench"><h3>World</h3><output>Exposure {activeWorld.exposure.toFixed(2)}</output><button type="button" onClick={() => onCommand(animationRenderCommands.setWorldProperties(activeWorld.id, { exposure: Math.max(-20, Math.min(20, activeWorld.exposure + 0.5)) }))}>增加曝光</button></div> : null}
       {activeScene ? <div className="property-section" data-testid="scene-properties-workbench"><h3>Scene Render</h3><output>{activeScene.name} · {activeScene.renderEngine ?? "UNKNOWN"}</output><output>{activeScene.colorManagement ? `${activeScene.colorManagement.viewTransform} · ${activeScene.colorManagement.look} · Exposure ${activeScene.colorManagement.exposure.toFixed(2)} · Gamma ${activeScene.colorManagement.gamma.toFixed(2)}` : "Color management unavailable"}</output><div className="property-actions"><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneProperties(activeScene.id, { exposure: Math.max(-1000, Math.min(1000, (activeScene.colorManagement?.exposure ?? 0) + 0.5)) }))}>增加曝光</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneProperties(activeScene.id, { gamma: Math.max(0, Math.min(1000, (activeScene.colorManagement?.gamma ?? 1) + 0.1)) }))}>增加 Gamma</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneProperties(activeScene.id, { viewTransform: activeScene.colorManagement?.viewTransform === "AgX" ? "Standard" : "AgX" }))}>切换 View Transform</button></div></div> : null}
+      {activeScene?.colorManagement ? <div className="property-section" data-testid="scene-color-management-workbench"><h3>Color Management</h3><output>{activeScene.colorManagement.displayDevice} · {activeScene.colorManagement.temperature?.toFixed(0) ?? "-"} K · Tint {activeScene.colorManagement.tint?.toFixed(2) ?? "-"}</output><div className="property-actions"><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneColorManagement(activeScene.id, { temperature: Math.min(20000, (activeScene.colorManagement!.temperature ?? 6500) + 250) }))}>升高色温</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneColorManagement(activeScene.id, { tint: Math.max(-100, Math.min(100, (activeScene.colorManagement!.tint ?? 0) + 1)) }))}>调整 Tint</button></div></div> : null}
       {activeScene?.renderSettings ? <div className="property-section" data-testid="scene-render-settings-workbench"><h3>Render Output</h3><output>{activeScene.renderSettings.resolutionX} × {activeScene.renderSettings.resolutionY} @ {activeScene.renderSettings.resolutionPercentage}%</output><output>Frames {activeScene.renderSettings.frameStart} - {activeScene.renderSettings.frameEnd} · {activeScene.renderSettings.outputPath}</output><div className="property-actions"><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneRenderSettings(activeScene.id, { resolutionX: Math.min(65536, activeScene.renderSettings!.resolutionX + 64), resolutionY: Math.min(65536, activeScene.renderSettings!.resolutionY + 64) }))}>增加分辨率</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneRenderSettings(activeScene.id, { resolutionPercentage: Math.min(1000, activeScene.renderSettings!.resolutionPercentage + 10) }))}>增加百分比</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneRenderSettings(activeScene.id, { frameEnd: Math.min(1000000, activeScene.renderSettings!.frameEnd + 1) }))}>延长帧范围</button></div></div> : null}
       {activeScene?.audioSettings ? <div className="property-section" data-testid="scene-audio-settings-workbench"><h3>Scene Audio</h3><output>Volume {activeScene.audioSettings.volume.toFixed(2)} · Speed {activeScene.audioSettings.speedOfSound.toFixed(1)} · Doppler {activeScene.audioSettings.dopplerFactor.toFixed(2)}</output><output>Distance model {activeScene.audioSettings.distanceModel} · {activeScene.audioSettings.muted ? "Muted" : "Audible"} · {activeScene.audioSettings.sync ? "Synced" : "Free"}</output><div className="property-actions"><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneAudioSettings(activeScene.id, { volume: Math.min(10, activeScene.audioSettings!.volume + 0.1) }))}>增加音量</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneAudioSettings(activeScene.id, { muted: !activeScene.audioSettings!.muted }))}>{activeScene.audioSettings.muted ? "取消静音" : "静音"}</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneAudioSettings(activeScene.id, { sync: !activeScene.audioSettings!.sync }))}>切换同步</button></div></div> : null}
       {activeScene?.unitSettings ? <div className="property-section" data-testid="scene-unit-settings-workbench"><h3>Scene Units</h3><output>System {activeScene.unitSettings.system} · Scale {activeScene.unitSettings.scaleLength.toFixed(4)} · Rotation {activeScene.unitSettings.rotationSystem}</output><output>Length {activeScene.unitSettings.lengthUnit} · Mass {activeScene.unitSettings.massUnit} · Time {activeScene.unitSettings.timeUnit}</output><div className="property-actions"><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneUnitSettings(activeScene.id, { system: activeScene.unitSettings!.system === 1 ? 2 : 1 }))}>切换单位系统</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneUnitSettings(activeScene.id, { scaleLength: Math.min(1000000, Math.max(0.000001, activeScene.unitSettings!.scaleLength || 1) * 1.1) }))}>调整单位缩放</button><button type="button" onClick={() => onCommand(animationRenderCommands.setSceneUnitSettings(activeScene.id, { rotationSystem: activeScene.unitSettings!.rotationSystem === 2 ? 0 : 2 }))}>切换旋转单位</button></div></div> : null}

web/app/src/workers/web-engine.worker.ts

@@ -713,6 +713,15 @@ function assertFutureCapability(payload: Extract<WebEngineRequest["command"], {
       for (const field of ["particlesViewport", "particlesRender", "volumes"] as const) if (properties[field] !== undefined && !boundedNumber(properties[field], 0, 1000)) throw report("RENDER_PROPERTY_INVALID", `Scene ${field} is outside the simplify range`);
       return;
     }
+    case "setSceneColorManagement": {
+      const scene = currentSnapshot?.scenes.find((candidate) => candidate.id === payload.dataId);
+      const properties = payload.properties;
+      if (!scene || !validPropertyKeys(properties, ["displayDevice", "temperature", "tint"])) throw report("RENDER_PROPERTY_INVALID", "Scene color management target or properties are invalid");
+      if (properties.displayDevice !== undefined && (typeof properties.displayDevice !== "string" || properties.displayDevice.length === 0 || new TextEncoder().encode(properties.displayDevice).byteLength > 63)) throw report("RENDER_PROPERTY_INVALID", "Scene displayDevice is not a bounded string");
+      if (properties.temperature !== undefined && !boundedNumber(properties.temperature, 1000, 20000)) throw report("RENDER_PROPERTY_INVALID", "Scene temperature is outside the color-management range");
+      if (properties.tint !== undefined && !boundedNumber(properties.tint, -100, 100)) throw report("RENDER_PROPERTY_INVALID", "Scene tint is outside the color-management range");
+      return;
+    }
     case "setGeometryNodeGraph": {
       const snapshot = currentSnapshot;
       const availableResourceIds = new Set([

web/protocol/animation-render-commands.ts

@@ -62,4 +62,7 @@ export const animationRenderCommands = Object.freeze({
   setSceneSimplifySettings(dataId: string, properties: AnimationCommand<"setSceneSimplifySettings">["properties"]): AnimationCommand<"setSceneSimplifySettings"> {
     return { type: "setSceneSimplifySettings", dataId, properties: { ...properties } };
   },
+  setSceneColorManagement(dataId: string, properties: AnimationCommand<"setSceneColorManagement">["properties"]): AnimationCommand<"setSceneColorManagement"> {
+    return { type: "setSceneColorManagement", dataId, properties: { ...properties } };
+  },
 } satisfies Record<string, (...args: never[]) => WebEngineEditCommand>);

web/protocol/web-engine-capabilities.ts

@@ -90,6 +90,7 @@ export const WEB_ENGINE_COMMAND_CAPABILITIES = {
   setSceneCollectionSettings: { family: "CORE_SCENE_GRAPH", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },
   setSceneBorderSettings: { family: "CORE_SCENE_GRAPH", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },
   setSceneSimplifySettings: { family: "CORE_SCENE_GRAPH", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },
+  setSceneColorManagement: { family: "CORE_SCENE_GRAPH", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },
   setMetaballElements: { family: "GEOMETRY", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },
   sculptStroke: { family: "SCULPT", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },
   setSculptMeshAttributes: { family: "SCULPT", route: "MAIN_AUTHORITATIVE", implementation: "SOURCE_BACKED" },

web/protocol/web-engine.ts

@@ -154,6 +154,7 @@ export type WebEngineEditCommand =
   | { type: "setSceneCollectionSettings"; dataId: string; layerName: string; collectionId: string; properties: { exclude?: boolean; holdout?: boolean; indirectOnly?: boolean; hide?: boolean } }
   | { type: "setSceneBorderSettings"; dataId: string; properties: { enabled?: boolean; minX?: number; maxX?: number; minY?: number; maxY?: number } }
   | { type: "setSceneSimplifySettings"; dataId: string; properties: { subsurfViewport?: number; subsurfRender?: number; particlesViewport?: number; particlesRender?: number; volumes?: number } }
+  | { type: "setSceneColorManagement"; dataId: string; properties: { displayDevice?: string; temperature?: number; tint?: number } }
   | { type: "setMetaballElements"; dataId: string; elements: Array<{ type: number; position: [number, number, number]; radius: number; scale: [number, number, number] }> }
   | { type: "sculptStroke"; stroke: SculptStrokeIR }
   | { type: "setSculptMeshAttributes"; attributes: SculptMeshAttributesIR }

web/protocol/workbench-command-groups.ts

@@ -4,7 +4,7 @@ export const WORKBENCH_COMMAND_GROUPS = Object.freeze({
   OBJECT: ["createPrimitive", "duplicateObject", "deleteObject", "setObjectTransform", "setParent", "createCollection", "moveObjectToCollection", "renameId", "applyObjectTransform", "setObjectOrigin"],
   MESH: ["meshEdit", "translateMeshVertices", "createUVMap", "setActiveUVMap", "unwrapUV", "setVertexColors", "setVertexWeights"],
   ANIMATION: ["setFrame", "insertObjectKeyframe", "deleteObjectKeyframe", "setFCurveInterpolation", "setConstraint", "setNLAStack"],
-  RENDER: ["setCameraProperties", "setLightProperties", "setWorldProperties", "setSceneProperties", "setSceneRenderSettings", "setSceneAudioSettings", "setSceneUnitSettings", "setSceneTimelineSettings", "setScenePipelineSettings", "setSceneBindings", "setSceneViewLayerSettings", "setSceneCollectionSettings", "setSceneBorderSettings", "setSceneSimplifySettings"],
+  RENDER: ["setCameraProperties", "setLightProperties", "setWorldProperties", "setSceneProperties", "setSceneRenderSettings", "setSceneAudioSettings", "setSceneUnitSettings", "setSceneTimelineSettings", "setScenePipelineSettings", "setSceneBindings", "setSceneViewLayerSettings", "setSceneCollectionSettings", "setSceneBorderSettings", "setSceneSimplifySettings", "setSceneColorManagement"],
   IO: ["importImage", "importVFont", "setMaterialImageNode"],
 } as const satisfies Record<string, readonly WebEngineCommandType[]>);