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 次观看

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 次观看

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

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

42,906 次观看

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 次观看

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 次观看

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 次观看

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

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

24,490 次观看

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 次观看

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 次观看

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 次观看

Alien Flesh 👽🦠 #glsl shader exploration.

Alien Flesh 👽🦠 #glsl shader exploration.

11,143 次观看

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 次观看

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 次观看

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 次观看 • 13 天前

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 次观看 • 21 天前

没有更多内容可加载