@downdraft/engine 0.0.0 → 0.1.0

package/core/src/render/shaders/shadow-chunks.ts

@@ -0,0 +1,135 @@
+export const CSM_SHADER_CHUNK = /* wgsl */ `
+const MAX_CASCADES = 4u;
+
+struct CSMUniforms {
+  cascades: array<mat4x4<f32>, MAX_CASCADES>,
+  cascadeSplits: vec4<f32>,
+  lightDir: vec4<f32>,
+  cascadeCount: vec4<f32>,
+};
+
+@group(0) @binding(11) var<uniform> csmUniforms: CSMUniforms;
+@group(0) @binding(12) var csmShadowMap: texture_depth_2d_array;
+@group(0) @binding(13) var csmSampler: sampler_comparison;
+
+fn selectCascade(viewDepth: f32) -> u32 {
+  let count = u32(csmUniforms.cascadeCount.x);
+  for (var i = 0u; i < MAX_CASCADES; i++) {
+    if (i >= count) { break; }
+    if (viewDepth <= csmUniforms.cascadeSplits[i]) {
+      return i;
+    }
+  }
+  return count - 1u;
+}
+
+fn csmShadowFactor(worldPos: vec3<f32>, viewDepth: f32, N: vec3<f32>) -> f32 {
+  let cascadeIdx = selectCascade(viewDepth);
+  let lightViewProj = csmUniforms.cascades[cascadeIdx];
+  let shadowCoord = lightViewProj * vec4<f32>(worldPos, 1.0);
+  let shadowUV = shadowCoord.xy / shadowCoord.w * 0.5 + 0.5;
+  let shadowDepth = shadowCoord.z / shadowCoord.w;
+
+  if (shadowUV.x < 0.0 || shadowUV.x > 1.0 || shadowUV.y < 0.0 || shadowUV.y > 1.0) {
+    return 1.0;
+  }
+
+  let bias = csmUniforms.cascadeCount.y;
+  let normalBias = csmUniforms.cascadeCount.z;
+  let lightDir = normalize(csmUniforms.lightDir.xyz);
+  let slopeScale = clamp(1.0 - dot(N, lightDir), 0.0, 1.0);
+  let adjustedBias = bias + normalBias * slopeScale;
+
+  // 3x3 PCF
+  var shadow = 0.0;
+  let texelSize = 1.0 / f32(textureDimensions(csmShadowMap, 0).x);
+  for (var y = -1; y <= 1; y++) {
+    for (var x = -1; x <= 1; x++) {
+      let offset = vec2<f32>(f32(x), f32(y)) * texelSize;
+      shadow += textureSampleCompareLevel(
+        csmShadowMap, csmSampler,
+        shadowUV + offset, cascadeIdx,
+        shadowDepth - adjustedBias,
+      );
+    }
+  }
+  shadow = shadow / 9.0;
+
+  // Cascade blend
+  let blendDist = csmUniforms.cascadeCount.w;
+  let cascadeFar = csmUniforms.cascadeSplits[cascadeIdx];
+  let distToEdge = cascadeFar - viewDepth;
+  if (distToEdge < blendDist && cascadeIdx < count - 1u) {
+    let blendFactor = distToEdge / blendDist;
+    let nextIdx = cascadeIdx + 1u;
+    let nextVP = csmUniforms.cascades[nextIdx];
+    let nextCoord = nextVP * vec4<f32>(worldPos, 1.0);
+    let nextUV = nextCoord.xy / nextCoord.w * 0.5 + 0.5;
+    let nextDepth = nextCoord.z / nextCoord.w;
+    if (nextUV.x >= 0.0 && nextUV.x <= 1.0 && nextUV.y >= 0.0 && nextUV.y <= 1.0) {
+      var nextShadow = 0.0;
+      for (var y2 = -1; y2 <= 1; y2++) {
+        for (var x2 = -1; x2 <= 1; x2++) {
+          let offset2 = vec2<f32>(f32(x2), f32(y2)) * texelSize;
+          nextShadow += textureSampleCompareLevel(
+            csmShadowMap, csmSampler,
+            nextUV + offset2, nextIdx,
+            nextDepth - adjustedBias,
+          );
+        }
+      }
+      nextShadow = nextShadow / 9.0;
+      shadow = mix(nextShadow, shadow, blendFactor);
+    }
+  }
+
+  return shadow;
+}
+`;
+
+export const POINT_SHADOW_SHADER_CHUNK = /* wgsl */ `
+const MAX_POINT_LIGHT_SHADOWS = 4u;
+
+@group(0) @binding(14) var pointShadowMaps: array<texture_depth_cube, MAX_POINT_LIGHT_SHADOWS>;
+@group(0) @binding(15) var pointShadowSampler: sampler_comparison;
+
+fn pointLightShadow(worldPos: vec3<f32>, lightPos: vec3<f32>, lightIndex: u32, farPlane: f32) -> f32 {
+  let toLight = worldPos - lightPos;
+  let dist = length(toLight);
+  let dir = toLight / max(dist, 0.001);
+  let normalizedDepth = dist / farPlane;
+  let bias = 0.01;
+  return textureSampleCompareLevel(
+    pointShadowMaps[lightIndex], pointShadowSampler,
+    dir, normalizedDepth - bias,
+  );
+}
+`;
+
+export const SPOT_SHADOW_SHADER_CHUNK = /* wgsl */ `
+const MAX_SPOT_LIGHT_SHADOWS = 4u;
+
+struct SpotShadowData {
+  viewProjs: array<mat4x4<f32>, MAX_SPOT_LIGHT_SHADOWS>,
+};
+
+@group(0) @binding(16) var<uniform> spotShadowData: SpotShadowData;
+@group(0) @binding(17) var spotShadowMaps: texture_depth_2d_array;
+@group(0) @binding(18) var spotShadowSampler: sampler_comparison;
+
+fn spotLightShadow(worldPos: vec3<f32>, lightIndex: u32) -> f32 {
+  let vp = spotShadowData.viewProjs[lightIndex];
+  let shadowCoord = vp * vec4<f32>(worldPos, 1.0);
+  let shadowUV = shadowCoord.xy / shadowCoord.w * 0.5 + 0.5;
+  let shadowDepth = shadowCoord.z / shadowCoord.w;
+  if (shadowUV.x < 0.0 || shadowUV.x > 1.0 || shadowUV.y < 0.0 || shadowUV.y > 1.0) {
+    return 1.0;
+  }
+  let bias = 0.001;
+  return textureSampleCompareLevel(
+    spotShadowMaps, spotShadowSampler,
+    shadowUV, lightIndex,
+    shadowDepth - bias,
+  );
+}
+`;

