Use srgb for offscreen canvases (#288)

* Use srgb for offscreen canvases

* Fix triangle example to be a perceptually linear gradient

* Update example screenshot

* other example also changed

* Make cube example more srgb-aware

* update cube screenshot again

* tweak triangle example colors

* update triangle screenshot

Author: almarklein

README.md

@@ -6,8 +6,8 @@
 
 A Python implementation of WebGPU - the next generation GPU API.
 
-<img width=300 src='https://user-images.githubusercontent.com/3015475/159725890-5656204b-648b-4f6f-88d5-a656d8ad00c6.png' />
-<img width=300 src='https://user-images.githubusercontent.com/3015475/159726895-2c0cbc7b-ed0a-4cd3-a90c-dd579977eaa4.png' />
+<img width=300 src='https://raw.githubusercontent.com/pygfx/wgpu-py/main/examples/screenshots/cube.png' />
+<img width=300 src='https://raw.githubusercontent.com/pygfx/wgpu-py/main/examples/screenshots/triangle_auto.png' />
 
 
 ## Introduction

examples/cube.py

@@ -79,6 +79,7 @@
 ).flatten()
 
 
+# Create texture data (srgb gray values)
 texture_data = np.array(
     [
         [50, 100, 150, 200],
@@ -181,7 +182,8 @@
 @stage(fragment)
 fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
     let value = textureSample(r_tex, r_sampler, in.texcoord).r;
-    return vec4<f32>(value, value, value, 1.0);
+    let physical_color = vec3<f32>(pow(value, 2.2));  // gamma correct
+    return vec4<f32>(physical_color.rgb, 1.0);
 }
 """
 
@@ -357,7 +359,7 @@ def draw_frame():
             {
                 "view": current_texture_view,
                 "resolve_target": None,
-                "clear_value": (0.1, 0.3, 0.2, 1),
+                "clear_value": (1, 1, 1, 1),
                 "load_op": wgpu.LoadOp.clear,
                 "store_op": wgpu.StoreOp.store,
             }

examples/screenshots/cube.png

@@ -32,19 +32,27 @@
 
 @stage(vertex)
 fn vs_main(in: VertexInput) -> VertexOutput {
-    var positions = array<vec2<f32>, 3>(vec2<f32>(0.0, -0.5), vec2<f32>(0.5, 0.5), vec2<f32>(-0.5, 0.7));
+    var positions = array<vec2<f32>, 3>(
+        vec2<f32>(0.0, -0.5),
+        vec2<f32>(0.5, 0.5),
+        vec2<f32>(-0.5, 0.75),
+    );
+    var colors = array<vec3<f32>, 3>(  // srgb colors
+        vec3<f32>(1.0, 1.0, 0.0),
+        vec3<f32>(1.0, 0.0, 1.0),
+        vec3<f32>(0.0, 1.0, 1.0),
+    );
     let index = i32(in.vertex_index);
-    let p: vec2<f32> = positions[index];
-
     var out: VertexOutput;
-    out.pos = vec4<f32>(p, 0.0, 1.0);
-    out.color = vec4<f32>(p, 0.5, 1.0);
+    out.pos = vec4<f32>(positions[index], 0.0, 1.0);
+    out.color = vec4<f32>(colors[index], 1.0);
     return out;
 }
 
 @stage(fragment)
 fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
-    return in.color;
+    let physical_color = pow(in.color.rgb, vec3<f32>(2.2));  // gamma correct
+    return vec4<f32>(physical_color, in.color.a);
 }
 """
 

examples/screenshots/triangle_auto.png

@@ -36,12 +36,12 @@ def present(self, texture_view):
     def get_preferred_format(self):
         """Get the preferred format for this canvas. This method can
         be overloaded to control the used texture format. The default
-        is "rgba8unorm" (not including srgb colormapping).
+        is "rgba8unorm-srgb".
         """
         # Use rgba because that order is more common for processing and storage.
-        # Use 8unorm because 8bit is enough and common in most cases.
-        # We DO NOT use srgb colormapping here; we return the "raw" output.
-        return "rgba8unorm"
+        # Use srgb because that's what how colors are usually expected to be.
+        # Use 8unorm because 8bit is enough (when using srgb).
+        return "rgba8unorm-srgb"
 
 
 class GPUCanvasContextOffline(base.GPUCanvasContext):
@@ -63,7 +63,7 @@ def get_preferred_format(self, adapter):
         if canvas:
             return canvas.get_preferred_format()
         else:
-            return "rgba8unorm"
+            return "rgba8unorm-srgb"
 
     def get_current_texture(self):
         self._create_new_texture_if_needed()

examples/triangle.py

@@ -111,11 +111,10 @@ def present(self, texture_view):
         return np.frombuffer(data, np.uint8).reshape(size[1], size[0], 4)
 
     def get_preferred_format(self):
-        # Use a format that maps well to PNG: rgba8norm.
-        # Use srgb for perseptive color mapping. You probably want to
-        # apply this before displaying on screen, but you do not want
-        # to duplicate it. When a PNG is shown on screen in the browser
-        # it's shown as-is (at least it was when I just tried).
+        # Use a format that maps well to PNG: rgba8norm. Use srgb for
+        # perseptive color mapping. This is the common colorspace for
+        # e.g. png and jpg images. Most tools (browsers included) will
+        # blit the png to screen as-is, and a screen wants colors in srgb.
         return "rgba8unorm-srgb"