Reposted by ShaderfrogAndy Ray @andrewray.me · 28/04/2025I 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'github.com6.0.0 Breaking change: parser.parse() -> parse() with better error message by AndrewRayCode · Pull Request #53 · ShaderFrog/glsl-parserThis 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 }... 021
Reposted by ShaderfrogAndy Ray @andrewray.me · 27/02/2025"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 051
Reposted by ShaderfrogAndy Ray @andrewray.me · 21/02/2025"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 042
Reposted by ShaderfrogAndy Ray @andrewray.me · 17/02/2025Cartoon Water in @shaderfrog.com 2.0 Live! shaderfrog.com/2/editor/cm7... #threejs #webgl #screenshotsaturday #shaders 162
Reposted by ShaderfrogAndy Ray @andrewray.me · 14/02/2025Heart boxes. Happy Valentine's day! Live: shaderfrog.com/2/editor/cm7... #threejs #webgl #creativecoding #screenshotsaturday #shaders 094
Reposted by ShaderfrogAndy Ray @andrewray.me · 10/02/2025"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 0104
Reposted by ShaderfrogAndy Ray @andrewray.me · 30/12/2024Inspired by a user request, I created the first Shaderfrog 2.0 tutorial: www.youtube.com/watch?v=8u61... #threejs #webgl #webgu #shaders #screenshotsaturdayyoutube.comShaderfrog 2.0 Introduction TutorialYouTube video by Shader Frog 1113
Reposted by ShaderfrogAndy Ray @andrewray.me · 25/11/2024Voronoi 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 0193
Reposted by ShaderfrogAndy Ray @andrewray.me · 17/11/2024Bluesky 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! 021
Reposted by ShaderfrogAndy Ray @andrewray.me · 10/11/2024Eyeeeeeeee Live shaderfrog.com/2/editor/cm3... #threejs #webgl #shaders 031
Reposted by ShaderfrogAndy Ray @andrewray.me · 26/10/2024Iterating 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 021
Reposted by ShaderfrogAndy Ray @andrewray.me · 24/10/2024shaderfrog.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 #shadersshaderfrog.com 022
Reposted by ShaderfrogAndy Ray @andrewray.me · 21/10/2024I 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... 131
Reposted by ShaderfrogAndy Ray @andrewray.me · 11/10/2024Now we're getting somewhere. @shaderfrog.com 2.0. Live! shaderfrog.com/2/editor/cm2... #threejs #webgl #screenshotsaturday 1152
Reposted by ShaderfrogAndy Ray @andrewray.me · 02/10/2024Glass Striped Fireball friend looks even cooler with a double sided material! #threejs #shaders #screenshotsaturday Live: shaderfrog.com/2/editor/clk... 032
Reposted by ShaderfrogAndy Ray @andrewray.me · 30/09/2024Another 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 021
Reposted by ShaderfrogAndy Ray @andrewray.me · 29/09/2024A 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 251
Reposted by ShaderfrogAndy Ray @andrewray.me · 28/09/2024"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 051
Reposted by ShaderfrogAndy Ray @andrewray.me · 23/09/2024Stacking uv backfilling in @shaderfrog.com 2.0: Holy crap Live (requires intense graphics card use): shaderfrog.com/2/editor/cm1... #screenshotsaturday #threejs #shaders 081
Reposted by ShaderfrogAndy Ray @andrewray.me · 22/09/2024Blorp. Blorp. Live! shaderfrog.com/2/editor/cm1... #webgl #threejs #glsl #shaders 021
Reposted by ShaderfrogAndy Ray @andrewray.me · 21/09/2024There'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 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 21/09/2024With "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 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 16/09/2024Losing 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 131
Reposted by ShaderfrogAndy Ray @andrewray.me · 13/09/2024Pisces 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 031
Reposted by ShaderfrogShaderfrog @shaderfrog.com · 28/07/2024Breaking 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.0github.comRelease 5.0.0 · ShaderFrog/glsl-parserPR 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 ... 011
Shaderfrog @shaderfrog.com · 28/07/2024Breaking 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.0github.comRelease 5.0.0 · ShaderFrog/glsl-parserPR 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 ... 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 30/06/2024Took 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-worksshaderfrog.comHow Shaderfrog Works - ShaderfrogHow Shaderfrog Works - Shaderfrog 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 22/06/2024Friday night creative coding shaderfrog.com/2/editor/clx...shaderfrog.comNoisegon by andrewrayandrewray's shader "Noisegon" 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 24/11/2023Leliel (inspired by Evangelion) #threejs shaderfrog.com/2/editor/clp...shaderfrog.comLeliel by andrewrayandrewray's shader "Leliel" 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 20/11/2023The 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 111
Reposted by ShaderfrogAndy Ray @andrewray.me · 13/11/2023Just a cloud #threejs shaderfrog.com/2/editor/clo... 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 25/10/2023Porting Shadertoy shaders to #threejs shaderfrog.com/2/editor/clo...shaderfrog.comHinged Truchet (by fad) + Normal Map by andrewraydescription 122
Reposted by ShaderfrogAndy Ray @andrewray.me · 23/10/2023Fun 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.shaderfrog.comFlower Box by andrewraydescription 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 19/10/2023This 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... 021
Reposted by ShaderfrogAndy Ray @andrewray.me · 17/10/2023Liquification #threejs #webgl shaderfrog.com/2/editor/cln...shaderfrog.comLiquification by andrewraydescription 011
Reposted by ShaderfrogAndy Ray @andrewray.me · 10/10/2023Figured 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...shaderfrog.comParallax Map Test by andrewraydescription 011
Shaderfrog @shaderfrog.com · 08/10/2023New version of @shaderfrog/glsl-parser released! This fixes two bugs in the preprocessor. github.com/ShaderFrog/g... 011
Reposted by Shaderfrogxyflow @xyflow.com · 02/10/2023Shaderfrog 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 122
Reposted by ShaderfrogAndy Ray @andrewray.me · 21/09/2023I'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... 221