package/core/src/render/skybox.ts

@@ -0,0 +1,146 @@
+import { mat4 } from "wgpu-matrix";
+import { createValidatedShaderModule } from "./shader-validator";
+
+const SKYBOX_SHADER = /* wgsl */ `
+struct CameraUniforms {
+  viewProj: mat4x4<f32>,
+  invViewProj: mat4x4<f32>,
+  position: vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> camera: CameraUniforms;
+@group(0) @binding(1) var envMap: texture_cube<f32>;
+@group(0) @binding(2) var envSampler: sampler;
+
+struct VertexOutput {
+  @builtin(position) clipPosition: vec4<f32>,
+  @location(0) direction: vec3<f32>,
+};
+
+@vertex
+fn vs_main(@builtin(vertex_index) vid: u32) -> VertexOutput {
+  // Full-screen triangle
+  var positions = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>( 3.0, -1.0),
+    vec2<f32>(-1.0,  3.0),
+  );
+
+  let pos = positions[vid];
+  var output: VertexOutput;
+  output.clipPosition = vec4<f32>(pos, 1.0, 1.0);
+  // Reconstruct direction from clip position using inverse view-proj
+  let farPoint = camera.invViewProj * vec4<f32>(pos, 1.0, 1.0);
+  let nearPoint = camera.invViewProj * vec4<f32>(pos, -1.0, 1.0);
+  let dir = normalize(farPoint.xyz / farPoint.w - nearPoint.xyz / nearPoint.w);
+  output.direction = dir;
+  return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+  let color = textureSample(envMap, envSampler, normalize(input.direction));
+  return vec4<f32>(color.rgb, 1.0);
+}
+`;
+
+export interface SkyboxOptions {
+  format?: GPUTextureFormat;
+  depthFormat?: GPUTextureFormat;
+}
+
+export class SkyboxRenderer {
+  private device: GPUDevice;
+  private pipeline: GPURenderPipeline | null = null;
+  private bindGroupLayout: GPUBindGroupLayout | null = null;
+  private cameraBuffer: GPUBuffer | null = null;
+  private sampler: GPUSampler;
+  private format: GPUTextureFormat;
+  private depthFormat: GPUTextureFormat;
+
+  constructor(device: GPUDevice, options?: SkyboxOptions) {
+    this.device = device;
+    this.format = options?.format ?? "bgra8unorm";
+    this.depthFormat = options?.depthFormat ?? "depth32float";
+    this.sampler = device.createSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      mipmapFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+    });
+  }
+
+  private ensurePipeline(): void {
+    if (this.pipeline) return;
+
+    this.bindGroupLayout = this.device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "cube" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+      ],
+    });
+
+    const shaderModule = createValidatedShaderModule(this.device, { code: SKYBOX_SHADER, label: "SkyboxPass" });
+
+    this.pipeline = this.device.createRenderPipeline({
+      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }),
+      vertex: { module: shaderModule, entryPoint: "vs_main" },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fs_main",
+        targets: [{ format: this.format }],
+      },
+      primitive: { topology: "triangle-list" },
+      depthStencil: {
+        format: this.depthFormat,
+        depthWriteEnabled: false,
+        depthCompare: "less-equal",
+      },
+    });
+
+    this.cameraBuffer = this.device.createBuffer({
+      size: 144, // mat4x4 (64) + mat4x4 (64) + vec4 (16)
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  render(
+    passEncoder: GPURenderPassEncoder,
+    cubemap: GPUTexture,
+    viewProj: Float32Array,
+    cameraPos: [number, number, number],
+  ): void {
+    this.ensurePipeline();
+
+    // Update camera buffer
+    const camData = new Float32Array(36);
+    camData.set(viewProj, 0);
+    camData.set(mat4.invert(viewProj) as Float32Array, 16);
+    camData[32] = cameraPos[0];
+    camData[33] = cameraPos[1];
+    camData[34] = cameraPos[2];
+    camData[35] = 0;
+    this.device.queue.writeBuffer(this.cameraBuffer!, 0, camData);
+
+    const cubemapView = cubemap.createView({ dimension: "cube" });
+
+    const bindGroup = this.device.createBindGroup({
+      layout: this.bindGroupLayout!,
+      entries: [
+        { binding: 0, resource: { buffer: this.cameraBuffer! } },
+        { binding: 1, resource: cubemapView },
+        { binding: 2, resource: this.sampler },
+      ],
+    });
+
+    passEncoder.setPipeline(this.pipeline!);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(3, 1, 0, 0);
+  }
+
+  destroy(): void {
+    this.cameraBuffer?.destroy();
+  }
+}

package/core/src/render/splitscreen.ts

@@ -0,0 +1,85 @@
+// ============================================================================
+// Split-Screen Layout — viewport computation for 1-4 players
+// ============================================================================
+
+export type SplitscreenLayoutType =
+  | "1p"
+  | "2p-horizontal"
+  | "2p-vertical"
+  | "3p-top-wide"
+  | "3p-bottom-wide"
+  | "4p-corners";
+
+export interface ViewportSlot {
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function computeViewports(layout: SplitscreenLayoutType, screenW: number, screenH: number): ViewportSlot[] {
+  switch (layout) {
+    case "1p":
+      return [{ index: 0, x: 0, y: 0, width: screenW, height: screenH }];
+
+    case "2p-horizontal":
+      return [
+        { index: 0, x: 0, y: 0, width: screenW / 2, height: screenH },
+        { index: 1, x: screenW / 2, y: 0, width: screenW / 2, height: screenH },
+      ];
+
+    case "2p-vertical":
+      return [
+        { index: 0, x: 0, y: 0, width: screenW, height: screenH / 2 },
+        { index: 1, x: 0, y: screenH / 2, width: screenW, height: screenH / 2 },
+      ];
+
+    case "3p-top-wide":
+      return [
+        { index: 0, x: 0, y: 0, width: screenW, height: screenH / 2 },
+        { index: 1, x: 0, y: screenH / 2, width: screenW / 2, height: screenH / 2 },
+        { index: 2, x: screenW / 2, y: screenH / 2, width: screenW / 2, height: screenH / 2 },
+      ];
+
+    case "3p-bottom-wide":
+      return [
+        { index: 0, x: 0, y: 0, width: screenW / 2, height: screenH / 2 },
+        { index: 1, x: screenW / 2, y: 0, width: screenW / 2, height: screenH / 2 },
+        { index: 2, x: 0, y: screenH / 2, width: screenW, height: screenH / 2 },
+      ];
+
+    case "4p-corners":
+      return [
+        { index: 0, x: 0, y: 0, width: screenW / 2, height: screenH / 2 },
+        { index: 1, x: screenW / 2, y: 0, width: screenW / 2, height: screenH / 2 },
+        { index: 2, x: 0, y: screenH / 2, width: screenW / 2, height: screenH / 2 },
+        { index: 3, x: screenW / 2, y: screenH / 2, width: screenW / 2, height: screenH / 2 },
+      ];
+
+    default:
+      return [{ index: 0, x: 0, y: 0, width: screenW, height: screenH }];
+  }
+}
+
+export function getLayoutForPlayerCount(count: number): SplitscreenLayoutType {
+  switch (count) {
+    case 1: return "1p";
+    case 2: return "2p-horizontal";
+    case 3: return "3p-top-wide";
+    case 4: return "4p-corners";
+    default: return "1p";
+  }
+}
+
+export function getPlayerCountForLayout(layout: SplitscreenLayoutType): number {
+  switch (layout) {
+    case "1p": return 1;
+    case "2p-horizontal":
+    case "2p-vertical": return 2;
+    case "3p-top-wide":
+    case "3p-bottom-wide": return 3;
+    case "4p-corners": return 4;
+    default: return 1;
+  }
+}

package/core/src/render/surface.ts

@@ -0,0 +1,78 @@
+import { createLogger } from "../util/logger";
+
+const log = createLogger();
+
+export interface SurfaceConfig {
+  format: GPUTextureFormat;
+  width: number;
+  height: number;
+  usage: GPUTextureUsageFlags;
+  alphaMode: GPUCanvasAlphaMode;
+  viewFormats: GPUTextureFormat[];
+}
+
+export class SurfaceManager {
+  private device: GPUDevice;
+  private context: GPUCanvasContext | null = null;
+  private config: SurfaceConfig | null = null;
+  private canvas: HTMLCanvasElement | OffscreenCanvas | null = null;
+
+  constructor(device: GPUDevice) {
+    this.device = device;
+  }
+
+  configure(canvas: HTMLCanvasElement | OffscreenCanvas, config: Partial<SurfaceConfig> = {}): void {
+    this.canvas = canvas;
+    this.context = canvas.getContext("webgpu") as GPUCanvasContext;
+    if (!this.context) {
+      log.error("DownDraft", "Failed to get WebGPU context from canvas");
+      return;
+    }
+
+    const format = config.format ?? (navigator.gpu ? navigator.gpu.getPreferredCanvasFormat() : "bgra8unorm");
+    this.config = {
+      format,
+      width: config.width ?? canvas.width,
+      height: config.height ?? canvas.height,
+      usage: config.usage ?? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+      alphaMode: config.alphaMode ?? "opaque",
+      viewFormats: config.viewFormats ?? [],
+    };
+
+    this.context.configure({
+      device: this.device,
+      format: this.config.format,
+      usage: this.config.usage,
+      alphaMode: this.config.alphaMode,
+      viewFormats: this.config.viewFormats,
+    });
+  }
+
+  getCurrentTexture(): GPUTexture | null {
+    if (!this.context) return null;
+    return this.context.getCurrentTexture();
+  }
+
+  reconfigure(width: number, height: number): void {
+    if (!this.context || !this.config || !this.canvas) return;
+    this.config.width = width;
+    this.config.height = height;
+    if (this.canvas.width !== width) this.canvas.width = width;
+    if (this.canvas.height !== height) this.canvas.height = height;
+    this.context.configure({
+      device: this.device,
+      format: this.config.format,
+      usage: this.config.usage,
+      alphaMode: this.config.alphaMode,
+      viewFormats: this.config.viewFormats,
+    });
+  }
+
+  getFormat(): GPUTextureFormat | null {
+    return this.config?.format ?? null;
+  }
+
+  getConfig(): SurfaceConfig | null {
+    return this.config;
+  }
+}

package/core/src/render/tonemap.ts

@@ -0,0 +1,180 @@
+export enum ToneMappingOperator {
+  None = "none",
+  ACES = "aces",
+  ACESFilmic = "aces-filmic",
+  Reinhard = "reinhard",
+  Reinhard2 = "reinhard2",
+  Uncharted2 = "uncharted2",
+  Filmic = "filmic",
+  AgX = "agx",
+  Uchimura = "uchimura",
+}
+
+export interface ToneMappingSettings {
+  operator: ToneMappingOperator;
+  exposure: number;
+  gamma: number;
+  whitePoint: number;
+}
+
+export const DEFAULT_TONE_MAPPING_SETTINGS: ToneMappingSettings = {
+  operator: ToneMappingOperator.ACES,
+  exposure: 1.0,
+  gamma: 2.2,
+  whitePoint: 11.2,
+};
+
+export const TONE_MAPPING_SHADER_CHUNK = /* wgsl */ `
+enum ToneMappingOp {
+  None = 0,
+  ACES = 1,
+  ACESFilmic = 2,
+  Reinhard = 3,
+  Reinhard2 = 4,
+  Uncharted2 = 5,
+  Filmic = 6,
+  AgX = 7,
+  Uchimura = 8,
+};
+
+struct ToneMappingUniforms {
+  operator: u32,
+  exposure: f32,
+  gamma: f32,
+  whitePoint: f32,
+};
+
+fn tonemapNone(color: vec3<f32>) -> vec3<f32> {
+  return clamp(color, vec3<f32>(0.0), vec3<f32>(1.0));
+}
+
+fn tonemapACES(color: vec3<f32>) -> vec3<f32> {
+  let a = 2.51; let b = 0.03; let c = 2.43; let d = 0.59; let e = 0.14;
+  return clamp((color * (a * color + b)) / (color * (c * color + d) + e), vec3<f32>(0.0), vec3<f32>(1.0));
+}
+
+fn tonemapACESFilmic(color: vec3<f32>) -> vec3<f32> {
+  let a = 0.15; let b = 0.50; let c = 0.10; let d = 0.20; let e = 0.02; let f = 0.30;
+  return (color * (color * a + b * c + d * e)) / (color * (color * a + b) + d * f) - e / f;
+}
+
+fn tonemapReinhard(color: vec3<f32>) -> vec3<f32> {
+  return color / (color + 1.0);
+}
+
+fn tonemapReinhard2(color: vec3<f32>, whitePoint: f32) -> vec3<f32> {
+  let lum = dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
+  let tonemappedLum = lum * (1.0 + lum / (whitePoint * whitePoint)) / (1.0 + lum);
+  return color * (tonemappedLum / max(lum, 0.001));
+}
+
+fn tonemapUncharted2(color: vec3<f32>, whitePoint: f32) -> vec3<f32> {
+  let A = 0.15; let B = 0.50; let C = 0.10; let D = 0.20; let E = 0.02; let F = 0.30;
+  fn curve(x: vec3<f32>) -> vec3<f32> {
+    return ((x * (A * x + C * B) + D * E) / (x * (A * x + B) + D * F)) - E / F;
+  }
+  return curve(color) / curve(vec3<f32>(whitePoint));
+}
+
+fn tonemapFilmic(color: vec3<f32>) -> vec3<f32> {
+  let X = max(color.r - 0.0024, 0.0);
+  let Y = max(color.g - 0.0024, 0.0);
+  let Z = max(color.b - 0.0024, 0.0);
+  let r = (X * (6.2 * X + 0.5)) / (X * (6.2 * X + 1.7) + 0.06);
+  let g = (Y * (6.2 * Y + 0.5)) / (Y * (6.2 * Y + 1.7) + 0.06);
+  let b = (Z * (6.2 * Z + 0.5)) / (Z * (6.2 * Z + 1.7) + 0.06);
+  return vec3<f32>(r, g, b);
+}
+
+fn tonemapAgX(color: vec3<f32>) -> vec3<f32> {
+  let MinEv = -12.47393;
+  let MaxEv = 4.026069;
+  let x = clamp(log2(color.r), MinEv, MaxEv);
+  let y = clamp(log2(color.g), MinEv, MaxEv);
+  let z = clamp(log2(color.b), MinEv, MaxEv);
+  let r = (x - MinEv) / (MaxEv - MinEv);
+  let g = (y - MinEv) / (MaxEv - MinEv);
+  let b = (z - MinEv) / (MaxEv - MinEv);
+  let r2 = pow(r, 2.2);
+  let g2 = pow(g, 2.2);
+  let b2 = pow(b, 2.2);
+  return vec3<f32>(r2, g2, b2);
+}
+
+fn tonemapUchimura(color: vec3<f32>) -> vec3<f32> {
+  let P = 1.0; let a = 5.0; let m = 0.22; let l = 0.4; let c = 1.633; let b = 0.63;
+  fn uchimuraCurve(x: f32) -> f32 {
+    let l0 = ((P - m) * l) / a;
+    let L0 = m - m / a;
+    let L1 = m + (1.0 - m) / a;
+    let L2 = m + (1.0 - m) / a + (c + b) / c;
+    let s = (1.0 + c) * a / (P - m);
+    let S0 = m + l0;
+    let S1 = m + a * l0;
+    let S2 = m + a * (l0 + c / a);
+    let C2 = (a * P) / (P - S1);
+    let C1 = 1.0 + C2 * (S1 - S0);
+    let C0 = 1.0 + C2 * (S0 - 0.0);
+    if (x < S0) { return C0 * x; }
+    if (x < S1) { return C1 * x - C2 * S0; }
+    if (x < S2) { return a * x + b; }
+    return C2 * x - C2 * S2;
+  }
+  return vec3<f32>(
+    uchimuraCurve(color.r),
+    uchimuraCurve(color.g),
+    uchimuraCurve(color.b),
+  );
+}
+
+fn applyToneMapping(color: vec3<f32>, op: u32, exposure: f32, whitePoint: f32) -> vec3<f32> {
+  let exposed = color * exposure;
+  switch (op) {
+    case 0u: { return tonemapNone(exposed); }
+    case 1u: { return tonemapACES(exposed); }
+    case 2u: { return tonemapACESFilmic(exposed); }
+    case 3u: { return tonemapReinhard(exposed); }
+    case 4u: { return tonemapReinhard2(exposed, whitePoint); }
+    case 5u: { return tonemapUncharted2(exposed, whitePoint); }
+    case 6u: { return tonemapFilmic(exposed); }
+    case 7u: { return tonemapAgX(exposed); }
+    case 8u: { return tonemapUchimura(exposed); }
+    default: { return tonemapACES(exposed); }
+  }
+}
+
+fn linearToSRGB(color: vec3<f32>) -> vec3<f32> {
+  return select(
+    color * 12.92,
+    pow(color, vec3<f32>(1.0 / 2.4)) * 1.055 - 0.055,
+    color >= vec3<f32>(0.0031308),
+  );
+}
+
+fn srgbToLinear(color: vec3<f32>) -> vec3<f32> {
+  return select(
+    color / 12.92,
+    pow((color + 0.055) / 1.055, vec3<f32>(2.4)),
+    color >= vec3<f32>(0.04045),
+  );
+}
+
+fn linearToDisplayP3(color: vec3<f32>) -> vec3<f32> {
+  return linearToSRGB(color);
+}
+`;
+
+export function getToneMappingOperatorIndex(op: ToneMappingOperator): number {
+  const map: Record<ToneMappingOperator, number> = {
+    [ToneMappingOperator.None]: 0,
+    [ToneMappingOperator.ACES]: 1,
+    [ToneMappingOperator.ACESFilmic]: 2,
+    [ToneMappingOperator.Reinhard]: 3,
+    [ToneMappingOperator.Reinhard2]: 4,
+    [ToneMappingOperator.Uncharted2]: 5,
+    [ToneMappingOperator.Filmic]: 6,
+    [ToneMappingOperator.AgX]: 7,
+    [ToneMappingOperator.Uchimura]: 8,
+  };
+  return map[op] ?? 1;
+}