Jae's banner
Jae's profile picture

Jae

@Jaenam97 • 2,634 subscribers

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

Shorts

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

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

22,680 просмотров

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,164 просмотров

Alien Flesh 👽🦠 #glsl shader exploration.

Alien Flesh 👽🦠 #glsl shader exploration.

10,923 просмотров

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

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

42,362 просмотров

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,178 просмотров

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;

28,112 просмотров

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 просмотров

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,017 просмотров

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 просмотров