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
Get your Free Lesson now.
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.
|
1 2 3 4 5 6 7 8 |
var geometry = new THREE.SphereGeometry(500, 60, 40); var texture = new THREE.TextureLoader().load('/common/pano.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, controls.userHeight, -1); scene.add(mesh); |
Shaders in WebVR
We’ll be using a custom shader to create our glitch effect.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
THREE.DigitalGlitch = { uniforms: { "tDiffuse": { value: null },//diffuse texture "tDisp": { value: null },//displacement texture for digital glitch squares "byp": { value: 0 },//apply the glitch ? "amount": { value: 0.08 }, "angle": { value: 0.02 }, "seed": { value: 0.02 }, "seed_x": { value: 0.02 },//-1,1 "seed_y": { value: 0.02 },//-1,1 "distortion_x": { value: 0.5 }, "distortion_y": { value: 0.6 }, "col_s": { value: 0.05 } }, vertexShader: [ "varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}" ].join( "\n" ), fragmentShader: [ "uniform int byp;",//should we apply the glitch ? "uniform sampler2D tDiffuse;", "uniform sampler2D tDisp;", "uniform float amount;", "uniform float angle;", "uniform float seed;", "uniform float seed_x;", "uniform float seed_y;", "uniform float distortion_x;", "uniform float distortion_y;", "uniform float col_s;", "varying vec2 vUv;", "float rand(vec2 co){", "return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);", "}", "void main() {", "if(byp<1) {", "vec2 p = vUv;", "float xs = floor(gl_FragCoord.x / 0.5);", "float ys = floor(gl_FragCoord.y / 0.5);", //based on staffantans glitch shader for unity https://github.com/staffantan/unityglitch "vec4 normal = texture2D (tDisp, p*seed*seed);", "if(p.y<distortion_x+col_s && p.y>distortion_x-col_s*seed) {", "if(seed_x>0.){", "p.y = 1. - (p.y + distortion_y);", "}", "else {", "p.y = distortion_y;", "}", "}", "if(p.x<distortion_y+col_s && p.x>distortion_y-col_s*seed) {", "if(seed_y>0.){", "p.x=distortion_x;", "}", "else {", "p.x = 1. - (p.x + distortion_x);", "}", "}", "p.x+=normal.x*seed_x*(seed/5.);", "p.y+=normal.y*seed_y*(seed/5.);", //base from RGB shift shader "vec2 offset = amount * vec2( cos(angle), sin(angle));", "vec4 cr = texture2D(tDiffuse, p + offset);", "vec4 cga = texture2D(tDiffuse, p);", "vec4 cb = texture2D(tDiffuse, p - offset);", "gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);", //add noise "vec4 snow = 200.*amount*vec4(rand(vec2(xs * seed,ys * seed*50.))*0.2);", "gl_FragColor = gl_FragColor+ snow;", "}", "else {", "gl_FragColor=texture2D (tDiffuse, vUv);", "}", "}" ].join( "\n" ) }; |
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.
A 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
Get your Free Lesson now.
Leave a Reply