qiaproduction

Visual Effect, Web Development, Video Editing, Content Creator, Digital Marketing

[ᴇᴅᴀɴ ᴋᴡᴀɴ @edankwan]

I did some old school front-end CSS transform practice this morning. Inspired by the good old WonderWall. No WebGL/WebGPU is used.

[Bruno Simon @bruno_simon]

⚡️

[Xor @XorDev]

"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)));

[Chris @ChrisGannon]

Drip Creeper

#motiondesign #threejs #3D #liquid
@splinetool

[Ksenia Kondrashova @uuuuuulala]

I did some open-source this year!

Here's a compilation of stuff I posted on @CodePen in 2024

All the live demos + source code: https://t.co/cv5etxF0iv

[Bruno Simon @bruno_simon]

Pushing the boundaries.
The exploding floor is 🔥

[Three.js Resources @threejsresource]

🚀 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

[akella @akella]

my first #threejs with #webgpu, and i actually like TSL experience

[Radical Software @radicalsoftwar3]

Vertex displacement cube #shader with kinetic #typography texture. Made with #threejs and #r3f

[inigo quilez @iquilezles]

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

[Bruno Simon @bruno_simon]

Very useful

[CSS by T. Afif @ChallengesCss]

💡 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 by T. Afif @ChallengesCss]

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

[Anderson Mancini @Andersonmancini]

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

[Bruno Simon @bruno_simon]

What a nice cosy place

[Bruno Simon @bruno_simon]

Because of this 👉 https://t.co/0zRGU35rkI
(thank you @sea3dformat)

I can do this 👇

[abeto @abeto_co]

Latest project: new landing page for @IglooInc, made in collaboration with the creative team at @ourbureaux 🧊

https://t.co/PmFeh7pj5v

#webgl #threejs

[Bruno Simon @bruno_simon]

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

[Renaud @onirenaud]

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