Schnelltipp Rendern einer Textur in Three.js

Standardmäßig wird alles, was Sie in Three.js rendern, an den Bildschirm gesendet. Was ist der Sinn, etwas zu rendern, wenn Sie es nicht sehen können? Es stellt sich heraus, dass es einen sehr wichtigen Punkt gibt: das Erfassen der Daten Vor es wird an den Bildschirm gesendet (und dadurch verloren). 

Dadurch können Nachbearbeitungseffekte wie Farbkorrektur, Farbverschiebung oder Unschärfe wesentlich einfacher angewendet werden. Dies ist auch für Shader-Effekte hilfreich.

Diese Technik ist bekannt als Rendering zu einer Textur oder Rendern in einen Bildspeicher; Ihr Endergebnis wird in einer Textur gespeichert. die Sie dann auf den Bildschirm rendern können. In diesem Schnelltipp zeige ich Ihnen, wie es geht, und führe dann ein praktisches Beispiel für das Rendern eines sich bewegenden Würfels auf die Oberflächen eines anderen sich bewegenden Würfels aus.

Hinweis: Dieses Tutorial setzt voraus, dass Sie mit Three.js vertraut sind. Wenn nicht, lesen Sie unter How to Learn Three.js die Spieleentwicklung.

Grundlegende Implementierung

Es gibt viele Beispiele dafür, wie man dies tun kann und die in kompliziertere Effekte eingebettet sind. Hier ist das Nötigste, was Sie benötigen, um in Three.js etwas auf eine Textur zu rendern:

// @autor Omar Shehata. 2016. // Wir laden die Three.js-Bibliothek vom CDN hier: // http://cdnjs.com/libraries/three.js/ //// Dies ist das grundlegende Szenen-Setup //// var scene = neue THREE.Scene (); var width, height = window.innerWidth, window.innerHeight; var camera = new THREE.PerspectiveCamera (70, Breite / Höhe, 1, 1000); var renderer = new THREE.WebGLRenderer (); renderer.setSize (Breite, Höhe); document.body.appendChild (renderer.domElement); //// Hier erstellen wir unser Render-Ziel außerhalb des Bildschirms //// // Eine andere Szene für unsere Pufferobjekte erstellen var bufferScene = new THREE.Scene (); // Erstellen Sie die Textur, die unser Ergebnis speichert. Var bufferTexture = new THREE.WebGLRenderTarget (window.innerWidth, window.innerHeight, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter); //// // Fügen Sie hier alles hinzu, was Sie in bufferScene rendern / erfassen möchten // //// function render () requestAnimationFrame (render); // Auf unsere Textur außerhalb des Bildschirms rendern. Renderer.render (bufferScene, camera, bufferTexture); // Zeichne schließlich auf den Bildschirm. Renderer.render (Szene, Kamera);  render (); // Alles rendern!

Wir haben zuerst das grundlegende Szenen-Setup. Dann erstellen wir eine andere Szene, bufferScene; Jedes Objekt, das wir zu dieser Szene hinzufügen, wird anstelle des Bildschirms auf unser Off-Screen-Ziel gezogen.

Wir schaffen dann bufferTexture, Dies ist ein WebGLRenderTarget. Dies ist, was Three.js verwendet, um uns auf etwas anderes als den Bildschirm rendern zu lassen. 

Zum Schluss sagen wir Three.js, dass es rendern soll bufferScene:

renderer.render (bufferScene, Kamera, bufferTexture);

Dies ist wie beim Rendern einer normalen Szene, außer dass wir ein drittes Argument angeben: das Renderziel. 

Die Schritte sind also:

1. Erstellen Sie eine Szene für Ihre Objekte.
2. Erstellen Sie eine Textur, um das zu speichern, was Sie rendern
3. Rendere deine Szene auf deine Textur

Dies ist im Wesentlichen das, was wir tun müssen. Es ist jedoch nicht sehr aufregend, da wir nichts sehen können. Selbst wenn Sie Dinge zum hinzugefügt haben bufferScene, du wirst immer noch nichts sehen; Dies liegt daran, dass Sie die erstellte Textur in Ihrer Hauptszene irgendwie rendern müssen. Das Folgende ist ein Beispiel dafür.

Verwendungsbeispiel

Wir erstellen einen Würfel in einer Szene, zeichnen ihn auf eine Textur und verwenden dann Das als Textur für einen neuen Würfel!

1. Beginnen Sie mit einer einfachen Szene

Hier ist unsere Grundszene mit einem rotierenden rotierenden Würfel und einer blauen Fläche dahinter. Hier ist nichts Besonderes, aber Sie können den Code überprüfen, indem Sie zu wechseln CSS oder JS Registerkarten in der Demo.

Sie können dies auf dem CodePen bearbeiten und bearbeiten.

2. Rendern Sie diese Szene auf eine Textur

Jetzt nehmen wir das auf und rendern es auf eine Textur. Alles was wir tun müssen, ist eine bufferScene genau wie in der obigen Basisimplementierung, und fügen Sie unsere Objekte hinzu.

Sie können dies auf dem CodePen bearbeiten und bearbeiten.

Wenn es richtig gemacht wird, sehen wir nichts, da jetzt nichts auf dem Bildschirm gerendert wird. Stattdessen wird unsere Szene gerendert und gespeichert bufferTexture.

3. Rendern Sie einen strukturierten Würfel

bufferTexture unterscheidet sich nicht von irgendeiner anderen Textur. Wir können einfach ein neues Objekt erstellen und als Textur verwenden:

var boxMaterial = new THREE.MeshBasicMaterial (map: bufferTexture); var boxGeometry2 = new THREE.BoxGeometry (5, 5, 5); var mainBoxObject = new THREE.Mesh (boxGeometry2, boxMaterial); // Schiebe es zurück, damit wir es sehen können mainBoxObject.position.z = -10; // Füge es zur Hauptszene hinzu scene.add (mainBoxObject);

Sie können dies auf dem CodePen bearbeiten und bearbeiten.

Sie könnten möglicherweise etwas in die erste Textur zeichnen und es dann auf beliebige Weise rendern! 

Mögliche Verwendungen

Die einfachste Verwendung ist jeder Nachbearbeitungseffekt. Wenn Sie eine Art Farbkorrektur oder Verschiebung auf Ihre Szene anwenden möchten, anstatt auf jedes einzelne Objekt anzuwenden, können Sie einfach die gesamte Szene auf eine Textur rendern und dann den gewünschten Effekt auf die endgültige Textur anwenden, bevor Sie sie rendern der Bildschirm. 

Jede Art von Shader, die mehrere Durchläufe erfordert (z. B. Unschärfe), verwendet diese Technik. In diesem Tutorial erkläre ich, wie Sie mit Frame-Puffern einen Raucheffekt erzeugen.

Hoffentlich fanden Sie diesen kleinen Tipp hilfreich! Wenn Sie Fehler entdecken oder Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit!