Three.js Shading Language a New Era for Shaders

The Future of 3D Graphics: Introducing Three.js Shading Language

On May 29th, an exciting announcement was made on the official Three.js account on X (formerly known as Twitter).

Three.js has introduced a new shading language capable of generating both GLSL and WGSL code.

In this blog post, we’ll dive into what this means and why it represents one of the most significant revolutions I’ve witnessed in my career working with these tools.

It’s a shift that’s poised to radically change how we work with shaders in our 3D projects.

A Moment of Context

For some time now, we’ve been in the midst of a revolution in 3D graphics on the web. We are transitioning from older APIs like WebGL to newer, more powerful ones called WebGPU.

These new APIs promise better performance by leveraging the latest GPU technologies. However, from a developer’s perspective, they also necessitate a new shading language.

While WebGL shaders were written in GLSL (OpenGL Shading Language), WebGPU requires a different language called WGSL (WebGPU Shading Language).

These languages are similar, statically typed, closely related to C, and focused on the complex vector calculations essential for 3D graphics.

These shaders, once written, are compiled and sent to the GPU, which then generates the frames that developers incorporate into HTML pages.

The Transition to WebGPU

Alongside this API transition, most libraries used for 3D graphics on the web, including Three.js, are also updating to incorporate these new functionalities.

However, this update requires rewriting many existing shaders within Three.js materials. This is where the recent announcement from Three.js fits in.

Three.js’s recent post introduces a new shading language — Three.js Shading Language (TSL) — as part of the transition to WebGPU. After experimenting with it for a few days, I can confidently say that it represents a groundbreaking paradigm shift.

Understanding Three.js Shading Language (TSL)

Three.js Shading Language (TSL) is set to revolutionize how we develop and modify shaders. Instead of the old method of string substitution, TSL adopts a node-based approach, a paradigm already familiar to many from tools like Unreal Engine’s Blueprints, Blender, and Unity’s Shader Graph.

This approach facilitates shader development by breaking down the shaders into a series of nodes, each applying a specific effect. These nodes can be combined to generate the final shader. Although we shouldn’t expect a graphical interface as advanced as those in some other software, the underlying logic remains the same.

The nodes in TSL are essentially functions that can be utilized, combined, and chained together to generate the final shader. The most impressive aspect is that TSL will automatically handle the adaptation for the appropriate API, whether GLSL for WebGL or WGSL for WebGPU.

Practical Implications

Previously, customizing shaders involved cumbersome string manipulation methods. This new system is considerably more flexible, maintaining readability and making the code more maintainable.

TSL opens up new, unexplored possibilities for 3D web development, promising more recyclable and manageable code. It’s something I’m genuinely excited about, and I’ve already begun experimenting with it.

Call to Action

As we stand at the beginning of this new era, I’m planning to make a live stream where we can explore this new approach together. Currently, documentation is sparse, and what we know is based on preliminary specifications and a few examples shared by users on X, including the ever-innovative Bruno Simon.

In conclusion, the future of Three.js looks extremely promising. This new shading language system implies that not only will our work with Three.js improve, but any application needing shading code can potentially use this new system.

I encourage everyone to comment on this post, sharing your thoughts and excitement about this new development.

Stay tuned to my channel for more practical videos on how to utilize TSL. We’ll also revisit older projects to recreate shaders using this groundbreaking system. Make sure to give this post a like and stay subscribed so you don’t miss out on upcoming updates.

See u!