search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.58k stars 3.94k forks source link

GLTF models do not receive shadows #3325

Closed PlumCantaloupe closed 6 years ago

PlumCantaloupe commented 6 years ago

I can't seem to get self-shadowing working on GLTF models. I can on the same model, using the .obj format instead though.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="js/aframe-v0.7.1.min.js"></script>
  </head>
  <body>
      <!-- <a-scene stats> -->
    <a-scene shadow="type: basic;">

      <!-- skull from here: https://sketchfab.com/models/1a9db900738d44298b0bc59f68123393 -->
      <a-assets timeout="10000">
          <a-asset-item id="skull" src="assets/gltf/skull_downloadable/scene.gltf"></a-asset-item>
          <a-asset-item id="skull-obj" src="assets/models/craneo.OBJ"></a-asset-item>
          <img id="skull-diffuse" src="assets/textures/skull_diffuse_UD.jpg">
          <img id="skull-normal" src="assets/textures/skull_normal_UD.jpg">
          <img id="skymap" src="assets/textures/SunnyWheat.jpg" crossOrigin="anonymous">
      </a-assets>

      <a-entity light="type:directional; castShadow:true; intensity:0.4; shadowCameraBias:0.01; shadowCameraVisible:true; shadowMapWidth:1024; shadowMapHeight:1024;" position="1.285 1 1"></a-entity>
      <a-entity light="type: ambient; intensity: 0.5;"></a-entity>

      <a-gltf-model src="#skull" position="1 1.5 -4" shadow="cast:true; receive:true;"></a-gltf-model>
      <a-entity obj-model="obj:#skull-obj;" position="-1 1.5 -4" material="color:#fff; src:#skull-diffuse; normalMap:#skull-normal; sphericalEnvMap:#skymap; roughness:0.8; metalness:1.0;" shadow="cast:true; receive:true;"></a-entity>

      <!-- just some silly 2d circles being used to test shadows at various heights -->      
      <a-circle id="ground0" position="0 0 -4" radius="2" rotation="-90 0 0" shadow="receive:true;" color="#ff0000"></a-circle>
      <a-circle id="ground1" position="0 -0.05 -4" radius="2" rotation="90 0 0" shadow="cast:true;"></a-circle>

      <a-circle id="ground2" position="0 -0.5 -4" radius="4" rotation="-90 0 0" shadow="receive:true;" color="#00FF00"></a-circle>
      <a-circle id="ground3" position="0 -0.55 -4" radius="4" rotation="90 0 0" shadow="cast:true;"></a-circle>

      <a-circle id="ground4" position="0 -1 -4" radius="6" rotation="-90 0 0" shadow="receive:true;" color="#0000FF"></a-circle>
      <a-circle id="ground5" position="0 -1.05 -4" radius="6" rotation="90 0 0" shadow="cast:true;"></a-circle>

      <a-entity id="sky"
        geometry="primitive: sphere; radius: 500;"
        material="shader: flat; side: back; height: 2048; src: #skymap; width: 2048"
></a-entity>
    </a-scene>
  </body>
</html>

screen-shot-2017-12-26-at-10 00 24-pm

donmccurdy commented 6 years ago

Is it this model from sketchfab? It may be that the specular glossiness PBR materials don’t support shadows yet.

PlumCantaloupe commented 6 years ago

Yes, from Sketchfab. That is a good point. I'll test by exporting an object myself later today in Blender, and report back.

PlumCantaloupe commented 6 years ago

Yeah looks like that was it thanks. Using the MetalRoughness node in export lead to no issues in rendering.

donmccurdy commented 6 years ago

Hm, yeah here's a live demo showing the lack of received shadows pretty clearly: https://bug-gltf-specgloss-shadows-lbxbxojcha.now.sh/

/cc @takahirox any idea if this is something we can patch in the spec/gloss ShaderMaterial?

donmccurdy commented 6 years ago

Oops just saw your comment above. I'll open a new issue on three.js for the spec/gloss issue then.

donmccurdy commented 6 years ago

Filed: https://github.com/mrdoob/three.js/issues/12980

PlumCantaloupe commented 6 years ago

Thanks!

Some brief research into the gltf export shows specGloss is not part of the GLTF 2.0 core anyhow which may explain some things (ext. 'KHR_materials_pbrSpecularGlossiness' required).

donmccurdy commented 6 years ago

Yeah, metal/rough is the core default but all the Sketchfab exports use spec/gloss so we do try to support it. It's just harder to implement in three.js so there are some edge cases like this.