Shader Playground

An interactive WebGL shader editor with live preview, built with React Three Fiber and custom GLSL compiler tooling.

WebGLReactTypeScript

Overview

Shader Playground is an in-browser editor for writing and testing GLSL shaders in real time. It combines a code editor with an instant WebGL preview, making it easy to experiment with fragment shaders without setting up a full project.

Architecture

The app uses React Three Fiber for WebGL rendering inside React's component tree. A custom shader compiler validates GLSL syntax on the client side, and errors are surfaced directly in the UI.

function ShaderPreview({ code }: { code: string }) {
  return (
    <Canvas>
      <mesh>
        <planeGeometry args={[2, 2]} />
        <shaderMaterial
          fragmentShader={code}
          uniforms={{ uTime: { value: 0 } }}
        />
      </mesh>
    </Canvas>
  );
}

Key Features

Live compilation — shaders compile as you type, with error highlighting
Uniform editor — tweak uniforms with sliders and color pickers
Export — download shaders as standalone HTML files
Templates — start from a library of classic shader examples

Tech Stack

Built with React, TypeScript, and React Three Fiber. The editor uses CodeMirror 6 for syntax highlighting and auto-completion of GLSL built-in functions.