tsl-2dkit

A toolkit to be used on top of Three.js Shading Language (TSL) for 2D shaders.

tsl-2dkit is thought out to be an accessible way to write (and learn) fragment shader programming. It lives on top of TSL, which's toolchain transpiles JavaScript code (TSL syntax) to WebGL or WebGPU, allowing for native-speed fragment shaders with minimal overhead.

Features

• A scene handler, for writing fragment-shaders in a canvas-like manner, greatly reducing boilerplate
• Write TSL shaders as a PassNode (scene post-processing)

Utilities

• A texture handler, allowing for non-TSL based reactive textures such as videos and images, updatable text, external canvases and more
• A canvas recorder, allowing to easily save the canvas as a framerate-consistent video
• Better noise algorithms (than the native TSL ones), such as Voronoi, (more to be implemented)
• Blur algorithms, morphology algorithms, and more

Installation

npm install tsl-2dkit three
# or
pnpm add tsl-2dkit three
# or
bun install tsl-2dkit three
# ...

Quick Start

import { color } from "three/tsl";
import { TSLScene2D } from "tsl-2dkit";

const scene = new TSLScene2D(window.innerWidth, window.innerHeight);

window.addEventListener("resize", () => {
	scene.setSize(window.innerWidth, window.innerHeight);
});

await scene.build(() => {
	const final = color("#ff8c00");
	return final;
});

document.body.appendChild(scene.canvasElement);

Documentation

Coming soon! For now, check out the demo folder for examples. All public API is theorically documented.

Also see:

• Three.js Shading Language (GitHub wiki)
• Official TSL nodes documentation

Requirements

• Three.js v0.182.0 or higher
• Modern browser with WebGPU or WebGL2 support

License

MPL-2.0

Contributing

This library is in alpha. Contributions and feedback are welcome!

Thanks

• The three.js and TSL authors and contributors, without which's hard work this project wouldn't have been possible
• Prof. David Liebermann and Prof. Jana Reddemann for giving Sacha, author, the liberty to work on this library as a main semester project as part of his visual and graphic communication bachelor
• p5.js, Processing, the Coding Train and Daniel Shiffman and Tim Rodenbröker for making coding accessible via creative coding, one of the inspirations behind this project