mach/examples/gkurve/frag.wgsl
Stephen Gutekanst ff5636c6f6 examples/gkurve: adjust frag shader to show barycentric coordinates
Signed-off-by: Stephen Gutekanst <stephen@hexops.com>
2022-05-21 12:40:29 -07:00

51 lines
1.6 KiB
WebGPU Shading Language
Executable file

struct FragUniform {
type_: u32,
padding: vec3<f32>,
}
@binding(1) @group(0) var<storage> ubos: array<FragUniform>;
@stage(fragment) fn main(
@location(0) uv: vec2<f32>,
@interpolate(linear) @location(1) bary: vec2<f32>,
@interpolate(flat) @location(2) triangle_index: u32,
) -> @location(0) vec4<f32> {
// Example 1: Visualize barycentric coordinates:
// return vec4<f32>(bary.x, bary.y, 0.0, 1.0);
// return vec4<f32>(0.0, bary.x, 0.0, 1.0); // [1.0 (bottom-left vertex), 0.0 (bottom-right vertex)]
// return vec4<f32>(0.0, bary.y, 0.0, 1.0); // [1.0 (bottom-left vertex), 1.0 (top-right face)]
// Example 2: Render gkurve primitives
var inversion = -1.0;
if(ubos[triangle_index].type_ == 1u) {
// Solid triangle
return vec4<f32>(0.0, 1.0, 0.0, 1.0);
} else if(ubos[triangle_index].type_ == 2u) {
// Concave (inverted quadratic bezier curve)
inversion = -1.0;
} else {
// Convex (quadratic bezier curve)
inversion = 1.0;
}
// Gradients
let px = dpdx(bary.xy);
let py = dpdy(bary.xy);
// Chain rule
let fx = (2.0 * bary.x) * px.x - px.y;
let fy = (2.0 * bary.x) * py.x - py.y;
// Signed distance
var dist = (bary.x * bary.x - bary.y) / sqrt(fx * fx + fy * fy);
dist *= inversion;
dist /= 300.0;
// Border rendering.
if (dist > 0.0 && dist <= 0.1) { return vec4<f32>(1.0, 0.0, 0.0, 1.0); }
if (dist > 0.2 && dist <= 0.3) { return vec4<f32>(0.0, 0.0, 1.0, 1.0); }
// Fill color
if (dist < 0.0) { discard; }
return vec4<f32>(0.0, 1.0, 0.0, 1.0);
}