Image Gallery in WebVR with Transitions

This is part of #DaysInVR series. View All VR Projects Yesterday, we learnt how to create music visualization in WebVR. Today, we’ll see how to create image gallery in WebVR with transitions.

Demo | Source

Transitions in WebVR

Today, we’ll be using WebGLRenderTarget to create a transition between two scenes. WebGLRenderTarget will help us to create postprocessing effects to create the transitions between scenes.

Creating the scenes

We’ll first create our required scenes.

We’re creating a similar mesh, that we created back in our 360 photos in VR tutorial. The difference is we have added WebGLRenderTarget.

Creating the transition

We’ll be using ShaderMaterial to create the material for transition. We’ll loop through 5 type of transition using different textures.

We’ll be using an OrthographicCamera and PlaneBufferGeometry to create the mesh for transitions. The render function of the Transition function will be responsible for rendering all the scenes and doing the actual transition.

We have to call this render function inside our animate() function for the entire system to work. You can check out the full source to get a complete picture of the code.

Its your turn

Try adding more panos and even videos to the transition group. Don’t forget to share what you’ve made in the comments below.

One response to “Image Gallery in WebVR with Transitions”

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1