5 ms·

Nitpick, but elevation would make much more sense if you assumed a base plane + set a perspective, and then translate3d'd upwards on the Z axis. It would grow t

Nitpick, but elevation would make much more sense if you assumed a base plane + set a perspective, and then translate3d'd upwards on the Z axis. It would grow the size of the element as well. Saying that, probably annoying to work with transformed DOM nodes, but the background being the only thing moving in the "bounce" example just stood out to me as weird. Also, the texures seem to be just gradients or embedded texture data. Was thinking this would use https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/image/paint https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V... and fall back to gradients/premade images for firefox.

kikkupico 15d ago
Orthographic projection was chosen here deliberately - that's why elevation makes no difference to the size of the object but changes the shadow. Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls. Orthographic projection doesn't need to handle that. The docs have a page where the lighting and camera setup is explained with an actual threejs 3d scene - https://kikkupico.github.io/ambientcss/guide/concept/#how-it-works https://kikkupico.github.io/ambientcss/guide/concept/#how-it... . Hope it helps! Regarding the textures, they respond to lighting but not especially well. In the demo app, you can scroll to the materials page and use the theme switcher at the top to see how the texture respond.
- ricardobeat 15d ago
  I'm sorry but that's just slop. The elevation in the actual CSS makes the shadow progressively lighter (technically correct, thought the proportions look very wrong, 2 is too dark), while the 3D model has it constant. There is nothing in this 'camera and lighting setup' that was translated to the styles.
  - kikkupico 15d ago
    The threejs scene in the docs is only for explaining the setup; it doesn't have a raytracer to render shadows accurately. The reference renders for the CSS were done in Blender. See https://kikkupico.github.io/ambientcss/ambient-css/grounded#elevation https://kikkupico.github.io/ambientcss/ambient-css/grounded#... for examples.
    - rf15 15d ago
      Some of these seem incredibly far off for no reason
      - ricardobeat 14d ago
        Indeed. Those are even more off. It's like they haven't actually looked at what the AI produced - or the agent is also the one writing the replies here.
- DrinkerOfBeers 15d ago
  >Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls. That would actually be pretty cool imo. Probably too performance intensive to do with css hacks though

kikkupico 15d ago

Orthographic projection was chosen here deliberately - that's why elevation makes no difference to the size of the object but changes the shadow. Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls. Orthographic projection doesn't need to handle that. The docs have a page where the lighting and camera setup is explained with an actual threejs 3d scene - https://kikkupico.github.io/ambientcss/guide/concept/#how-it-works https://kikkupico.github.io/ambientcss/guide/concept/#how-it... . Hope it helps! Regarding the textures, they respond to lighting but not especially well. In the demo app, you can scroll to the materials page and use the theme switcher at the top to see how the texture respond.

ricardobeat 15d ago
I'm sorry but that's just slop. The elevation in the actual CSS makes the shadow progressively lighter (technically correct, thought the proportions look very wrong, 2 is too dark), while the 3D model has it constant. There is nothing in this 'camera and lighting setup' that was translated to the styles.
- kikkupico 15d ago
  The threejs scene in the docs is only for explaining the setup; it doesn't have a raytracer to render shadows accurately. The reference renders for the CSS were done in Blender. See https://kikkupico.github.io/ambientcss/ambient-css/grounded#elevation https://kikkupico.github.io/ambientcss/ambient-css/grounded#... for examples.
  - rf15 15d ago
    Some of these seem incredibly far off for no reason
    - ricardobeat 14d ago
      Indeed. Those are even more off. It's like they haven't actually looked at what the AI produced - or the agent is also the one writing the replies here.
DrinkerOfBeers 15d ago
>Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls. That would actually be pretty cool imo. Probably too performance intensive to do with css hacks though