# Stretched Billboard Without Rotating

**URL:** <https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847>\
**Category:** Questions\
**Tags:** particles\
**Created:** [October 16, 2022, 5:44pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847 "2022-10-16T17:44:22Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![s207152](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/s207152/32/27550_2.png) [@s207152](https://forum.babylonjs.com/u/s207152)\
**Post date:** [October 16, 2022, 5:44pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/1 "2022-10-16T17:44:23Z")

</div>

Hi all,

I am trying to create a booster particle effect from 2d texture by using stretched billboard mode.

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#VXCU73)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![side](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/5/f53a91bb97f01b482224a9ffd7b8d51eb5cabfe1.png)  
When viewing from the side, that is the desired effect.

 ![front](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/1/2186e790a6c84115237e8e24f678f0c311400a43.png)  
However when viewing head-on, I would like the particle to be “thin and stretched” (just like a viewing the side of a plane mesh) instead of rotating the texture.

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/c/fc677b5b128b3444bbf35d500adcd49d4afde90e.png)  
(The desired behavior in Unity)

Is it possible to change the rotation behavior?  
Do I have to customize the vertex shader to achieve the “thin stretched” effect?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 17, 2022, 12:50pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/2 "2022-10-17T12:50:12Z")

</div>

Hello and welcome to the Babylon community! I think you’ll need to customize the vertex shader, right @sebavan ?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 17, 2022, 3:30pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/3 "2022-10-17T15:30:47Z")

</div>

I do not think we support this mode by default so you might need a custom version. @PatrickRyan is our Particle guru and could confirm ?

You might need a custom update to add the support.

I like the idea though and It would be a great contrib if we do really not support it ?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 17, 2022, 3:39pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/4 "2022-10-17T15:39:38Z")

</div>

Also @PatrickRyan please try in this pg: [https://www.babylonjs-playground.com/#VXCU73#4](https://www.babylonjs-playground.com/#VXCU73#4) not the op one as it modifies the default particle shader and might not work for what you try. if you opened the other one first, please open in a new tab 🙂

---

<div class="post-metadata">

**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\
**Post date:** [October 17, 2022, 6:38pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/5 "2022-10-17T18:38:42Z")

</div>

@sebavan, this [playground is what I would have done](https://www.babylonjs-playground.com/#VXCU73#5) to have the billboard react the way @s207152 has described. I created a transform to use as the emitter source so I could utilize the emitter axis. I set the particles to emit up rather than right, and then set the particle rotation to match the orientation of the emitter. The [isLocal](https://doc.babylonjs.com/typedoc/classes/BABYLON.ParticleSystem#isLocal) property set to true says that particles should be updated in the emitter’s local space rather than world space, so a BILLBOARDMODE\_Y should reflect the emitter’s local Y rather than the world Y. The billboardMode accessor seems to ignore the isLocal property, however. This feels like a bug to me. What do you think?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 17, 2022, 6:46pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/6 "2022-10-17T18:46:32Z")

</div>

I would think billboard is only global and not in the parent which makes sense so I guess is local is not taken in account as you mentioned.

Let me burn a wildcard to summon @Deltakosh and see if he has an idea ?

---

<div class="post-metadata">

**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\
**Post date:** [October 17, 2022, 6:55pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/7 "2022-10-17T18:55:43Z")

</div>

@sebavan if billboardMode is only global, then it feels like we need to add one more property for BILLBOARDMODE\_STRETCHED to allow billboard only around the axis of the direction of particle emission. It seems with just BILLBOARDMODE\_ALL, BILLBOARDMODE\_STRETCHED, and BILLBOARDMODE\_Y that we are leaving some scenarios on the shelf when using stretched particle cards. This really doesn’t show up as an issue if the particle cards are square.

---

<div class="post-metadata">

**Author:** ![s207152](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/s207152/32/27550_2.png) [@s207152](https://forum.babylonjs.com/u/s207152)\
**Post date:** [October 19, 2022, 5:46am UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/8 "2022-10-19T05:46:03Z")

</div>

That would definitely be great if it will be supported as an option of `BILLBOARDMODE_STRETCHED`!

As for now, I have come up a workaround by changing `row1` vector to `direction`.  
Here is the updated PG:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#VXCU73%236)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Notice the changes on line 86, 89, 90.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 19, 2022, 12:48pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/9 "2022-10-19T12:48:49Z")

</div>

@Evgeni_Popov would you have time to look into this one ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 19, 2022, 7:19pm UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/10 "2022-10-19T19:19:56Z")

</div>



---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 24, 2022, 9:56am UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/11 "2022-10-24T09:56:35Z")

</div>

I have created a PR based on @s207152 code:

> <https://github.com/BabylonJS/Babylon.js/pull/13156>
>
> See https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/8

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 24, 2022, 9:56am UTC](https://forum.babylonjs.com/t/stretched-billboard-without-rotating/34847/12 "2022-10-24T09:56:43Z")

</div>


