Share
3D-Grafiken im Browser sind seit ihrer Einführung ein interessantes Thema. Wenn Sie Ihre Apps jedoch mit einfachem alten WebGL erstellen, dauert dies ewig. In letzter Zeit sind einige wirklich nützliche Bibliotheken verfügbar. Three.js ist eine der beliebtesten, und ich werde Ihnen in dieser Serie zeigen, wie Sie sie optimal nutzen können, um beeindruckende 3D-Erlebnisse für Ihre Benutzer zu schaffen.
Ich erwarte, dass Sie ein grundlegendes Verständnis des 3D-Raums haben, bevor Sie mit dem Lesen dieses Tutorials beginnen, da ich nicht Dinge wie Koordinaten, Vektoren usw. erklären werde.
Wenn Sie bereits wissen, was Shader sind, können Sie diesen Schritt überspringen. Shader sind im Wesentlichen in GLSL (Graphics Layer Scripting Language) geschriebene Programme, die auf der GPU ausgeführt werden. Dies macht sie äußerst nützlich, da wir einige Arbeit von der CPU nehmen und auf die GPU setzen können, um die Leistung zu steigern. Es gibt zwei Arten: Scheitelpunkte für Scheitelpunkte und Scheitelpunkte. Scheitelpunkt-Shader werden zum Ändern der Struktur des Objekts (Verschieben der Scheitelpunkte) verwendet, und Fragment-Shader nehmen Änderungen an den gezeichneten Pixeln vor.
Wir werden mit dem einfacheren beginnen. Dieser Shader ändert die Platzierung der Vektoren im Netz und führt zu sich bewegenden Flächen. Fügen Sie diesen Code in ein Ihrer App:
Das Art Das Attribut dieses Skripts wird vom Browser nicht verstanden und kann daher nicht ausgeführt werden (wir übergeben den Inhalt später an das Three.js-Material). In den ersten beiden Zeilen definieren wir zwei Variablen. Der erste ist einheitlich Float-Zeit. Uniformen werden an Vertex- und Fragment-Shader übergeben. Als nächstes gibt es Unterschiede vec2 vUv. Variationen sind die Schnittstelle zwischen dem Scheitelpunkt und dem Fragment-Shader. Zeit hält die Zeit in Millisekunden seit dem Start der App, die zum Berechnen neuer Positionen von Scheitelpunkten verwendet wird. Im vUv Wir speichern den UV-Wert (Texturvektor) jedes Scheitelpunkts, sodass wir ihn im Fragment-Shader verwenden können.
Als nächstes gibt es die void main () Erklärung. Alle Shader müssen diese Funktion haben. Hier leiten wir das UV des Scheitelpunkts auf unseren ab vUv und Berechnen der neuen Position des Scheitelpunkts. Zum Schluss setzen wir die gl_Position, was tatsächlich die Position des Scheitelpunkts festlegt. Aber wir müssen auch die früher berechnete Position mit der multiplizieren Projektionsmatrix und modelViewMatrix, zwei Matrizen, die Three.js uns liefert. Dies ist notwendig, da die GPU den Punkt, von dem aus wir den Scheitelpunkt betrachten, nicht berücksichtigt, wenn wir dies nicht tun. Gehen wir jetzt zum Fragment-Shader.
Dies ist der Ort, an dem die ganze Magie stattfindet. Fragment-Shader sind für all diese schönen Spiele verantwortlich. Die, die wir verwenden werden, ist ziemlich einfach. Erwarten Sie also nicht, dass Sie eine Szene aus Crysis 3 sehen, nachdem Sie sie verwendet haben. Fügen Sie den folgenden Code unter Ihrem Vertex-Shader ein:
Wie Sie oben im Shader sehen können, gibt es wieder unsere beiden Variablen. Sie müssen bedenken, dass alle von Ihnen verwendeten Variablen (mit Ausnahme der Variablen aus Three.js) in jedem Shader definiert werden müssen, in dem sie verwendet werden.
In dem void main () Funktion berechnen wir die Farben basierend auf der Zeit und dem UV - Wert des Fragments (Fragment - Shader wirken auf Fragmente, die aus Scheitelpunkten bestehen, also die Werte von variierend Variablen werden im Fragment-Shader interpoliert). Fühlen Sie sich frei, mit diesen Zahlen und Funktionen zu spielen (denken Sie daran, dass die Farbwerte positiv sein müssen)..
Zum Schluss setzen wir die gl_FragColor Variable, die die Farbe des Fragments festlegt.
Wenn Sie jetzt Ihren Browser öffnen, ändert sich nichts, da wir das Material des Objekts so ändern müssen, dass es Shader verwendet.
Dieses spezielle Material wird immer dann verwendet, wenn wir Shader verwenden müssen. Lassen Sie uns das Material des Objekts ändern, das wir im vorherigen Teil dieser Serie mit unserem Modell verbunden haben. Zuerst definieren Sie die Uniformen Array, das verwendet wird, um Variablen an die Shader zu übergeben:
Accentsconagua
var uniforms = Zeit: Typ: "f", Wert: 0, Auflösung: Typ: "v2", Wert: new THREE.Vector2, Textur: Typ: "t", Wert: THREE.ImageUtils. loadTexture ('./box.png'); Als nächstes in der loader.load definiere das Artikels Material und verwende es:
var itemMaterial = new THREE.ShaderMaterial (Uniformen: Uniformen, VertexShader: document.getElementById ('cubeVertexShader'). innerHTML, fragmentShader: document.getElementById ('cubeFragmentShader'). innerHTML); item = new THREE.Mesh (new THREE.CubeGeometry (100, 10, 10), itemMaterial); Wenn Sie jetzt den Browser öffnen, sollten Sie sehen, dass der rote Strahl seine Farben geändert hat:
Die Farben ändern sich jedoch nicht und das Netz wird auch nicht animiert. Um das zu ändern, müssen wir das aktualisieren Zeit Variable in den Shader jedes Mal, wenn ein Frame gezeichnet wird. Gehe zum machen Funktion und fügen Sie diese Zeile nach dem hinzu clock.getDelta () Anruf:
uniforms.time.value + = delta * 10;
Wenn Sie nun den Browser öffnen, sollten Sie ein schön animiertes und farbenfrohes Objekt sehen:
Wenn Sie einen solchen Textureffekt mit beispielsweise HTML5 Canvas erstellen, würde der Prozess zu viel von den CPU-Zyklen beanspruchen, was zu Verzögerungen führt. Alle Shader werden jedoch auf der GPU ausgeführt, die für alle Grafikoperationen optimiert und fokussiert ist nur auf sie. Die Trennung von grafischen und nichtgrafischen Berechnungen ist der Schlüssel zu einer leistungsfähigen App.
Wenn Sie mit WebGL etwas Reales erstellen möchten, können Sie mir versichern, dass Sie so viel Arbeit wie möglich auf die GPU übertragen müssen, damit Ihre Anwendung reibungslos und reaktionsschnell wird.
Wie Sie sehen, können Sie mit Three.js sehr einfach 3D-Grafiken im Browser erstellen, und die Ergebnisse sind eigentlich ziemlich gut. Aber sie können noch besser sein, werfen Sie einen Blick auf die Beispiele von Three.js:
Mit genügend Zeit, einem kreativen Verstand und Three.js können Sie auch erstaunliche Apps wie diese erstellen. Ich werde mehr als glücklich sein, Ihre Three.js-Kreationen zu sehen. Danke fürs Lesen.
