diff --git a/examples/gkurve/frag.wgsl b/examples/gkurve/frag.wgsl index 3ab725f8..98b52ae3 100755 --- a/examples/gkurve/frag.wgsl +++ b/examples/gkurve/frag.wgsl @@ -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 { - points: array, 3>, type_: u32, + padding: vec3, } @binding(1) @group(0) var ubos : array; -// Test if point p crosses line (a, b), returns sign of result -fn testCross(a:vec2, b:vec2, p:vec2) -> 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, B: vec2, C: vec2, p:vec2) -> 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 { - 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, B_: vec2,C: vec2,p: vec2) -> 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( @location(0) uv : vec2, - @interpolate(flat) @location(1) instance_index: u32, + @location(1) bary : vec3, + @interpolate(flat) @location(2) instance_index: u32, ) -> @location(0) vec4 { - var col = vec4(0.0); + // Example 1: Visualize barycentric coordinates: + // return vec4(bary.x, bary.y, bary.z, 1.0); + // return vec4(0.0, bary.x, 0.0, 1.0); // bottom-left of triangle + // return vec4(0.0, bary.y, 0.0, 1.0); // bottom-right of triangle + // return vec4(0.0, bary.z, 0.0, 1.0); // top of triangle - let p = uv; - - // 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; + // Example 2: Render gkurves + var inversion = -1.0; + if(ubos[instance_index].type_ == 1u) { + // Solid triangle + return vec4(0.0, 1.0, 0.0, 1.0); + } else if(ubos[instance_index].type_ == 2u) { + // Concave (inverted quadratic bezier curve) + inversion = -1.0; + } else { + // Convex (inverted quadratic bezier curve) + inversion = 1.0; + } - 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; + var dist = (-(pow(bary.z, 4.0) - bary.y * bary.x)) * inversion; + if (dist < 0.0) { + discard; } - - // 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){ - col = tex_col; - }else{ - col = sign(d) * tex_col; - } - return col; + return vec4(0.0, 1.0, 0.0, 1.0); } diff --git a/examples/gkurve/main.zig b/examples/gkurve/main.zig index 3d5fa875..c8523bee 100644 --- a/examples/gkurve/main.zig +++ b/examples/gkurve/main.zig @@ -12,27 +12,31 @@ const glfw = @import("glfw"); pub const Vertex = struct { pos: @Vector(4, f32), uv: @Vector(2, f32), + bary: @Vector(3, f32) = .{ 0, 0, 0 }, }; // Simple triangle pub const vertices = [_]Vertex{ - .{ .pos = .{ 0, 0.5, 0, 1 }, .uv = .{ 0.5, 1 } }, - .{ .pos = .{ -0.5, -0.5, 0, 1 }, .uv = .{ 0, 0 } }, - .{ .pos = .{ 0.5, -0.5, 0, 1 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ 0, 0.5, 0, 1 }, .uv = .{ 0.5, 1 }, .bary = .{ 0, 0, 1 } }, + .{ .pos = .{ -0.5, -0.5, 0, 1 }, .uv = .{ 0, 0 }, .bary = .{ 1, 0, 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 // that will move vertices const VertexUniform = struct { 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 { - points: [3]@Vector(4, f32), // TODO use an enum? Remember that it will be casted to u32 in wgsl 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 // 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{ .{ .format = .float32x4, .offset = @offsetOf(Vertex, "pos"), .shader_location = 0 }, .{ .format = .float32x2, .offset = @offsetOf(Vertex, "uv"), .shader_location = 1 }, + .{ .format = .float32x3, .offset = @offsetOf(Vertex, "bary"), .shader_location = 2 }, }; const vertex_buffer_layout = gpu.VertexBufferLayout{ .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); 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, }, .{ - .points = [_]@Vector(4, f32){ - .{ 0, 0, 0, 0 }, - .{ 0.5, 1, 0, 0 }, - .{ 1, 0, 0, 0 }, - }, .type = 0, }, .{ - .points = [_]@Vector(4, f32){ - .{ 0, 0, 0, 0 }, - .{ 0.5, 1, 0, 0 }, - .{ 1, 0, 0, 0 }, - }, .type = 2, }, }; diff --git a/examples/gkurve/vert.wgsl b/examples/gkurve/vert.wgsl index 81108b12..54c84bd7 100644 --- a/examples/gkurve/vert.wgsl +++ b/examples/gkurve/vert.wgsl @@ -6,17 +6,20 @@ struct VertexUniform { struct VertexOut { @builtin(position) position_clip : vec4, @location(0) frag_uv : vec2, - @interpolate(flat) @location(1) instance_index: u32, + @location(1) frag_bary: vec3, + @interpolate(flat) @location(2) instance_index: u32, } @stage(vertex) fn main( @builtin(instance_index) instanceIdx : u32, @location(0) position: vec4, @location(1) uv: vec2, + @location(2) bary: vec3, ) -> VertexOut { var output : VertexOut; output.position_clip = ubos[instanceIdx].matrix * position; output.frag_uv = uv; + output.frag_bary = bary; output.instance_index = instanceIdx; return output; }