Shaderfrog

After 16 years, it's time for me to say goodbye to Twitter. You can find me on Bluesky bsky.app/profile/andrew… Or subscribe to my blog andrewray.me/subscribe See you on the other side✌️

Posting about Bluesky gets you shadowbaned on Twitter, but now that Bluesky supports video, I'm defaulting to posting shader content there first. I hope you'll join me! This #threejs parallax map shader in @shaderfrog 2.0 is insanely fun to play with: bsky.app/profile/andrew…

I hacked together a @Shadertoy import into @shaderfrog 2.0 / @threejs. Doesn't support most features, but it's a starting point! Right now it converts to screen shader with gl_FragCoord. Up next I want to add an option to use UV coords for the conversion.

Ugh, this is so much fun to experiment with. Galaxy parallax map transition in @threejs @shaderfrog 2.0. Live: shaderfrog.com/2/editor/clznh…

Backfilling UVs in #threejs @shaderfrog 2.0 means you can treat shaders like image inputs. Here's the awesome gl-transition (github.com/gl-transitions…) library applied to full shaders! Live: shaderfrog.com/2/editor/clzn3…

Lots of interesting effects are enabled by UV backfilling. Messing around with shaders as parallax maps in #threejs @shaderfrog Live: shaderfrog.com/2/editor/clzkg…

Achieved something very silly, inefficient, and fun to play with in @threejs in the @shaderfrog 2.0 alpha: Using shader programs as parallax maps! Here's a fractal shader used to fake depth on an object. Live: shaderfrog.com/2/editor/clzjf…

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/gls… npm install --save @shaderfrog/glsl-parser@5.0.0

Took a stab at making a @shaderfrog "how it works" page. Does it contain too much information? Not enough? shaderfrog.com/2/how-it-works

Normal map blending + refraction experiment. Composing a few Shadertoy shaders in #threejs in @shaderfrog 2.0 Live shaderfrog.com/2/editor/clxtz… Credit for each procedural normal map in the source code comments!

Speaker variations in @shaderfrog 2.0 #threejs. Who wore it better? Gearspeaker: shaderfrog.com/2/editor/clwl7… Pointiboi: shaderfrog.com/2/editor/clwl2… Colorspeaker: shaderfrog.com/2/editor/clwkw…

Twist series #1 in #threejs @shaderfrog 2.0"Twisted Twister" Live!: shaderfrog.com/2/editor/clwha…

One more #threejs Perlin noise pattern variation: "Demon tree". The GLSL vertex warp + @polyhaven textures + PBR material = yum yum Live! shaderfrog.com/2/editor/clwek…

Now I want to show you the real power of @shaderfrog 2.0 😌 The artistic unit of composition is a full shader. Compose effects with a single click! Browse through shaders like synthesizer presets. With full control over the GLSL. Signups open shaderfrog.com/2

Still addicted to this effect. Another @shaderfrog 2.0 #threejs variation. Uses the Perlin noise shader for the transmission map! And uses the lava shader for the normal map. Live! shaderfrog.com/2/editor/clwd3…

Having a disturbing amount of fun playing with this Perlin noise effect. So many possible variations when composing with #threejs built-in materials in the @shaderfrog 2.0 editor. Live! shaderfrog.com/2/editor/clw9t…

Weekend hacking: added a 2d vector grid, and node configuration editors, to @shaderfrog 2.0. Signups open! shaderfrog.com/2/

I added a contributors readme to the @shaderfrog editor github.com/ShaderFrog/edi…

Now @shaderfrog 2.0 users can access high res textures in the editor! Example: shaderfrog.com/2/editor/clu65…

"There's Something Underground" in #threejs @shadrfrog 2.0 alpha. Composing between a PBR material and procedural effects. Hybrid graph code injection makes this trivial, and easy + fun to iterate on. shaderfrog.com/2/editor/cluof…