Jae's banner
Jae's profile picture

Jae

@Jaenam97 • 3,303 subscribers

The Pixel Bender & Engineering @framer 🔮 GLSL Shader Artist • Graphics Programming • MSc Electrical Engineering 📩

Shorts

PIP 🤖, a raymarched hardware pet. Follows your cursor, blinks, winks, and gets a little too excited when you keep clicking. Powered by my glass raymarch engine. No Three.js, no 3D assets. Raw WebGL, running in Framer via its Shader API. #glsl

PIP 🤖, a raymarched hardware pet. Follows your cursor, blinks, winks, and gets a little too excited when you keep clicking. Powered by my glass raymarch engine. No Three.js, no 3D assets. Raw WebGL, running in Framer via its Shader API. #glsl

18,445 views

Glass 🥨 float i,d,s,a;vec3 p,w=vec3(1,3,0);for(o*=i;i++<1e2;o.xyz+=sin(i*.1+a+a+w)/s)p=vec3((r-FC.xy*2.)/r.y*d,5.-d),p.xz*=rotate2D(t),a=atan(p.y,p.x),p.x=length(p.xy)-2.,d+=s=.01+.15*abs(length(abs(p.xz*=rotate2D(a*1.5))-.7*w.xz)-.4);o=tanh(o*o/1e6);o=1.1+--o.x*(.3+o.yyww);

Glass 🥨 float i,d,s,a;vec3 p,w=vec3(1,3,0);for(o*=i;i++<1e2;o.xyz+=sin(i*.1+a+a+w)/s)p=vec3((r-FC.xy*2.)/r.y*d,5.-d),p.xz*=rotate2D(t),a=atan(p.y,p.x),p.x=length(p.xy)-2.,d+=s=.01+.15*abs(length(abs(p.xz*=rotate2D(a*1.5))-.7*w.xz)-.4);o=tanh(o*o/1e6);o=1.1+--o.x*(.3+o.yyww);

13,816 views

Shader-magic 🪄 Rendering flowers from a dodecahedron wireframe 🔮 #glsl

Shader-magic 🪄 Rendering flowers from a dodecahedron wireframe 🔮 #glsl

42,906 views

for(float i,d,s,T=t/2.;++i<1e2;){vec3 p=vec3((FC.xy*2.-r.xy)/r.y*d*rotate2D(T),d-4.);p.xz*=rotate2D(T);d+=s=.012+.07*abs(max(sin(length(p*p)/.4),clamp(length(p*p)-4.,.0,2.))-i/1e2);o+=max(1.3*sin(vec4(3,2,1,1)+i*.3)/s,-length(p*p*p));}o=tanh(o*o/2e6); #つぶやきGLSL

for(float i,d,s,T=t/2.;++i<1e2;){vec3 p=vec3((FC.xy*2.-r.xy)/r.y*d*rotate2D(T),d-4.);p.xz*=rotate2D(T);d+=s=.012+.07*abs(max(sin(length(p*p)/.4),clamp(length(p*p)-4.,.0,2.))-i/1e2);o+=max(1.3*sin(vec4(3,2,1,1)+i*.3)/s,-length(p*p*p));}o=tanh(o*o/2e6); #つぶやきGLSL

50,754 views

Really wanted to try the three.js challenge of the day ! 🌍 But only using #glsl Full raymarch, procedural biomes and animated clouds.

Really wanted to try the three.js challenge of the day ! 🌍 But only using #glsl Full raymarch, procedural biomes and animated clouds.

29,588 views

Rolling Dial⌚️🧊 A 2D/3D graphic design shader for a HUD dial. All in a #glsl fragment shader.

Rolling Dial⌚️🧊 A 2D/3D graphic design shader for a HUD dial. All in a #glsl fragment shader.

13,174 views

Splitting HoloCube 💠 Volumetric raymarched #glsl shader with recursive subdivision.

Splitting HoloCube 💠 Volumetric raymarched #glsl shader with recursive subdivision.

24,490 views

Fluffy Anemone 🪸 Volumetric raymarch of a fluffy sea creature. No geometry, all rendered in real time in a multi pass #glsl fragment shader.

Fluffy Anemone 🪸 Volumetric raymarch of a fluffy sea creature. No geometry, all rendered in real time in a multi pass #glsl fragment shader.

12,759 views

Abracadabra 🪄 #define t (t+fract(1e4*sin(dot(FC.xy,vec2(137,-13))))/6e1) #define S smoothstep float i,d,s,m,l,x=abs(mod(t/4.,2.)-1.),a=x 6.)break;l=length(.2*k.xy-vec2(sin(t)/9.,.6+sin(t+t)/9.));k.y<-5.?k.y=-k.y-10.,m=.5:m=1.;k.xz*=mat2(cos(a*6.28+k.y*.3*S(.2,.5,x)*S(.7,.5,x)+vec4(0,33,11,0)));for(p=k*.5,s=.01;s<1.;s+=s)p.y+=.95+abs(dot(sin(p.x+2.*t+p/s),.2+p-p))*s;l=mix(sin(length(k*k.x)),mix(sin(length(p)),l,.5-l),S(5.5,6.,p.y));p=abs(k);d+=s=.012+.09*abs(max(sin(length(k)+l),max(max(max(p.x,p.y),p.z),dot(p,vec3(.577))*mix(.5,.9,a))-3.)-i/1e2);}o=tanh(o*o/1e6)*m;

