fix: more efficient draw shape (#355)

Author: mateuszJS

ADRs/SDF rendering

@@ -7,3 +7,5 @@ TO know if you are inside or outside we can store red channe lwit hnegative or p
 Switch from using raycasting/widning number and dissallow hoels in a shape UNLESS we do it intentionally by boolean oepration (so inner curve direciton is reversed) or in fonts (so their inner cuvre direciton is reversE).
 
 This way we can use jsut tangent fast oepraiton in FRAGMENT SHADER to determine where pixels lives.
+
+And there was one more attempt with Claude Opus 4.7 with Adpative Thinking. Still failed to make SDF good enough.

ADRs/custom programs

@@ -1,4 +1,4 @@
 I've tried to use failing program as any other. But here is the issue, if a program fails then the whole encoder fails, so all assumptions like "sdf should be generated" don't hold anymore.
-It complicates whole renderign logic on each step(by handling that edge case).
+It complicates whole rendering logic on each step(by handling that edge case).
 
 Because of that, we switch approach, firstly let's validate if program works, if not, use alternative program, if works, then fine. This way we can awlays be sure that encoder won't fail because of custom programs.

integration-tests/index.ts

@@ -89,7 +89,6 @@ async function test() {
         sharedTextEffects.style.display = 'block'
         sharedTextEffects.checked = selectedAsset.is_sdf_shared
         fontSizeInput.value = selectedAsset.typo_props.font_size.toString()
-        console.log(selectedAsset.typo_props.font_size)
       } else {
         sharedTextEffects.style.display = 'none'
       }
@@ -158,7 +157,7 @@ async function test() {
     ),
   }
 
-  creator.setSnapshot(snaitizedLastSnapshot, true)
+  creator.setSnapshot(snaitizedLastSnapshot, { produceSnapshot: false, addHistoryEntry: true })
 
   const resetProjectBtn = document.querySelector<HTMLInputElement>('#reset-project')!
   resetProjectBtn.addEventListener('click', () => {
@@ -197,7 +196,7 @@ async function test() {
       })),
     }
 
-    creator.setSnapshot(snapshot, true)
+    creator.setSnapshot(snapshot, { produceSnapshot: false, addHistoryEntry: true })
     startProjectInputFromImages.value = '' // reset input value to allow re-uploading the same file
   })
 
@@ -208,14 +207,14 @@ async function test() {
   undoBtn.addEventListener('click', () => {
     currentHistoryIndex = Math.max(0, currentHistoryIndex - 1)
     const snapshot = assetsUpdatesHistory[currentHistoryIndex]
-    creator.setSnapshot(snapshot, false)
+    creator.setSnapshot(snapshot, { produceSnapshot: false, addHistoryEntry: true })
     setLastSnapshot(snapshot)
   })
 
   redoBtn.addEventListener('click', () => {
     currentHistoryIndex = Math.min(assetsUpdatesHistory.length - 1, currentHistoryIndex + 1)
     const snapshot = assetsUpdatesHistory[currentHistoryIndex]
-    creator.setSnapshot(snapshot, false)
+    creator.setSnapshot(snapshot, { produceSnapshot: false, addHistoryEntry: true })
     setLastSnapshot(snapshot)
   })
 
@@ -241,7 +240,7 @@ async function test() {
         ...getLastSnapshot(),
         assets: newAssets,
       },
-      true
+      { produceSnapshot: true, addHistoryEntry: true }
     )
   })
 
@@ -290,7 +289,7 @@ async function test() {
         width,
         height,
       },
-      true
+      { produceSnapshot: true, addHistoryEntry: true }
     )
   })
 

src/WebGPU/programs/drawShape/base.big.last.wgsl

