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/glsl-parser@6.0.1'
"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
"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
Cartoon Water in @shaderfrog.com 2.0
Live! shaderfrog.com/2/editor/cm7...
#threejs #webgl #screenshotsaturday #shaders
Heart boxes. Happy Valentine's day!
Live: shaderfrog.com/2/editor/cm7...
#threejs #webgl #creativecoding #screenshotsaturday #shaders
"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
Inspired by a user request, I created the first Shaderfrog 2.0 tutorial: www.youtube.com/watch?v=8u61...
#threejs #webgl #webgu #shaders #screenshotsaturday
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
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!
Eyeeeeeeee
Live shaderfrog.com/2/editor/cm3...
#threejs #webgl #shaders
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
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 2.0 editor screenshot showing file tree and tabs
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...
Now we're getting somewhere. @shaderfrog.com 2.0.
Live! shaderfrog.com/2/editor/cm2...
#threejs #webgl #screenshotsaturday
Glass Striped Fireball friend looks even cooler with a double sided material! #threejs #shaders #screenshotsaturday
Live: shaderfrog.com/2/editor/clk...
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
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
"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
Stacking uv backfilling in @shaderfrog.com 2.0: Holy crap
Live (requires intense graphics card use): shaderfrog.com/2/editor/cm1...
#screenshotsaturday #threejs #shaders
Blorp. Blorp.
Live! shaderfrog.com/2/editor/cm1...
#webgl #threejs #glsl #shaders
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
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
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
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
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/glsl-parser@5.0.0
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/glsl-parser@5.0.0
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
Leliel (inspired by Evangelion) #threejs shaderfrog.com/2/editor/clp...
