Share
Som standard blir alt du gjør i Three.js sendt til skjermen. Tross alt, hva er poenget med å gjøre noe hvis du ikke kan se det? Det viser seg at det er et veldig viktig punkt: å fange opp dataene før det blir sendt til skjermen (og dermed tapte).
Dette gjør det mye lettere å bruke etterbehandlingseffekter, som fargekorrigering, fargeskifting eller uskarphet, og det er nyttig for skyggereffekter, også.
Denne teknikken er kjent som gjengivelse til en tekstur eller gjengivelse til en rambuffer; Ditt endelige resultat lagres i en tekstur. som du deretter kan gjengi til skjermen. I denne Quick Tip, vil jeg vise deg hvordan du gjør det, og deretter gå gjennom et praktisk eksempel på å gi en bevegelig terning på overflatene til en annen bevegelig terning.
Merk: Denne opplæringen antar at du har noen grunnleggende kjennskap til Three.js. Hvis ikke, sjekk ut Hvordan lære Three.js for spillutvikling.
Det er mange eksempler der ute på hvordan du gjør dette som pleier å være innebygd i mer kompliserte effekter. Her er det minste minimumet du trenger for å gjengi noe på en tekstur i Three.js:
// @author Omar Shehata. 2016. // Vi laster inn Three.js biblioteket fra CDN her: // http://cdnjs.com/libraries/three.js/ //// Dette er grunnspillet setup //// var scene = nye THREE.Scene (); var bredde, høyde = window.innerWidth, window.innerHeight; var kamera = nytt THREE.PerspectiveCamera (70, bredde / høyde, 1, 1000); var renderer = nytt THREE.WebGLRenderer (); renderer.setSize (bredde, høyde); document.body.appendChild (renderer.domElement); //// Det er her vi lager vårt offscreen-gjengemål //// // Opprett en annen scene for å holde våre bufferobjekter var bufferScene = new THREE.Scene (); // Lag teksten som lagrer vårt resultat var bufferTexture = nytt THREE.WebGLRenderTarget (window.innerWidth, window.innerHeight, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter); //// // Legg til noe du vil gjengi / fange i bufferScene her // //// funksjon gjengivelse () requestAnimationFrame (render); // Rend på vår off-screen tekstur renderer.render (bufferScene, kamera, bufferTexture); // Til slutt, tegne til skjermen renderer.render (scene, kamera); gjengivelse (); // Render alt!
Vi har først grunnoppsettet. Deretter oppretter vi en annen scene, bufferScene; ethvert objekt vi legger til i denne scenen, blir trukket til vårt off-screen-mål i stedet for å skjermen.
Vi lager deretter bufferTexture, som er en WebGLRenderTarget. Dette er hva Three.js bruker for å la oss gjøre på noe annet enn skjermen.
Til slutt forteller vi at Three.js skal gjengis bufferScene:
renderer.render (bufferScene, kamera, bufferTexture);
Dette er akkurat som å gjengi en normal scene, bortsett fra at vi angir et tredje argument: gjengivelsesmålet.
Så trinnene er:
Dette er egentlig det vi trenger å gjøre. Det er imidlertid ikke så spennende, siden vi ikke kan se noe. Selv om du har lagt til ting i bufferScene, du vil fortsatt ikke se noe; Dette er fordi du må gjøre teksten du opprettet på hovedscenen din, på en eller annen måte. Følgende er et eksempel på hvordan du gjør det.
Vi skal lage en terning i en scene, tegne den på en tekstur, og bruk deretter at som en tekstur for en ny kube!
Her er vår grunnleggende scene med en rød roterende terning og et blått fly bak den. Det er ikke noe spesielt som foregår her, men du kan sjekke koden ved å bytte til CSS eller JS faner i demoen.
Du kan gaffel og redigere dette på CodePen.Nå skal vi ta det og gjøre det på en tekstur. Alt vi trenger å gjøre er å lage en bufferScene akkurat som i grunnleggende implementering ovenfor, og legg til våre objekter til den.
Hvis det er gjort riktig, ser vi ingenting, siden nå blir ingenting gjengitt på skjermen. I stedet blir vår scene gjengitt og lagret i bufferTexture.
bufferTexture er ikke forskjellig fra noen annen tekstur. Vi kan bare lage et nytt objekt og bruke det som vår tekstur:
var boxMaterial = nytt THREE.MeshBasicMaterial (map: bufferTexture); var boxGeometry2 = ny THREE.BoxGeometry (5, 5, 5); var mainBoxObject = nytt THREE.Mesh (boxGeometry2, boxMaterial); // Flytt den tilbake slik at vi kan se den mainBoxObject.position.z = -10; // Legg det til hovedscenen scene.add (mainBoxObject);Du kan gaffel og redigere dette på CodePen.
Du kan potensielt tegne noe i den første tekstur, og deretter gjengi det på det du vil!
Den mest enkle bruken er noen form for etterbehandlingseffekt. Hvis du ønsket å bruke en slags fargekorrigering eller skifte til scenen din, istedenfor å søke på hvert enkelt objekt, kan du bare gjengi hele scenen på en tekstur og deretter bruke hvilken effekt du vil ha den siste teksten før du gjør det til skjermen.
Enhver form for shader som krever flere passeringer (for eksempel uskarphet) vil benytte seg av denne teknikken. Jeg forklarer hvordan du bruker rammebuffere for å skape en røykvirkning i denne opplæringen.
Forhåpentligvis har du funnet dette lille tipset nyttig! Hvis du ser noen feil eller har spørsmål, vennligst gi meg beskjed i kommentarene!
Accentsconagua