Share
Som standard skickas allt du gör i Three.js till skärmen. När allt är meningen med att göra något om du inte kan se det? Det visar sig vara en mycket viktig punkt: fånga data innan den skickas till skärmen (och därmed förlorad).
Det gör det mycket lättare att tillämpa efterbehandlingseffekter, till exempel färgkorrigering, färgskiftning eller suddning, och det är användbart även för skuggningseffekter..
Denna teknik är känd som återgivning till en konsistens eller återgivning till en rambuffert; Ditt slutresultat är lagrat i en textur. som du då kan göra till skärmen. I denna snabba tips visar jag dig hur man gör det och går sedan igenom ett praktiskt exempel på att göra en rörlig kub på ytorna på en annan rörlig kub.
Notera: Denna handledning förutsätter att du har grundläggande kunskap om Three.js. Om inte, kolla Hur läser Three.js för spelutveckling.
Det finns många exempel där ute om hur man gör det som tenderar att vara inbäddade i mer komplicerade effekter. Här är det minsta minimumet du behöver för att göra något på en textur i Three.js:
// @author Omar Shehata. 2016. // Vi laddar biblioteket Three.js från CDN här: // http://cdnjs.com/libraries/three.js/ //// Det här är den grundläggande scenuppsättningen //// var scene = nya THREE.Scene (); var bredd, höjd = window.innerWidth, window.innerHeight; var kamera = ny THREE.PerspectiveCamera (70, bredd / höjd, 1, 1000); var renderer = nytt THREE.WebGLRenderer (); renderer.setSize (bredd, höjd); document.body.appendChild (renderer.domElement); //// Det är här vi skapar vårt mål för offscreen render //// // Skapa en annan scen för att hålla våra buffertobjekt var bufferScene = new THREE.Scene (); // Skapa texturen som lagrar vårt resultat var bufferTexture = nytt THREE.WebGLRenderTarget (window.innerWidth, window.innerHeight, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter); //// // Lägg till vad du vill göra / fånga i bufferScene här // //// function render () requestAnimationFrame (render); // Återvänd till vår off-screen textur renderer.render (bufferScene, kamera, bufferTexture); // Slutligen dra till skärmen renderer.render (scen, kamera); render (); // Återbetala allt!
Vi har först grundinställningen. Då skapar vi en annan scen, bufferScene; Alla objekt som vi lägger till i den här scenen kommer att dras till vårt skärmmål i stället för till skärmen.
Vi skapar då bufferTexture, vilket är en WebGLRenderTarget. Så här använder Three.js för att låta oss göra på något annat än skärmen.
Slutligen berättar vi att Three.js ska göra bufferScene:
renderer.render (bufferScene, kamera, bufferttextur);
Det här är precis som att göra en normal scen, förutom att vi anger ett tredje argument: render-målet.
Så stegen är:
Detta är i huvudsak vad vi behöver göra. Det är dock inte så spännande, eftersom vi inte kan se någonting. Även om du lägger till saker i bufferScene, du kommer fortfarande inte se någonting; Detta beror på att du på något sätt måste göra den textur du skapade på din huvudplats. Följande är ett exempel på hur du gör det.
Vi ska skapa en kub i en scen, dra den på en konsistens och använd sedan den där som en textur för en ny kub!
Här är vår grundläggande scen med en röd roterande kub och ett blått plan bakom det. Det finns inget speciellt på gång här, men du kan kolla in koden genom att växla till CSS eller JS flikar i demo.
Du kan gaffla och redigera detta på CodePen.Nu ska vi ta det och göra det på en konsistens. Allt vi behöver göra är att skapa en bufferScene precis som i ovanstående grundläggande implementering, och lägg till våra objekt till den.
Om det görs rätt så kommer vi inte se någonting, eftersom nu ingenting görs på skärmen. I stället görs vår scen och sparas i bufferTexture.
bufferTexture skiljer sig inte från någon annan textur. Vi kan helt enkelt skapa ett nytt objekt och använda det som vår textur:
var boxMaterial = nytt THREE.MeshBasicMaterial (map: bufferTexture); var boxGeometry2 = ny THREE.BoxGeometry (5, 5, 5); var mainBoxObject = nytt THREE.Mesh (boxGeometry2, boxMaterial); // Flytta tillbaka det så att vi kan se det mainBoxObject.position.z = -10; // Lägg till den till huvudscenen scene.add (mainBoxObject);Du kan gaffla och redigera detta på CodePen.
Du kan eventuellt dra något i den första konsistensen och sedan göra det på vad du vill!
Den mest enkla användningen är någon form av efterbehandlingseffekt. Om du ville tillämpa någon form av färgkorrigering eller skifta till din scen, istället för att applicera på varje enskilt objekt, kan du bara göra hela din scen på en konsistens och sedan applicera vilken effekt du vill ha den slutliga texturen innan du gör det till skärmen.
Vilken typ av skuggare som kräver flera passeringar (såsom oskärpa) kommer att utnyttja denna teknik. Jag förklarar hur man använder rambuffertar för att skapa en rökeffekt i denna handledning.
Förhoppningsvis har du hittat det här lilla tipset användbart! Om du upptäcker några fel eller har några frågor, vänligen meddela mig det i kommentarerna!
Accentsconagua