Shaderfrog

Official Twitter account for

[@andrewray.me on Bluesky @andrewray]

After 16 years, it's time for me to say goodbye to Twitter.

You can find me on Bluesky https://t.co/Mzpgxz4bLS

Or subscribe to my blog https://t.co/aV5Rql1nVu

See you on the other side✌️

[@andrewray.me on Bluesky @andrewray]

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: https://t.co/TwFbtwCyWy

[@andrewray.me on Bluesky @andrewray]

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.

[@andrewray.me on Bluesky @andrewray]

Ugh, this is so much fun to experiment with.

Galaxy parallax map transition in @threejs @shaderfrog 2.0. Live: https://t.co/84u57nHzdV

[@andrewray.me on Bluesky @andrewray]

Backfilling UVs in #threejs @shaderfrog 2.0 means you can treat shaders like image inputs. Here's the awesome gl-transition (https://t.co/VAgn887pSy) library applied to full shaders!

Live: https://t.co/L6MFJb7Eg3

[@andrewray.me on Bluesky @andrewray]

Lots of interesting effects are enabled by UV backfilling. Messing around with shaders as parallax maps in #threejs @shaderfrog

Live: https://t.co/lEzovGAziY

[@andrewray.me on Bluesky @andrewray]

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: https://t.co/iDVGgtc6HN

[Shaderfrog @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: https://t.co/pqzvQayvkK

npm install --save @shaderfrog/[email protected]

[@andrewray.me on Bluesky @andrewray]

Took a stab at making a @shaderfrog "how it works" page. Does it contain too much information? Not enough? https://t.co/WwOxnTbwxZ

[@andrewray.me on Bluesky @andrewray]

Normal map blending + refraction experiment. Composing a few Shadertoy shaders in #threejs in @shaderfrog 2.0

Live https://t.co/IjFmp0I5W6

Credit for each procedural normal map in the source code comments!

[@andrewray.me on Bluesky @andrewray]

Speaker variations in @shaderfrog 2.0 #threejs. Who wore it better?

Gearspeaker: https://t.co/216eAXOx7f
Pointiboi: https://t.co/4j5gLLNTyj
Colorspeaker: https://t.co/N0bbdS4c3A

[@andrewray.me on Bluesky @andrewray]

Twist series #1 in #threejs @shaderfrog 2.0"Twisted Twister" Live!: https://t.co/FHzjf4D8ns

[@andrewray.me on Bluesky @andrewray]

One more #threejs Perlin noise pattern variation: "Demon tree". The GLSL vertex warp + @polyhaven textures + PBR material = yum yum

Live! https://t.co/1LtKrmNsxk

[@andrewray.me on Bluesky @andrewray]

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 https://t.co/912r4qiOqR

[@andrewray.me on Bluesky @andrewray]

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! https://t.co/QQ1YZnmeR4

[@andrewray.me on Bluesky @andrewray]

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! https://t.co/HPU7V23Xa9

[@andrewray.me on Bluesky @andrewray]

Weekend hacking: added a 2d vector grid, and node configuration editors, to @shaderfrog 2.0. Signups open! https://t.co/0OuZLOt0wK

[@andrewray.me on Bluesky @andrewray]

I added a contributors readme to the @shaderfrog editor https://t.co/cLFZFkIZFz

[@andrewray.me on Bluesky @andrewray]

Now @shaderfrog 2.0 users can access high res textures in the editor! Example: https://t.co/JTlfiKNzg8

[@andrewray.me on Bluesky @andrewray]

"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.

https://t.co/62sXbI9yLi