Überblick über WebGL 3D in HTML5 (Teil 1) – Die native WebGL-Entwicklung eröffnet eine neue Ära der Webseiten-3D-Rendering_html5-Tutorial-Fähigkeiten

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:

--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files

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:

Code kopierenDer Code lautet wie folgt:

Ihr Browser scheint das HTML5-Canvas-Element nicht zu unterstützen.

< /body>

Es ist Zeit, offiziell mit dem Schreiben des Skripts zu beginnen. Schauen Sie sich zunächst den Programmeintrag und die Gesamtstruktur an:

Kopieren Sie den Code Der Code lautet wie folgt:

functionstart(){
varcanvas=document.getElementById("glcanvas");
initGL(canvas);
initShaders() ;
initBuffers();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}


Die verschiedenen Methoden hier stellen typische WebGL-Zeichnungsschritte dar:

Schritt 1: Initialisieren Sie die WebGL-Arbeitsumgebung – initGL
Der Code für diese Methode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

vargl;
functioninitGL(canvas) {
gl=null;
try{
//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
catch(e){} //Ifwedon'thaveaGLcontext,giveupnow
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}

Diese Methode ist sehr einfach. Sie müssen den Parameter „webgl“ an die Methode „canvas.getContext“ übergeben Abgeschlossen sind alle in der experimentellen Phase verwendeten Parameter „experimental-webgl“. Natürlich können Sie auch canvas.getContext("experimental-webgl") direkt aufrufen. Nachdem der Standard festgelegt wurde, können Sie einen anderen Code ändern.

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:

Kopieren Sie den Code

Der Code lautet wie folgt:

precisionmediumpfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor =vColor;
}


attributevec3aVertexPosition;
attributevec4aVertexColor;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void){
gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
< /script>

Hier gibt es zwei Shader: Gesichts-Shader und Vertex-Shader.
In Bezug auf diese beiden Shader muss hier erklärt werden, dass 3D-Modelle in Computern grundsätzlich durch Punkte in Kombination mit dreieckigen Patches beschrieben werden. Der Vertex-Shader verarbeitet die Daten dieser Punkte und der Oberflächen-Shader verarbeitet die Daten Daten von Punkten auf dem dreieckigen Patch werden verarbeitet.
Der oben definierte Vertex-Shader definiert die Positions- und Farbberechnungsmethode des Vertex, während der Oberflächen-Shader die Farbberechnungsmethode des Interpolationspunkts definiert. In tatsächlichen Anwendungsszenarien werden auch Effekte wie die Verarbeitung von Licht im Shader beteiligt sein.
Definiert Shader, Sie können sie im Programm finden und verwenden:

Code kopieren

Der Code ist wie folgt folgt:

varshaderProgram;
functioninitShaders(){
varfragmentShader=getShader(gl,"shader-fs");
varvertexShader=getShader(gl,"shader-vs " );
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
alert("Couldnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=gl.getAttribLocation ( ShaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram, "aVertexColor"); "uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}


Der Shader ist vorhanden, aber wie lässt man ihn von der Grafikkarte ausführen? Es handelt sich um den nativen Binärcode von WebGL. Seine Funktion besteht im Wesentlichen darin, die Grafikkarte zum Rendern auszuführen die angegebenen Modelldaten.
Hier wird auch eine Hilfsmethode getShader verwendet. Diese Methode dient dazu, das HTML-Dokument zu durchlaufen, die Definition des Shaders zu finden und den Shader zu erstellen, nachdem ich die Definition erhalten habe:

Code kopieren

Der Code lautet wie folgt:

functiongetShader(gl,id){
varshaderScript,theSource,currentChild,shader;
shaderScript=document.getElementById(id);
if(!shaderScript){
returnnull;
}
theSource="";
currentChild =shaderScript.firstChild;
while (currentChild){
if(currentChild.nodeType==currentChild.TEXT_NODE){
theSource =currentChild.textContent;
}
currentChild=currentChild.nextSibling;
}
if( ShaderScript.type=="x-shader/x-fragment"){
shader=gl.createShader(gl.FRAGMENT_SHADER);
}elseif(shaderScript.type== "x-shader/x-vertex" ){
shader=gl.createShader(gl.VERTEX_SHADER);
}else{
//Unknownshadertype
returnnull;
}
gl .shaderSource(shader,theSource);
//Compiletheshaderprogram
gl.compileShader(shader);
//Seeifitcompiledsuccessfully
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
alert("Anerroroccurredcompilingtheshaders:" gl. getShaderInfoLog(shader));
returnnull;
}
returnshader;
}

Schritt 3: Erstellen/ Modelldaten laden - initBuffers
In diesen kleinen Beispielen werden die Modelldaten grundsätzlich direkt generiert. Im eigentlichen Programm sollten diese Daten aus dem Modell geladen werden:

Kopieren Sie den Code

Der Code lautet wie folgt:

vartriangleVertexPositionBuffer;
vartriangleVertexColorBuffer;
functioninitBuffers(){
TriangleVertexPositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
varvertices=[
0.0,1.0,0.0,
-1.0,-1.0,0.0,
1.0,-1.0,0.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize=3;
triangleVertexPositionBuffer.numItems=3 ;
triangleVertexColorBuffer=gl.createBuffer( );
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
varcolors=[
1.0,0.0,0.0,1.0,
0.0,1.0, 0.0,1.0,
0.0,0.0 ,1.0,1.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize=4;
triangleVertexColorBuffer.numItems=3;
}

Der obige Code erstellt die Eckpunkte des Dreiecks und die Farbdaten der Eckpunkte und platziert sie im Puffer.

Schritt 4: Rendern – drawScene
Nachdem Sie die Daten vorbereitet haben, übergeben Sie sie einfach zum Rendern an WebGL. Die gl.drawArrays-Methode wird hier aufgerufen. Schauen Sie sich den Code an:

Kopieren Sie den Code

Der Code lautet wie folgt:

functiondrawScene(){
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
pMatrix=okMat4Proj(45.0,gl .viewportWidth/gl.viewportHeight ,0.1,100.0);
mvMatrix=okMat4Trans(-1.5,0.0,-7.0);
gl.bindBuffer(gl.ARRAY_BUFFER, TriangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram .vertexPositionAttribute, TriangleVertexPositionBuffer.ite mSize ,gl.FLOAT,false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl. FLOAT,false,0,0 );
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);
}

Diese Funktion setzt zunächst den Hintergrund der 3D-Welt auf Schwarz, legt dann die Projektionsmatrix fest, legt die Position des zu zeichnenden Objekts fest und zeichnet dann das Objekt basierend auf den Scheitelpunkt- und Farbdaten im Puffer. Es gibt auch einige Hilfsmethoden zum Generieren von Projektionsmatrizen und Modellansichtsrechtecken (unter Verwendung der Matrixhilfsmethoden in der Oak3D-Grafikbibliothek), die wenig mit dem Thema zu tun haben und hier nicht im Detail erläutert werden.
Im Grunde ist das der gesamte Prozess, der durch das Hinzufügen einiger WegGL-Funktionen auf dieser Basis implementiert wird. Detaillierte Beispiele finden Sie im folgenden chinesischen Tutorial.

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