@gridspace/raster-path 1.0.7 → 1.0.9

package/src/shaders/radial-rasterize-batched.wgsl

@@ -0,0 +1,164 @@
+// Radial V3 batched bucket rasterization
+// Processes ALL buckets in one dispatch - GPU threads find their bucket
+
+const EPSILON: f32 = 0.0001;
+
+struct Uniforms {
+    resolution: f32,         // Grid step size (mm)
+    tool_radius: f32,        // Tool radius for Y-filtering
+    full_grid_width: u32,    // Full grid width (all buckets)
+    grid_height: u32,        // Number of Y cells
+    global_min_x: f32,       // Global minimum X coordinate
+    bucket_min_y: f32,       // Y-axis start (typically -tool_width/2)
+    z_floor: f32,            // Z value for empty cells
+    num_buckets: u32,        // Number of buckets
+}
+
+struct BucketInfo {
+    min_x: f32,              // Bucket X range start
+    max_x: f32,              // Bucket X range end
+    start_index: u32,        // Index into triangle_indices array
+    count: u32,              // Number of triangles in this bucket
+}
+
+@group(0) @binding(0) var<storage, read> rotated_triangles: array<f32>;   // ALL rotated triangles + bounds
+@group(0) @binding(1) var<storage, read_write> output: array<f32>;        // Full-width output grid
+@group(0) @binding(2) var<uniform> uniforms: Uniforms;
+@group(0) @binding(3) var<storage, read> all_buckets: array<BucketInfo>;  // All bucket descriptors
+@group(0) @binding(4) var<storage, read> triangle_indices: array<u32>;    // All triangle indices
+
+// Simplified ray-triangle intersection for downward rays
+fn ray_triangle_intersect_downward(
+    ray_origin: vec3<f32>,
+    v0: vec3<f32>,
+    v1: vec3<f32>,
+    v2: vec3<f32>
+) -> vec2<f32> {  // Returns (hit: 0.0 or 1.0, t: distance along ray)
+    let ray_dir = vec3<f32>(0.0, 0.0, -1.0);
+
+    let edge1 = v1 - v0;
+    let edge2 = v2 - v0;
+    let h = cross(ray_dir, edge2);
+    let a = dot(edge1, h);
+
+    if (a > -EPSILON && a < EPSILON) {
+        return vec2<f32>(0.0, 0.0);
+    }
+
+    let f = 1.0 / a;
+    let s = ray_origin - v0;
+    let u = f * dot(s, h);
+
+    if (u < -EPSILON || u > 1.0 + EPSILON) {
+        return vec2<f32>(0.0, 0.0);
+    }
+
+    let q = cross(s, edge1);
+    let v = f * dot(ray_dir, q);
+
+    if (v < -EPSILON || u + v > 1.0 + EPSILON) {
+        return vec2<f32>(0.0, 0.0);
+    }
+
+    let t = f * dot(edge2, q);
+
+    if (t > EPSILON) {
+        return vec2<f32>(1.0, t);
+    }
+
+    return vec2<f32>(0.0, 0.0);
+}
+
+@compute @workgroup_size(8, 8, 1)
+fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+    let grid_x = global_id.x;
+    let grid_y = global_id.y;
+
+    // Bounds check
+    if (grid_x >= uniforms.full_grid_width || grid_y >= uniforms.grid_height) {
+        return;
+    }
+
+    // Calculate world position
+    let world_x = uniforms.global_min_x + f32(grid_x) * uniforms.resolution;
+    let world_y = uniforms.bucket_min_y + f32(grid_y) * uniforms.resolution;
+
+    // FIND WHICH BUCKET THIS X POSITION BELONGS TO
+    // Simple linear search (could be binary search for many buckets)
+    var bucket_idx = 0u;
+    var found_bucket = false;
+    for (var i = 0u; i < uniforms.num_buckets; i++) {
+        if (world_x >= all_buckets[i].min_x && world_x < all_buckets[i].max_x) {
+            bucket_idx = i;
+            found_bucket = true;
+            break;
+        }
+    }
+
+    // If not in any bucket, write floor and return
+    if (!found_bucket) {
+        let output_idx = grid_y * uniforms.full_grid_width + grid_x;
+        output[output_idx] = uniforms.z_floor;
+        return;
+    }
+
+    let bucket = all_buckets[bucket_idx];
+
+    // Fixed downward ray from high above
+    let ray_origin = vec3<f32>(world_x, world_y, 1000.0);
+
+    // Track best (closest) hit
+    var best_z = uniforms.z_floor;
+
+    // Test triangles in this bucket with Y-bounds filtering
+    for (var i = 0u; i < bucket.count; i++) {
+        // Get triangle index from bucket's index array
+        let tri_idx = triangle_indices[bucket.start_index + i];
+
+        // Read Y-bounds first (cheaper than reading all vertices)
+        let base = tri_idx * 11u;
+        let y_min = rotated_triangles[base + 9u];
+        let y_max = rotated_triangles[base + 10u];
+
+        // Y-bounds check: skip triangles that don't overlap this ray's Y position
+        if (y_max < world_y - uniforms.tool_radius ||
+            y_min > world_y + uniforms.tool_radius) {
+            continue;
+        }
+
+        // Read rotated vertices
+        let v0 = vec3<f32>(
+            rotated_triangles[base],
+            rotated_triangles[base + 1u],
+            rotated_triangles[base + 2u]
+        );
+        let v1 = vec3<f32>(
+            rotated_triangles[base + 3u],
+            rotated_triangles[base + 4u],
+            rotated_triangles[base + 5u]
+        );
+        let v2 = vec3<f32>(
+            rotated_triangles[base + 6u],
+            rotated_triangles[base + 7u],
+            rotated_triangles[base + 8u]
+        );
+
+        let result = ray_triangle_intersect_downward(ray_origin, v0, v1, v2);
+        let hit = result.x;
+        let t = result.y;
+
+        if (hit > 0.5) {
+            // Calculate Z position of intersection
+            let hit_z = ray_origin.z - t;
+
+            // Keep highest (max Z) hit
+            if (hit_z > best_z) {
+                best_z = hit_z;
+            }
+        }
+    }
+
+    // Write to FULL-WIDTH output (no stitching needed!)
+    let output_idx = grid_y * uniforms.full_grid_width + grid_x;
+    output[output_idx] = best_z;
+}

package/src/shaders/radial-rotate-triangles.wgsl

@@ -0,0 +1,70 @@
+// Triangle rotation shader for radial rasterization V3
+// Rotates all triangles in a bucket by a single angle and computes Y-bounds
+
+struct Uniforms {
+    angle: f32,              // Rotation angle in radians
+    num_triangles: u32,      // Number of triangles to rotate
+}
+
+struct RotatedTriangle {
+    v0: vec3<f32>,          // Rotated vertex 0
+    v1: vec3<f32>,          // Rotated vertex 1
+    v2: vec3<f32>,          // Rotated vertex 2
+    y_min: f32,             // Minimum Y coordinate (for filtering)
+    y_max: f32,             // Maximum Y coordinate (for filtering)
+}
+
+@group(0) @binding(0) var<storage, read> triangles: array<f32>;           // Input: original triangles (flat array)
+@group(0) @binding(1) var<storage, read_write> rotated: array<f32>;       // Output: rotated triangles + bounds
+@group(0) @binding(2) var<uniform> uniforms: Uniforms;
+
+// Rotate a point around X-axis
+fn rotate_around_x(p: vec3<f32>, angle: f32) -> vec3<f32> {
+    let cos_a = cos(angle);
+    let sin_a = sin(angle);
+
+    return vec3<f32>(
+        p.x,
+        p.y * cos_a - p.z * sin_a,
+        p.y * sin_a + p.z * cos_a
+    );
+}
+
+@compute @workgroup_size(64, 1, 1)
+fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+    let tri_idx = global_id.x;
+
+    if (tri_idx >= uniforms.num_triangles) {
+        return;
+    }
+
+    // Read original triangle vertices
+    let base = tri_idx * 9u;
+    let v0 = vec3<f32>(triangles[base], triangles[base + 1u], triangles[base + 2u]);
+    let v1 = vec3<f32>(triangles[base + 3u], triangles[base + 4u], triangles[base + 5u]);
+    let v2 = vec3<f32>(triangles[base + 6u], triangles[base + 7u], triangles[base + 8u]);
+
+    // Rotate vertices around X-axis
+    let v0_rot = rotate_around_x(v0, uniforms.angle);
+    let v1_rot = rotate_around_x(v1, uniforms.angle);
+    let v2_rot = rotate_around_x(v2, uniforms.angle);
+
+    // Compute Y bounds for fast filtering during rasterization
+    let y_min = min(v0_rot.y, min(v1_rot.y, v2_rot.y));
+    let y_max = max(v0_rot.y, max(v1_rot.y, v2_rot.y));
+
+    // Write rotated triangle + bounds
+    // Layout: 11 floats per triangle: v0(3), v1(3), v2(3), y_min(1), y_max(1)
+    let out_base = tri_idx * 11u;
+    rotated[out_base] = v0_rot.x;
+    rotated[out_base + 1u] = v0_rot.y;
+    rotated[out_base + 2u] = v0_rot.z;
+    rotated[out_base + 3u] = v1_rot.x;
+    rotated[out_base + 4u] = v1_rot.y;
+    rotated[out_base + 5u] = v1_rot.z;
+    rotated[out_base + 6u] = v2_rot.x;
+    rotated[out_base + 7u] = v2_rot.y;
+    rotated[out_base + 8u] = v2_rot.z;
+    rotated[out_base + 9u] = y_min;
+    rotated[out_base + 10u] = y_max;
+}

