How to Recreate Sable Art Style with Shaders

In this video, we go over my journey of recreating a stylized version of 3Blue1Brown’s electric field simulation in a GLSL fragment shader.

We start by using domain repetition to create an electric field and change the direction of each arrow based on the electron’s position. Then we stylize it using the toon shader and film grain post processing effects. After that we use a sobel filter to detect and draw outlines. Finally, we add a cross hatching based on the perceived luminance and colorize it with pastel colors to stylize it like the game Sable.

🎥 YouTube -    / suboptimaleng  
💻 GitHub - https://github.com/SuboptimalEng
🐦 Twitter -   / suboptimaleng  
🧵 Threads - https://www.threads.net/@suboptimaleng
📸 Instagram -   / suboptimaleng  

== [ Resources ] ==
3b1b Electromagnetic Field Short -    • Simulating the electric field and a moving...  
Moebius Style Rendering by Useless Game Dev -    • Moebius-style 3D Rendering | Useless Game Dev  
Checkerboard Shader Tutorial -    • Graphics Programming Interview Question Tu...  
Inigo Quilez - https://iquilezles.org/articles/distf...
Moebius Style Post Processing Effect by Maxime Heckel - https://blog.maximeheckel.com/posts/m...

== [ Channels ] ==
‪@3blue1brown‬
‪@uselessgamedev‬

== [ Timestamps ] ==
00:00 3blue1brown Electric Field
00:44 Domain Repetition
01:33 3D Grid Visualization
01:57 Electric Field Shader
02:38 Toon Shader with Film Grain
03:13 Sobel Filter Outline
04:00 Pastel Colors in Shader
04:24 Sable Shader Stylization

== [ Music Credits] ==
Cheel - Blue Dream
Pokemon Sapphire OST - Route 101
Pokemon Sapphire OST - Littleroot Town
Pokemon Diamond OST - Sandgem Town