@@ -0,0 +1,162 @@
+const STRAIGHT_LINE_THRESHOLD = 1e10;
+const EPSILON = 1e-10;
+const PI = 3.141592653589793;
+const FWIDTH_VALID_LIMIT = 100;
+// Shapes share a single SDF texture. Pixels not covered by any shape are
+// initialized to -3.402823466e+38 before per-shape SDF values are written.
+// This creates extremely large distance derivatives at the boundary between
+// real shape SDF values and the default background value, so we ignore
+// derivatives larger than FWIDTH_VALID_LIMIT.
+
+const UNIFORM_T_SAMPLING = 4.0;
+
+struct CubicBezier {
+  p0: vec2f,
+  p1: vec2f,
+  p2: vec2f,
+  p3: vec2f,
+};
+
+fn bezier_point(curve: CubicBezier, t: f32) -> vec2f {
+  let t2 = t * t;
+  let t3 = t2 * t;
+  let one_minus_t = 1.0 - t;
+  let one_minus_t2 = one_minus_t * one_minus_t;
+  let one_minus_t3 = one_minus_t2 * one_minus_t;
+
+  return curve.p0 * one_minus_t3 +
+         3.0 * curve.p1 * t * one_minus_t2 +
+         3.0 * curve.p2 * t2 * one_minus_t +
+         curve.p3 * t3;
+}
+
+
+struct Vertex {
+  @location(0) position: vec4f,
+};
+
+// @group(0) @binding(0) var ourSampler: sampler;
+@group(0) @binding(1) var texture: texture_2d<f32>;
+// @group(0) @binding(1) var texture: texture_storage_2d<rgba32float, read>;
+@group(0) @binding(2) var<uniform> camera_projection: mat4x4f;
+@group(0) @binding(3) var<storage, read> curves: array<vec2f>;
+// @group(0) @binding(4) var<storage, read> uniform_t: array<f32>;
+// @group(0) @binding(5) var ourSampler: sampler;
+// consider witchign to uniform if possible
+
+struct VSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+  @location(1) norm_uv: vec2f,
+};
+
+@vertex fn vs(vert: Vertex) -> VSOutput {
+  let size = textureDimensions(texture);
+  return VSOutput(
+    camera_projection * vec4f(vert.position.xy, 0.0, 1.0),
+    vert.position.zw * (vec2f(size) + vec2f(0)),
+    vert.position.zw,
+  );
+}
+
+const BILINEAR_T_THRESHOLD = 1;
+const BILINEAR_T_THRESHOLD_POS = 2;
+// all texels which has diff with nearest texel < BILINEAR_T_THRESHOLD
+// will be included in bilinear interpolation.
+// It helps avoid interpolating t from totally different places
+
+struct Sample {
+  t: f32,
+  sign: f32,
+};
+
+fn getSample(pos: vec2f) -> Sample {
+    let floor_pos = floor(pos - 0.5);
+  let fract_pos = pos - 0.5 - floor_pos;
+
+  let max_coord = vec2i(vec2i(textureDimensions(texture)) - vec2i(1, 1));
+
+  let p00 = vec2u(clamp(vec2i(floor_pos                  ), vec2i(0, 0), max_coord));
+  let p10 = vec2u(clamp(vec2i(floor_pos + vec2f(1.0, 0.0)), vec2i(0, 0), max_coord));
+  let p01 = vec2u(clamp(vec2i(floor_pos + vec2f(0.0, 1.0)), vec2i(0, 0), max_coord));
+  let p11 = vec2u(clamp(vec2i(floor_pos + vec2f(1.0, 1.0)), vec2i(0, 0), max_coord));
+
+  // textureSample(ourTexture, ourSampler, fsInput.texcoord);
+  let raw_c00 = textureLoad(texture, p00, 0).r;
+  let raw_c10 = textureLoad(texture, p10, 0).r;
+  let raw_c01 = textureLoad(texture, p01, 0).r;
+  let raw_c11 = textureLoad(texture, p11, 0).r;
+
+  let c00 = abs(raw_c00) - 1;
+  let c10 = abs(raw_c10) - 1;
+  let c01 = abs(raw_c01) - 1;
+  let c11 = abs(raw_c11) - 1;
+
+  let g10 = select(c00, c10, abs(c10 - c00) < BILINEAR_T_THRESHOLD);
+  let g01 = select(c00, c01, abs(c01 - c00) < BILINEAR_T_THRESHOLD);
+  let g11 = select(c00, c11, abs(c11 - c00) < BILINEAR_T_THRESHOLD);
+
+  let top = mix(c00, g10, fract_pos.x);
+  let bottom = mix(g01, g11, fract_pos.x);
+  let final_t = mix(top, bottom, fract_pos.y);
+
+  // Pick sign from the nearest texel to pos (not always p00)
+  let nearest_raw = select(
+    select(raw_c00, raw_c01, fract_pos.y >= 0.5),
+    select(raw_c10, raw_c11, fract_pos.y >= 0.5),
+    fract_pos.x >= 0.5
+  );
+
+  return Sample(final_t, sign(nearest_raw));
+}
+
+fn g_to_bezier_pos(global_t: f32) -> vec2f {
+  let idx = u32(global_t);
+  let local_t = fract(global_t);
+  let curve = CubicBezier(
+    curves[idx * 4 + 0],
+    curves[idx * 4 + 1],
+    curves[idx * 4 + 2],
+    curves[idx * 4 + 3]
+  );
+
+  let is_straight_line = curve.p1.x > STRAIGHT_LINE_THRESHOLD;
+  if (is_straight_line) {
+    return mix(curve.p0, curve.p3, local_t);
+  }
+
+  return bezier_point(curve, local_t);
+}
+
+@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
+  let sample = getSample(vsOut.uv);
+  let curve_pos = g_to_bezier_pos(sample.t);
+  let distance = length(curve_pos - vsOut.uv);
+  let signed_distance = distance * sample.sign;
+
+  ${TEST}
+
+  let dist_derivative = fwidth(signed_distance);
+
+  let safe_dist_derivative = select(0.0, dist_derivative, dist_derivative <= FWIDTH_VALID_LIMIT); // if too large -> 0
+  let alpha_smooth_factor = safe_dist_derivative * 1;
+  // let alpha_smooth_factor = max(safe_dist_derivative * 1, EPSILON);
+
+  let inner_alpha = smoothstep(u.dist_start - alpha_smooth_factor, u.dist_start + alpha_smooth_factor, signed_distance);
+  let outer_alpha = smoothstep(u.dist_end - alpha_smooth_factor, u.dist_end + alpha_smooth_factor, signed_distance);
+  let alpha = outer_alpha - inner_alpha;
+  let color = getColor(vec4f(signed_distance, 0, 0, 1), vsOut.uv, vsOut.norm_uv);
+  let result = vec4f(color.rgb, color.a * alpha);
+
+  // if (result.a < EPSILON) {
+  //   return vec4f(0.5);
+  // }
+
+  return result;
+
+  // let stroke_factor = select(0.5, 0.0, sdf.g > 1.0);
+  // color = vec4f(0, sdf.g % 1, 0, 1.0);
+  // color = vec4f(0, 0, sdf.b / (2 * PI), 1.0);
+  // color = vec4f(sdf.r / 100.0, sdf.g % 1, sdf.b / (2 * PI), 1.0);
+  // color = select(vec4f(0.5, 0, 0, 1), vec4f(0, 0, 0.5, 1), u32(sdf.r / 20.0) % 2 == 0);
+}