Free tool

GLSL to TSL
shader converter

Bring your existing GLSL shaders into Three.js WebGPU. Paste a fragment shader, convert it instantly with the official Three.js transpiler, and watch the original and the converted TSL render side by side. Completely free, right in your browser.

Official Three.js transpiler · free · live WebGL/WebGPU preview

No signup, runs in your browser[01]
Loading Converter...

Getting started

How to convert GLSL to TSL

Nothing is uploaded. The transpiler, the WebGL preview and the WebGPU preview all run in your own browser, so the shader never leaves your machine.

[03 steps]
Step[01]

Paste your GLSL

Drop in a fragment shader — Shadertoy `mainImage` style or a Three.js `ShaderMaterial` fragment. Two live examples are free to try.

Step[02]

Convert instantly

The official Three.js transpiler converts it deterministically and free, right in your browser, checked against a live WebGPU preview.

Step[03]

Copy into your project

Paste the TSL straight into your Three.js WebGPU scene — it targets a known node-material runtime, so there's no setup to wire up.

F.A.Q

Frequently asked questions

What people ask about converting GLSL shaders to TSL.

The converter

What it handles and how it checks itself.

TSL (Three.js Shading Language) is the node-based way to write shaders for the Three.js WebGPU renderer. It replaces hand-written GLSL strings with composable JavaScript nodes that run on both WebGPU and WebGL.

GLSL fragment shaders — Shadertoy `mainImage` shaders and `ShaderMaterial` fragment shaders. Vertex shaders, compute shaders and multi-pass/buffer-feedback Shadertoy shaders aren't supported yet.

Your original GLSL renders on the left via WebGL, and the converted TSL renders on the right via WebGPU, on identical geometry. You only see “Conversion verified” when both compile and run cleanly — so you're not trusting code you haven't seen work.

Yes — completely free, with no account needed. Conversion runs on the official Three.js transpiler entirely in your browser.

Under the hood

The transpiler, privacy and learning TSL.

The official Three.js GLSL→TSL transpiler (three/addons/transpiler) runs in your browser — the same deterministic tool the Three.js team maintains. It handles Shadertoy `mainImage` shaders and `ShaderMaterial` fragments, including functions, loops and uniforms.

Nothing is uploaded — the conversion and both side-by-side previews run entirely in your browser using the Three.js transpiler, WebGL and WebGPU.

The converter ports your shader; if you want to author TSL from scratch, take our interactive 'Learn Practical TSL' course, which teaches the node graph, lighting, and effects step by step.

More Three.js tools & resources

[Keep exploring]