Dieses Tutorial beschreibt, wie Sie das <canvas>-Element verwenden, um WebGL-Grafiken zu zeichnen, beginnend mit den Grundlagen. Die bereitgestellten Beispiele sollten Ihnen einige klare Vorstellungen darüber geben, was Sie mit WebGL machen können, und enthalten Code-Snippets, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern können.
WebGL ermöglicht es, dass Webinhalte eine API basierend auf OpenGL ES 2.0 verwenden, um 3D-Rendering in einem HTML <canvas> in unterstützenden Browsern ohne die Verwendung von Plug-ins durchzuführen. WebGL-Programme bestehen aus Steuerungscode, der in JavaScript geschrieben wird, und Spezialeffektcode (Shader-Code), der auf der Graphikprozessor-Einheit (GPU) eines Computers ausgeführt wird. WebGL-Elemente können mit anderen HTML-Elementen vermischt und mit anderen Teilen der Seite oder dem Seitenhintergrund zusammengesetzt werden.
Die Verwendung des <canvas>-Elements ist nicht sehr schwierig, aber Sie benötigen ein grundlegendes Verständnis von HTML und JavaScript. Das <canvas>-Element und WebGL werden in einigen älteren Browsern nicht unterstützt, aber in den aktuellen Versionen aller groÃen Browser. Um Grafiken auf der Leinwand zu zeichnen, verwenden wir ein JavaScript-Kontextobjekt, das Grafiken in Echtzeit erstellt.
Wie man einen WebGL-Kontext einrichtet.
Wie man einfache flache Formen mit WebGL rendert.
Zeigt, wie man Formen mit Shadern einfärbt.
Zeigt, wie man Objekte dreht und verschiebt, um einfache Animationen zu erstellen.
Zeigt, wie man ein 3D-Objekt (in diesem Fall einen Würfel) erstellt und animiert.
Demonstriert, wie man Texturen auf die Flächen eines Objekts abbildet.
Wie man Beleuchtungseffekte in Ihrem WebGL-Kontext simuliert.
Zeigt, wie man Texturen animiert; in diesem Fall durch das Abbilden eines Ogg-Videos auf die Flächen eines rotierenden Würfels.
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4