Glitch Effect in WebVR using shaders


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.

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.

Join 6000+ Students

Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.

Start Learning Now

Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
150$ for all 3 courses (SAVE 70%)

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.

Download Source Code

Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.

Download Source Code

Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Get instant access for $39

Leave a Reply

Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link