Shaderfrog
@shaderfrog.com
📤 238
📥 8
📝 3
A WebGL "hybrid graph" shader editor 1:
https://shaderfrog.com
2:
https://shaderfrog.com/2
reposted by
Shaderfrog
Andy Ray
5 months ago
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]
'
loading . . .
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 }...
https://github.com/ShaderFrog/glsl-parser/pull/53
0
2
1
reposted by
Shaderfrog
Andy Ray
7 months ago
"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
loading . . .
0
5
1
reposted by
Shaderfrog
Andy Ray
7 months ago
"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
loading . . .
0
4
2
reposted by
Shaderfrog
Andy Ray
7 months ago
Cartoon Water in
@shaderfrog.com
2.0 Live!
shaderfrog.com/2/editor/cm7...
#threejs
#webgl
#screenshotsaturday
#shaders
loading . . .
1
6
3
reposted by
Shaderfrog
Andy Ray
8 months ago
Heart boxes. Happy Valentine's day! Live:
shaderfrog.com/2/editor/cm7...
#threejs
#webgl
#creativecoding
#screenshotsaturday
#shaders
loading . . .
0
9
4
reposted by
Shaderfrog
Andy Ray
8 months ago
"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
loading . . .
0
10
4
reposted by
Shaderfrog
Andy Ray
9 months ago
Inspired by a user request, I created the first Shaderfrog 2.0 tutorial:
www.youtube.com/watch?v=8u61...
#threejs
#webgl
#webgu
#shaders
#screenshotsaturday
loading . . .
Shaderfrog 2.0 Introduction Tutorial
YouTube video by Shader Frog
https://www.youtube.com/watch?v=8u61pXXQaY4
1
11
3
reposted by
Shaderfrog
Andy Ray
10 months ago
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
loading . . .
0
18
3
reposted by
Shaderfrog
Andy Ray
11 months ago
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!
loading . . .
0
2
1
reposted by
Shaderfrog
Andy Ray
11 months ago
Eyeeeeeeee Live
shaderfrog.com/2/editor/cm3...
#threejs
#webgl
#shaders
loading . . .
0
3
1
reposted by
Shaderfrog
Andy Ray
11 months ago
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
loading . . .
0
2
1
reposted by
Shaderfrog
Andy Ray
11 months ago
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
loading . . .
https://shaderfrog.com/2/editor/cm2mphpnc000upaj3qelntsq4
0
2
2
reposted by
Shaderfrog
Andy Ray
11 months ago
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...
1
3
1
reposted by
Shaderfrog
Andy Ray
12 months ago
Now we're getting somewhere.
@shaderfrog.com
2.0. Live!
shaderfrog.com/2/editor/cm2...
#threejs
#webgl
#screenshotsaturday
loading . . .
1
15
2
reposted by
Shaderfrog
Andy Ray
12 months ago
Glass Striped Fireball friend looks even cooler with a double sided material!
#threejs
#shaders
#screenshotsaturday
Live:
shaderfrog.com/2/editor/clk...
loading . . .
0
3
2
reposted by
Shaderfrog
Andy Ray
12 months ago
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
loading . . .
0
2
1
reposted by
Shaderfrog
Andy Ray
12 months ago
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
loading . . .
2
5
2
reposted by
Shaderfrog
Andy Ray
about 1 year ago
"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
loading . . .
0
5
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
Stacking uv backfilling in
@shaderfrog.com
2.0: Holy crap Live (requires intense graphics card use):
shaderfrog.com/2/editor/cm1...
#screenshotsaturday
#threejs
#shaders
loading . . .
0
8
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
Blorp. Blorp. Live!
shaderfrog.com/2/editor/cm1...
#webgl
#threejs
#glsl
#shaders
loading . . .
0
2
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
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
loading . . .
0
1
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
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
loading . . .
0
1
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
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
loading . . .
1
3
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
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
loading . . .
0
3
1
reposted by
Shaderfrog
Breaking changes released in 5.0.0 of @shaderfrog/glsl-parser. Only affects you if you're using the rename utility functions. Release notes:
github.com/ShaderFrog/g...
npm install --save @shaderfrog/
[email protected]
loading . . .
Release 5.0.0 · ShaderFrog/glsl-parser
PR that introduced this change This introduces breaking changs to the utility API functions renameBindings, renameFunctions, and renameTypes and changes their signatures to take the specific scope ...
https://github.com/ShaderFrog/glsl-parser/releases/tag/5.0.0
about 1 year ago
0
1
1
Breaking changes released in 5.0.0 of @shaderfrog/glsl-parser. Only affects you if you're using the rename utility functions. Release notes:
github.com/ShaderFrog/g...
npm install --save @shaderfrog/
[email protected]
loading . . .
Release 5.0.0 · ShaderFrog/glsl-parser
PR that introduced this change This introduces breaking changs to the utility API functions renameBindings, renameFunctions, and renameTypes and changes their signatures to take the specific scope ...
https://github.com/ShaderFrog/glsl-parser/releases/tag/5.0.0
about 1 year ago
0
1
1
reposted by
Shaderfrog
Andy Ray
about 1 year ago
Took a stab at making a
@shaderfrog.bsky.social
"how it works" page. Does it contain too much information? Not enough?
shaderfrog.com/2/how-it-works
loading . . .
How Shaderfrog Works - Shaderfrog
How Shaderfrog Works - Shaderfrog
https://shaderfrog.com/2/how-it-works
0
1
1
reposted by
Shaderfrog
Andy Ray
over 1 year ago
Friday night creative coding
shaderfrog.com/2/editor/clx...
loading . . .
Noisegon by andrewray
andrewray's shader "Noisegon"
https://shaderfrog.com/2/editor/clxnrx1tf000spamphkxzdd1n
0
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
Leliel (inspired by Evangelion)
#threejs
shaderfrog.com/2/editor/clp...
loading . . .
Leliel by andrewray
andrewray's shader "Leliel"
https://shaderfrog.com/2/editor/clpc0my6d0008paf31fc9ll7v
0
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
The next major feature of
@shaderfrog.bsky.social
2.0 is live: Replacing graph nodes with anyone else's graph. This is the key idea behind Shaderfrog: You can use anyone else's effects in your own shader, and you can quickly cycle between effects for prototyping. Live:
shaderfrog.com/2
1
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
Just a cloud
#threejs
shaderfrog.com/2/editor/clo...
0
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
Porting Shadertoy shaders to
#threejs
shaderfrog.com/2/editor/clo...
loading . . .
Hinged Truchet (by fad) + Normal Map by andrewray
description
https://shaderfrog.com/2/editor/clo4s5o3v0000paa6vznqx2tz
1
2
2
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
Fun with using the same shader for the
#threejs
normal map and the diffuse map:
shaderfrog.com/2/editor/clo...
Right now this requires duplicating the shader node, but I suspect the shader output can be memoized.
loading . . .
Flower Box by andrewray
description
https://shaderfrog.com/2/editor/clo2819dk0004pa73g9zlzo2t
0
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
This feels like cheating. The
@shaderfrog.bsky.social
2.0 alpha lets you compose effects arbitrarily. Here's an awesome
#threejs
forum post (
discourse.threejs.org/t/calculatin...
) applied to a physical material:
shaderfrog.com/2/editor/cln...
And cartoon shaded!:
shaderfrog.com/2/editor/cln...
0
2
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
Liquification
#threejs
#webgl
shaderfrog.com/2/editor/cln...
loading . . .
Liquification by andrewray
description
https://shaderfrog.com/2/editor/clntr8osu0002pasayy8psoo1
0
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
A shader frog for good luck
0
1
1
reposted by
Shaderfrog
Andy Ray
almost 2 years ago
Figured out parallax mapping in the
@shaderfrog.bsky.social
2.0 alpha:
shaderfrog.com/2/editor/cln...
From this awesome tutorial:
shaderfrog.com/2/editor/cln...
loading . . .
Parallax Map Test by andrewray
description
https://shaderfrog.com/2/editor/clndru9yz0000pavyvq0ak6fs
0
1
1
New version of @shaderfrog/glsl-parser released! This fixes two bugs in the preprocessor.
github.com/ShaderFrog/g...
almost 2 years ago
0
1
1
reposted by
Shaderfrog
xyflow
almost 2 years ago
Shaderfrog 2.0 alpha is out now and built with React Flow 🐸 It’s open source and has glowing edges 👾 Play with the examples on the website (like the one in the attached pic)
shaderfrog.com/2/
@andyray.bsky.social
@shaderfrog.bsky.social
1
2
2
Hello Bluesky!
about 2 years ago
0
2
0
reposted by
Shaderfrog
Andy Ray
about 2 years ago
I'm working on exporting shaders from the @Shaderfrog 2.0 editor into your own project. Here's an early preview of the @Shaderfrog Javascript API, demonstrated with a shader as a #threejs normal map. Live (try editing the GLSL!):
codesandbox.io/s/great-hert...
Source:
github.com/ShaderFrog/e...
2
2
1
you reached the end!!
feeds!
log in