# MeshDepthMaterial & InstancedBufferGeometry

**URL:** <https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736>\
**Category:** Questions\
**Tags:** instancing, shadows\
**Created:** [October 30, 2018, 7:28pm UTC](https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736 "2018-10-30T19:28:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alecmce](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alecmce/32/3074_2.png) [@alecmce](https://discourse.threejs.org/u/alecmce)\
**Post date:** [October 30, 2018, 7:28pm UTC](https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736/1 "2018-10-30T19:28:14Z")

</div>

I’m trying to cast shadows for instance geometry, using a custom depth material. I expected the cubes on the right in this example to produce shadows on the white plane below (and hopefully on each other), but they don’t.

Can someone take pity on me and show me what I’m missing? Thanks in advance!

> **[react-umkt7y - StackBlitz](https://stackblitz.com/edit/react-umkt7y?file=App.js)**
>
> Starter project for React apps that exports to the create-react-app CLI.

---

<div class="post-metadata">

**Author:** ![alecmce](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alecmce/32/3074_2.png) [@alecmce](https://discourse.threejs.org/u/alecmce)\
**Post date:** [October 30, 2018, 8:25pm UTC](https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736/2 "2018-10-30T20:25:54Z")

</div>

Oh, if I add “depthPacking = RGBADepthPacking” to the InstancesDepthMaterial, I do get shadows … but the shadows are identical per instance.

> **[react-jzyt4a - StackBlitz](https://stackblitz.com/edit/react-jzyt4a)**
>
> Starter project for React apps that exports to the create-react-app CLI.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 30, 2018, 9:42pm UTC](https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736/3 "2018-10-30T21:42:32Z")

</div>

`MeshDepthMaterial` like all other built-in materials does not support instanced rendering. There is an example that shows how you can modify `MeshLambertMaterial` so it can be used with `InstancedBufferGeometry` plus shadow support. I hope you can use this code for your own project.

[https://threejs.org/examples/#webgl\_buffergeometry\_instancing\_lambert](https://threejs.org/examples/#webgl_buffergeometry_instancing_lambert)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [October 31, 2018, 12:39am UTC](https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736/4 "2018-10-31T00:39:35Z")

</div>

This could also be of some use:

> **[Extending three.js materials with GLSL – Dusan Bosnjak – Medium](https://medium.com/@pailhead011/extending-three-js-materials-with-glsl-78ea7bbb9270)**
>
> What are three.js materials?

---

<div class="post-metadata">

**Author:** ![alecmce](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alecmce/32/3074_2.png) [@alecmce](https://discourse.threejs.org/u/alecmce)\
**Post date:** [October 31, 2018, 9:56am UTC](https://discourse.threejs.org/t/meshdepthmaterial-instancedbuffergeometry/4736/5 "2018-10-31T09:56:35Z")

</div>

Thank you for your reply and for the references. I have read through them both in the last few days.

I made some progress on this issue last night. I was applying instancing in the vertex shader too late [here](https://stackblitz.com/edit/react-umkt7y?file=instances_material.js). I should have been overriding \<begin\_vertex\> and updating the transformed vec3 earlier, so that the instance position is also reflected in worldPosition. That was preventing the shadow.

I love the examples as a show-case, but as documentation or implementation exemplars, they aren’t great. You have to sift out the extraneous ‘we did this to make it pretty’ details and of course, extending shaders is not Three’s strong suit. Anyway, I’ll try to share some more tutorial-friendly examples once I’ve ironed out my shadow issue.