Graphic shaders

Richard Mat­tka con­tin­ues to ex­plore shader pro­gram­ming, show­ing you how to cre­ate glitch post-pro­cess­ing ef­fects with Three.js and GLSL

net magazine - - CONTENTS -

Richard Mat­tka shows you how to cre­ate glitch post-pro­cess­ing FX with Three.js

In pre­vi­ous ar­ti­cles, you learned about shaders, how to get them into your 3D projects and cre­ated many of your own. You learned about post­pro­cess­ing, an­i­ma­tions, cool ef­fects and more. In this tu­to­rial we’ll show you how to add post­pro­cess­ing ef­fects via the Ef­fec­tCom­poser us­ing Three.js and how to cre­ate your own glitch ef­fect.

Part 1: Setup A 3D Scene

You’ll need a Three.js scene to ap­ply these ef­fects to. If you have one al­ready, you can skip to part 2.

Setup an HTML pa ge

This tu­to­rial uses the We­bGL li­brary Three.js. Down­load it from: github.com/mr­doob/three.js. You’ll also use the OBJLoader.js. It’s lo­cated in­side the Three.js folder named ‘ex­am­ples/js/load­ers’. <html lang=”en”> <head> < script src=” libs/ three. min. js”></script> < script src=” libs/OBJLoader. js”></script> < style> html, body { mar­gin: 0; pad­ding: 0; over­flow: hid­den;} can­vas { width: 100%; height: 100% }

</style> </ head> <body> < script> </script> </ body> </ html>

Add vari­ables and func­tions

Next, add global vari­ables and the Clock class. Cre­ate func­tions for init and ren­der and a call to init() as well. In­side your script tags, add this code: var cam­era, scene, ren­derer, uni­forms, ob­ject; var startTime = Date. now(); var clock = new THREE. Clock(); init(); func­tion init(){

Richard Mat tka w: t: job: richard­mat­tka.com @ syn­er­gy­seeker In­ter­ac­tive di­rec­tor, de­signer, de­vel­oper ar­eas of ex­per­tise: Shaders, VFX, We­bGL

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.