Shaderfrog
LightNews LightNews
shaderfrog.com
Shaderfrog
@shaderfrog.com
240 followers 8 following 3 posts
A WebGL "hybrid graph" shader editor

1: https://shaderfrog.com
2: https://shaderfrog.com/2
Posts Replies Media Videos
Reposted by Shaderfrog
andrewray.me
I released version 6.0 of the @shaderfrog.com GLSL parser with bug fixes and improvements to error reporting. Changes: github.com/ShaderFrog/g...

npm i '@shaderfrog/[email protected]'
6.0.0 Breaking change: parser.parse() -> parse() with better error message by AndrewRayCode · Pull Request #53 · ShaderFrog/glsl-parser
This change adds a new API to access the parse function directly rather than import the parser. The README has been updated in this branch to reflect the change. Old way to parse: import { parser }...
github.com
April 28, 2025 at 4:42 AM
Reposted by Shaderfrog
andrewray.me
"Clown Fractal" in @shaderfrog.com 2.0 editor. Using a parallax map sampler of a fractal shader, and plugging that all into a Three.js material for lighting + normals + flections.

Live! shaderfrog.com/2/editor/cm7...

#webgl #threejs #creativecoding
February 27, 2025 at 11:50 PM
Reposted by Shaderfrog
andrewray.me
"Glassic" in the @shaderfrog.com 2.0 editor. Messing around with normals and glassy materials.

Live! shaderfrog.com/2/editor/cm6...

#threejs #webgl #screenshotsaturday #creativecoding
February 21, 2025 at 6:26 PM
Reposted by Shaderfrog
andrewray.me
Cartoon Water in @shaderfrog.com 2.0

Live! shaderfrog.com/2/editor/cm7...

#threejs #webgl #screenshotsaturday #shaders
February 17, 2025 at 9:38 PM
Reposted by Shaderfrog
andrewray.me
Heart boxes. Happy Valentine's day!

Live: shaderfrog.com/2/editor/cm7...

#threejs #webgl #creativecoding #screenshotsaturday #shaders
February 14, 2025 at 8:56 PM
Reposted by Shaderfrog
andrewray.me
"Paper fire" in @shaderfrog.com 2.0. Composing shaders is similar to stacking layers in Photoshop.

Live! shaderfrog.com/2/editor/cm6...

#threejs #webgl #screenshotsaturday #creativecoding
February 10, 2025 at 4:19 AM
Reposted by Shaderfrog
andrewray.me
Inspired by a user request, I created the first Shaderfrog 2.0 tutorial: www.youtube.com/watch?v=8u61...

#threejs #webgl #webgu #shaders #screenshotsaturday
Shaderfrog 2.0 Introduction Tutorial
YouTube video by Shader Frog
www.youtube.com
December 30, 2024 at 5:40 AM
Reposted by Shaderfrog
andrewray.me
Voronoi Cloud Friend. Manipulating normals + vertex positions with a Voronoi shader.

Live! (Double click on the Voronoi nodes to edit the GLSL) shaderfrog.com/2/editor/cm3...

#screenshotsaturday #webgl #threejs #creativecoding #glsl
November 25, 2024 at 6:55 PM
Reposted by Shaderfrog
andrewray.me
Bluesky Fractal Butterfly in the @shaderfrog.com 2.0 Three.js WebGL shader editor.

Live! shaderfrog.com/2/editor/cm3...
#webgl #webgpu #threejs #shaders

Video uploading has been b0rked on Bluesky, let's see if this goes through!
November 17, 2024 at 9:31 PM
Reposted by Shaderfrog
andrewray.me
Eyeeeeeeee

Live shaderfrog.com/2/editor/cm3...

#threejs #webgl #shaders
November 10, 2024 at 4:50 AM
Reposted by Shaderfrog
andrewray.me
Iterating on the parallax and eye effect is addicting. Choosing different shaders for the iris is an easy way to lose track of time. Lots of small editor updates to @shaderfrog.com 2.0 if you want to try it out!

Live! shaderfrog.com/2/editor/cm2...

#threejs #shaders #webgl #webgu
October 26, 2024 at 9:12 PM
Reposted by Shaderfrog
andrewray.me
shaderfrog.com/2/editor/cm2...

