Here's something I still find remarkable: five years ago, if you wanted to view a 3D CAD model, you needed a $5,000 workstation running SolidWorks or CATIA. Today, we're rendering million-polygon models in a browser tab on a $400 Chromebook. No plugins, no downloads, no IT department involvement.
That shift — from desktop-only to browser-based 3D — is quietly transforming how manufacturers design products, train operators, sell to customers, and monitor production. And we've been in the thick of it. When we built the visualization engine for DepthSync, we were rendering 1.2 million data points in 80 milliseconds in a standard web browser. That kind of performance opens up use cases that weren't possible even a few years ago.
Let me walk you through what's realistic today with WebGL and Three.js for manufacturing, where the technology actually stands (not the marketing version), and how to think about building 3D visualization into your manufacturing software.
Why Browser-Based 3D Matters for Manufacturing
The traditional approach to 3D in manufacturing is gated by software licenses, specialized hardware, and training. CAD workstations cost $3-8K each. SolidWorks licenses run $4-8K per seat per year. Viewing a model requires either the authoring software or a clunky desktop viewer that IT has to install and maintain.
This creates bottlenecks everywhere:
- Sales engineers can't show customers interactive 3D models during web calls — they share screenshots or pre-rendered videos
- Shop floor operators reference 2D printouts taped to machines instead of interactive 3D assembly instructions
- Maintenance technicians flip through 500-page PDF manuals instead of exploring an interactive equipment model
- Quality inspectors compare physical parts against static drawings instead of overlaying measurements on 3D models
- Customers can't configure products in 3D before ordering — they fill out spreadsheets and hope for the best
Browser-based 3D eliminates these bottlenecks. Anyone with a web browser can interact with 3D content. No software to install, no hardware to upgrade, no licenses to manage. And with WebGL 2.0 and modern GPUs in every laptop and tablet, the performance is there.
The Technology Stack: WebGL and Three.js
WebGL — The Foundation
WebGL is a JavaScript API that gives your browser direct access to the GPU for hardware-accelerated 3D rendering. It's supported in every modern browser — Chrome, Firefox, Safari, Edge — on every platform including mobile.
Key WebGL capabilities for manufacturing:
| Feature | WebGL 1.0 | WebGL 2.0 |
|---|---|---|
| Max Texture Size | 4096x4096 | 16384x16384 |
| 3D Textures | No | Yes |
| Multiple Render Targets | No | Yes |
| Instanced Drawing | Extension | Native |
| Float Textures | Extension | Native |
| Vertex Count | ~65K per draw call | 4B+ per draw call |
WebGL 2.0 is the sweet spot for manufacturing visualization — it's widely supported and provides enough capability for most use cases. WebGPU is the next generation, offering compute shaders and better performance, but browser support is still limited as of early 2026.
Three.js — The Practical Choice
You could write raw WebGL, but you'd spend months building the basics (camera controls, lighting, model loading) before writing any manufacturing-specific code. Three.js abstracts the hard parts and gives you:
- Scene graph management — Organize complex assemblies with parent-child relationships
- Camera controls — Orbit, pan, zoom with mouse/touch input out of the box
- Lighting models — PBR (physically-based rendering) for realistic material representation
- Model loaders — Import GLTF, OBJ, STL, STEP (with conversion), and more
- Post-processing — Ambient occlusion, edge detection for technical drawings, bloom for highlights
- Performance tools — LOD (level of detail), frustum culling, instanced meshes
Performance: Real Numbers
Let me share actual performance numbers from manufacturing visualization projects we've built, because "it's fast" isn't helpful when you're deciding whether to invest:
| Scenario | Polygon Count | Load Time | Frame Rate | Browser |
|---|---|---|---|---|
| Simple part viewer | 50K triangles | 0.3s | 60 FPS | Any modern |
| Assembly (50 parts) | 500K triangles | 1.2s | 60 FPS | Any modern |
| Full machine model | 2M triangles | 3.5s | 45-60 FPS | Desktop Chrome |
| Factory floor layout | 5M triangles | 8s | 30-45 FPS | Desktop, recent GPU |
| Point cloud (DepthSync) | 1.2M points | 0.08s | 60 FPS | Desktop Chrome |
The DepthSync project was a particular milestone for us. Rendering 1.2 million data points in 80 milliseconds required custom shader programming, GPU-based point picking, and aggressive LOD management. But it proved that browser-based visualization can handle data volumes that would have required a dedicated desktop application just a few years ago.
When Three.js Isn't Enough
Three.js is excellent for 90% of manufacturing visualization needs, but there are cases where you need more:
- Point clouds over 10M points — Look at Potree or custom WebGL/WebGPU renderers
- Real-time physics simulation — Cannon.js or Rapier for browser-based simulation
- CAD kernel operations (boolean, fillet, chamfer) — OpenCascade compiled to WebAssembly (OCCT.js)
- Massive assemblies (50M+ triangles) — Requires streaming LOD techniques and possibly WebGPU
Manufacturing Use Cases
1. Browser-Based CAD Viewers
This is the most immediate, highest-ROI use case. Instead of requiring SolidWorks to view a model, embed a 3D viewer directly in your MES, ERP, or quality system.
What a good CAD viewer needs:
- Format support — STEP and IGES are the universal CAD exchange formats. GLTF is the web-optimized format. You need a server-side conversion pipeline: STEP to GLTF via OpenCascade or CAD Exchanger.
- Assembly tree — Show/hide individual parts, highlight by selection
- Measurement tools — Point-to-point distance, angle measurement, section views
- Annotation layers — Pin notes, quality callouts, and work instructions to specific features
- Bill of Materials — Click a part in the 3D view, see its BOM entry. Click a BOM entry, highlight the part.
- Cross-section views — Cut planes for inspecting internal geometry
- Comparison — Side-by-side or overlay comparison of revision A vs revision B
Implementation approach: