learntsl.com

Learn TSL!

Welcome to a website to learn the Three.js Shader Language.
Working Code Examples

Initialize a shader with TSL targeting WebGPU

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js TSL Example</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <!-- <script type="module" src="/main.js"></script> -->
    <script type="module">
        import * as THREE from "https://esm.sh/three";
import { MeshBasicNodeMaterial, TextureNode, timerLocal, mul } from "https://esm.sh/three/nodes";
import { OrbitControls } from "https://esm.sh/three/addons/controls/OrbitControls.js";
import WebGPURenderer from "https://esm.sh/three/addons/renderers/webgpu/WebGPURenderer.js";

//--------------------------three.js setup-----------------------------

const renderer = new WebGPURenderer({
  antialias: true,
  forceWebGL: false,
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(50.0, window.innerWidth / window.innerHeight, 0.1, 100000);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x00001f);

camera.position.set(4, 4, 4);

const controls = new OrbitControls(camera, renderer.domElement);

window.addEventListener("resize", onWindowResize, false);

//-----------------------------------------------------------------------

let cube;

init();
render();

function init() {
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load("https://favicon.cool/cool.ico");

  const material = new MeshBasicNodeMaterial();
  const textureNode = new TextureNode(texture);
  const timerNode = timerLocal(.5); // Adjust the speed of animation

  material.colorNode = mul(textureNode, timerNode);

  const geometry = new THREE.BoxGeometry();
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
}

function render() {
  requestAnimationFrame(render);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
    </script>
</body>
</html>
Three.js TSL Example
”/>