Shadows

Heaps has support for real-time shadows. Objects can both cast and receive shadows. This is set at a material level. In order to for shadows to work properly normals need to be calculated for your geometry.

In the following example you can see a simple scene with a couple of spheres and a floor. The spheres both cast and receive shadows while the floor only receives them. For shadows to render correctly your scene will need at least 1 light.

  1. //Create a floor plane where we can view our cast shadows
  2. var floor = new h3d.prim.Cube(10, 10, 0.1);
  3. //Make sure se add normals
  4. floor.addNormals();
  5. floor.translate( -5, -5, 0);
  7. var m = new h3d.scene.Mesh(floor, s3d);
  8. //Enabled lighting
  9. m.material.mainPass.enableLights = true;
  10. //Enable receieiving of shadows. Our floor does not need to cast
  11. m.material.receiveShadows = true;
  13. //Greate some sphere geometry for casting and receiving shadows
  14. var sphere = new h3d.prim.Sphere(1, 32, 24);
  15. //Make sure we add normals
  16. sphere.addNormals();
  18. var p = new h3d.scene.Mesh(sphere, s3d);
  19. p.z = 1;
  20. p.material.mainPass.enableLights = true;
  21. //Enable casting and receiving of shadows
  22. p.material.shadows = true;
  23. p.material.color.setColor(Std.random(0x1000000));
  25. var p2 = new h3d.scene.Mesh(sphere, s3d);
  26. p2.z = 2.5;
  27. p2.x = 1;
  28. p2.y = 1;
  29. p2.scale(0.5);
  30. p2.material.mainPass.enableLights = true;
  31. //Enable casting and receiving of shadows
  32. p2.material.shadows = true;
  33. p2.material.color.setColor(Std.random(0x1000000));
  35. //Set up a light otherwise we don't get any shadows
  36. var directionalLight = new h3d.scene.DirLight(new h3d.Vector(-0.3, -0.2, -1), s3d);
  38. //Move our camera to a position to see the shadows
  39. s3d.camera.pos.set(12, 12, 6);
  41. //Setup a Camera Controller to move the camera
  42. new h3d.scene.CameraController(s3d).loadFromCamera();

Shadow Example

Blurring Shadows

To create a more realistic effect you can blur your shadows. You do so by accessing the shadow pass from the renderer and setting the amount of passes on the blur object.

You can see an example here:

  1. var shadow = s3d.renderer.getPass(h3d.pass.ShadowMap);
  2. //Increasing the amount of passes increases the amount of blur applied to the shadow
  3. shadow.blur.passes = 3;

An example with shadow.blur.passes = 1; Shadow blurring set to 1

An example with shadow.blur.passes = 10; Shadow blurring set to 10