The latest articles on DEV Community by zyg (@zouyugangian). https://dev.to/zouyugangian https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3648439%2Fa1667aeb-e1b3-4e7a-81d4-36c49127b0ad.png https://dev.to/zouyugangian en zyg Fri, 05 Dec 2025 18:54:34 +0000 https://dev.to/zouyugangian/building-hy-cad-a-webgpu-powered-cad-viewer-with-rust-and-kiro-n82 https://dev.to/zouyugangian/building-hy-cad-a-webgpu-powered-cad-viewer-with-rust-and-kiro-n82 <h2> The Problem </h2> <p>Why should viewing a CAD drawing require installing gigabytes of proprietary software? Engineers in the field and architects on-site all face this barrier. I set out to change that.</p> <h2> What I Built </h2> <p><strong>Hy-CAD</strong> is a cloud-first CAD system that brings AutoCAD-grade rendering directly to your web browser. It handles complex DXF drawings with 100,000+ entities, renders via WebGPU acceleration, and delivers native desktop performance.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/your-screenshot-url-here" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/your-screenshot-url-here" alt="Hy-CAD Screenshot" width="800" height="400"></a></p> <h3> Key Features </h3> <ul> <li>Instant DXF viewing (up to 50MB, zero installation)</li> <li>GPU-accelerated pan/zoom at 60fps</li> <li>Full entity support: lines, arcs, splines, hatches, dimensions, text</li> <li>Complete layer management</li> <li>Cross-platform: Windows, macOS, Linux, any modern browser</li> </ul> <h2> Tech Stack </h2> <ul> <li> <strong>Rust</strong> - Compiles to both native and WebAssembly</li> <li> <strong>wgpu</strong> - Unified GPU abstraction (WebGPU/Vulkan/Metal/DirectX)</li> <li> <strong>egui</strong> - Immediate mode UI</li> <li> <strong>glam</strong> - Fast math operations</li> </ul> <h2> How Kiro Accelerated Development </h2> <p>Kiro was instrumental in building Hy-CAD. Here's how:</p> <h3> Spec-Driven Development </h3> <p>I created detailed specs in <code>.kiro/specs/</code> for major features. Each spec contained requirements, design, and tasks. Kiro followed these specs precisely, implementing complex features like NURBS evaluation and tessellation caching without deviation.</p> <h3> Vibe Coding for Rapid Prototyping </h3> <p>For exploratory work, I used conversational prompts. The most impressive generation was a complete WebGPU rendering pipeline—15,000+ lines of production Rust code including spatial indexing, geometry batching, and GPU culling shaders.</p> <h3> Steering Documents </h3> <p>Three steering files (<code>product.md</code>, <code>structure.md</code>, <code>tech.md</code>) ensured Kiro always understood the project context. This eliminated 90% of architectural mistakes.</p> <h2> Technical Challenges Solved </h2> <p><strong>Font Rendering</strong>: CAD fonts (SHX) aren't browser-compatible. Built a font mapper translating CAD references to web-safe equivalents.</p> <p><strong>Precision at Scale</strong>: Engineering coordinates span micrometers to kilometers. Implemented dynamic view origin re-centering for sub-pixel accuracy.</p> <p><strong>WebGPU Compatibility</strong>: Created an abstraction layer with WebGL2 fallback for universal browser support.</p> <h2> Results </h2> <ul> <li>95% native performance via WebAssembly</li> <li>&lt;100ms first paint for typical drawings</li> <li>Zero server-side processing required</li> </ul> <h2> Try It </h2> <p>🔗 <a href="https://dev.toyour-repo-url">GitHub Repository</a><br> 🔗 <a href="https://dev.toyour-demo-url">Live Demo</a></p> <p><em>Built for the Kiro Hackathon. Professional CAD tools belong to everyone.</em></p> kiro rust webassembly webgpu