Maak een vervormd tv-effect met Three.js

Laat de landingspagina op een ouderwetse tv met een slechte ontvangst lijken

Zoals te zien op Veilhymn.com

Onder muzikanten en artiesten is het de normaalste zaak van de wereld om samen te werken om zo een twee keer zo groot publiek te bereiken. Wanneer webdesigners een site voor zo’n samenwerking maken, krijgen ze de gelegenheid om visueel aantrekkelijke inhoud te produceren. De Three.js-bibliotheek werd ook voor het eerst gebruikt voor een interactieve 3D-video van het muzikale samenwerkingsproject ‘Rome’.

Voor de muzikale samenwerking tussen Dev Hynes (Blood Orange) en Bryndon Cook (Starchild & The New Romantic), die samen bekendstaan als VeilHymn, wordt eveneens Three.js gebruikt. Het nummer dat ze op hun site promoten, heet ‘Hymn’.

Als je de site opent, vraag je je misschien af welk effect er met Three.js op de site wordt toegepast. Strikt genomen is het geen echte 3D, behalve misschien de manier waarop de afbeelding beweegt als reactie op de muis. In plaats daarvan verwerkt Three.js de beelden en video met iets dat GLSL (Graphics Library Shader Language) heet om ze de uitstraling van een beeldbuis te geven waar je dan weer tv-opnames van ziet.

Dat is niet het enige effect, want de overgang tussen de foto’s van de artiesten op het startscherm is veel indrukwekkender. Dit effect wordt ook gebruikt in de video van het liedje, waarin de bezoeker de muis ingedrukt moet houden om te switchen tussen de videoclip en opnames van de videoclip. Je moet deze overgang echt zien om de juiste beleving te ervaren! Je hebt zoiets waarschijnlijk nog nooit eerder in real time op het web gezien!

Vervormd tv-effect
Vervormd tv-effect
1. Maak het tv-effect

Om net zo’n vervormd tv-effect als veilhymn.com te maken, voeg je de BadTV-plug-in van Felix Turner aan Three.js toe. Voordat er enige code wordt uitgevoerd, importeer je eerst veel post-processing shaders en passes die samen het effect creëren.









2. Laad een afbeelding

Wanneer VeilHymn start, zie je meteen een achtergrondafbeelding. Daarom laden we een afbeelding die we als de basistextuur instellen. Omdat die geen verlichting nodig heeft om op het scherm zichtbaar te zijn, heeft hij maar weinig geheugen nodig.

//init video texture
var bgTexture = textureLoader.load('res/dark3.jpg');
bgMaterial = new THREE.MeshBasicMaterial({
map: bgTexture
});

3. Geef de afbeelding weer

Plaats de afbeelding op een geometrisch vlak: een plat tweedimensionaal, rechthoekig oppervlak. Zet dit vlak op zodanige wijze in de scène dat het door de camera gezien kan worden en schaal het totdat het net iets groter is dan de viewport.

//Add video plane
var planeGeometry = new THREE.PlaneGeometry(1920, 1080, 1, 1);
var plane = new THREE.Mesh(planeGeometry, bgMaterial);
scene.add(plane);
plane.z = 0;
plane.scale.x = plane.scale.y = 1.45;

4. Configureer de shaders

Stel Three.js zo in dat je project een aantal shaders gebruikt die de afbeelding en de weergave daarvan op het scherm beïnvloeden. Daarvoor voeg je eerst een camera toe, zodat het beeld daarvan de afbeelding is die bewerkt wordt. Daarna bereid je de verschillende vervormingseffecten voor.

//POST PROCESSING
//Create Shader Passes
renderPass = new THREE.RenderPass(scene, camera);
badTVPass = new THREE.ShaderPass(THREE.BadTVShader);
rgbPass = new THREE.ShaderPass(THREE.RGBShiftShader);
filmPass = new THREE.ShaderPass(THREE.FilmShader);
copyPass = new THREE.ShaderPass(THREE.CopyShader);

//set shader uniforms
filmPass.uniforms.grayscale.value = 0;

5. Voeg de doorgangen toe

Voeg alle effecten één voor één toe zodat de shaders hun werk na elkaar op de gerenderde afbeelding in de viewport uitvoeren. In de renderfunctie zie je dat de composer constant geüpdatet wordt en de afbeelding op het scherm weergeeft.

composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(filmPass);
composer.addPass(badTVPass);
composer.addPass(rgbPass);
composer.addPass(copyPass);
copyPass.renderToScreen = true;

params();

6. Reageren op muisbewegingen

Deze code wordt alleen gebruikt wanneer de muis wordt ingedrukt en de bezoeker het object verplaatst. De positie van het element wordt bijgewerkt. Maak een div met de naam cover en maak die breder om de stippellijn te verbergen.

camera.position.x += ((mouseX / 4) - camera.position.x) * 0.05;
camera.position.y += (-(mouseY / 4) - camera.position.y) * 0.05;
camera.lookAt(scene.position);

Download de bijbehorende bestanden en de volledige code hier en pak ze uit.

Webdesigner 96: WordPress, Flexbox en CSS, Aan de slag met Sass

WordPress is een mooi CMS waar je snel mee uit de voeten kan. Maar als je eenmaal je theme hebt gekozen en content hebt toegevoegd, bestaat de kans dat je je blog of site nog verder wilt aanpassen en optimaliseren. De vraag is hoe je dat dan het beste aanpakt.

Koop direct in onze webshop!

Deel dit artikel of reageer