https://spite.github.io/codevember-2021/8/
How is this ribbon made?Is a ribbon a single, fully subdivided planeGeo, or is it an instancedMesh composed of individual planes?
#Implementation of the Flow Field Ribbon
strong mountain
fiery sand
my guess is one subdivided plane per ribbon.
You could do it with instances, but you'd have to do a lot of work to get them to join together smoothly.. and there wouldn't be much point to sending a matrix per quad vs just 2 vertices per rib in a ribbon
still tide
Yeah, just quads divided into triangles, forming a strip of random length as depicted by thrax: https://github.com/spite/codevember-2021/blob/main/8/ribbon.js
strong mountain
Oh my goodness, this is really complicated.🥲
fiery sand
Nah.
new Mesh(new PlaneGeometry(100,1,100,1),new ShaderMaterial({ ... your shader stuff here ... })
fiery sand
strong mountain
In spite's code ,He uses an invisible line (keypoints—position, normal, tangent—from points), but I find his naming conventions a bit odd. I think it would be more intuitive to use the tangent to describe the direction the point is moving in, and the normal to indicate the orientation of the ribbon’s surface. Then, in the CPU JavaScript, he updates the head point every frame using curlNoise. He uses a queue to remove points from the tail and insert updated ones at the head to update the entire line. He then remaps these points to the vertex attributes of the geometry and uses needUpdate notifications to trigger the update.
fiery sand
In spite's code ,He uses an invisible line (keypoints—position, normal, tangent—...
are you sure abut that though, that he's doing the curl noise on the CPU?
id have thunk he would do that in the shader.. or maybe w precomputed 3d texture or smth
but maybe you're looking at an early demo, like polyshredder?
here's a fully gpu ribbon + curl noise + gpgpu particle thing I made a while ago: https://manthrax.github.io/tgpu/index.html
strong mountain
I think so, except that he only generates curl noise at this single point in the head, and then shifts everything back one position using a queue,
fiery sand
what app are you looking at?
strong mountain
https://github.com/spite/codevember-2021/blob/main/8/ribbon.js#L263 from SillyBits's github link
fiery sand
man. just amazing stuff: https://spite.github.io/codevember-2021/
yeah... in that one I guess i can see that.. he only needs to update the head and tail...
strong mountain
Yes, the CPU is also very fast.
fiery sand
not as fast as a mid range gpu 😄
but yeah. relatively fast.
thats a really pretty demo
strong mountain
Are you using a matrix like this to change the instance's orientation? ```export const lookAt2 = Fn(([dir]: [Node<'vec3'>]) => {
const d = dir.normalize()
const right = cross(d, vec3(0, 1, 0)).normalize()
const up = cross(right, d).normalize()
const rotationMatrix = mat3(right, up, d);
return rotationMatrix
})
in what?
strong mountain
I did it. https://yufengjie97.github.io/gpuCurlRibbons/ tsl computeNode version 2000 ribbons and every ribbon have 200 segement,