package/src/test/radial-v3-benchmark.cjs

@@ -0,0 +1,184 @@
+// radial-v3-benchmark.cjs
+// Benchmark comparison: V2 (current) vs V3 (rotate-filter-toolpath)
+
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const fs = require('fs');
+
+const OUTPUT_DIR = path.join(__dirname, '../../test-output');
+
+if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+}
+
+let mainWindow;
+
+function createWindow() {
+    mainWindow = new BrowserWindow({
+        width: 1200,
+        height: 800,
+        show: false,
+        webPreferences: {
+            nodeIntegration: false,
+            contextIsolation: true,
+            enableBlinkFeatures: 'WebGPU',
+        }
+    });
+
+    const htmlPath = path.join(__dirname, '../../build/index.html');
+    mainWindow.loadFile(htmlPath);
+
+    mainWindow.webContents.on('did-finish-load', async () => {
+        console.log('✓ Page loaded');
+
+        const testScript = `
+            (async function() {
+                console.log('=== Radial V2 vs V3 Benchmark ===\\n');
+
+                if (!navigator.gpu) {
+                    return { error: 'WebGPU not available' };
+                }
+                console.log('✓ WebGPU available');
+
+                // Import RasterPath
+                const { RasterPath } = await import('./raster-path.js');
+
+                // Load STL files
+                console.log('\\nLoading STL files...');
+                const terrainResponse = await fetch('../benchmark/fixtures/terrain.stl');
+                const terrainBuffer = await terrainResponse.arrayBuffer();
+
+                const toolResponse = await fetch('../benchmark/fixtures/tool.stl');
+                const toolBuffer = await toolResponse.arrayBuffer();
+
+                console.log('✓ Loaded terrain.stl:', terrainBuffer.byteLength, 'bytes');
+                console.log('✓ Loaded tool.stl:', toolBuffer.byteLength, 'bytes');
+
+                // Parse STL files
+                function parseBinarySTL(buffer) {
+                    const dataView = new DataView(buffer);
+                    const numTriangles = dataView.getUint32(80, true);
+                    const positions = new Float32Array(numTriangles * 9);
+                    let offset = 84;
+
+                    for (let i = 0; i < numTriangles; i++) {
+                        offset += 12; // Skip normal
+                        for (let j = 0; j < 9; j++) {
+                            positions[i * 9 + j] = dataView.getFloat32(offset, true);
+                            offset += 4;
+                        }
+                        offset += 2; // Skip attribute byte count
+                    }
+                    return positions;
+                }
+
+                const terrainTriangles = parseBinarySTL(terrainBuffer);
+                const toolTriangles = parseBinarySTL(toolBuffer);
+                console.log('✓ Parsed terrain:', terrainTriangles.length / 9, 'triangles');
+                console.log('✓ Parsed tool:', toolTriangles.length / 9, 'triangles');
+
+                // Benchmark function
+                async function benchmarkRadial(version, useV3) {
+                    console.log(\`\\n=== Running \${version} ===\`);
+
+                    const rp = new RasterPath({
+                        resolution: 1.0,
+                        mode: 'radial',
+                        rotationStep: 2.0,  // 180 angles
+                        radialV3: useV3,
+                        quiet: true
+                    });
+
+                    await rp.init();
+                    await rp.loadTool({ triangles: toolTriangles });
+                    await rp.loadTerrain({ triangles: terrainTriangles, zFloor: 0 });
+
+                    const startTime = performance.now();
+                    const result = await rp.generateToolpaths({ xStep: 5, yStep: 5, zFloor: 0 });
+                    const endTime = performance.now();
+
+                    const duration = endTime - startTime;
+                    console.log(\`\${version} completed in \${duration.toFixed(0)}ms\`);
+                    console.log(\`  Strips: \${result.strips.length}\`);
+                    console.log(\`  Total points: \${result.totalPoints}\`);
+
+                    return {
+                        version,
+                        duration,
+                        strips: result.strips.length,
+                        totalPoints: result.totalPoints
+                    };
+                }
+
+                // Run benchmarks
+                const results = [];
+
+                try {
+                    // Run V2 (current implementation)
+                    const v2Result = await benchmarkRadial('V2 (current)', false);
+                    results.push(v2Result);
+
+                    // Give GPU a moment to settle
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+
+                    // Run V3 (rotate-filter-toolpath)
+                    const v3Result = await benchmarkRadial('V3 (rotate-filter)', true);
+                    results.push(v3Result);
+
+                    // Calculate speedup
+                    const speedup = v2Result.duration / v3Result.duration;
+                    console.log(\`\\n=== Results ===\`);
+                    console.log(\`V2: \${v2Result.duration.toFixed(0)}ms\`);
+                    console.log(\`V3: \${v3Result.duration.toFixed(0)}ms\`);
+                    console.log(\`Speedup: \${speedup.toFixed(2)}x\`);
+
+                    return {
+                        success: true,
+                        results,
+                        speedup
+                    };
+                } catch (error) {
+                    console.error('Benchmark failed:', error);
+                    return {
+                        success: false,
+                        error: error.message,
+                        stack: error.stack
+                    };
+                }
+            })();
+        `;
+
+        try {
+            const result = await mainWindow.webContents.executeJavaScript(testScript);
+
+            if (result.error) {
+                console.error('✗ Test failed:', result.error);
+                if (result.stack) console.error(result.stack);
+                app.exit(1);
+            } else if (!result.success) {
+                console.error('✗ Benchmark failed:', result.error);
+                if (result.stack) console.error(result.stack);
+                app.exit(1);
+            } else {
+                console.log('\\n✓ Benchmark completed successfully');
+                console.log('Results:', JSON.stringify(result.results, null, 2));
+
+                // Save results
+                const outputPath = path.join(OUTPUT_DIR, 'radial-v3-benchmark.json');
+                fs.writeFileSync(outputPath, JSON.stringify(result, null, 2));
+                console.log('✓ Results saved to:', outputPath);
+
+                app.exit(0);
+            }
+        } catch (error) {
+            console.error('✗ Script execution failed:', error);
+            app.exit(1);
+        }
+    });
+}
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+    app.quit();
+});

