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 görüntüleme

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 görüntüleme

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

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

42,906 görüntüleme

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 görüntüleme

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 görüntüleme

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 görüntüleme

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

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

24,490 görüntüleme

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 görüntüleme

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 görüntüleme

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 görüntüleme

Alien Flesh 👽🦠 #glsl shader exploration.

Alien Flesh 👽🦠 #glsl shader exploration.

11,143 görüntüleme

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 görüntüleme

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 görüntüleme

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 görüntüleme • 13 gün önce

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 görüntüleme • 21 gün önce

Daha fazla içerik yok.