6 ms·

Orthographic projection was chosen here deliberately - that's why elevation makes no difference to the size of the object but changes the shadow. Perspective pr

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 15d 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

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 15d 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