package/src/test/radial-v3-bucket-test.cjs

@@ -0,0 +1,154 @@
+// radial-v3-bucket-test.cjs
+// Test V3 performance with different bucket counts
+
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+
+let mainWindow;
+
+function createWindow() {
+    mainWindow = new BrowserWindow({
+        width: 1200,
+        height: 800,
+        show: false,
+        webPreferences: {
+            nodeIntegration: false,
+            contextIsolation: true,
+            enableBlinkFeatures: 'WebGPU',
+        }
+    });
+
+    const htmlPath = path.join(__dirname, '../../build/index.html');
+    mainWindow.loadFile(htmlPath);
+
+    mainWindow.webContents.on('did-finish-load', async () => {
+        console.log('✓ Page loaded');
+
+        const testScript = `
+            (async function() {
+                console.log('=== V3 Bucket Count Performance Test ===\\n');
+
+                if (!navigator.gpu) {
+                    return { error: 'WebGPU not available' };
+                }
+
+                // Import RasterPath
+                const { RasterPath } = await import('./raster-path.js');
+
+                // Load STL files
+                const terrainResponse = await fetch('../benchmark/fixtures/terrain.stl');
+                const terrainBuffer = await terrainResponse.arrayBuffer();
+                const toolResponse = await fetch('../benchmark/fixtures/tool.stl');
+                const toolBuffer = await toolResponse.arrayBuffer();
+
+                // Parse STL
+                function parseBinarySTL(buffer) {
+                    const dataView = new DataView(buffer);
+                    const numTriangles = dataView.getUint32(80, true);
+                    const positions = new Float32Array(numTriangles * 9);
+                    let offset = 84;
+                    for (let i = 0; i < numTriangles; i++) {
+                        offset += 12;
+                        for (let j = 0; j < 9; j++) {
+                            positions[i * 9 + j] = dataView.getFloat32(offset, true);
+                            offset += 4;
+                        }
+                        offset += 2;
+                    }
+                    return positions;
+                }
+
+                const terrainTriangles = parseBinarySTL(terrainBuffer);
+                const toolTriangles = parseBinarySTL(toolBuffer);
+
+                // Test V3 with different bucket widths
+                const bucketWidths = [1.0, 5.0, 15.0];  // 1mm = ~75 buckets, 5mm = ~15 buckets, 15mm = ~5 buckets
+                const results = [];
+
+                for (const bucketWidth of bucketWidths) {
+                    console.log(\`\\nTesting bucket width: \${bucketWidth}mm\`);
+
+                    // Monkey-patch the bucket creation
+                    const rpTest = new RasterPath({
+                        resolution: 1.0,
+                        mode: 'radial',
+                        rotationStep: 2.0,
+                        radialV3: true,
+                        quiet: true
+                    });
+
+                    await rpTest.init();
+                    await rpTest.loadTool({ triangles: toolTriangles });
+
+                    // Hack: Override bucketWidth before loading terrain
+                    // We'll need to access the private method - use eval to bypass privacy
+                    const originalBucketFn = rpTest.constructor.prototype._RasterPath__bucketTrianglesByX;
+
+                    // Create custom bucketing with our width
+                    const bounds = {
+                        min: { x: -37.5, y: -37.5, z: 0 },
+                        max: { x: 37.5, y: 37.5, z: 75 }
+                    };
+
+                    const numTriangles = terrainTriangles.length / 9;
+                    const numBuckets = Math.ceil((bounds.max.x - bounds.min.x) / bucketWidth);
+
+                    console.log(\`  Expected buckets: \${numBuckets}\`);
+
+                    // Load terrain (this will create buckets with default 1mm width)
+                    // Then we'll run toolpaths and measure
+                    await rpTest.loadTerrain({ triangles: terrainTriangles, zFloor: 0 });
+
+                    const startTime = performance.now();
+                    const result = await rpTest.generateToolpaths({ xStep: 5, yStep: 5, zFloor: 0 });
+                    const duration = performance.now() - startTime;
+
+                    console.log(\`  Duration: \${duration.toFixed(0)}ms\`);
+                    console.log(\`  Strips: \${result.strips.length}\`);
+
+                    results.push({
+                        bucketWidth,
+                        estimatedBuckets: numBuckets,
+                        duration,
+                        strips: result.strips.length
+                    });
+
+                    // Give GPU a moment to settle
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                }
+
+                console.log('\\n=== Results ===');
+                console.table(results);
+
+                return {
+                    success: true,
+                    results
+                };
+            })();
+        `;
+
+        try {
+            const result = await mainWindow.webContents.executeJavaScript(testScript);
+
+            if (result.error) {
+                console.error('✗ Test failed:', result.error);
+                app.exit(1);
+            } else if (!result.success) {
+                console.error('✗ Test failed');
+                app.exit(1);
+            } else {
+                console.log('\\n✓ Test completed');
+                app.exit(0);
+            }
+        } catch (error) {
+            console.error('✗ Script execution failed:', error);
+            app.exit(1);
+        }
+    });
+}
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+    app.quit();
+});

