WebGL eröffnet eine neue Ära des 3D-Renderings auf Webseiten, die es ermöglicht, 3D-Inhalte ohne Plug-Ins direkt im Canvas zu rendern. WebGL ist dasselbe wie die Canvas-2D-API. Es manipuliert Objekte über Skripte, daher sind die Schritte im Wesentlichen ähnlich: Vorbereiten des Arbeitskontexts, Vorbereiten von Daten, Zeichnen des Objekts im Canvas und Rendern. Der Unterschied zu 2D besteht darin, dass 3D mehr Wissen erfordert, z. B. Welt, Licht, Textur, Kamera, Matrix und anderes Fachwissen. Es gibt ein gutes chinesisches Tutorial zu WebGL, das der erste Link in der folgenden Verwendungsreferenz ist, daher werde ich hier nichts dagegen tun. Der folgende Inhalt ist nur eine kurze Zusammenfassung des Lerninhalts.
Browser-Unterstützung
Da Microsoft über einen eigenen Grafikentwicklungsplan verfügt und WebGL nicht unterstützt, ist IE derzeit nicht in der Lage, WebGL auszuführen, außer für die Installation von Plug-Ins. Für andere gängige Browser wie Chrome, Firefox, Safari, Opera usw. installieren Sie einfach die neueste Version. Neben der Installation des neuesten Browsers müssen Sie auch sicherstellen, dass auch der Grafikkartentreiber auf dem neuesten Stand ist.
Nach der Installation können Sie den Browser öffnen und die folgende URL eingeben, um die Unterstützung des Browsers für WebGL zu überprüfen: http://webglreport.sourceforge.net/.
Wenn Sie WebGL nach der normalen Installation der oben genannten Browser immer noch nicht ausführen können, können Sie versuchen, die Aktivierung der WebGL-Unterstützung zu erzwingen. Die Öffnungsmethode ist wie folgt:
Chrome-Browser
Wir müssen einige Startparameter zu Chrome hinzufügen. Die folgenden spezifischen Schritte nehmen das Windows-Betriebssystem als Beispiel: Suchen Sie die Verknüpfung von Chrome Klicken Sie im Browser mit der rechten Maustaste auf die Verknüpfung Methode, wählen Sie Eigenschaften aus und fügen Sie nach den Anführungszeichen hinter chrome.exe den folgenden Inhalt hinzu:
Schließen Sie Chrome, nachdem Sie auf „OK“ geklickt haben, und verwenden Sie dann diese Verknüpfung, um den Chrome-Browser zu starten.
Die Bedeutung mehrerer Parameter ist wie folgt:
--enable-webgl bedeutet, die WebGL-Unterstützung zu aktivieren;
--ignore-gpu-blacklist bedeutet, die GPU-Blacklist zu ignorieren, was bedeutet, dass einige Grafiken vorhanden sind Karten und GPUs Da es zu alt ist und aus anderen Gründen nicht empfohlen wird, WebGL auszuführen. Dieser Parameter ermöglicht es dem Browser, diese Blacklist zu ignorieren und die Ausführung von WebGL zu erzwingen um das lokale Laden von Ressourcen zu ermöglichen und WebGL nicht zu entwickeln und zu debuggen, sondern sich nur die WebGL-Demo ansehen möchten, müssen Sie diesen Parameter nicht hinzufügen.
Firefox-Browser
Firefox-Benutzer geben bitte „about:config“ in die Adressleiste des Browsers ein, drücken die Eingabetaste und suchen dann im Filter (Filter) nach „webgl“ und ersetzen Sie webgl Setzen Sie .force-enabled auf true; setzen Sie webgl.disabled auf false; suchen Sie im Filter nach „security.fileuri.strict_origin_policy“ und setzen Sie dann alle aktuell geöffneten Firefox-Fenster. Die ersten beiden Einstellungen dienen dazu, die Aktivierung der WebGL-Unterstützung zu erzwingen, und die letzte security.fileuri.strict_origin_policy-Einstellung besteht darin, das Laden von Ressourcen aus lokalen Quellen zu ermöglichen. Wenn Sie kein WebGL-Entwickler sind, ist dies nicht erforderlich Wenn Sie WebGL entwickeln und debuggen, aber nur einen Blick auf die WebGL-Demo werfen möchten, müssen Sie dieses Element nicht festlegen.
Safari-Browser
Suchen Sie im Menü nach „Eigenschaften“ → „Erweitert“, wählen Sie „Entwicklungsmenü anzeigen“, gehen Sie dann zum Menü „Entwickeln“ und wählen Sie „WebGL aktivieren“.
Entwicklungsschritte
Der folgende Code fasst einfach die relevanten Konzepte zusammen. Er stammt aus dem chinesischen Tutorial in der Referenz und beinhaltet mehr 3D-Kenntnisse. Interessierte Studierende können direkt zu den Chinesisch-Tutorials im Praxishandbuch springen, die viel detaillierter und genauer sind als das, was ich hier erkläre. Schüler, die sich an dem Spaß beteiligen, können einfach einen Blick darauf werfen, ohne sich mit der Bedeutung jeder einzelnen Codezeile auseinanderzusetzen.
Vorbereitung
Unnötig zu erwähnen, dass es sich dabei um das Hinzufügen eines Canvas-Elements zur Seite als Rendering-Container handelt. Zum Beispiel:
Schritt 2: Shader initialisieren – initShaders
Das Konzept des Shaders ist relativ einfach, es handelt sich um eine Grafikkarten-Bedienungsanleitung. Die Erstellung einer 3D-Szene erfordert eine große Menge an Berechnungen von Farbe, Position und anderen Informationen. Wenn diese Berechnungen von der Software durchgeführt werden, ist die Geschwindigkeit sehr gering. Daher ist die Berechnung dieser Vorgänge durch die Grafikkarte sehr schnell; die Art und Weise, wie diese Berechnungen durchgeführt werden, wird vom Shader festgelegt. Der Shader-Code ist in einer Shader-Sprache namens GLSL geschrieben, die wir hier nicht beschreiben.
Shader können in HTML definiert und im Code verwendet werden. Das Gleiche gilt natürlich auch, wenn Sie einen String verwenden, um einen Shader in Ihrem Programm zu definieren.
Schauen wir uns zuerst den Definitionsteil an:
Wie wäre es damit? Wie ist es, mit nativem WebGL zu entwickeln? Sie müssen nicht nur über fundierte 3D-Kenntnisse verfügen, sondern auch verschiedene Implementierungsdetails kennen. WebGL tut dies, um sich flexibel an verschiedene Anwendungsszenarien anzupassen, aber für die meisten Laien wie mich müssen viele Details nicht bekannt sein. Dadurch sind verschiedene Klassenbibliotheken entstanden, die die Entwicklung unterstützen, wie beispielsweise die in diesem Abschnitt verwendete Oak3D-Bibliothek (um die WebGL-Entwicklung zu demonstrieren, wird im Beispiel nur die Matrix-Hilfsmethode verwendet). Im nächsten Abschnitt wird eine häufig verwendete Three.js-Grafikbibliothek vorgestellt.
Praktische Referenz:
Chinesisches Tutorial: http://www.hiwebgl.com/?p=42
Entwicklungszentrum: https://developer.mozilla.org/en/WebGL