Abracadabra 🪄 #define t (t+fract(1e4*sin(dot(FC.xy,vec2(137,-13))))/6e1) #define S smoothstep float i,d,s,m,l,x=abs(mod(t/4.,2.)-1.),a=x 6.)break;l=length(.2*k.xy-vec2(sin(t)/9.,.6+sin(t+t)/9.));k.y<-5.?k.y=-k.y-10.,m=.5:m=1.;k.xz*=mat2(cos(a*6.28+k.y*.3*S(.2,.5,x)*S(.7,.5,x)+vec4(0,33,11,0)));for(p=k*.5,s=.01;s<1.;s+=s)p.y+=.95+abs(dot(sin(p.x+2.*t+p/s),.2+p-p))*s;l=mix(sin(length(k*k.x)),mix(sin(length(p)),l,.5-l),S(5.5,6.,p.y));p=abs(k);d+=s=.012+.09*abs(max(sin(length(k)+l),max(max(max(p.x,p.y),p.z),dot(p,vec3(.577))*mix(.5,.9,a))-3.)-i/1e2);}o=tanh(o*o/1e6)*m;

29,156 views

Lately I’ve been seeing a lot of jelly-like UI components, so I decided to make my own in #glsl, running on WebGL! I adapted the volumetric raymarching technique I use in my shaders and built a custom SDF for an iridescent keycap-style button that works as either a slider or a simple push button. The jelly feel comes from elastic easing functions that drive the SDF deformation. The scale, rotation, background, and color palette are all fully configurable.

Lately I’ve been seeing a lot of jelly-like UI components, so I decided to make my own in #glsl, running on WebGL! I adapted the volumetric raymarching technique I use in my shaders and built a custom SDF for an iridescent keycap-style button that works as either a slider or a simple push button. The jelly feel comes from elastic easing functions that drive the SDF deformation. The scale, rotation, background, and color palette are all fully configurable.

23,188 views

Alien Flesh 👽🦠 #glsl shader exploration.

Alien Flesh 👽🦠 #glsl shader exploration.

11,143 views

Path tracing? Nah. Back to ray marching. A live-morphing gem with cool refractions and dispersion ✨ #glsl

Path tracing? Nah. Back to ray marching. A live-morphing gem with cool refractions and dispersion ✨ #glsl

14,311 views

Stormy Torus [480] float i,d,w,s,n,m=1.;for(mat2 R=mat2(cos(sin(t/2.)*.785+vec4(0,33,11,0)));i++<1e2;){vec3 k,p=vec3((FC.xy*2.-r.xy)/r.y*d,d-10.);p.xz*=R;if(p.y<-6.3){p.y =-p.y-9.;m=.5;}k=p;for(p*=.5,n=.01;n<.2;n+=n)p.yz+=cos(p.xy*.01)-abs(dot(sin(.02*p.z+.03*p.y+2.*t+.3*p/n),p-p+n));s=length(k.xy)-4.;d+=w=.01+.07*abs(max(w=mix(sin(length(ceil(k*4.).z+k)),sin(length(p)-1.),smoothstep(5.,5.5,p.y)),sqrt(s*s+k*k).z-1.5)-i/150.);o+=max(sin(vec4(1,2,3,1)+i*.5)*1.3/w,-length(k*k));}o=tanh(o*o/1e6)*m; #glsl

Stormy Torus [480] float i,d,w,s,n,m=1.;for(mat2 R=mat2(cos(sin(t/2.)*.785+vec4(0,33,11,0)));i++<1e2;){vec3 k,p=vec3((FC.xy*2.-r.xy)/r.y*d,d-10.);p.xz*=R;if(p.y<-6.3){p.y =-p.y-9.;m=.5;}k=p;for(p*=.5,n=.01;n<.2;n+=n)p.yz+=cos(p.xy*.01)-abs(dot(sin(.02*p.z+.03*p.y+2.*t+.3*p/n),p-p+n));s=length(k.xy)-4.;d+=w=.01+.07*abs(max(w=mix(sin(length(ceil(k*4.).z+k)),sin(length(p)-1.),smoothstep(5.,5.5,p.y)),sqrt(s*s+k*k).z-1.5)-i/150.);o+=max(sin(vec4(1,2,3,1)+i*.5)*1.3/w,-length(k*k));}o=tanh(o*o/1e6)*m; #glsl

13,287 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

Embroidery shader 🧵🪡 Load any image and it gets embroidered on woven linen in real time. Pull any thread out and see how far you can unravel it, just be careful not to unstitch the whole thing ;) #GLSL
0:24
Jaenam97's profile picture

Embroidery shader 🧵🪡 Load any image and it gets embroidered on woven linen in real time. Pull any thread out and see how far you can unravel it, just be careful not to unstitch the whole thing ;) #GLSL

Jae

34,475 views • 13 days ago

Badge Tech 🏅 A real-time enamel pin #GLSL fragment shader. Hover to explode it and see every layer that makes the badge. Procedural patterns or your own SVG, rendered with my raymarch engine for crystal dispersion, GGX metal, enamel and holo foil.
0:31
Jaenam97's profile picture

Badge Tech 🏅 A real-time enamel pin #GLSL fragment shader. Hover to explode it and see every layer that makes the badge. Procedural patterns or your own SVG, rendered with my raymarch engine for crystal dispersion, GGX metal, enamel and holo foil.

Jae

28,441 views • 21 days ago

No more content to load