"Collapse" in 242 chars of #GLSL:
vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-3,3,8),v;for(float i;i++<50.;o+=(cos(sin(i)*vec4(2,5,6,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*(3.+snoise2D(p+vec2(t*7.,i)))/1e2,v.y*.2))))v=p+cos(i*i+t*.2+vec2(i/1e2,11))*2.;o=tanh(pow(o/3e2,vec4(1.5)));
🚀 Big News! The Three.js Resources website just got a massive design upgrade! 🎨✨ It's now easier than ever for users to navigate in the directory and and enjoy improved readability.
https://t.co/nzDt1lCX7e
Share your thoughts below👇
#threejs@threejs@bruno_simon@codrops
The implicit function
f(x,y,z) = ± (ax)² ± (by)² ± (cz)² - {-1,0,1} = 0
can express all quadrics except paraboloids, and allows ellipsoids, cones and hyperboloids to be solved optimally but not spheres, cylinders, etc.
Realtime code: https://t.co/3XHm5guEAa
💡 CSS Tip!
Get the scroll progress of the page as a CSS variable using a few lines of code
✅ Powered by Scroll driven animations
✅ Defined at the root level
✅ Typed using @property
✅ You can easily use it within any formula
@codepen demo in the reply 👇
💡 CSS Tip!
Get the screen width and height using a few lines of CSS.
✅ Powered by @property (Now available in all the browsers)
✅ Unitless values so you can easily use them inside any formula
✅ Updates on screen resize (No need for JS)
@CodePen demo in the reply 👇
The interior decoration for my #threejs architectural visualization project is ready. The interior is modern and full of details. To better visualize, I show some techniques I use for real-time rendering in Blender with EVEE in the video. I'm also sharing some still renders in the comments, in case you want to check them.
Next step: Bake the lighting, optimize the 3d model, and import it into threejs 😍.
#threejsJorney #webgl #creativecoding #r3f
Learning TSL:
That's probably not the way to toggle between storages and that's probably not how to use varying, but hey… it works.
Here's the particles morphing exercise in TSL
Realtime Particle test using Transformers.js by @xenovacom and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation.
Rendered with WebGPU in Three.js.
It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄
#threejs