WebGPU suitable for a CAD-style drawing tool?

Questions
1

Hi everyone,

I’m currently building a CAD-style drawing tool in the browser using Three.js, something similar to AutoCAD.

The tool allows users to draw and edit a large number of points, lines, arcs, and hatched areas. It’s still a prototype, but the core interaction features are working: placing points, drawing lines and arcs, editing geometry, and filling polygons.

I’m using WebGPURenderer (via import maps and local Three.js builds) to make the app more future-proof. I’m also planning to integrate large point clouds using Potree.org, which is also moving towards WebGPU.

:wrench: Current Setup:

Renderer: WebGPURenderer
Points: Created as individual Mesh objects using SphereGeometry + MeshBasicMaterial
Lines: Using Line + LineBasicMaterial
Hatches/Polygons: With ShapeGeometry + MeshBasicMaterial
Interaction: Full support for adding, deleting, dragging points, drawing curves and filling shapes

:bullseye: Goals:

Handle thousands of points, lines, and filled areas smoothly
Support for zooming, interactivity, and real-time editing
Future use of WebGPU features (compute, better shaders, point cloud rendering)

:warning: What I noticed:

WebGPU rendering sometimes feels less performant than WebGL, especially for lines.

Example:

WebGPU (slower):
https://threejs.org/examples/?q=line#webgpu_lines_fat

WebGL (much smoother):
https://threejs.org/examples/?q=line#webgpu_lines_fat_raycasting

:red_question_mark: Questions:

  1. Is WebGPU currently a good choice for this kind of technical drawing tool?**
    Or is WebGL still better in terms of performance?

  2. Is using Mesh with SphereGeometry for every point efficient,
    or should I switch to THREE.Points or CircleGeometry for better performance?

  3. For lines – should I switch to Line2 with LineMaterial to get consistent screen-space thickness?
    And which version of Line2 is recommended for WebGPU?

    examples/jsm/lines/Line2.js (WebGL?)
    examples/jsm/lines/webgpu/Line2.js (WebGPU version?)

  4. What’s the best practice for rendering thousands of points and lines with maximum performance?

Any advice, experience, or suggestions would be really appreciated :folded_hands:
Thanks in advance

image
image1026×1138 34.8 KB

2

2 - Look into instanced mesh. Scaling performance - React Three Fiber

3 - Yes, pretty sure R3F Drei changes size

4 - As above. Instance everything. Minimise use of useFrame, minimise expensive materials. Minimise state. Just start building and keep on the whole time, so you can be aware when changes are non performant.

At Moddy.io we do a reasonable amount of points/lines/text and have no issues.

1 Like
3

As a technology WebGPU is perfectly suitable, but keep in mind that the WebGPU renderer in three.js is still considered experimental. You will likely find bugs and performance pitfalls that do not exist in the three.js WebGL renderer, which is stable and production-ready. So your appetite for forward-looking but unstable APIs, and your timing/roadmap for wanting a stable product, would be a factor.

Replacing WebGL with WebGPU does not inherently increase performance, but does offer you a lot of tools (e.g. TSL and compute) that can make it easier to write a high-performance application, and in the long run, performance is mostly about having enough time and the right tools to solve your application’s particular bottlenecks.

tl;dr – For new small or personal projects, I’m happily using WebGPU now. For a new commercial startup, with tight deadlines and stakeholders, I’d probably feel safer choosing WebGL unless I need something the WebGPU renderer offers. And, of course, there’s no WebGPU support in Safari or iOS today.

2 Likes
4

Hey, thank you!

does instancing also work in my case for lines with different lengths/widths?

For the Points, I replaced Spheres with instances of Billboards, which have the best performance in my opinion.

Do you have any Idea how I can modify the Camera,so everything is always visible? Because normally you need a min and max distance when using a camera, but I want to avoid that. especially for large scenes with big coordinates!

can you export IFC-Format on Moddy.io?

Do you have a suggestion, how can i print my canvas with all objects lines etc. to a CAD-Drawing?

5

Hey thanks a lot for your post.

As you already said, because webGPu is experimental right now and not suitable for business projects, I decided to use WebGL instead. I want operability on all systems as good as possible so everyone can use it!

6

If you’re drawing complex objects in 3D space then you’re going to be relying on the depth buffer to see them drawn in the right order and avoid z-fighting. The near/far planes are not primarily there to show/hide things; they’re necessary to configure the depth buffer, so its (limited) precision is allocated to the right depth range.

2 Likes
7

I believe it to be fairly suitable.