How can I synchronize a 2D layer animation sequence with the movement of the camera’s alpha?

Questions
1

Hi, I’m currently working on replicating this project as a way to practice these types of projects. From what I’ve gathered, the project has a PNG animation sequence that plays when the mouse touches the screen and moves horizontally. It also features a 3D model of a building with an opacity of zero, and only one part of the model becomes active when the user interacts with the UI. As you can see, this part of the model is highlighted in green. When you play the image sequence, the alpha of the camera seems to synchronize with the image sequence and the rotating 3D building.

I’ve managed to replicate the movement of the PNG sequence using a layer element from Babylon and changing its texture when the mouse pointer moves horizontally, here’s the playground. Now, I want to overlay the 3D model and adjust the alpha of the active camera to change the layer texture in a way that synchronizes the layer sequence with the movement of the Babylon Camera. I’ve been doing some tests, but I haven’t achieved the desired effect yet, so, finally my questions are:

  • How could I achieve this, and what is the best way to do it?

Any assistance would be greatly appreciated. Thank you!

2

Can you share a playground with what you tried ? I am having trouble to get what you are trying to achieve with the 3d model, the playground would help.

3

Apologies. Here’s the playground. I’ve attempted to adjust the camera target and position in order to replicate the angle, but it’s not entirely accurate. Additionally, when it rotates, there are certain parts where the animation doesn’t align perfectly with the model.

4

I am sorry I do not understand what you are trying to solve :frowning:

Can you share a screencap highlighting the issue ?

5

I mean, the model appears to be aligned, and when the Babylon camera rotates, the layer texture sequence changes. However, there are instances when it becomes misaligned, as shown in the attachment. I presume this is due to the camera rotation not being synchronized with the 2D layer, but I’m not entirely sure

delete
delete1600×900 460 KB

6

My guess is the target of the camera is not fully correct and I wonder if the fov is.

Let me add @PatrickRyan who is amazing both in photo and 3d as he might have some insightfull feedback here.

1 Like
7

@eCodant, this seems to be mostly an issue with matching the exact camera and lens properties from the images to your in-scene camera. FoV is one of the main considerations, but also focal length and angle. You basically need to recreate the exact camera properties between both so that your in-scene mesh will match position, convergence, and angle for the png.

1 Like