Editor’s Note: As we commemorate the inaugural Three.js Conference, we spotlight the visionaries and their ideas driving innovation within this community. Today, we’re thrilled to feature Mathis Biabiany, whose unrelenting curiosity has birthed this stunning investigation into illuminated GPU tubes using TSL and WebGPU. We wholeheartedly appreciate Mathis for sharing this remarkable work, and we trust you’ll enjoy the intricate exploration as much as we did.

Origins of the Project

Lines have been my obsession. Recently, I found a gem in the form of makio-meshline, a TSL-driven meshline library designed by David Ronai, perfectly suited for rendering with WebGPU. It boasts an impressive feature set, including gradients, textures, and even shadow casting—everything a developer could desire for line drawing in three.js. Yet, a major limitation looms that many will recognize: it's unlit. The library's material is built on MeshBasicNodeMaterial, which means your lines lack depth—they never interact dynamically with light.

That’s a serious oversight. When you start to appreciate how lighting can influence an object, these lines begin to feel like mere artifacts rather than integrated components of a scene—they don't catch light, they don’t showcase a sense of dimension, and they certainly lack the organic feel of being part of the environment.

This isn’t easily fixable; a meshline duplicates each vertex to create depth visually, but in doing so, it sacrifices true geometric properties. The geometry perceives the object through screen coordinates rather than actual surface parameters, leading to a flat representation. What I envisioned was not merely a drawing but a tangibly voluminous representation, like two outstretched hands formed from fine threads—exquisite yet organic.

The quest for true geometry, hence, morphed into the creation of a tube system. This article delves into that tube renderer's development, the artistry of constructing hands atop it, and the humbling journey through three significant mathematical errors encountered along the way—errors that shaped the final product.

Three Key Takeaways

There are three essential insights worth extracting:

1. A tube structure with geometry that remains static—only its positions and normals are recalculated through TSL atop a standard PBR material.
2. The dilemma of cross-section frames and the inherent challenges in overcoming it mathematically.
3. Constructing curves through a technique that allows strands to embody rather than embellish a shape.

While this implementation uses TSL with WebGPU, these concepts can easily transition to vanilla GLSL.

Conventional Techniques and Their Limitations

If someone were to ask me how to create lines with volume, the automatic response might be THREE.TubeGeometry: generate vertices for each segment of a curve, encapsulate them in rings, and transmit this data to the GPU. While that works charmingly for a one-off, it falters quickly in dynamic scenarios. My design requires line positions to shift at every frame, making constant vertex reconstruction on the CPU not only laborious but counterproductive. After all, one of the primary advantages of using a GPU is to alleviate such burdens.

Thus, the aim became clear: the triangles remain unchanged; only their locations adapt.

A Tube with Stability

This isn't a traditional tube but a flexible grid devoid of inherent shape:

• progress—indicating how far along the curve the ring resides, ranging from 0 to 1.
• angle—representing the position around the ring cross-section, from 0 to 2π.
• Indices facilitating connections between adjacent rings.

This framework amounts to mere parameters without substantive positions or normals—just a handful of vertices representing a grid in parameter space.

The Stumbling Blocks in Math

Most aspects of the rendering system came together smoothly, but one innocent line of code—cross(upAxis, tangent)—became a source of repeated failures. Ultimately, I learned invaluable lessons from each misstep, each of which unveiled concepts I hadn’t encountered in written form before.

The challenge lies in generating a ring around a curve, which necessitates finding two perpendicular directions at each vertex—essentially forming a frame. Traditional methods like TubeGeometry employ a technique for maintaining a stable frame as you traverse the curve, which depends sequentially on the previous frame. Since each vertex shader functions independently, relying solely on the tangent isn’t sufficient.

Through the initial attempts, I developed three different strategies, each leading me down a different rabbit hole:

Each variant had its pitfalls, from ambiguous axis flips to problematic blending approaches. The lessons learned forced me to rethink my methods, reinforcing the notion that no rotation-free frame can handle every possible direction of airflow where it remains stable. This epiphany reframed my perspective from merely seeking a formula to deliberately choosing where failures occur within the design—all while ensuring they didn’t become visually disruptive across my content.