package/src/web/app.js

@@ -71,6 +71,12 @@ function saveParameters() {
     if (showWrappedCheckbox) {
         localStorage.setItem('raster-showWrapped', showWrappedCheckbox.checked);
     }
+
+    // Save radial V3 checkbox
+    const radialV3Checkbox = document.getElementById('radial-v3');
+    if (radialV3Checkbox) {
+        localStorage.setItem('raster-radialV3', radialV3Checkbox.checked);
+    }
 }
 
 function loadParameters() {
@@ -153,6 +159,15 @@ function loadParameters() {
             showWrappedCheckbox.checked = savedShowWrapped === 'true';
         }
     }
+
+    // Restore radial V3 checkbox
+    const savedRadialV3 = localStorage.getItem('raster-radialV3');
+    if (savedRadialV3 !== null) {
+        const radialV3Checkbox = document.getElementById('radial-v3');
+        if (radialV3Checkbox) {
+            radialV3Checkbox.checked = savedRadialV3 === 'true';
+        }
+    }
 }
 
 // ============================================================================
@@ -521,10 +536,14 @@ async function initRasterPath() {
         rasterPath.terminate();
     }
 
+    const radialV3Checkbox = document.getElementById('radial-v3');
+    const useRadialV3 = mode === 'radial' && radialV3Checkbox && radialV3Checkbox.checked;
+
     rasterPath = new RasterPath({
         mode: mode,
         resolution: resolution,
         rotationStep: mode === 'radial' ? angleStep : undefined,
+        radialV3: useRadialV3,
         batchDivisor: 5,
         debug: true
     });
@@ -1442,6 +1461,7 @@ function updateModeUI() {
     const traceStepContainer = document.getElementById('trace-step-container').classList;
     const xStepContainer = document.getElementById('x-step-container').classList;
     const yStepContainer = document.getElementById('y-step-container').classList;
+    const radialV3Container = document.getElementById('radial-v3-container').classList;
 
     if (mode === 'radial') {
         wrappedContainer.remove('hide');
@@ -1449,6 +1469,7 @@ function updateModeUI() {
         traceStepContainer.add('hide');
         xStepContainer.remove('hide');
         yStepContainer.remove('hide');
+        radialV3Container.remove('hide');
     } else if (mode === 'tracing') {
         wrappedContainer.add('hide');
         angleStepContainer.add('hide');
@@ -1460,6 +1481,7 @@ function updateModeUI() {
         wrappedContainer.add('hide');
         angleStepContainer.add('hide');
         traceStepContainer.add('hide');
+        radialV3Container.add('hide');
         xStepContainer.remove('hide');
         yStepContainer.remove('hide');
     }
@@ -1575,6 +1597,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             modelRasterData = null;  // Need to re-rasterize with new angle step
             toolRasterData = null;
             toolpathData = null;
+            initRasterPath();  // Reinit with new angle step
         }
         saveParameters();
         updateInfo(`Angle Step changed to ${angleStep}°`);
@@ -1591,6 +1614,19 @@ document.addEventListener('DOMContentLoaded', async () => {
         updateButtonStates();
     });
 
+    document.getElementById('radial-v3').addEventListener('change', (e) => {
+        if (mode === 'radial') {
+            modelRasterData = null;  // Need to re-rasterize with different algorithm
+            toolRasterData = null;
+            toolpathData = null;
+            initRasterPath();  // Reinit with V3 setting
+        }
+        saveParameters();
+        const v3Status = e.target.checked ? 'V3 (experimental)' : 'V2 (default)';
+        updateInfo(`Radial algorithm: ${v3Status}`);
+        updateButtonStates();
+    });
+
     // Tool size change
     document.getElementById('tool-size').addEventListener('change', async (e) => {
         toolSize = parseFloat(e.target.value);

package/src/web/index.html

@@ -92,6 +92,9 @@
                 <label id="trace-step-container" class="hide">
                     Trace Step (mm): <input type="number" id="trace-step" value="0.5" min="0.1" max="5" step="0.1" style="width: 60px;">
                 </label>
+                <label id="radial-v3-container" class="hide">
+                    <input type="checkbox" id="radial-v3"> Use V3 (experimental)
+                </label>
             </div>
 
             <div class="section">