examples/gkurve: border rendering, non-linear field

Signed-off-by: Stephen Gutekanst <stephen@hexops.com>

examples/gkurve/frag.wgsl

@@ -6,7 +6,7 @@ struct FragUniform {
 
 @stage(fragment) fn main( 
     @location(0) uv: vec2<f32>,
-    @location(1) bary: vec3<f32>,
+    @interpolate(linear) @location(1) bary: vec3<f32>,
     @interpolate(flat) @location(2) triangle_index: u32,
 ) -> @location(0) vec4<f32> {
     // Example 1: Visualize barycentric coordinates:
@@ -15,7 +15,7 @@ struct FragUniform {
     // 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
 
-    // Example 2: Render gkurves
+    // Example 2: Render gkurve primitives
     var inversion = -1.0;
     if(ubos[triangle_index].type_ == 1u) {
         // Solid triangle
@@ -24,13 +24,31 @@ struct FragUniform {
         // Concave (inverted quadratic bezier curve)
         inversion = -1.0;
     } else {
-        // Convex (inverted quadratic bezier curve)
+        // Convex (quadratic bezier curve)
         inversion = 1.0;
     }
 
-    var dist = (-(pow(bary.z, 4.0) - bary.y * bary.x)) * inversion;
+	// Gradients
-    if (dist < 0.0) {
+	let px = dpdx(bary.xy);
-        discard;
+	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);
+    // var dist = bary.z*bary.z - bary.y;
+
+    dist *= inversion;
+    dist /= 128.0;
+    dist /= 1.75;
+
+    // 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);
 }

examples/gkurve/main.zig

@@ -125,9 +125,9 @@ pub fn init(app: *App, engine: *mach.Engine) !void {
         .{ .pos = .{ fb_width / 2, fb_height / 2 - TRIANGLE_HEIGHT, 0, 1 }, .uv = .{ 0, 0 } },
         .{ .pos = .{ fb_width / 2 + TRIANGLE_SCALE, fb_height / 2 - TRIANGLE_HEIGHT, 0, 1 }, .uv = .{ 1, 0 } },
 
-        .{ .pos = .{ fb_width / 2 - TRIANGLE_SCALE / 2, fb_height / 2 + TRIANGLE_HEIGHT, 0, 1 }, .uv = .{ 0.5, 1 } },
+        .{ .pos = .{ fb_width / 2 - TRIANGLE_SCALE / 2, (fb_height / 2 - TRIANGLE_HEIGHT / 2) + TRIANGLE_HEIGHT, 0, 1 }, .uv = .{ 0.5, 1 } },
-        .{ .pos = .{ fb_width / 2, fb_height / 2, 0, 1 }, .uv = .{ 0, 0 } },
+        .{ .pos = .{ fb_width / 2, fb_height / 2 - TRIANGLE_HEIGHT / 2, 0, 1 }, .uv = .{ 0, 0 } },
-        .{ .pos = .{ fb_width / 2 - TRIANGLE_SCALE, fb_height / 2 + 0, 0, 1 }, .uv = .{ 1, 0 } },
+        .{ .pos = .{ fb_width / 2 - TRIANGLE_SCALE, fb_height / 2 - TRIANGLE_HEIGHT / 2, 0, 1 }, .uv = .{ 1, 0 } },
     };
     app.vertices_len = vertices.len;
 
@@ -223,7 +223,7 @@ pub fn update(app: *App, engine: *mach.Engine) !bool {
 
     {
         // Using a view allows us to move the camera without having to change the actual
-        // global poitions of each vertex
+        // global positions of each vertex
         const view = zm.lookAtRh(
             zm.f32x4(0, 0, 1, 1),
             zm.f32x4(0, 0, 0, 1),
@@ -236,6 +236,7 @@ pub fn update(app: *App, engine: *mach.Engine) !bool {
             100,
         );
 
+
         const mvp = zm.mul(zm.mul(view, proj), zm.translation(-1, -1, 0));
         const ubos = VertexUniform{
             .mat = mvp,

examples/gkurve/vert.wgsl

@@ -6,7 +6,7 @@ struct VertexUniform {
 struct VertexOut {
     @builtin(position) position_clip: vec4<f32>,
     @location(0) frag_uv: vec2<f32>,
-    @location(1) frag_bary: vec3<f32>,
+    @interpolate(linear) @location(1) frag_bary: vec3<f32>,
     @interpolate(flat) @location(2) triangle_index: u32,
 }
 
@@ -19,9 +19,9 @@ struct VertexOut {
     output.position_clip = ubo.matrix * position;
     output.frag_uv = uv;
     output.frag_bary = vec3<f32>(
-        f32(vertex_index % 3u == 1u),
+        f32(((vertex_index+2u) % 3u * 2u) % 3u),
-        f32(vertex_index % 3u == 2u),
+        f32(((vertex_index+2u) % 3u * 2u) & 2u) * 2.0,
-        f32(vertex_index % 3u == 0u),
+        0.0,
     );
     output.triangle_index = vertex_index / 3u;
     return output;