1. Click on "waive frieze" green node to select it
2. Click on any effect in the left sidebar
3. Rinse and repeat

Infinite shader variations with a single click!

#threejs #webgl #shaders
shaderfrog.com
October 24, 2024 at 6:05 AM
Reposted by Shaderfrog
andrewray.me
I refactored the @shaderfrog.com 2.0 editor to support tabs and a file tree, and some UI consolidation. I also moved everything to Zustand, but hopefully you don't notice any changes from that!

Live shaderfrog.com/2/editor/clk...
Shaderfrog 2.0 editor screenshot showing file tree and tabs
October 21, 2024 at 2:25 AM
Reposted by Shaderfrog
andrewray.me
Now we're getting somewhere. @shaderfrog.com 2.0.

Live! shaderfrog.com/2/editor/cm2...

#threejs #webgl #screenshotsaturday
October 11, 2024 at 5:43 AM
Reposted by Shaderfrog
andrewray.me
Glass Striped Fireball friend looks even cooler with a double sided material! #threejs #shaders #screenshotsaturday

Live: shaderfrog.com/2/editor/clk...
October 2, 2024 at 6:14 PM
Reposted by Shaderfrog
andrewray.me
Another earth configurator - mixing between shaders using the height map.

Added in some vertex displacement as well.

Live! shaderfrog.com/2/editor/cm1...

#threejs #webgl #shaders #screenshotsaturday
September 30, 2024 at 12:36 AM
Reposted by Shaderfrog
andrewray.me
A goal of @shaderfrog.com 2.0 is rapid creative prototyping. Here's a simple earth configurator where you can replace the water with any other user created shader. Infinite planet variations!

Live: shaderfrog.com/2/editor/cm1...

#screenshotsaturday #webgl #shaders
September 29, 2024 at 5:14 AM
Reposted by Shaderfrog
andrewray.me
"Virus Glass" - open source #threejs #webgl shader effect in the @shaderfrog.com 2.0 editor.

Composing effects with Three.js materials = lighting/reflections on procedural shaders for free!

Live! shaderfrog.com/2/editor/clr...

#screenshotsaturday #shaders
September 28, 2024 at 5:43 PM
Reposted by Shaderfrog
andrewray.me
Stacking uv backfilling in @shaderfrog.com 2.0: Holy crap

Live (requires intense graphics card use): shaderfrog.com/2/editor/cm1...
#screenshotsaturday #threejs #shaders
September 23, 2024 at 3:59 AM
Reposted by Shaderfrog
andrewray.me
Blorp. Blorp.

Live! shaderfrog.com/2/editor/cm1...

#webgl #threejs #glsl #shaders
September 22, 2024 at 9:50 PM
Reposted by Shaderfrog
andrewray.me
There's so many possible variations with UV "backfilling." Here's a heightmap variation using a hexagonal procedural shader as the input.

@shaderfrog.com 2.0 Live: shaderfrog.com/2/editor/cm1...

#webgl #glsl #threejs #shaders
September 21, 2024 at 8:27 PM
Reposted by Shaderfrog
andrewray.me
With "backfilling" UVs in @shaderfrog.com 2.0, you can replace image inputs to shaders with other shaders. That enabled me to take an awesome heightmap-style shader, and I replaced the static noise image seed with an animated effect!

Live: shaderfrog.com/2/editor/cm1...

#webgl #threejs #glsl
September 21, 2024 at 8:23 PM
Reposted by Shaderfrog
andrewray.me
Losing my mind playing with this effect.

Parallax mapping on a shader with (hacky) corrected normals in @shaderfrog.com 2.0. So many variations (more in 🧵)

Live (does NOT run well on mobile!) shaderfrog.com/2/editor/cm1...

#threejs #webgl #glsl
September 16, 2024 at 12:27 AM
Reposted by Shaderfrog
andrewray.me
Pisces Resting

Equirectangular Shadertoy shader by www.shadertoy.com/user/gllama import into @shaderfrog.bsky.social and composed with Three.js shader.

Live! shaderfrog.com/2/editor/cm1...

#glsl #webgl #threejs
September 13, 2024 at 3:38 AM