elkyu

Zoom animation (with parallax ?)

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 ;) )

Share this post


Link to post
Share on other sites

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  ^_^

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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. :D

Share this post


Link to post
Share on other sites
 


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.

 

 


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

Share this post


Link to post
Share on other sites

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") ?

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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 ...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.