noïs

A real-time shader editor and playground for experimenting with procedural noise techniques, featuring advanced material properties and interactive 3D visualization using Three.js and WebGL.

Background

Since using TouchDesigner, I fell in love with mathematical noise, as it allows to create complex, organic and beautiful visuals. As a web developer, I wanted to recreate similar effects in the browser. However, when using classical shader languages like GLSL, it is not as easy to create and adjust such shaders. Therefore, I wanted to create a tool that allows to create noise-based shaders in a more intuitive way, making experimentation more accessible.

Technologies & Tools

• Vue 3 with Composition API
• Three.js & WebGL
• Vite
• TypeScript
• Pinia (state management)
• Monaco Editor (code editing)
• SCSS

Features

• Real-time shader editing with live preview
• Multiple noise algorithms (Perlin, Simplex)
• Using noise for vertex and fragment shader
• Gradient color editing with preset library
• Multiple geometry types (sphere, torus, cube, etc.)
• Advanced material properties (metalness, roughness, iridescence)
• Export functionality for Three.js, Vue, React, and Svelte
• Responsive design with mobile-optimized controls

Challenges

Combining multiple noise functions and shader parameters to a complex shader was hard. Deciding which parameters to expose to the user and adjusting the inputs for proper ranges took some time. Also the use of the state management to sync the ui, the shader code and the live preview was challenging.

Learnings

In large shaders with many uniforms/parameters, it is important to batch the updates to the GPU uniforms for a good perfomance. As writing shader code isn't easy, it's important to provide a robust error handling and fallback mechanisms. The biggest benefit of such code-heavy creativity support tools comes from exporting features, allowing the users to reuse their creations in other projects easily.

Click here for the live demo

Building ShaderLab was a fun experience that hopefully makes the creation of complex noise-based shaders more accessible for everyone.