1

I'm currently trying to create continuity from a blender render to an element on an html page, and attempting to match the box-shadow property of an html element to the way drop shadow looks from a render.

Pretty much the only shading tool I have to work with while trying to imitate a render is this gradient argument called box-shadow.

One very popular example of box-shadow currently out there is material design (https://codepen.io/sdthornton/pen/wBZdXq), the shadows from which tend to look more life like.

In all of the shadows definitions are two sets of shadows:

.card-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

These types of shadows definitely look closer than just a single gradient, but are still a bit off, so I'm trying to figure out what they're missing by reverse engineering the shadow from a render and imitating it with these simple gradients.

Here's the part where a good understanding of Blenders (cycles) rendering logic comes in

The parts of the shadow I think of as being most important to a shadow looking real are first the primary shadow (where the object blocks the light), followed by a sort of halo shadow (where the object blocks reflected light), and the halo shadow is also a bunch of light which softens the primary shadow. I imagine that is why material design uses two shadows.

Is there any other simplifiable components to a shadow that come to mind? I can also add white drop shadows/gradients to sort of imitate lighting.

Also, I apologize for this not being a strictly in the world of blender question, but this question is even more out of place in the html/design world.

Seph Reed
  • 336
  • 1
  • 3
  • 12
  • "Shadow Catcher" – Dontwalk Apr 03 '18 at 17:14
  • I think you may be referring to Umbra and Penumbra if it helps. Maybe posting some reference images of what you are trying to match and what you have so far will help. The way I see it you have three basic parameters you can play with, which are light positioning, light intensity, and light size which will affect shadow softness – Duarte Farrajota Ramos Apr 03 '18 at 17:14
  • Umbra and Penubra are just about exactly what I'm looking for, and I'm really excited about this wiki link. Whatever it is I'm looking for, I imagine this is quite the lead. – Seph Reed Apr 03 '18 at 17:16
  • I'm pretty sure the Antumbra was the exact missing piece I was looking for. – Seph Reed Apr 03 '18 at 17:22
  • Maybe related?: https://blender.stackexchange.com/questions/44719/meaning-of-sun-lamp-size/44725#44725 and https://blender.stackexchange.com/questions/77336/how-to-minimize-soften-the-shadows/77347#77347 and https://blender.stackexchange.com/questions/95151/how-to-setup-correctly-the-spot-lamp/95159#95159 –  Apr 04 '18 at 00:14

0 Answers0