createBlitPipelineAndBindings = (device, screen) => { const sampler = device.createSampler({ addressModeU: deviceAPI.AddressMode.CLAMP_TO_EDGE, addressModeV: deviceAPI.AddressMode.CLAMP_TO_EDGE, minFilter: deviceAPI.FilterMode.BILINEAR, magFilter: deviceAPI.FilterMode.BILINEAR, mipmapFilter: deviceAPI.MipmapFilterMode.LINEAR }); const renderProgram = device.createProgram({ vertex: { entryPoint: "fullscreen_vertex_shader", wgsl: ` struct FullscreenVertexOutput { @builtin(position) position: vec4, @location(0) uv: vec2, }; // This vertex shader produces the following, when drawn using indices 0..3: // // 1 | 0-----x.....2 // 0 | | s | . ´ // -1 | x_____x´ // -2 | : .´ // -3 | 1´ // +--------------- // -1 0 1 2 3 // // The axes are clip-space x and y. The region marked s is the visible region. // The digits in the corners of the right-angled triangle are the vertex // indices. // // The top-left has UV 0,0, the bottom-left has 0,2, and the top-right has 2,0. // This means that the UV gets interpolated to 1,1 at the bottom-right corner // of the clip-space rectangle that is at 1,-1 in clip space. @vertex fn fullscreen_vertex_shader(@builtin(vertex_index) vertex_index: u32) -> FullscreenVertexOutput { // See the explanation above for how this works let uv = vec2(f32(vertex_index >> 1u), f32(vertex_index & 1u)) * 2.0; let clip_position = vec4(uv * vec2(2.0, -2.0) + vec2(-1.0, 1.0), 0.0, 1.0); return FullscreenVertexOutput(clip_position, uv); } ` }, fragment: { entryPoint: "fs_main_linear_to_srgb", wgsl: ` struct FullscreenVertexOutput { @builtin(position) position: vec4, @location(0) uv: vec2, }; @group(1) @binding(0) var in_texture : texture_2d; @group(1) @binding(1) var in_sampler : sampler; fn srgb_to_linear(rgb: vec3) -> vec3 { return select( pow((rgb + 0.055) * (1.0 / 1.055), vec3(2.4)), rgb * (1.0/12.92), rgb <= vec3(0.04045)); } fn linear_to_srgb(rgb: vec3) -> vec3 { return select( 1.055 * pow(rgb, vec3(1.0 / 2.4)) - 0.055, rgb * 12.92, rgb <= vec3(0.0031308)); } @fragment fn fs_main(in: FullscreenVertexOutput) -> @location(0) vec4 { return textureSample(in_texture, in_sampler, in.uv); } @fragment fn fs_main_linear_to_srgb(in: FullscreenVertexOutput) -> @location(0) vec4 { let rgba = textureSample(in_texture, in_sampler, in.uv); return vec4(linear_to_srgb(rgba.rgb), rgba.a); } @fragment fn fs_main_rgbe_to_linear(in: FullscreenVertexOutput) -> @location(0) vec4 { let rgbe = textureSample(in_texture, in_sampler, in.uv); return vec4(rgbe.rgb * exp2(rgbe.a * 255. - 128.), 1.); } ` } }); const renderPipeline = device.createRenderPipeline({ inputLayout: null, program: renderProgram, colorAttachmentFormats: [deviceAPI.Format.U8_RGBA_RT] }); const showResultBindings = device.createBindings({ pipeline: renderPipeline, samplerBindings: [ { texture: screen, sampler } ] }); return { pipeline: renderPipeline, bindings: showResultBindings }; }