fix: Switch to r32float texture (#342)

Author: mateuszJS

ADRs/SDF rendering

@@ -0,0 +1,9 @@
+rgba32float texture is way too big, it crashes Webkit on iphone.
+
+What is the plan is to store just curve index + t value in a r16float.
+
+TO know if you are inside or outside we can store red channe lwit hnegative or positive value... OR
+
+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.

README.md

@@ -10,7 +10,7 @@ https://webgpufundamentals.org/webgpu/lessons/resources/wgsl-offset-computer.htm
 
 # Releasing versions
 
-Each Pull Request has to be merged with squash, the following naming convention needs to be respected:
+Each Pull Request has to be merged with squash (currnetly to `main`, we have dropped `next` branch),, the following naming convention needs to be respected:
 
 | Commit Message                                                                                                                                                                                   | Release Type                                                                                                |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
@@ -35,14 +35,14 @@ npm link @mateuszjs/magic-render
 In the repo where you want to put local version of the package.
 Remember to build package to see an update!
 
-# Glossary
+## Glossary
 
-## Units:
+### Units:
 
-viewport - value expressed in pixels which will be rendered on the screen. This is exavtly how many pixels will be rendered, already includes retina. It's device physical pixel, not CSS pixel.
+- `Viewport` - value expressed in pixels which will be rendered onto the screen. Represents exactly how many pixels will be rendered, already includes retina/non-retina. It's physical device pixel, not CSS pixel.
 
-world - values expressed in abstract units used in project. This unit is absolute, never changes, does not depend on anything. This is how all sizes of all assets and assets' properties are kept expressed.
+- `World` - values expressed in abstract units used in projects. This unit is absolute, never changes, does not depend on anything. This is how all sizes of all assets and assets' properties are kept expressed in zig state and snapshots.
 
-texel - value expressed in texels, ususally in SDF texture texels. It corresponds to how many texels will be used in the SDF texture.
+- `Texel` - value expressed in texels (pixel but for texture), usually in SDF texture texels. It corresponds to how many texels will be used in the SDF texture.
 
-Often when no unit is used, value is expressed in world coordinates OR the unit is obvious from the function context.
+_Often when no unit is used, a value is expressed in the world coordinates OR the unit is obvious from the context._

src/WebGPU/programs/clearSdf/getProgram.ts

@@ -17,6 +17,7 @@ export default function getClearSdf(device: GPUDevice) {
 
   return function clearSdf(passEncoder: GPUComputePassEncoder, texture: GPUTexture) {
     const bindGroup = device.createBindGroup({
+      label: 'clearSdf bind group',
       layout: pipeline.getBindGroupLayout(0),
       entries: [
         {

src/WebGPU/programs/combineSdf/getProgram.ts

@@ -1,62 +1,78 @@
+import clamp from 'utils/clamp'
 import { delayedDestroy } from '../initPrograms'
 import shaderCode from './shader.wgsl'
 
-const WORKING_GROUP_SIZE = [16, 4, 1]
-
 export default function getCombineSdf(device: GPUDevice) {
   const shaderModule = device.createShaderModule({
     label: 'combineSdf shader',
-    code: shaderCode.replace('$WORKING_GROUP_SIZE', WORKING_GROUP_SIZE.join(', ')),
+    code: shaderCode,
   })
 
-  const pipeline = device.createComputePipeline({
-    label: 'combineSdf pipeline',
+  const pipeline = device.createRenderPipeline({
+    label: 'combineSDF pipeline',
     layout: 'auto',
-    compute: {
+    vertex: {
+      module: shaderModule,
+      entryPoint: 'vs',
+    },
+    fragment: {
       module: shaderModule,
+      entryPoint: 'fs',
+      targets: [{ format: 'r32float' }],
+    },
+    depthStencil: {
+      depthWriteEnabled: true,
+      depthCompare: 'greater',
+      format: 'depth24plus',
     },
   })
 
   return function combineSdf(
-    passEncoder: GPUComputePassEncoder,
-    destinationTex: GPUTexture,
+    passEncoder: GPURenderPassEncoder,
+    destTex: GPUTexture,
     sourceTex: GPUTexture,
-    computeDepthTex: GPUTexture,
-    placementData: DataView<ArrayBuffer> // [placement_start_x, placement_start_y, placement_size_x, placement_size_y]
+    uniformData: DataView<ArrayBuffer>, // placement + initial_t
+    curvesDataView: DataView<ArrayBuffer>
   ) {
+    const curvesBuffer = device.createBuffer({
+      label: 'renderShapeSdf curves buffer',
+      size: curvesDataView.byteLength,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    })
+    device.queue.writeBuffer(curvesBuffer, 0, curvesDataView)
+    delayedDestroy(curvesBuffer)
+
     const uniformBuffer = device.createBuffer({
       label: 'combine sdf uniform buffer',
-      size: placementData.byteLength,
+      size: uniformData.byteLength,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
-    device.queue.writeBuffer(uniformBuffer, 0, placementData)
+    device.queue.writeBuffer(uniformBuffer, 0, uniformData)
     delayedDestroy(uniformBuffer)
 
+    const startX = uniformData.getFloat32(0 * 4, true)
+    const startY = uniformData.getFloat32(1 * 4, true)
+    const sizeX = uniformData.getFloat32(2 * 4, true)
+    const sizeY = uniformData.getFloat32(3 * 4, true)
+    const scissorX = Math.max(0, Math.floor(startX))
+    const scissorY = Math.max(0, Math.floor(startY))
+    const scissorW = clamp(Math.ceil(startX + sizeX) - scissorX, 1, destTex.width - scissorX)
+    const scissorH = clamp(Math.ceil(startY + sizeY) - scissorY, 1, destTex.height - scissorY)
+
     passEncoder.setPipeline(pipeline)
+    passEncoder.setScissorRect(scissorX, scissorY, scissorW, scissorH)
 
     const bindGroup = device.createBindGroup({
+      label: 'combineSdf bind group',
       layout: pipeline.getBindGroupLayout(0),
       entries: [
-        { binding: 0, resource: destinationTex.createView() },
-        { binding: 1, resource: sourceTex.createView() },
-        { binding: 2, resource: computeDepthTex.createView() },
-        { binding: 3, resource: { buffer: uniformBuffer } },
+        { binding: 0, resource: sourceTex.createView() },
+        { binding: 1, resource: { buffer: uniformBuffer } },
+        { binding: 2, resource: { buffer: curvesBuffer } },
       ],
     })
 
     passEncoder.setBindGroup(0, bindGroup)
-
-    const startX = placementData.getFloat32(0 * 4, true)
-    const startY = placementData.getFloat32(1 * 4, true)
-    const sizeX = placementData.getFloat32(2 * 4, true)
-    const sizeY = placementData.getFloat32(3 * 4, true)
-
-    const width = Math.max(0, Math.ceil(startX + sizeX) - Math.floor(startX))
-    const height = Math.max(0, Math.ceil(startY + sizeY) - Math.floor(startY))
-
-    passEncoder.dispatchWorkgroups(
-      Math.ceil(width / WORKING_GROUP_SIZE[0]),
-      Math.ceil(height / WORKING_GROUP_SIZE[1])
-    )
+    passEncoder.draw(6)
   }
 }

src/WebGPU/programs/combineSdf/shader.wgsl

@@ -1,78 +1,87 @@
+const STRAIGHT_LINE_THRESHOLD = 1e10;
+
 struct Uniform {
   placement_start: vec2f,
   placement_size: vec2f,
+  initial_t: f32,
 };
 
-@group(0) @binding(0) var destination_tex: texture_storage_2d<rgba32float, write>;
-@group(0) @binding(1) var source_tex: texture_storage_2d<rgba32float, read>;
-@group(0) @binding(2) var depth_tex: texture_storage_2d<r32float, read_write>;
-@group(0) @binding(3) var<uniform> u: Uniform;
-
-@compute @workgroup_size($WORKING_GROUP_SIZE) fn cs(
-  @builtin(global_invocation_id) id : vec3u
-)  {
-  if (any(u.placement_size <= vec2f(0.0))) {
-    return;
-  }
+@group(0) @binding(0) var source_tex: texture_2d<f32>;
+@group(0) @binding(1) var<uniform> u: Uniform;
+@group(0) @binding(2) var<storage, read> curves: array<vec2f>;
 
-  let placement_min = floor(u.placement_start);
-  let placement_max = ceil(u.placement_start + u.placement_size);
+struct VSOutput {
+  @builtin(position) position: vec4f,
+};
 
-  let dest_pos = vec2i(placement_min) + vec2i(id.xy);
+const vertex_list = array<vec2f, 6>(
+  vec2f(-1.0, -1.0), vec2f( 1.0, -1.0), vec2f(-1.0,  1.0),
+  vec2f(-1.0,  1.0), vec2f( 1.0, -1.0), vec2f( 1.0,  1.0),
+);
 
-  if (any(vec2f(dest_pos) >= placement_max)) {
-    return;
-  }
+@vertex fn vs(@builtin(vertex_index) idx: u32) -> VSOutput {
+  return VSOutput(vec4f(vertex_list[idx], 0.0, 1.0));
+}
 
-  let dest_dims = vec2i(textureDimensions(destination_tex));
-  if (any(dest_pos < vec2i(0)) || any(dest_pos >= dest_dims)) {
-    return;
-  }
+struct FSOutput {
+  @location(0) color: f32,
+  @builtin(frag_depth) depth: f32,
+};
 
-  let dest_center = vec2f(dest_pos) + vec2f(0.5);
+@fragment fn fs(vsOut: VSOutput) -> FSOutput {
+  let dest_center = vsOut.position.xy;
   let local = (dest_center - u.placement_start) / u.placement_size;
-
-  if (any(local < vec2f(0.0)) || any(local >= vec2f(1.0))) {
-    return;
-  }
-
   let source_size = vec2f(textureDimensions(source_tex));
   let source_sample_pos = local * source_size;
-  let source_texel = getSampleSource(source_sample_pos);
-  let scale = source_size / u.placement_size;
-  let scaled_dist = source_texel.r / scale.x; // we assume all sizes keeps their ratio width / height, so we can use .x or .y here
-  let depth = textureLoad(depth_tex, dest_pos).r;
-
-  if (scaled_dist > depth) {
-    textureStore(destination_tex, dest_pos, vec4f(scaled_dist, source_texel.g, source_texel.b, source_texel.a));
-    textureStore(depth_tex, dest_pos, vec4f(scaled_dist));
-  }
-}
+  let source_texel = textureLoad(source_tex, vec2u(source_sample_pos), 0);
 
-fn getSampleSource(pos: vec2f) -> vec4f {
-  let min = vec2i(0);
-  let source_dims_u = textureDimensions(source_tex);
-  let max = vec2i(textureDimensions(source_tex)) - vec2i(1);
+  let sanitized_t = abs(source_texel.r) - 1.0;
+  let closest_curve_point = g_to_bezier_pos(sanitized_t);
+  let distance = length(dest_center - closest_curve_point);
+  let scaled_dist = 0.5 + sign(source_texel.r) * distance / 1000;//max(source_size.x, source_size.y);
 
-  // We do not clamp pos on purpose. Textures always have empty 1 texel paddign around.
+  return FSOutput(
+    (1.0 + u.initial_t + sanitized_t) * sign(source_texel.r),
+    scaled_dist,
+  );
+}
+
+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;
+}
 
 
-  let base_pos = pos - vec2f(0.5);
-  let floor_pos = vec2i(floor(base_pos));
-  let fract_pos = base_pos - vec2f(floor_pos);
+struct CubicBezier {
+  p0: vec2f,
+  p1: vec2f,
+  p2: vec2f,
+  p3: vec2f,
+};
 
-  let p00 = vec2u(clamp(floor_pos,               min, max));
-  let p10 = vec2u(clamp(floor_pos + vec2i(1, 0), min, max));
-  let p01 = vec2u(clamp(floor_pos + vec2i(0, 1), min, max));
-  let p11 = vec2u(clamp(floor_pos + vec2i(1, 1), min, max));
 
-  let c00 = textureLoad(source_tex, p00);
-  let c10 = textureLoad(source_tex, p10);
-  let c01 = textureLoad(source_tex, p01);
-  let c11 = textureLoad(source_tex, p11);
+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 top = mix(c00, c10, fract_pos.x);
-  let bottom = mix(c01, c11, fract_pos.x);
+  let is_straight_line = curve.p1.x > STRAIGHT_LINE_THRESHOLD;
+  if (is_straight_line) {
+    return mix(curve.p0, curve.p3, local_t);
+  }
 
-  return mix(top, bottom, fract_pos.y);
+  return bezier_point(curve, local_t);
 }

src/WebGPU/programs/computeShape/shader.wgsl

@@ -350,5 +350,10 @@ fn evaluate_shape(point: vec2f) -> ShapeInfo {
 
   let signed_dist = select(-min_distance, min_distance, is_inside);
 
-  return ShapeInfo(signed_dist, f32(closest_curve_idx) + closest_t, angle);
+  let t = f32(closest_curve_idx) + closest_t + 1.0; // plus one to avoid 0
+  // 0 cannot indicate if its negative or positive
+  let signed_t = select(-t, t, is_inside);
+  // let signed_t = t;
+
+  return ShapeInfo(signed_dist, signed_t, angle);
 }