How to add stickers in the babylon.js screen

Questions
, , ,
1

Hi,

We need to add some stickers in babylonjs scene beside the avatar walking animation
I tried to add the Gif file but its not working out.

var layer = new BABYLON.Layer(‘’,‘https://i.ibb.co/7G7PD8J/giphy.webp’, scene, true);

Using canva we are able to achieve it as shown in the attachment.
https://www.canva.com/design/DAFEUf4YYsM/ZBl68dBz7K0Xn5kRd2MOoA/watch?utm_content=DAFEUf4YYsM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Pls suggest how the above canva solution be attained using babylonjs.

Thanks
vijay

2

It seems to be ok in your playground:

image
image1476×1371 87 KB

We can see the layer behind the avatar.

I am not sure which part is not working for you ?

Happy to jump in as soon as I understand the issue better :slight_smile:

3

Thanks sebavan for the extended support

As shown in canva example we want to achieve animated gif along with the animated avatar.

With the below code we are trying to show “flowers shud be showering on the walking avatar”. Seems there is some tech issue. Could u pls suggest

4

Animated gifs are not supported by WebGL :frowning:

You would need to have quite a setup for it Animated Gifs in Babylon

or you could use a video ?

5

Or maybe in your case particles :slight_smile:

6

am taking alternative by adding transparent video as screen background.texture

We used Videotexture to get this. The video is not running at all can u pls suggest what best can be done.

The error we are getting is
VM215:28 Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. Autoplay policy in Chrome - Chrome Developers

7

You have a CORS issue:

image
image3517×85 26.2 KB

Also the video should either be started muted or following a user interaction.

8

Its not the CORS issue, i changed the video link the error am getting is

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. Autoplay policy in Chrome - Chrome Developers

@sebavan could u pls suggest how to fix this

9

Those are the only 2 solutions :slight_smile:

1 Like
10

I’m afraid that’s what it is for now. Just wondering, will the new/projected BJS sound object be able to make a workaround for this? Or is it just for sound and nothing will change on the side of videos?

Edit: In this particular scenario, I actually would have made these with particles. I believe would been a lot sexier (my opinion only)

11

just trying multiple ways…

I could not get the background with GIF file, trying to add .mp4 file on background plane.

As per below example can we lock the background plane and allow only the avatar to rotate ?

pls suggest…

12
1 Like
13

Thanks mawa for the update…

i tried with particles(example) its awesome…

14

Yes, I believe particles are nice because you can have them also in front and all around. It’s more immersive.
Though the video bg at shown by @MarianG also works fine. Your choice. GL with your project,

15

@mawa could u help me to set the direction and position avatar to full screen and particles are falling from top (90 degrees)

For this i created a cube and made it invisible but the avatar is moving upwards not adjusting to full screen. pls suggest

16

I guess I could do that. I actually noticed your particles are going the wrong way but I thought it was just WIP so I didn’t comment. I have a couple of things to attend to as of just now, but I can send you an update within the next few hours, if ok with you? Else, may be someone will step-in before I return…

17

Hi @vijay_krishna ,
I did part of the work in your scene (but then only part of it).
First thing is that you will need to tweek some values in there to get the effect you want.
What I have done for now is:

  1. reset the camera target to more or less the hip of your avatar (line 9 in PG)
  2. brought in a second camera for the UI layer and added a grid and a control (to the far bottom right) to enter or exit full-screen mode (I used just the PG icon but the code is already in for you to change to an ‘expand’ and ‘compress’ icon.
  3. replaced your particle system with an emitter that is much larger and above the model. Added (the base of) noise. Added (the base of) changing cellID (for a later cell animation to be done - lines 157 to 164 in PG). Did a rough setup of gravity, lifetime, etc… All values you will need to twist and adapt to your liking.
  4. pushed the particle system to use a higher renderingGroupID so that particles also display in front of the avatar (if you don’t want this, simply remove the line 216 in PG).

Ideally, from here, what I would do is create a spreadSheet with 4 up to 6 different ‘stickers image’ to replace the flare. Stickers would have different curvation and rotation and next you would uncomment the lines of cellID animation (lines 157 to 164) to use with your new images of stickers.
Additionally (not done in this PG), use the values for cell ‘rotation’ and ‘angular’ to further animate your stickers.
Finally, you will need to adjust the height of the emitter and adapt min an max lifetime to the final height. Use dead color to have your stickers disappear once they are about to touch the ground.
This is all final setting and it can take some time to have it all the way you want. Another thing I sometimes do for snow or rain effect is that I actually duplicate the particle system (create a second particle system) and set a different direction and noise to it to create a more volumetric effect.
Well, I guess you should have a base here to play with. If you need more help, let us know…

2 Likes
18

Thanks mawa u r awesome
you made my day…:slight_smile:

1 Like