Why TSL (three.js shading language) is so interesting!

Discussion
, ,
1

TSL is a way of writing WebGPU shaders with JavaScript instead of WGSL directly. Example:

https://threejs.org/examples/#webgpu_tsl_editor

What I find interesting, which is not shown yet in any example, is the possibility of shipping “shader code” in the form of JavaScript modules and publishing them on NPM, then being able to import shader libs with standard JavaScript import syntax.

f.e.

import {someSpecialAnimationOrSomething} from 'my-cool-shader-lib'

const finalColor = someSpecialAnimationOrSomething( myColor, time );

output = vec4( finalColor, opacity );

(Totally fake contrived example, but you get the idea!)

3 Likes
2

Here’s a similar, standalone effort at making a WGSL shader “language” in TypeScript:

1 Like
3

I’ve been doing it like this for a long time, here an examle:

In myShader.js

export const myShader = `  

  //shadercode
 
`;

In this way I can treat my vertexShader, fragmentShader, computeShader as a javascript file and easily integrate it with import. This helps me a lot to keep things organized. In addition, large shaders can also be broken down into individual parts and simply combined in the code with +.

//modular shaders
import { headerVS } from "../../resources/shader/headerVS.js";
import { headerFS } from "../../resources/shader/headerFS.js";
import { oceanVS } from "../../resources/shader/oceanVS.js";
import { oceanFS } from "../../resources/shader/oceanFS.js";

this.material_ = new THREE.RawShaderMaterial({
	glslVersion: THREE.GLSL3,
	uniforms: uniform,
	vertexShader:  
		headerVS + '\n' +
		oceanVS,
	fragmentShader:
		headerFS + '\n' +
		oceanFS,
	side: THREE.DoubleSide,
	wireframe: params.wireframe,
});

I originally had additional shader modules, but they have all become unnecessary. In this way you can easily combine shader functions in a modular manner.
I don’t know why no one else uses it. At least I haven’t seen that anywhere. I only do it this way because it is very efficient.

With wgsl:

In myShader.js:

import {wgslFn} from '../../src/three-defs.js';

export const myShader = wgslFn(`  

  //shadercode
 
`);
4 Likes