6 ms·

Landing page is awesome, wonder how it was created

by aogaili 3y ago

kleiba 3y ago
Is that sarcasm?
- smokel 3y ago
  Probably not, there is an impressive interactive 3D point cloud rendering, which only shows up after a few seconds. Perhaps you missed that?
  - tedunangst 3y ago
    How many seconds? I see a discord button, and then some weird blob thing wobbling around. After 30 seconds I got bored of watching it.
    - Karliss 3y ago
      In that case you didn't miss anything. Weird wobbling blob thing is the "impressive interactive 3D point cloud".
      - haxiomic 3y ago
        You should be able to see the blob form models – perhaps there's some error when it runs on your system. It relies on floating-point textures which aren't supported everywhere If you view this link https://lumalabs.ai/genie?s=1&d=-4 https://lumalabs.ai/genie?s=1&d=-4, do you see the models more clearly? If you _don't_ I'd be curious if any errors are reported in console
        Karliss 3y ago
        Yes with s=1?d=-4 the models are completely clear. I assume the semitransparent glittery look is intentional artistic choice."weird blob" weren't my words but I can imagine how someone could describe it that way considering that half of the time you see the transition animation during which it's much harder to recognize the object.
    - dorkwood 3y ago
      30 seconds is a lot of time to stare at one thing. It sounds to me like it entranced you just as much as it did the others. How long would you expect a single graphic to hold your attention before you can deem it impressive? Five minutes?
- aogaili 3y ago
  It's not, I was referring to the interactive 3D author explained.
  - kleiba 3y ago
    Judging from other comments, it seems I'm not the only one who didn't get to experience that - perhaps I just didn't wait long enough for that to show up? In good hackernews style, I got downvoted into oblivion for just a simple question, but I guess that's to be expected these days.
    - haxiomic 3y ago
      Interesting that nothing appears for you, we should aim to show a placeholder instead in this case Do you get any errors in the js console? Are you on Destop or phone?
      - kleiba 3y ago
        Firefox on Windows, but I used a pretty old machine - so perhaps it was just a matter of not having waited long enough?!
    - aogaili 3y ago
      Understandable, there is a bit of delay to start and yeah it is the main thing that stands out.
haxiomic 3y ago
Thank you! I worked on this We start with a point cloud generated from the model which has color and normal and render each particle as a little hexagon with metallic and iridescent shading. Each particle is given a position and velocity in a texture. Each frame we do a physics step that writes to these textures with fragment shaders. We sum the forces into the velocity texture: - mouse interaction force - flow force from time varying curl noise - spring force to return to original position - air resistance last we do a euler step to update position texture. There’s masses of free parameters to control forces and materials, the animation is created by changing parameters per-particle over time Tech: three.js, GLSL & TypeScript Tip: Left click to push apart, right click to pull together!
- HanClinto 3y ago
  This is really awesome -- well done!

Landing page is awesome, wonder how it was created

kleiba 3y ago

Is that sarcasm?

smokel 3y ago
Probably not, there is an impressive interactive 3D point cloud rendering, which only shows up after a few seconds. Perhaps you missed that?
- tedunangst 3y ago
  How many seconds? I see a discord button, and then some weird blob thing wobbling around. After 30 seconds I got bored of watching it.
  - Karliss 3y ago
    In that case you didn't miss anything. Weird wobbling blob thing is the "impressive interactive 3D point cloud".
    - haxiomic 3y ago
      You should be able to see the blob form models – perhaps there's some error when it runs on your system. It relies on floating-point textures which aren't supported everywhere If you view this link https://lumalabs.ai/genie?s=1&d=-4 https://lumalabs.ai/genie?s=1&d=-4, do you see the models more clearly? If you _don't_ I'd be curious if any errors are reported in console
      - Karliss 3y ago
        Yes with s=1?d=-4 the models are completely clear. I assume the semitransparent glittery look is intentional artistic choice."weird blob" weren't my words but I can imagine how someone could describe it that way considering that half of the time you see the transition animation during which it's much harder to recognize the object.
  - dorkwood 3y ago
    30 seconds is a lot of time to stare at one thing. It sounds to me like it entranced you just as much as it did the others. How long would you expect a single graphic to hold your attention before you can deem it impressive? Five minutes?
aogaili 3y ago
It's not, I was referring to the interactive 3D author explained.
- kleiba 3y ago
  Judging from other comments, it seems I'm not the only one who didn't get to experience that - perhaps I just didn't wait long enough for that to show up? In good hackernews style, I got downvoted into oblivion for just a simple question, but I guess that's to be expected these days.
  - haxiomic 3y ago
    Interesting that nothing appears for you, we should aim to show a placeholder instead in this case Do you get any errors in the js console? Are you on Destop or phone?
    - kleiba 3y ago
      Firefox on Windows, but I used a pretty old machine - so perhaps it was just a matter of not having waited long enough?!
  - aogaili 3y ago
    Understandable, there is a bit of delay to start and yeah it is the main thing that stands out.

haxiomic 3y ago

Thank you! I worked on this We start with a point cloud generated from the model which has color and normal and render each particle as a little hexagon with metallic and iridescent shading. Each particle is given a position and velocity in a texture. Each frame we do a physics step that writes to these textures with fragment shaders. We sum the forces into the velocity texture: - mouse interaction force - flow force from time varying curl noise - spring force to return to original position - air resistance last we do a euler step to update position texture. There’s masses of free parameters to control forces and materials, the animation is created by changing parameters per-particle over time Tech: three.js, GLSL & TypeScript Tip: Left click to push apart, right click to pull together!

HanClinto 3y ago
This is really awesome -- well done!