Share
Alles wat u in Three.js rendert, wordt standaard naar het scherm verzonden. Wat heeft het voor zin om iets terug te zetten als je het niet kunt zien? Het blijkt dat er een heel belangrijk punt is: het vastleggen van de gegevens voor het wordt naar het scherm gestuurd (en daardoor verloren).
Dit maakt het veel eenvoudiger om nabewerkingseffecten toe te passen, zoals kleurcorrectie, kleurverschuiving of vervaging, en het is ook handig voor arceringseffecten.
Deze techniek staat bekend als renderen naar een textuur of renderen naar een framebuffer; uw eindresultaat wordt opgeslagen in een textuur. die je vervolgens naar het scherm kunt renderen. In deze Snelle tip laat ik je zien hoe je dit moet doen en loop je vervolgens door een praktisch voorbeeld van het weergeven van een bewegende kubus op de oppervlakken van een andere bewegende kubus.
Notitie: Deze tutorial gaat ervan uit dat je enige basiskennis hebt van Three.js. Als dat niet het geval is, bekijk dan hoe u Three.js voor spelontwikkeling leert.
Er zijn veel voorbeelden over hoe je dit kunt doen, die meestal zijn ingebed in meer gecompliceerde effecten. Dit is het absolute minimum dat je nodig hebt om iets in een texture weer te geven in Three.js:
// @auteur Omar Shehata. 2016. // We laden de Three.js-bibliotheek van het CDN hier: // http://cdnjs.com/libraries/three.js/ //// Dit is de standaard scene-installatie //// var scene = nieuwe THREE.Scene (); var width, height = window.innerWidth, window.innerHeight; var camera = nieuwe THREE.PerspectiveCamera (70, width / height, 1, 1000); var renderer = nieuw THREE.WebGLRenderer (); renderer.setSize (breedte, hoogte); document.body.appendChild (renderer.domElement); //// Dit is waar we ons off-screen renderdoel maken //// // Maak een andere scène om onze bufferobjecten te behouden var bufferScene = new THREE.Scene (); // Maak de textuur die ons resultaat zal opslaan var bufferTexture = nieuw THREE.WebGLRenderTarget (window.innerWidth, window.innerHeight, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter); //// // Voeg alles toe wat u wilt renderen / vastleggen in bufferScene hier // //// functie render () requestAnimationFrame (render); // Render naar onze off-screen texture renderer.render (bufferScene, camera, bufferTexture); // Trek ten slotte naar het scherm renderer.render (scène, camera); render (); // Render alles!
We hebben eerst de basisscenario-instellingen. Vervolgens maken we een andere scène, bufferScene; elk object dat we aan deze scène toevoegen, wordt naar ons off-screen-doelwit getrokken in plaats van naar het scherm.
We maken vervolgens bufferTexture, wat een WebGLRenderTarget is. Dit is wat Three.js gebruikt om ons te laten weergeven op iets anders dan het scherm.
Ten slotte vertellen we Three.js dat het moet worden weergegeven bufferScene:
renderer.render (bufferScene, camera, bufferTexture);
Dit is net als het weergeven van een normale scène, behalve dat we een derde argument specificeren: het renderdoel.
Dus de stappen zijn:
Dit is in wezen wat we moeten doen. Het is echter niet erg spannend, omdat we niets kunnen zien. Zelfs als je dingen hebt toegevoegd aan de bufferScene, je zult nog steeds niets zien; dit komt omdat je op de een of andere manier de textuur moet maken die je hebt gemaakt in je hoofdscène. Het volgende is een voorbeeld van hoe dat te doen.
We gaan een kubus in een scène maken, deze op een structuur tekenen en vervolgens gebruiken dat als een textuur voor een nieuwe kubus!
Hier is onze basisscène met een rode roterende kubus en een blauw vlak erachter. Er is hier niets speciaals aan de hand, maar je kunt de code bekijken door over te schakelen naar de CSS of JS tabbladen in de demo.
U kunt dit vorkelen en bewerken op CodePen.Nu gaan we dat nemen en het op een textuur brengen. Alles wat we moeten doen is een maken bufferScene zoals in de bovenstaande basisimplementatie, en voeg er onze objecten aan toe.
Als het goed is gedaan, zullen we niets zien, omdat er nu niets op het scherm wordt weergegeven. In plaats daarvan wordt onze scène gerenderd en opgeslagen bufferTexture.
bufferTexture is niet anders dan elke andere textuur. We kunnen eenvoudig een nieuw object maken en het als onze textuur gebruiken:
var boxMaterial = nieuw THREE.MeshBasicMaterial (map: bufferTexture); var boxGeometry2 = new THREE.BoxGeometry (5, 5, 5); var mainBoxObject = nieuwe THREE.Mesh (boxGeometry2, boxMaterial); // Verplaats het terug zodat we het kunnen zien mainBoxObject.position.z = -10; // Voeg het toe aan de hoofdscène scene.add (mainBoxObject);U kunt dit vorkelen en bewerken op CodePen.
Je zou potentieel alles in de eerste textuur kunnen tekenen en het vervolgens kunnen renderen op wat je maar wilt!
Het meest eenvoudige gebruik is elk soort nabewerkingseffect. Als u een soort van kleurcorrectie of verschuiving naar uw scène wilt toepassen, in plaats van toe te passen op elk afzonderlijk object, kunt u uw hele scène op één textuur weergeven en vervolgens het effect dat u wilt toepassen op die uiteindelijke textuur voordat u deze aan het scherm.
Elke soort arcering die meerdere passen vereist (zoals vervaging) maakt gebruik van deze techniek. Ik leg uit hoe je framebuffers moet gebruiken om een rookeffect te creëren in deze tutorial.
Hopelijk heb je deze kleine tip nuttig gevonden! Als je fouten opmerkt of vragen hebt, laat het me dan weten in de reacties!
Accentsconagua