raw-webgpu 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # raw-webgpu
 
-Load camera RAW, DNG and TIFF files into WebGPU textures. Develop into linear Rec.2020 `rgba16float`, with adjustable white balance and exposure.
+Load camera RAW, DNG and TIFF files into WebGPU textures. Develop into linear Rec.2020 or display sRGB, with adjustable white balance and exposure.
 
 LibRaw, Adobe DNG SDK and libjxl decode files in a WASM worker. Simple TIFF strips use original file bytes or browser Deflate; complex layouts retain the SDK fallback. WebGPU handles supported demosaic and color processing. Supply your own `GPUDevice`; no rendering framework or runtime dependencies are required.
 
@@ -15,7 +15,7 @@ LibRaw, Adobe DNG SDK and libjxl decode files in a WASM worker. Simple TIFF stri
 ## Installation
 
 ```sh
-npm install --save-exact raw-webgpu@0.1.0
+npm install --save-exact raw-webgpu@0.1.1
 ```
 
 WASM, workers and types are included; consumers do not compile C++. Use a WebGPU browser with WASM SIMD/exception support and a bundler that handles worker/WASM asset URLs, such as Vite. TypeScript 5.9 and newer are tested; with TypeScript 5.9, install `@webgpu/types` and include it in `compilerOptions.types`.
@@ -45,6 +45,10 @@ destination.destroy();
 decoder.dispose();
 ```
 
+For direct display, create a pass with `{ outputColorSpace: "srgb", format }`, where `format` matches your sRGB canvas configuration, usually `navigator.gpu.getPreferredCanvasFormat()`. Render to `context.getCurrentTexture()` with the canvas dimensions set to `source.size`. No app shader is needed.
+
+The default is `{ outputColorSpace: "linear-rec2020", format: "rgba16float" }`. Supported formats are `rgba16float`, `rgba8unorm` and `bgra8unorm`. sRGB output converts primaries, clips to [0, 1] and applies the sRGB transfer function on GPU; it does not add a photographic tone curve. Do not apply sRGB encoding again.
+
 For TIFF:
 
 ```ts
@@ -62,11 +66,15 @@ Use separate passes for independent previews or exports. If passing an external
 For file export, see the [Bun PNG/JPEG/BMP conversion example](docs/conversion.md).
 
 
+## Minimal website
+
+`web/` is a fullscreen RAW viewer with no app shader or rendering framework. It currently uses a local link: build the library and run `bun link` at the repository root, then `cd web && bun install && bun run dev`. After publishing the new API, pin that npm version in `web/package.json` for standalone deployment. Build with `bun run build` and serve `web/dist/` over HTTPS. Files stay in the browser. With the dev server running, `bun run test:web` from the repository root checks loading through Vite.
+
 ## API contract and support
 
 The supported browser baseline is Chromium with WebGPU. Verified environments are Chromium 151 on macOS with Apple M4 Pro and Linux CI with software rendering, plus Chrome 153 on macOS. Safari, Firefox, mobile browsers and other physical GPUs have not been validated. Tests simulate lower texture/buffer limits; they do not establish a device memory budget. Bun is an additional tested runtime, not a CPU fallback.
 
-- Developed RAW and decoded TIFF output is linear Rec.2020/D65 `rgba16float`, with no display tone curve. HDR values can exceed 1. TIFF alpha is straight. Camera JPEG previews apply their own rendering and are not pixel references for this output.
+- Default RAW and decoded TIFF output is linear Rec.2020/D65 `rgba16float`, with no display tone curve. HDR values can exceed 1. RAW passes can instead output encoded sRGB for display. TIFF alpha is straight. Camera JPEG previews apply their own rendering and are not pixel references for this output.
 - `source.texture` contains sensor or camera-RGB samples, not developed output. Read its format and metadata; do not assume every RAW is a one-channel mosaic. `source.size` is oriented output size; `metadata.size` is the unrotated sample size.
 - Calibration has three RGB gains and a nine-value column-major matrix. Development applies gains before the camera-to-working-space matrix; exposure is in stops. Independent passes can use different calibration without changing the source.
 - A decoder owns its sources, each source owns its passes and worker, and the caller owns destination textures. Disposal is idempotent. Device loss closes the decoder; create another decoder with a new device. Pending loads and calibration requests reject when their owner closes.

