Aframe: Support for shadows

[ngokevin]

Issue by caseyyee
_Wednesday Nov 18, 2015 at 19:02 GMT_
_Originally opened as https://github.com/aframevr/aframe-core/issues/470_

---

It doesn't seem that lighting casts any shadows. Would be great to have this.

[ngokevin]

Comment by ngokevin
_Wednesday Nov 18, 2015 at 19:04 GMT_

---

Keeping a WIP at https://github.com/MozVR/aframe-core/pull/348

[caseyyee]

This would add a ton of depth to even basic scenes. Would love to have this in the next release.

[ngokevin]

We have our plates full for the next release and need to fight off some feature creep, but definitely soon after. There's extra work involved in bumping three.js since they revamped shadows. And arguably, text + physics are more valuable features. But the component itself is fairly simple, though I had some trouble fine-tuning the shadows back in Nov

[donmccurdy]

@ngokevin I've updated your shadow and shadow-light components for A-Frame v0.2.0 and the THREE.js changes here. Performance seems OK with directional lighting, but bad with point lights.

Having trouble with some of the parameters though – shadows have been offset or weirdly scaled in my tests so far.

[ngokevin]

Cool. Yeah, didn't get it merged last time because I had trouble tuning the shadows to look good, and then never got back around to it.

[msimpson]

@donmccurdy
Try settings your shadow bias to 0.02 and increasing your map size to a width and height of 2048. I find tweaking the bias stops the light bleed at the edge of objects and a higher map size will help that jagged look. Also, you may want to drop shadow darkness; it seems that it's legacy at this point.

[donmccurdy]

@msimpson thanks! that does look sharper but the shapes of shadows are still wrong. maybe i'm misunderstanding how directional lights should be positioned, but haven't found a good example yet.

Example here - the shadow seems to only come from the end of a longer object : /

[msimpson]

@donmccurdy
That's really odd. I've not seen that before. Actually, can you reproduce that in a fiddle or something so I can see how that's happening?

[msj121]

Not sure why it isn't working on codepen, but a similar scene I have working on my own webserver:
http://codepen.io/msj121/pen/gMMyrO

Just figured I would let you see it in action; sadly, something is wonky on codepen or I made a stupid mistake....

Try it for yourself:

<a-scene>
  <a-sphere shadow="cast:true;receive:true;" position="0 0.25 -4.5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-box shadow="cast:true;receive:true;" position="-1 -0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
  <a-cylinder shadow="cast:true;receive:true;" position="1 -0.25 -2" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane shadow="cast:true;receive:true;" rotation="-90 0 0" position="0 -1 -3" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-entity shadow-light="type:spot;angle:45;castShadow:true;" position="15 25 15"></a-entity>
  <a-entity camera="active:true" wasd-controls="" look-controls="" position="0 0 0" rotation="0 0 0"></a-entity>
</a-scene>

[FrederickDesimpel]

I wouldn't complicate the light component any further with shadows. I have a pr in the works which uses three components: a shadow-scene, shadow-object and shadow-light component, to be used on the respective elements. With the shadow-scene you can globally set shadows on or off and set the type.

Will continue on it after aframe is updated to use the latest threejs.

[ngokevin]

Or an API like:

<a-scene shadow="type: soft">
  <a-box shadow="cast: false; receive: true"></a-box>
  <a-entity light light-shadow>
</a-scene>

Where <a-scene shadow> is defined as a system: AFRAME.registerSystem('shadow', {})

[takahirox]

Any update about shadows?
I really want A-Frame official shadows support~

[donmccurdy]

@takahirox I'm not sure about a roadmap for official support, but the bugs I mentioned above about aframe-extras.shadows have been fixed.

[takahirox]

@donmccurdy Yeah, I confirmed aframe-extras.shadow works now, thanks. But I found a bug and have a feature request so I'll send PR to it.

And it seems like shadow will get in 0.5.0, that sound p good to me :D

[donmccurdy]

@ngokevin +1 for that suggested syntax change, and having either a system or a scene-level component that configures the renderer. What do you think about aiming to include shadows in 0.5.0? Or would a registry package be best?

[ngokevin]

I support shadows for core, the PR is already tagged for the 0.5.0 milestone

[donmccurdy]

SG. Before I (or someone) opens a PR, here's a proposed structure:

src/extras/
├── ...
└── shadows/
    ├── components/
    │   ├── index.js
    │   ├── shadow.js
    │   └── shadow-light.js
    ├── systems/
    │   ├── index.js
    │   └── shadow.js
    └── index.js

Is this consistent with what you have in mind, @ngokevin @dmarcos @takahirox ? May be worth considering whether shadow-light should be a separate component or simply add some functionality into the light component. It modifies the schema significantly, but doesn't do all that much otherwise.

[ngokevin]

Slightly leaning towards putting the light's shadow parameters as a part of light since the shadow-light component needs a light, and the light component is very small so it doesn't hurt adding the shadow pieces.

[takahirox]

As for me(Three.js user/contributor and Web contents creator),
adding the shadow stuffs into existing light is more natural than separating them.

[donmccurdy]

Cool, this sounds good to me (i just haven't had time to start yet).

I'll re-assign to myself and remove the 'help wanted' tag if my schedule frees up before someone else takes it. So this issue is still up-for-grabs now.

[fernandojsg]

I agree also that looks more convenient to add it to light instead of another component, it's typically how it works on 3d software, you add a light, click shadows and you're ready to go.