# InstancedMesh + HeightMaps

**URL:** <https://discourse.threejs.org/t/instancedmesh-heightmaps/37818>\
**Category:** Resources\
**Tags:** instancing, instancedmesh, textures\
**Created:** [May 5, 2022, 7:44am UTC](https://discourse.threejs.org/t/instancedmesh-heightmaps/37818 "2022-05-05T07:44:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 5, 2022, 7:44am UTC](https://discourse.threejs.org/t/instancedmesh-heightmaps/37818/1 "2022-05-05T07:44:29Z")

</div>

Hi community!

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/6/e63e88f49adbb4573375fe6b962414dc5079eda8.jpeg)

**Demo and source code: [https://codepen.io/prisoner849/full/dydoRPp](https://codepen.io/prisoner849/full/dydoRPp)**

The [answer](https://discourse.threejs.org/t/use-gpucomputationrenderer-texture-for-dynamic-instancedmesh-objects-positions/37741/7) inspired me to create this little demo with transition between heightmaps.

---

<div class="post-metadata">

**Author:** ![LeenAlfalah](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leenalfalah/32/18835_2.png) [@LeenAlfalah](https://discourse.threejs.org/u/LeenAlfalah)\
**Post date:** [May 5, 2022, 10:56am UTC](https://discourse.threejs.org/t/instancedmesh-heightmaps/37818/2 "2022-05-05T10:56:44Z")

</div>

That simply great!

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [May 5, 2022, 11:30am UTC](https://discourse.threejs.org/t/instancedmesh-heightmaps/37818/3 "2022-05-05T11:30:06Z")

</div>

Paul,

the title sounds interesting, but the Codepen shows only a white screen, on both Safari 13.1.3 (for macOS) and Firefox 99.0.1 (also on macOS).

Safari console output:

 ![Bildschirmfoto 2022-05-05 um 13.19.25](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/f/9f788b68a4d6aa96121019e07f8e95e184198d7a.png)

Firefox console output:

 ![Bildschirmfoto 2022-05-05 um 13.24.08](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/5/b5531b11bbf7695213cdfa1f1fe52b9e38f5a235.png)

On Google Chrome 101 it **is** working. 👍

Too bad those browser suppliers can’t seem to agree on things.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 5, 2022, 1:02pm UTC](https://discourse.threejs.org/t/instancedmesh-heightmaps/37818/4 "2022-05-05T13:02:19Z")

</div>

In FF (on Windows) it works, when you click “View in Editor” and then “Run” (that’s why I always turn off “Auto-update preview” option in settings).

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [May 5, 2022, 1:17pm UTC](https://discourse.threejs.org/t/instancedmesh-heightmaps/37818/5 "2022-05-05T13:17:02Z")

</div>

Yes, that way it works both in Safari and FF on macOS, too.