Welcome to the 0x7444ff Shader Collection – a curated compilation of GLSL shaders and WebGL experiments by @SahilK-027. This repository showcases the intersection of mathematics, graphics programming, and digital art through 18+ interactive shader projects.
This repository is a creative collection of GLSL shaders crafted for the joy of digital art and graphics programming. Each project demonstrates different shader techniques, from procedural patterns and noise functions to GPGPU particle systems and advanced rendering effects. Whether you're learning shader programming or seeking inspiration, explore where technology meets art.
Important
Before You Begin 👀
Performance Warning
Some shaders in this collection are computationally intensive and designed to push GPU limits. They may cause performance drops on low-end or mobile devices. Testing on devices with modern graphics hardware is recommended.
Compatibility Considerations
These shaders are tested on WebGL2-compatible browsers (Chrome, Firefox, Edge). Variations may occur depending on hardware and browser versions. For the best experience, use the latest browser version and keep your graphics drivers updated.
Learning Resources
New to shader programming? Start with The Book of Shaders for comprehensive guidance. For questions about this collection, open a discussion on the repository or reach out via GitHub.
| # | Project Preview | Link | # | Project Preview | Link |
|---|---|---|---|---|---|
| (1) |  |
Kaleidoscope |
(2) |  |
Electric Waves |
| (3) |  |
Black Pearl Flag |
(4) |  |
Abstract Pattern |
| (5) |  |
Peacock Animation |
(6) |  |
Particles-GPGPU |
| (7) |  |
Iron-man |
(8) |  |
Space Distortion |
| (9) |  |
Poly-ele |
(10) |  |
Glowing Phoenix |
| (11) |  |
Advanced Abstract Pattern |
(12) |  |
Transformers Transition |
| (13) |  |
Wobbly Sphere |
(14) |  |
Organic Pattern |
| (15) |  |
2D Day Night |
(16) |  |
Scrolling textures |
| (17) |  |
Grass |
(18) |  |
Voronoi electric pattern |
| (19) |  |
Spectral Flow |
- Node.js (v16 or higher)
- npm or yarn
- A modern browser with WebGL2 support
Each project is self-contained with its own dependencies. To run any project:
# Navigate to the project directory
cd [project-name]
# Install dependencies
npm install
# Start the development server
npm run devThe project will open in your browser at http://localhost:5173 (or similar).
- Three.js – 3D graphics library
- WebGL2 – Graphics API
- GLSL – OpenGL Shading Language
- Vite – Build tool and dev server
- JavaScript/ES6+ – Core programming language
- The Book of Shaders – Interactive guide to GLSL
- Three.js Documentation – Official Three.js docs
- Shadertoy – Community shader examples
- WebGL Fundamentals – WebGL tutorials
- Inigo Quilez Articles – Advanced shader techniques
This project is licensed under the MIT License - see the LICENSE file for details.
Created by @SahilK-027
Made with 💜 and GLSL