Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

A 350-Line GLSL Shader Playground in the Browser — WebGL Init, Line-Number-Aware Errors, and URL-Hash Sharing

DEV Community·SEN LLC·19 days ago
#vkrxQq6H
Reading 0:00
15s threshold

Sometimes you want to try a shader without spinning up Shadertoy, without a build step, without anything. Just a textarea, a canvas, and a refresh-while-you-type loop. This is that page: ~350 lines of vanilla JS, a fixed full-screen-quad vertex shader, and a fragment shader you edit live. Compile errors land back in the UI with line numbers; the URL hash round-trips your source so links shared on Twitter just work. 🌐 Demo : https://sen.ltd/portfolio/shader-playground/ 📦 GitHub : https://github.com/sen-ltd/shader-playground What it does The vertex shader is fixed — a full-screen quad as two triangles. The fragment shader is what the user edits . The page runs gl.compileShader(...) 220 ms after each keystroke (debounced) and swaps the program if compilation succeeds. Three uniforms are auto-bound : u_resolution (drawing buffer size), u_mouse (cursor in WebGL pixel coords), u_time (seconds since page load). Compile errors land in the UI with line numbers , parsed from the driver's info log.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More