Glitch Effect in WebVR using shaders

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create fog effect in VR. Today we’ll see how to create glitch effect in WebVR using shaders.

Demo | Source

Glitch Effect in VR

In this tutorial, we’ll see how to create glitch effect in VR using custom shaders. We’ll be using this threejs example as a base to create our glitch effect.

360 photos in VR

We’ll add a 360 photo for the glitch effect to work on. We’ll use SphereGeometry and MeshBasicMaterial to add a mesh of 360 photos.

Shaders in WebVR

We’ll be using a custom shader to create our glitch effect.

We’ll use effect composer to call the shaders and apply the effect. We’ll call ShaderPass and RenderPass from the render function of the effect composer.

OrthographicCamera is used to keep the effect infront of the camera at all times. In OrthographicCamera, the object size in rendered image stays constant regardless of the distance from camera.

Its your turn

Instead of glitch effect on 360 photos, try them on 360 videos. Don’t forget to share your results in the comments below.

Follow me

Rison

Building Viewport to help developers to build VR apps easily.
Follow me

Latest posts by Rison (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *