# InstancedMesh + implement billboard

**URL:** <https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [August 28, 2021, 6:13am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354 "2021-08-28T06:13:33Z")\
**Posts on this page:** 13\
**Page:** 2

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [September 3, 2021, 10:24am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/22 "2021-09-03T10:24:42Z")

</div>

Of course needs.

---

<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:** [September 3, 2021, 11:14am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/23 "2021-09-03T11:14:40Z")

</div>

@11170 @Chaser_Code  
Guys, any thoughts on what has to be changed to make it work as expected?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [September 3, 2021, 11:26am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/24 "2021-09-03T11:26:49Z")

</div>

I dont know about istancedmesh. I am using only istancedBufferGeometry for sprites with fixing face to camera all xyz, fixed xz like sprite, fixed xz like distance, rotated by quaternion. And all is 1 draw call with different textures while without atlas.

---

<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:** [September 3, 2021, 11:32am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/25 "2021-09-03T11:32:22Z")

</div>

Using `InstancedMesh`, you’ll get the same 1 drawcall, but I didn’t get how the amount of drawcalls relates to the issue with rotation.  
I solved it with one additional line of code:

```javascript
        _z1.setY(0).negate().normalize();
        planes.worldToLocal(_z1); // add this
        q.setFromUnitVectors(_z0, _z1);

```

---

<div class="post-metadata">

**Author:** ![11170](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11170/32/19563_2.png) [@11170](https://discourse.threejs.org/u/11170)\
**Post date:** [September 3, 2021, 12:07pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/26 "2021-09-03T12:07:18Z")

</div>

Creating an atlas is a lot more work than you think.  
The work efficiency is definitely reduced.  
Of course, it is very good to have one atlas in the web environment. It is also efficient in downloading.  
The reason I chose instancedMesh is because I think it has an advantage in terms of management.  
I am currently making effects, but only Points have their limitations.  
Points uses only one vertex. However, sometimes effects can take many forms.  
To overcome that limitation, I used instancedMesh.  
 ![lightning](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/d/3d0c5faeedfe1208edc43ae2ff281f5530261778.png)

---

<div class="post-metadata">

**Author:** ![11170](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11170/32/19563_2.png) [@11170](https://discourse.threejs.org/u/11170)\
**Post date:** [September 3, 2021, 12:16pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/27 "2021-09-03T12:16:03Z")

</div>

> [@prisoner849](#):
>
> `planes.worldToLocal(_z1); // add this`

thank you. The problem has been resolved.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/avatar_studio/nb4qwp3g/17/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![11170](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11170/32/19563_2.png) [@11170](https://discourse.threejs.org/u/11170)\
**Post date:** [September 3, 2021, 12:38pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/28 "2021-09-03T12:38:15Z")

</div>

sorry.  
I noticed that the billboard didn’t work well when the instancedMesh was moved.

[https://jsfiddle.net/avatar\_studio/nb4qwp3g/22/](https://jsfiddle.net/avatar_studio/nb4qwp3g/22/)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 3, 2021, 3:12pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/29 "2021-09-03T15:12:17Z")

</div>

is this solved? i use obj.quaternion.copy(camera.quaternion) and it’s worked out great. though i have yet to try positioning on the shader, this is on the cpu.

> **[Instances (forked) - CodeSandbox](https://codesandbox.io/s/instances-forked-9b0k3)**
>
> Creating fixed-position instances with varying vertex colors.

---

<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:** [September 3, 2021, 3:26pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/30 "2021-09-03T15:26:55Z")

</div>

@drcmda  
It would be that simple, if the author wouldn’t need rotation on y-axis only 🙂

---

<div class="post-metadata">

**Author:** ![11170](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11170/32/19563_2.png) [@11170](https://discourse.threejs.org/u/11170)\
**Post date:** [September 4, 2021, 2:55am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/31 "2021-09-04T02:55:45Z")

</div>

Thank you for answer. For the effect, we need a billboard that rotates only on the y-axis.  
I don’t know how to use shaders, so this part is very difficult.

---

<div class="post-metadata">

**Author:** ![11170](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11170/32/19563_2.png) [@11170](https://discourse.threejs.org/u/11170)\
**Post date:** [September 30, 2021, 8:10pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/32 "2021-09-30T20:10:11Z")

</div>

I applied what you said to terrain grass.  
There were good results.  
However, it does not move back and forth like the wind blows, which is unnatural.  
How can I make this possible?

 ![save_wind](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/c/fcdebbbc06ad5fda136bf038ba0365b93658e67b.jpeg)

---

<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:** [September 30, 2021, 8:12pm UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/33 "2021-09-30T20:12:20Z")

</div>

Seems a good start: [Simple instanced grass example](https://discourse.threejs.org/t/simple-instanced-grass-example/26694)

---

<div class="post-metadata">

**Author:** ![11170](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11170/32/19563_2.png) [@11170](https://discourse.threejs.org/u/11170)\
**Post date:** [October 1, 2021, 3:55am UTC](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354/34 "2021-10-01T03:55:08Z")

</div>

thank you.  
this is applied

[Previous page](https://discourse.threejs.org/t/instancedmesh-implement-billboard/29354.md?page=1)