Bilboard Shader

[JohnDoe]

How to turn the plain towards the camera ?

The problem is that the image is distorted. Image size depends on canvas size

Please help !

Example: https://www.babylonjs-playground.com/#0CUISJ#26

[Evgeni_Popov]

Your shaders have errors (see console log), the plane does not show up.

[JohnDoe]

Update link https://www.babylonjs-playground.com/#0CUISJ#25

[Evgeni_Popov]

It’s the same link than in post #1.

You should rename your Sampler2D in something else than texture, as it is a reserved word. Once you do it, the plane does show up, but is black (?)

[JohnDoe]

update: https://www.babylonjs-playground.com/#0CUISJ#26

[Evgeni_Popov]

Here’s what I can see:

It’s not what you expect?

[JohnDoe]

Resize the window, the image will be distorted. The image should keep proportions.

[Evgeni_Popov]

You wrote your own shader and did not use the standard view/projection matrices to handler vertex transformation, so you have to factor the aspect ratio of the rendering area in your shader.

However, if you did this only to have the plane always facing the camera, it’s easier to do it by other means (billboard for eg) and keep the standard material for your plane.

[sebavan]

Could you not use the Babylon JS built in billboard instead ? https://www.babylonjs-playground.com/#UJEIL#0

[JohnDoe]

It does not work in “Solid Particle System”

[sebavan]

and using the sps.billboard mode ?

[JohnDoe]

It works. Thanks !