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

Alien Flesh 👽🦠 #glsl shader exploration.

Alien Flesh 👽🦠 #glsl shader exploration.

10,923 görüntüleme

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

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

42,362 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,178 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;

28,112 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

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 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