SaaSHub helps you find the best software and product alternatives Learn more â
Top 22 JavaScript Shader Projects
-
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
-
-
curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
-
shader-park-core
A JavaScript library for creating real-time 2D and 3D shaders. JS -> Shader. https://shaderpark.com/ https://twitter.com/shaderpark
-
Project mention: Show HN: Svader â Create GPU-rendered Svelte components | news.ycombinator.com | 2024-12-14
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
-
webgpu-compute-rasterizer
A simple software rasterizer running on a WebGPU compute shader. Built for educational purposes.
-
shader-web-background
Displays GLSL fragment shaders as a website background. Supports offscreen buffers and floating point textures on almost any browser and hardware. Compatible with Shadertoy.
-
retrace.gl
Create, ray trace & export programatically defined Signed Distance Function CSG geometries with an API suited for generative art - in your browser! đ
-
-
shadertoy-react
6kB "Shadertoy" like react component letting you easily render your fragment shaders in your React web projects, without having to worry about implementing the WebGL part.
-
particular-drift
Turn images into flowing particle animations. Built with js, webgl / glsl, and html5 canvas
Project mention: Show HN: Creating flowing particle animations out of images (JS and WebGL) | news.ycombinator.com | 2025-01-29Hi! I'm Alan, and I built a website that turns images into flowing particle animations.
This javascript / WebGL tool creates particle animations out of any image in real-time within the browser, with particles that dynamically respond to edge detection and flow fields.
It uses Sobel edge detection, a Perlin noise flow field, and webGL / GLSL for better performance.
The tool is completely free and open source (MIT license).
Github repo: https://github.com/collidingScopes/particular-drift
Let me know of any feedback or suggestions for improvement.
-
-
langterm
đšī¸ WebGL-based VT220 emulator, made as a learning example and frontend for a text adventure
-
Tokenmagic
A Foundry VTT module that allows you to add animations and graphic effects to tokens, tiles, templates and drawings.
-
-
-
-
-
threejs-upscaler
Simple realtime rendering upscaler for your projects. This plugin may be used for performance optimization.
You can view the full source of this tutorial at GitHub: https://github.com/DevsDaddy/threejs-upscaler
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
JavaScript Shaders discussion
JavaScript Shaders related posts
-
Show HN: Svader â Create GPU-rendered Svelte components
-
Building a Compute Bezier Quad Rasterizer with WebGPU
-
Pf2e Beginner box, how to make tokens more vibrant?
-
How do YOU handle creature tokens that are no longer a threat?
-
What did they use?
-
Spell templates
-
[OC] We're facing one of the BBEGs in our campaign, so I drew and animated her token for her first phase! Here's the result. I just adore how animations work in FVTT
-
A note from our sponsor - SaaSHub
www.saashub.com | 27 Mar 2025
Index
What are some of the best open-source Shader projects in JavaScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | Burn-My-Windows | 2,753 |
| 2 | glslEditor | 2,378 |
| 3 | glslCanvas | 2,022 |
| 4 | curtainsjs | 1,710 |
| 5 | shader-park-core | 782 |
| 6 | shader-doodle | 562 |
| 7 | vite-plugin-glsl | 348 |
| 8 | three-csm | 314 |
| 9 | webgpu-compute-rasterizer | 252 |
| 10 | shader-web-background | 234 |
| 11 | retrace.gl | 194 |
| 12 | rain | 138 |
| 13 | shadertoy-react | 126 |
| 14 | particular-drift | 98 |
| 15 | webpack-glsl-loader | 95 |
| 16 | langterm | 82 |
| 17 | Tokenmagic | 53 |
| 18 | js-shaders | 43 |
| 19 | mathematical-sculptures | 28 |
| 20 | clouds | 5 |
| 21 | webgl-mipmaps-explainer | 1 |
| 22 | threejs-upscaler | 1 |
Sponsored
CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai