How to do the Tao Tajima menu gallery image snap into viewport animation

Questions
, , , , ,
1

So I’m doing this project of mine where I’m testing some designs and I saw taotajima.jp website and I was wondering how to do their gallery image snap into viewport animation. I made this image texture with some noise for wave effect and now I have some trouble snapping the image to the viewport. How can I do it. Here’s my sandbox link for what I have so far,
https://codesandbox.io/p/sandbox/shader-qj8z7y

2

In your vertex shader, you transform the vertices with:

        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);

If you instead pass the untransformed vertices directly, it will map to the viewport itself. (Although stretched to the screen bounds).

So my guess is that you could tie this behavior to a transition uniform value 0 to 1 and do something like:

vec4 positionWorld = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
vec4 positionScreen = vec4(pos, 1.); //You may need to adjust X by the aspect ratio
gl_Position = mix(positionScreen,positionWorld, uScreenTransition );
3

It was a little more complex than I thought since the aspect ratio of the image needed to be taken into account. I fixed it up to scale the image to whichever axis fit better into the aspect ratio…

Something like this:
https://codesandbox.io/p/sandbox/shader-forked-xp469x

1 Like
4

So I found this article on Codrops that does this effect I’m looking for, and the I cloned his project and did some editing, you can check it out. :hugs:, when you click on a grid it expands and when you click on menu it collapse back to it’s initial position.
https://codesandbox.io/p/sandbox/threejs-grid-to-fullscreen-demo-3-forked-kyg233

1 Like