package/dist/develop/gpu.d.ts

@@ -1,8 +1,9 @@
-import type { DevelopOptions, RawPixels } from "../types";
+import type { DevelopOptions, DevelopPassOptions, RawPixels } from "../types";
 export declare function createPipeline(device: GPUDevice): Promise<{
     sensor: GPURenderPipeline;
     camera: GPURenderPipeline;
     refine: GPURenderPipeline;
+    get(entryPoint: string, options: DevelopPassOptions): GPURenderPipeline;
 }>;
 /** Owns the sensor texture and immutable uniforms; each pass owns its calibration buffer. */
 export declare function createGpuSource(device: GPUDevice, pixels: RawPixels, pipeline: Awaited<ReturnType<typeof createPipeline>>): {
@@ -20,7 +21,7 @@ export declare function createGpuSource(device: GPUDevice, pixels: RawPixels, pi
         whiteBalanceOrigin?: "as-shot" | "daylight";
     };
     size: [number, number];
-    createDevelopPass(): {
+    createDevelopPass(options?: DevelopPassOptions): {
         render(options: DevelopOptions): void;
         dispose: () => void;
     };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { LoadOptions } from "./types";
-export type { Calibration, DevelopOptions, LoadOptions, RawMetadata, WhiteBalance, } from "./types";
+export type { Calibration, DevelopOptions, DevelopPassOptions, LoadOptions, RawMetadata, WhiteBalance, } from "./types";
 /** Reuses a pipeline on the consumer's device. Each load owns an independent worker and source. */
 export declare function createRawDecoder(device: GPUDevice): {
     load(file: Blob, { signal }?: LoadOptions): Promise<{
@@ -17,7 +17,7 @@ export declare function createRawDecoder(device: GPUDevice): {
             whiteBalanceOrigin?: "as-shot" | "daylight";
         };
         size: [number, number];
-        createDevelopPass(): {
+        createDevelopPass(options?: import("./types").DevelopPassOptions): {
             render(options: import("./types").DevelopOptions): void;
             dispose: () => void;
         };

package/dist/index.js

@@ -90,9 +90,24 @@ function createSession(compiled2) {
 }
 
 // src/develop/develop.wgsl
-var develop_default = `// Sensor samples in, unclipped linear Rec.2020 out: normalize, white balance,
+var develop_default = `// Sensor samples in, linear Rec.2020 or display sRGB out: normalize, white balance,
 // demosaic when needed, correct vignetting, convert color and apply exposure.
 
+// Specialization removes display conversion from the default editor pipeline.
+override outputSrgb: bool = false;
+
+fn output(color: vec3f) -> vec4f {
+  if (!outputSrgb) { return vec4f(color, 1.0); }
+  let matrix = mat3x3f(
+    1.660491, -0.124550, -0.018151,
+    -0.587641, 1.132900, -0.100579,
+    -0.072850, -0.008349, 1.118730,
+  );
+  let rgb = clamp(matrix * color, vec3f(0.0), vec3f(1.0));
+  let encoded = select(1.055 * pow(rgb, vec3f(1.0 / 2.4)) - 0.055, 12.92 * rgb, rgb <= vec3f(0.0031308));
+  return vec4f(encoded, 1.0);
+}
+
 struct Sensor {
   black: vec4f,
   patternSize: vec4u,
@@ -218,7 +233,7 @@ fn demosaicPattern(p: vec2i, size: vec2i) -> vec3f {
   let k = vignette.coefficients;
   let gain = 1.0 + r2 * (k.x + r2 * (k.y + r2 * (k.z + r2 * (k.w + r2 * vignette.last))));
 
-  return vec4f(calibration.matrix * camera * gain * calibration.exposure, 1.0);
+  return output(calibration.matrix * camera * gain * calibration.exposure);
 }
 
 @group(0) @binding(5) var cameraSource: texture_2d<f32>;
@@ -261,7 +276,7 @@ fn demosaicPattern(p: vec2i, size: vec2i) -> vec3f {
 // Cached X-Trans camera RGB: subsequent edits only apply per-pixel linear transforms.
 @fragment fn fs_camera(@builtin(position) position: vec4f) -> @location(0) vec4f {
   let camera = textureLoad(cameraSource, vec2i(position.xy), 0).rgb;
-  return vec4f(calibration.matrix * (camera * calibration.gains) * calibration.exposure, 1.0);
+  return output(calibration.matrix * (camera * calibration.gains) * calibration.exposure);
 }
 
 // One triangle covering the whole destination.
@@ -274,20 +289,46 @@ fn demosaicPattern(p: vec2i, size: vec2i) -> vec3f {
 // src/develop/gpu.ts
 async function createPipeline(device) {
   const module = device.createShaderModule({ code: develop_default });
-  function create(entryPoint) {
-    return device.createRenderPipelineAsync({
+  const pipelines = new Map;
+  function descriptor(entryPoint, options = {}) {
+    const { format = "rgba16float", outputColorSpace = "linear-rec2020" } = options;
+    if (!["rgba16float", "rgba8unorm", "bgra8unorm"].includes(format)) {
+      throw Error("RAW output format must be rgba16float, rgba8unorm or bgra8unorm.");
+    }
+    return {
       layout: "auto",
       vertex: { module, entryPoint: "vs_main" },
-      fragment: { module, entryPoint, targets: [{ format: "rgba16float" }] },
+      fragment: {
+        module,
+        entryPoint,
+        targets: [{ format }],
+        constants: { outputSrgb: Number(outputColorSpace === "srgb") }
+      },
       primitive: { topology: "triangle-list" }
-    });
+    };
   }
-  const [sensor, camera, refine] = await Promise.all([
-    create("fs_main"),
-    create("fs_camera"),
-    create("fs_refine")
-  ]);
-  return { sensor, camera, refine };
+  function key(entryPoint, options = {}) {
+    return `${entryPoint}:${options.format ?? "rgba16float"}:${options.outputColorSpace ?? "linear-rec2020"}`;
+  }
+  const [sensor, camera, refine] = await Promise.all(["fs_main", "fs_camera", "fs_refine"].map(async (entryPoint) => {
+    const pipeline = await device.createRenderPipelineAsync(descriptor(entryPoint));
+    pipelines.set(key(entryPoint), pipeline);
+    return pipeline;
+  }));
+  return {
+    sensor,
+    camera,
+    refine,
+    get(entryPoint, options) {
+      const id = key(entryPoint, options);
+      let pipeline = pipelines.get(id);
+      if (!pipeline) {
+        pipeline = device.createRenderPipeline(descriptor(entryPoint, options));
+        pipelines.set(id, pipeline);
+      }
+      return pipeline;
+    }
+  };
 }
 function createUniform(device, data) {
   const buffer = device.createBuffer({
@@ -346,7 +387,7 @@ function createGpuSource(device, pixels, pipeline) {
     texture.destroy();
     cameraTexture?.destroy();
   }
-  function createPass(renderPipeline, entries) {
+  function createPass(renderPipeline, entries, format2 = "rgba16float") {
     if (closed) {
       throw Error("RAW source is closed.");
     }
@@ -372,8 +413,8 @@ function createGpuSource(device, pixels, pipeline) {
           throw Error("RAW development pass is closed.");
         }
         const { destination, calibration, exposure = 0 } = options;
-        if (destination.format !== "rgba16float" || destination.width !== size[0] || destination.height !== size[1]) {
-          throw Error("RAW destination must be an rgba16float texture matching the oriented source size.");
+        if (destination.format !== format2 || destination.width !== size[0] || destination.height !== size[1]) {
+          throw Error(`RAW destination must be a ${format2} texture matching the oriented source size.`);
         }
         calibrationData.set(calibration.gains);
         calibrationData[3] = 2 ** exposure;
@@ -477,13 +518,8 @@ function createGpuSource(device, pixels, pipeline) {
       texture,
       metadata,
       size,
-      createDevelopPass() {
-        if (cameraTexture) {
-          return createPass(pipeline.camera, [
-            { binding: 5, resource: cameraTexture.createView() }
-          ]);
-        }
-        return createPass(pipeline.sensor, sensorEntries);
+      createDevelopPass(options = {}) {
+        return createPass(pipeline.get(cameraTexture ? "fs_camera" : "fs_main", options), cameraTexture ? [{ binding: 5, resource: cameraTexture.createView() }] : sensorEntries, options.format);
       },
       dispose
     };

package/dist/types.d.ts

@@ -41,6 +41,12 @@ export type LoadOptions = {
     /** Aborting rejects a pending load with the signal's reason; a loaded source is unaffected. */
     signal?: AbortSignal;
 };
+export type DevelopPassOptions = {
+    /** Default linear-rec2020 preserves HDR. srgb converts primaries, clips to [0, 1] and encodes sRGB. */
+    outputColorSpace?: "linear-rec2020" | "srgb";
+    /** rgba16float by default; rgba8unorm and bgra8unorm also supported for direct display. */
+    format?: GPUTextureFormat;
+};
 export type DevelopOptions = {
     destination: GPUTexture;
     calibration: Calibration;

package/docs/conversion.md

@@ -7,34 +7,19 @@ import { PNG } from "pngjs";
 import { init, target } from "vgpu/node";
 import { createRawDecoder } from "raw-webgpu";
 
-function srgb(value: number) {
-  const x = Math.max(0, Math.min(1, value));
-  return Math.round(255 * (
-    x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055
-  ));
-}
-
 const gpu = await init();
 const decoder = createRawDecoder(gpu.gpu);
 try {
   const source = await decoder.load(Bun.file("photo.dng"));
-  const output = target(gpu, { size: source.size, format: "rgba16float" });
+  const output = target(gpu, { size: source.size, format: "rgba8unorm" });
   try {
-    source.createDevelopPass().render({
+    source.createDevelopPass({ outputColorSpace: "srgb", format: "rgba8unorm" }).render({
       destination: output.color.gpu,
       calibration: source.calibration,
     });
 
-    const pixels = await output.readFloats();
     const image = new PNG({ width: source.size[0], height: source.size[1] });
-    for (let i = 0; i < pixels.length; i += 4) {
-      const [r, g, b] = pixels.subarray(i, i + 3);
-      // Linear Rec.2020 → linear sRGB → encoded sRGB.
-      image.data[i] = srgb(1.660491 * r - 0.587641 * g - 0.072850 * b);
-      image.data[i + 1] = srgb(-0.124550 * r + 1.132900 * g - 0.008349 * b);
-      image.data[i + 2] = srgb(-0.018151 * r - 0.100579 * g + 1.118730 * b);
-      image.data[i + 3] = 255;
-    }
+    image.data.set(await output.read());
     await Bun.write("photo.png", PNG.sync.write(image));
   } finally {
     output.color.dispose();
@@ -49,4 +34,4 @@ For JPEG, install `jpeg-js`, import its `encode` function and replace the final
 
 Bun supplies the worker and local file-fetch APIs; Chromium is not required. Plain Node.js is not supported by this snippet. A working GPU backend is required; `vgpu/mock` cannot execute the development shader.
 
-The example uses the initial white balance, develops on GPU, then reads back and converts color on CPU. Output is 8-bit SDR/sRGB with clipping and no photographic tone curve. File encoding belongs to the consuming application; the library does not include image encoders or a conversion helper.
+The example uses the initial white balance, develops and converts to sRGB on GPU, then reads back the encoded bytes. Output is 8-bit SDR/sRGB with clipping and no photographic tone curve. File encoding belongs to the consuming application; the library does not include image encoders or a conversion helper.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "raw-webgpu",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Camera RAW, DNG and TIFF decoding with WebGPU development and interactive white balance.",
 	"type": "module",
 	"license": "MIT",
@@ -28,6 +28,7 @@
 		"test": "bun test",
 		"test:gpu": "GPU=1 bun test",
 		"test:browser": "bun tests/browser.ts",
+		"test:web": "bun tests/web.ts",
 		"build:sdk": "bun build.ts && tsc --emitDeclarationOnly",
 		"test:tiff": "bun tests/tiff.browser.ts",
 		"benchmark:tiff": "bun tests/tiff.browser.ts --benchmark",