zig/mach
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

examples/gkurve: simplify fragment shader, use barycentric coordinates

Browse source 
Signed-off-by: Stephen Gutekanst <stephen@hexops.com>
This commit is contained in:
Stephen Gutekanst 2022-05-14 12:54:53 -07:00 • committed by Stephen Gutekanst
parent 8b46f46cf8
commit af608151e9
3 changed files with 40 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

133
examples/gkurve/frag.wgsl
View file

@ -1,123 +1,36 @@
//! Ported from https://www.shadertoy.com/view/ltXSDB
// Signed Distance to a Quadratic Bezier Curve
// - Adam Simmons (@adamjsimmons) 2015
//
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
//
// Inspired by http://www.pouet.net/topic.php?which=9119
// and various shaders by iq, T21, and demofox
//
// I needed the -signed- distance to a quadratic bezier
// curve but couldn't find any examples online that
// were both fast and precise. This is my solution.
//
// v1 - Initial release
// v2 - Faster and more robust sign computation
//
struct FragUniform { struct FragUniform {
points: array<vec4<f32>, 3>,
type_: u32, type_: u32,
padding: vec3<f32>,
} }
@binding(1) @group(0) var<uniform> ubos : array<FragUniform, 3>; @binding(1) @group(0) var<uniform> ubos : array<FragUniform, 3>;
// Test if point p crosses line (a, b), returns sign of result
fn testCross(a:vec2<f32>, b:vec2<f32>, p:vec2<f32>) -> f32{
return sign((b.y - a.y) * (p.x - a.x) - (b.x - a.x) * (p.y - a.y));
}
// Determine which side we're on (using barycentric parameterization)
fn signBezier(A: vec2<f32>, B: vec2<f32>, C: vec2<f32>, p:vec2<f32>) -> f32 {
let a = C - A;
let b = B - A;
let c = p - A;
let bary = vec2(c.x * b.y - b.x * c.y, a.x * c.y - c.x * a.y) / (a.x * b.y - b.x * a.y);
let d = vec2(bary.y * 0.5, 0.0) + 1.0 - bary.x - bary.y;
return mix(sign(d.x * d.x - d.y), mix(-1.0, 1.0,
step(testCross(A, B, p) * testCross(B, C, p), 0.0)),
step((d.x - d.y), 0.0)) * testCross(A, C, B);
}
// Solve cubic equation for roots
fn solveCubic(a: f32, b: f32, c: f32) -> vec3<f32> {
let p = b - a * a / 3.0;
let p3 = p * p * p;
let q = a * (2.0 * a * a - 9.0 * b) / 27.0 + c;
let d = q * q + 4.0 * p3 / 27.0;
let offset = -a / 3.0;
if(d >= 0.0) {
let z = sqrt(d);
let x = (vec2(z, -z) - q) / 2.0;
let uv = sign(x) * pow(abs(x), vec2(1.0 / 3.0));
return vec3(offset + uv.x + uv.y);
}
let v = acos(-sqrt(-27.0 / p3) * q / 2.0) / 3.0;
let m = cos(v);
let n = sin(v) * 1.732050808;
return vec3(m + m, -n - m, n - m) * sqrt(-p / 3.0) + offset;
}
// Find the signed distance from a point to a bezier curve
fn sdBezier(A: vec2<f32>, B_: vec2<f32>,C: vec2<f32>,p: vec2<f32>) -> f32{
let B = mix(B_ + vec2(1e-4), B_, abs(sign(B_ * 2.0 - A - C)));
let a = B - A;
let b = A - B * 2.0 + C;
let c = a * 2.0;
let d = A - p;
let k = vec3(3.0 * dot(a,b), 2.0 * dot(a,a) + dot(d,b), dot(d,a)) / dot(b,b);
let t = clamp(solveCubic(k.x, k.y, k.z), vec3(0.0), vec3(1.0));
var pos = A + (c + b * t.x) * t.x;
var dis = length(pos - p);
pos = A + (c + b * t.y) * t.y;
dis = min(dis, length(pos - p));
pos = A + (c + b * t.z) * t.z;
dis = min(dis, length(pos - p));
return dis * signBezier(A, B, C, p);
}
@stage(fragment) fn main( @stage(fragment) fn main(
@location(0) uv : vec2<f32>, @location(0) uv : vec2<f32>,
@interpolate(flat) @location(1) instance_index: u32, @location(1) bary : vec3<f32>,
@interpolate(flat) @location(2) instance_index: u32,
) -> @location(0) vec4<f32> { ) -> @location(0) vec4<f32> {
var col = vec4<f32>(0.0); // Example 1: Visualize barycentric coordinates:
// return vec4<f32>(bary.x, bary.y, bary.z, 1.0);
// return vec4<f32>(0.0, bary.x, 0.0, 1.0); // bottom-left of triangle
// return vec4<f32>(0.0, bary.y, 0.0, 1.0); // bottom-right of triangle
// return vec4<f32>(0.0, bary.z, 0.0, 1.0); // top of triangle
let p = uv; // Example 2: Render gkurves
var inversion = -1.0;
// Define the control points of our curve
var A = ubos[instance_index].points[0].xy;
var B = ubos[instance_index].points[1].xy;
var C = ubos[instance_index].points[2].xy;
if(ubos[instance_index].type_ == 2u){
let tmp = A;
A.x = C.x;
A.y = B.y;
C.y = B.y;
B.y = tmp.y;
C.x = tmp.x;
}
// Render the control points
// var d = min(distance(p, A),min(distance(p, C),distance(p,B)));
// if (d < 0.04) {
// return vec4(1.0 - smoothstep(0.025, 0.034, d));
// }
// Get the signed distance to bezier curve
let d = sdBezier(A, B, C, p);
let tex_col = vec4(0.0,1.0,0.0,0.0);
// Visualize the distance field using iq's orange/blue scheme
if(ubos[instance_index].type_ == 1u) { if(ubos[instance_index].type_ == 1u) {
col = tex_col; // Solid triangle
return vec4<f32>(0.0, 1.0, 0.0, 1.0);
} else if(ubos[instance_index].type_ == 2u) {
// Concave (inverted quadratic bezier curve)
inversion = -1.0;
} else { } else {
col = sign(d) * tex_col; // Convex (inverted quadratic bezier curve)
inversion = 1.0;
} }
return col;
var dist = (-(pow(bary.z, 4.0) - bary.y * bary.x)) * inversion;
if (dist < 0.0) {
discard;
}
return vec4<f32>(0.0, 1.0, 0.0, 1.0);
} }

