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.

Leave a Reply

Send Lesson #1
Join over 100s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Add Me To VIP