Share
În mod prestabilit, tot ceea ce redați în Trei.js este trimis pe ecran. La urma urmei, care este scopul de a face ceva dacă nu îl puteți vedea? Se pare că există un punct foarte important: captarea datelor inainte de acesta este trimis pe ecran (și astfel pierdut).
Acest lucru face mult mai ușor să aplicați efecte postprocesare, cum ar fi corecția culorilor, schimbarea culorii sau estomparea și este utilă și pentru efectele shader.
Această tehnică este cunoscută sub numele de redarea la o textura sau redarea la un tampon de cadre; rezultatul final este stocat într-o textură. pe care le puteți face apoi pe ecran. În acest sfat rapid, vă voi arăta cum să faceți acest lucru și apoi vă veți trece printr-un exemplu practic de redare a unui cub în mișcare pe suprafețele unui alt cub în mișcare.
Notă: Acest tutorial presupune că aveți cunoștințe de bază despre Three.js. Dacă nu, consultați Cum să învățați trei.js pentru dezvoltarea jocurilor.
Există o mulțime de exemple acolo despre cum să faceți acest lucru care tind să fie înglobate în efecte mai complicate. Aici este minimul necesar pentru a face ceva pe o textura in Three.js:
// @ autor Omar Shehata. 2016. // Încărcăm biblioteca Three.js din CDN aici: // http://cdnjs.com/libraries/three.js/ //// Aceasta este setarea de bază a scenei //// var scene = noul THREE.Scene (); var lățime, înălțime = window.innerWidth, window.innerHeight; camera var = nouă cameră triplă (70, lățime / înălțime, 1, 1000); var renderer = nou THREE.WebGLRenderer (); renderer.setSize (lățime, înălțime); document.body.appendChild (renderer.domElement); //// Aici creăm destinația de redare în afara ecranului //// // Creați o scenă diferită pentru a ține obiectele tampon var bufferScene = new THREE.Scene (); // Creați textura care va stoca rezultatul nostru var bufferTexture = nou THREE.WebGLRenderTarget (window.innerWidth, window.innerHeight, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter); // // // adăugați orice doriți să renderați / capturați în bufferScene aici // //// function render () requestAnimationFrame (render); // Faceți clic pe renderer.renderul nostru texture off-screen (bufferScene, camera, bufferTexture); În final, trageți pe ecranul renderer.render (scena, camera); render (); // Render everything!
Mai întâi avem setarea de bază a scenei. Apoi, vom crea o altă scenă, bufferScene; orice obiect pe care îl adăugăm la această scenă va fi atras de țintă în afara ecranului în loc de ecran.
Apoi creăm bufferTexture, care este un WebGLRenderTarget. Acesta este ceea ce utilizează Three.js pentru a ne face să facem ceva diferit de ecran.
În cele din urmă, le spunem celor de la Three.js bufferScene:
renderer.render (bufferScene, camera, bufferTexture);
Acest lucru este la fel ca redarea unei scene normale, cu excepția faptului că specificăm un al treilea argument: obiectivul de redare.
Deci, pașii sunt:
Aceasta este, în esență, ceea ce trebuie să facem. Dar nu este foarte interesant, deoarece nu putem vedea nimic. Chiar dacă ați adăugat lucruri la bufferScene, tot nu veți vedea nimic; acest lucru se datorează faptului că trebuie să faceți într-un fel textura creată pe scena principală. Următoarele reprezintă un exemplu pentru a face acest lucru.
Vom crea un cub într-o scenă, o vom desena pe o textura și apoi vom folosi acea ca o textura pentru un nou cub!
Iată scena noastră de bază cu un cub roșu rotativ și un plan albastru în spatele ei. Nu se întâmplă nimic special, dar puteți verifica codul comutând la CSS sau JS file în demo.
Puteți rula și edita acest lucru pe CodePen.Acum o să luăm asta și să o facem pe o textura. Tot ce trebuie să facem este să creăm un bufferScene la fel ca în implementarea de bază de mai sus, și să adăugăm obiectele noastre.
Dacă se face bine, nu vom vedea nimic, deoarece acum nimic nu este redat pe ecran. În schimb, scena noastră este redată și salvată bufferTexture.
bufferTexture nu este diferit de orice altă textura. Putem crea pur și simplu un obiect nou și să îl folosim ca textură:
var boxMaterial = nou THREE.MeshBasicMaterial (map: bufferTexture); caseta varăGeometrie2 = noua treimeBoxometrie (5, 5, 5); var mainBoxObject = nou TREI.Mesh (boxGeometrie2, boxMaterial); // Mutați-o înapoi pentru a o vedea. MainBoxObject.position.z = -10; // Adăugați-o în scena principală scene.add (mainBoxObject);Puteți rula și edita acest lucru pe CodePen.
Ați putea să atragă ceva în prima textură și apoi să o faceți pe orice doriți!
Cea mai simplă utilizare este orice fel de efect post-procesare. Dacă doriți să aplicați un fel de corecție a culorilor sau să vă deplasați spre scenă, în loc să aplicați fiecărui obiect, puteți face întreaga dvs. scenă pe o singură textură și apoi aplicați orice efect pe care doriți să-l finalizați înainte de al face să Monitorul.
Orice tip de shader care necesită mai multe treceri (cum ar fi neclaritatea) va face uz de această tehnică. Eu vă explic cum să folosiți tampoanele de cadre pentru a crea un efect de fum în acest tutorial.
Sperăm că ați găsit acest sfat util! Dacă observați erori sau aveți întrebări, vă rugăm să ne anunțați în comentarii!
Accentsconagua