36
examples/gkurve/main.zig
View file

@ -12,27 +12,31 @@ const glfw = @import("glfw");
pub const Vertex = struct { pub const Vertex = struct {
pos: @Vector(4, f32), pos: @Vector(4, f32),
uv: @Vector(2, f32), uv: @Vector(2, f32),
bary: @Vector(3, f32) = .{ 0, 0, 0 },
}; };
// Simple triangle // Simple triangle
pub const vertices = [_]Vertex{ pub const vertices = [_]Vertex{
.{ .pos = .{ 0, 0.5, 0, 1 }, .uv = .{ 0.5, 1 } }, .{ .pos = .{ 0, 0.5, 0, 1 }, .uv = .{ 0.5, 1 }, .bary = .{ 0, 0, 1 } },
.{ .pos = .{ -0.5, -0.5, 0, 1 }, .uv = .{ 0, 0 } }, .{ .pos = .{ -0.5, -0.5, 0, 1 }, .uv = .{ 0, 0 }, .bary = .{ 1, 0, 0 } },
.{ .pos = .{ 0.5, -0.5, 0, 1 }, .uv = .{ 1, 0 } }, .{ .pos = .{ 0.5, -0.5, 0, 1 }, .uv = .{ 1, 0 }, .bary = .{ 0, 1, 0 } },
}; };
// TODO: Need to ask Ayush about this, ideally we have a square window in this example because it
// would mean our triangles are not being "stretched" out which would make debugging nicer.
// For some reason this doesn't compile atm.
// pub const options = mach.Engine.Options{ .width = 512, .height = 512 };
// The uniform read by the vertex shader, it contains the matrix // The uniform read by the vertex shader, it contains the matrix
// that will move vertices // that will move vertices
const VertexUniform = struct { const VertexUniform = struct {
mat: zm.Mat, mat: zm.Mat,
}; };
// The uniform read by the fragment shader, the points are used
// to calculate the bezier curve, and more or less coincide with uvs
// (Vec4 for alignment)
const FragUniform = struct { const FragUniform = struct {
points: [3]@Vector(4, f32),
// TODO use an enum? Remember that it will be casted to u32 in wgsl // TODO use an enum? Remember that it will be casted to u32 in wgsl
type: u32, type: u32,
// Padding for struct alignment to 16 bytes (minimum in WebGPU uniform).
padding: @Vector(3, f32) = undefined,
}; };
// TODO texture and sampler, create buffers and use an index field // TODO texture and sampler, create buffers and use an index field
// in FragUniform to tell which texture to read // in FragUniform to tell which texture to read
@ -69,6 +73,7 @@ pub fn init(app: *App, engine: *mach.Engine) !void {
const vertex_attributes = [_]gpu.VertexAttribute{ const vertex_attributes = [_]gpu.VertexAttribute{
.{ .format = .float32x4, .offset = @offsetOf(Vertex, "pos"), .shader_location = 0 }, .{ .format = .float32x4, .offset = @offsetOf(Vertex, "pos"), .shader_location = 0 },
.{ .format = .float32x2, .offset = @offsetOf(Vertex, "uv"), .shader_location = 1 }, .{ .format = .float32x2, .offset = @offsetOf(Vertex, "uv"), .shader_location = 1 },
.{ .format = .float32x3, .offset = @offsetOf(Vertex, "bary"), .shader_location = 2 },
}; };
const vertex_buffer_layout = gpu.VertexBufferLayout{ const vertex_buffer_layout = gpu.VertexBufferLayout{
.array_stride = @sizeOf(Vertex), .array_stride = @sizeOf(Vertex),
@ -151,29 +156,12 @@ pub fn init(app: *App, engine: *mach.Engine) !void {
var frag_uniform_mapped = frag_uniform_buffer.getMappedRange(FragUniform, 0, num_instances); var frag_uniform_mapped = frag_uniform_buffer.getMappedRange(FragUniform, 0, num_instances);
const tmp_frag_ubo = [_]FragUniform{ const tmp_frag_ubo = [_]FragUniform{
.{ .{
// The points correspond to the left point, middle point, right point (when viewed regularly)
// in UV coordinates
.points = [_]@Vector(4, f32){
.{ 0, 0, 0, 0 },
.{ 0.5, 1, 0, 0 },
.{ 1, 0, 0, 0 },
},
.type = 1, .type = 1,
}, },
.{ .{
.points = [_]@Vector(4, f32){
.{ 0, 0, 0, 0 },
.{ 0.5, 1, 0, 0 },
.{ 1, 0, 0, 0 },
},
.type = 0, .type = 0,
}, },
.{ .{
.points = [_]@Vector(4, f32){
.{ 0, 0, 0, 0 },
.{ 0.5, 1, 0, 0 },
.{ 1, 0, 0, 0 },
},
.type = 2, .type = 2,
}, },
}; };

5
examples/gkurve/vert.wgsl
View file

@ -6,17 +6,20 @@ struct VertexUniform {
struct VertexOut { struct VertexOut {
@builtin(position) position_clip : vec4<f32>, @builtin(position) position_clip : vec4<f32>,
@location(0) frag_uv : vec2<f32>, @location(0) frag_uv : vec2<f32>,
@interpolate(flat) @location(1) instance_index: u32, @location(1) frag_bary: vec3<f32>,
@interpolate(flat) @location(2) instance_index: u32,
} }
@stage(vertex) fn main( @stage(vertex) fn main(
@builtin(instance_index) instanceIdx : u32, @builtin(instance_index) instanceIdx : u32,
@location(0) position: vec4<f32>, @location(0) position: vec4<f32>,
@location(1) uv: vec2<f32>, @location(1) uv: vec2<f32>,
@location(2) bary: vec3<f32>,
) -> VertexOut { ) -> VertexOut {
var output : VertexOut; var output : VertexOut;
output.position_clip = ubos[instanceIdx].matrix * position; output.position_clip = ubos[instanceIdx].matrix * position;
output.frag_uv = uv; output.frag_uv = uv;
output.frag_bary = bary;
output.instance_index = instanceIdx; output.instance_index = instanceIdx;
return output; return output;
} }