Jae's banner
Jae's profile picture

Jae

@Jaenam97 • 2,899 subscribers

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

Shorts

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.

12,916 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,288 görüntüleme

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

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

42,449 görüntüleme

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

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

24,382 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

46,503 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,016 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