Zoom animation (with parallax ?)

[elkyu]

Hi,

 

I already created a topic for this but my idea has evolved and I think it is better to create a new topic.

 

For the record , I have an animated plane with several "hole" (only one in the example) .

http://www.babylonjs-playground.com/#272WDW#14

 

 

Currently when we click the image that we see through the hole , it zooms to the picture.

But that's not what I want .

 

What I want is that we have the impression " to go inside " the hole, and that the image is in full page at the end of the animation , so no zoom the image, just in full screen display.

 

I don't know if this is understandable.

 

 

Maybe when you zoom, it could detect when the image is full screen, and in this case continue the zoom on the plane to be certain " to enter the hole" and put the image backward ( reduce ) in the same time to keep the image in full screen and does not zoom to it.

 

Or maybe assign a different zoom speed between the plane and the image ?

 

 

Then when the image is in full screen, I will need an html page to reduce the image and put a description (I know how to do that).

I thinking of 2 solutions but I don't know how to do for the both :

Solution 1 : Remove the images from the scene to put it behind the canvas with HTML. The problem is that to put the images I have to calculate the hole center, but I don't know how to transfer this coordinate on the html page to place the image.

Solution 2 : Keep the images in the canvas, and at the zoom end, "switched" on the html when the image is in full screen.

In both cases, I think that a kind of parallax effect will be necessary to zoom in the hole, while extending the image to put it in full screen.
 

 

Thanks, Do not hesitate to ask questions , I know that what I want to do is perhaps a bit complicated to understand.

[elkyu]

no idea ? perhaps too much at once ,I should go step by step with a topic for each problem

[iiceman]

Well, I am not sure what exactly you mean with parallax effect in this scenario. You could darken the images while zooming in all the way. Then you end up with a black Screen and could fade over to you html image or whatever. I think that would look kinda cool if the fading out of the canvas and fading in of the html image happens almost parallel. http://www.babylonjs-playground.com/#272WDW#15 (no fading in of html yet )

[elkyu]

When I say parallax , it's just for assign a different speed zoom between the image and the plane ..

Maybe if the zoom of the plane is faster than the zoom image we can get something like what I want 

[jahow]

Hey Elkyu,

 

I tried something: making the ground plane move forward when we're zooming in on the picture. This way there is a stronger "going in" impression: http://www.babylonjs-playground.com/#272WDW#17

 

Also the ground is not clickable anymore, the image is. It's just easier this way (you can then zoom in on the image center)

 

What you want to do is actually quite tricky, it takes a lot of tweaking to get things right and smooth. Also don't forget that users can have any screen resolution possible, so you may need to make some computations to have the camera FOV right.

 

I understand now why you first used an ortho camera, it would indeed be much easier to align pictures with holes. If you want to have several holes, I'd advise you to make it so that holes in the ground are actually created depending on where the images are. Here is an algorith that would do that:

for each images  create ray between camera position and image position  compute intersection point between ray and ground    if(intersection exists)    retrieve vertices close to the intersection point (arbitrary distance)    swap faces which contain these vertices  end ifend for

Something like that!

[iiceman]

Maybe cast the ray to the center of the image as well as to each of the corners to (and sides?) to see what faces get hit and then remove those? But that sounds like a good solution.

 

And the new zooming in is pretty cool, too.

[jahow]

Yep, casting to the image corners too is a good idea. Again, tweaking will be the key here

[elkyu]

 

Actually this zoom effect is really better !

 

However the problem with the click on the image is that a click on the edge of the hole (outside of the hole, non-returned face) the click work whereas it shouldn't. Any solution ?

 

I don't know if it's a good idea to create the holes depending on where the images are.

If I do like you said, it will create the hole above the image, but the problem is that with the animation, the hole stretch (especially on the mesh sides, the stretch is less important in the middle). So I have to put the image behind, much larger than the hole to solve this problem.

 

 

EDIT : Stretch example : http://www.babylonjs-playground.com/#272WDW#19

Wait a few seconds and you should see the stretch effect, in my code it's bigger than in the playground

[elkyu]

When we click on the image, can we get with a ray, the faceId of the ground mesh by which one we cross to reach the image (even if we are "ground.isPickable = false") ?

[iiceman]

I don't think so. But you could make the ground pickable before you pick and disable it after you picked, I guess.

[elkyu]

It's working

 

I think it's very simple but, how to make a little image zoom at the mouse over on the hole ?

 

Example, if you don't know what I mean :

http://www.onextrapixel.com/examples/interactive-background/index2.html 

 

And if we can also do the move on right/left (parallax) like the example ..

[iiceman]

I suggest to do it like it's done in the actions example: http://www.babylonjs-playground.com/?17

 

Register an event and an OnPointerOverTrigger and change the scaling or the position of the plane. Reverse with OnPointerOutTrigger.

[elkyu]

http://www.babylonjs-playground.com/#272WDW#21

(in the scene.registerBeforeRender code)

 

I tried something but .. that doesn't work very well

 

Where I'm wrong ?

[iiceman]

Hmm, I forgot that the wave thing is over it. So I guess the event only gets triggered when you click hand hide the wave for split second or something like that. Hmm... I don't have time at the moment, but I think of something later

[iiceman]

Okay, new try. Not super elegant I guess, but seems to work. Hope it helps: http://www.babylonjs-playground.com/#272WDW#22

[elkyu]

Hmm, I see ..

I do this so that the users know that we can click on the hole.

I think I can do something not bad with that. I just have to adapt your code to mine because I have several holes so several pictures ...