Tech­niek

Web Designer Magazine - - Webworkshop -

1. Maak het tv-e fect

Om net zo’n ver­vormd tv-e ect als veil­hymn.com te ma­ken, voeg je de Badtv-plug-in van Felix Tur­ner aan Three.js toe. Voor­dat er eni­ge co­de wordt uit­ge­voerd, im­por­teer je eerst veel post-pro­ces­sing sha­ders en pas­ses die sa­men het e ect cre­ë­ren.

2. Laad een a beel­ding

Wan­neer Veil­hymn start, zie je met­een een ach­ter­gron­da beel­ding. Daar­om la­den we een a beel­ding die we als de ba­sist­ex­tuur in­stel­len. Om­dat die geen ver­lich­ting no­dig heeft om op het scherm zicht­baar te zijn, heeft hij maar wei­nig ge­heu­gen no­dig.

3. Geef de a beel­ding weer

Plaats de a beel­ding op een ge­o­me­trisch vlak: een plat twee­di­men­si­o­naal, recht­hoe­kig op­per­vlak. Zet dit vlak op zo­da­ni­ge wij­ze in de scè­ne dat het door de ca­me­ra ge­zien kan wor­den en schaal het tot­dat het net iets gro­ter is dan de vie­w­port. var pla­ne­ge­o­me­try = new THREE. Pla­ne­ge­o­me­try(1920, 1080, 1, 1); var pla­ne = new Three.me­sh(pla­ne­ge­o­me­try, bg­ma­te­ri­al); sce­ne.add(pla­ne); pla­ne.z = 0; pla­ne.sca­le.x = pla­ne.sca­le.y = 1.45;

4. Con igu­reer de sha­ders

Stel Three.js zo in dat je pro­ject een aan­tal sha­ders ge­bruikt die de a beel­ding en de weer­ga­ve daar­van op het scherm be­ïn­vloe­den. Daar­voor voeg je eerst een ca­me­ra toe, zo­dat het beeld daar­van de a beel­ding is die be­werkt wordt. Daar­na be­reid je de ver­schil­len­de ver­vor­ming­se ec­ten voor.

ren­der­pass = new Three.ren­der­pass(sce­ne, ca­me­ra); badt­vpass = new THREE.SHADERPASS(THREE. Badt­vs­ha­der); rg­b­pass = new THREE.SHADERPASS(THREE. Rg­b­shifts­ha­der); film­pass = new THREE.SHADERPASS(THREE. Film­s­ha­der); co­py­pass = new THREE.SHADERPASS(THREE. Co­py­sha­der); film­pass.uni­forms.gray­sca­le.va­lue = 0;

5. Voeg de door­gan­gen toe

Voeg al­le e ec­ten één voor één toe zo­dat de sha­ders hun werk na el­kaar op de ge­ren­der­de a beel­ding in de vie­w­port uit­voe­ren. In de ren­der­func­tie zie je dat de com­po­ser con­stant ge­üp­da­tet wordt en de a beel­ding op het scherm weer­geeft. com­po­ser = new THREE. Ef­fect­com­po­ser(ren­de­rer); com­po­ser.ad­dpass(ren­der­pass); com­po­ser.ad­dpass(film­pass); com­po­ser.ad­dpass(badt­vpass); com­po­ser.ad­dpass(rg­b­pass); com­po­ser.ad­dpass(co­py­pass); co­py­pass.ren­der­to­screen = true; pa­rams();

6. Re­a­ge­ren op muis­be­we­gin­gen

De event lis­te­ner in de co­de be­re­kent de po­si­tie van de muis­aan­wij­zer als de be­zoe­ker de muis be­weegt. De co­de in de ren­der-func­tie werkt de ca­me­ra bij en zorgt er­voor dat de a beel­ding re­a­geert op de po­si­tie van de muis­aan­wij­zer. ca­me­ra.po­si­ti­on.x += ((mousex / 4) - ca­me­ra. po­si­ti­on.x) * 0.05; ca­me­ra.po­si­ti­on.y += (-(mou­sey / 4) - ca­me­ra. po­si­ti­on.y) * 0.05; ca­me­ra.look­at(sce­ne.po­si­ti­on);

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.