# Instancing tutorial

**URL:** <https://discourse.threejs.org/t/instancing-tutorial/4129>\
**Category:** Resources\
**Tags:** tutorials\
**Created:** [September 14, 2018, 5:43am UTC](https://discourse.threejs.org/t/instancing-tutorial/4129 "2018-09-14T05:43:12Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [September 14, 2018, 5:43am UTC](https://discourse.threejs.org/t/instancing-tutorial/4129/1 "2018-09-14T05:43:12Z")

</div>

I wrapped up my instancing tutorial and ended up breaking it into three parts.

Part 1 tackles the introduction and a theoretical overview, there’s code but it’s mostly illustrative:

> **[Instancing with three.js — Part 1 – Dusan Bosnjak – Medium](https://medium.com/@pailhead011/instancing-with-three-js-36b4b62bc127)**
>
> This is a three part series on a somewhat broad technical 3d topic. The first part is a theoretical overview of the technique, the second…

Part 2 takes an existing three.js example that looked suitable for instancing and rebuilds it with instancing. There’s raycasting going on in the demo, this is kept as is ie. we don’t opt for gpu picking, we keep the cpu mesh raycasting. This completely decouples the rendering and scene graph concerns, i think most examples i’ve seen stop when they enable instancing.

> **[Instancing with three.js — Part 2 – Dusan Bosnjak – Medium](https://medium.com/@pailhead011/instancing-with-three-js-part-2-3be34ae83c57)**
>
> In this part we’re going to take an example that could potentially benefit from instancing and apply it!

Part 3 tries to further optimize the demo, it actually fails at that since brute forcing the cubes seems to still work better, but it outlines the idea with code, and leaves some ideas for the reader. It also shows how all of this can be done with a few lines using an abstracted class.

> **[Instancing with three.js — Part 3 – Dusan Bosnjak – Medium](https://medium.com/@pailhead011/instancing-with-three-js-part-3-a3fe15bcee3a)**
>
> In this part we’re going to use attempt to cull the instanced cluster and in the end see how this would be done with an abstraction.

---

<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:** [September 21, 2018, 9:06am UTC](https://discourse.threejs.org/t/instancing-tutorial/4129/2 "2018-09-21T09:06:45Z")

</div>

Added another chapter to part3.

There’s a demo but i need to expose the instance count. This chapter talks about bottle necks. If you hit `space` you should see the cull cells. If you hit `W` you should switch to the instance call. Because it binds the attributes, it’s much slower despite having the same count. However, it can push much more geometry through it, so it doesn’t make a difference if each cell is only one box or 100.

[https://rawgit.com/pailhead/three.js/instancing-part3-toggle/examples/webgl\_interactive\_cubes.html](https://rawgit.com/pailhead/three.js/instancing-part3-toggle/examples/webgl_interactive_cubes.html)