// Vertex shader bindings struct VertexOutput { @location(0) tex_coord: vec2, @location(1) color: vec4, @builtin(position) position: vec4, }; struct Locals { screen_size: vec2, // Uniform buffers need to be at least 16 bytes in WebGL. // See https://github.com/gfx-rs/wgpu/issues/2072 _padding: vec2, }; @group(0) @binding(0) var r_locals: Locals; // 0-1 from 0-255 fn linear_from_srgb(srgb: vec3) -> vec3 { let cutoff = srgb < vec3(10.31475); let lower = srgb / vec3(3294.6); let higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4)); return select(higher, lower, cutoff); } // [u8; 4] SRGB as u32 -> [r, g, b, a] fn unpack_color(color: u32) -> vec4 { return vec4( f32(color & 255u), f32((color >> 8u) & 255u), f32((color >> 16u) & 255u), f32((color >> 24u) & 255u), ); } fn position_from_screen(screen_pos: vec2) -> vec4 { return vec4( 2.0 * screen_pos.x / r_locals.screen_size.x - 1.0, 1.0 - 2.0 * screen_pos.y / r_locals.screen_size.y, 0.0, 1.0, ); } @vertex fn vs_main( @location(0) a_pos: vec2, @location(1) a_tex_coord: vec2, @location(2) a_color: u32, ) -> VertexOutput { var out: VertexOutput; out.tex_coord = a_tex_coord; let color = unpack_color(a_color); out.color = vec4(linear_from_srgb(color.rgb), color.a / 255.0); out.position = position_from_screen(a_pos); return out; } @vertex fn vs_conv_main( @location(0) a_pos: vec2, @location(1) a_tex_coord: vec2, @location(2) a_color: u32, ) -> VertexOutput { var out: VertexOutput; out.tex_coord = a_tex_coord; let color = unpack_color(a_color); out.color = vec4(color.rgba / 255.0); out.position = position_from_screen(a_pos); return out; } // Fragment shader bindings @group(1) @binding(0) var r_tex_color: texture_2d; @group(1) @binding(1) var r_tex_sampler: sampler; @fragment fn fs_main(in: VertexOutput) -> @location(0) vec4 { return in.color * textureSample(r_tex_color, r_tex_sampler, in.tex_coord); }