WebGL 3D -Übersicht über HTML5 (Teil 1) - Die native Entwicklung von WebGL eröffnet auf Webseiten eine neue Ära des 3D -Renderings auf Webseiten

WebGL hat eine neue Ära der 3D-Rendering von Webseiten eröffnet, mit der 3D-Inhalte ohne Hilfe von Plug-Ins direkt in Leinwand gerendert werden können. Wie die Canvas 2D -API manipuliert WebGL Objekte durch Skripte, sodass die Schritte im Grunde ähnlich sind: Bereiten Sie den Arbeitskontext vor, bereiten Sie die Daten vor, zeichnen Sie das Objekt in Leinwand und rendern Sie es. Im Gegensatz zu 2D beinhaltet 3D mehr Wissen wie Welt, Licht, Textur, Kamera, Matrix und andere professionelle Kenntnisse. WebGL verfügt über ein gutes chinesisches Tutorial, das der erste Link in der folgenden Referenz ist. Ich werde meine Fähigkeiten hier nicht vorstellen. Der folgende Inhalt ist nur eine kurze Zusammenfassung dessen, was ich gelernt habe.

Da Microsoft einen eigenen Grafikentwicklungsplan hat und WebGL nicht unterstützt hat, kann der IE keine WebGL ausführen, außer für die Installation von Plugins. Andere Mainstream -Browser wie Chrome, Firefox, Safari, Opera usw. sind alle mit der neuesten Version installiert. Zusätzlich zur Installation des neuesten Browsers müssen Sie auch sicherstellen, dass der Grafikkartentreiber ebenfalls aktuell 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/.

Nachdem Sie den obigen Browser normal installiert haben, können Sie immer noch nicht WebGL ausführen, sodass Sie die WebGL -Unterstützung gewaltsam aktivieren und es versuchen können. Die Methode zum Aktivieren ist wie folgt:

Wir müssen Chrome einige Startparameter hinzufügen. Die folgenden spezifischen Betriebsschritte werden als Beispiel ausgeführt: Suchen Sie die Abkürzung zum Chrombrowser, klicken Sie mit der rechten Maustaste auf die Verknüpfung und wählen Sie Eigenschaften. Fügen Sie im Zielfeld nach den Zitaten nach Chrome.exe den folgenden Inhalt hinzu:

Klicken Sie auf OK, um Chrome zu schließen, und verwenden Sie diese Verknüpfung, um den Chrome -Browser zu starten.

Die Bedeutungen mehrerer Parameter sind wie folgt:

--Enable-Webgl bedeutet, WebGL-Unterstützung zu aktivieren.

-IGNORE-GPU-Blacklist bedeutet, die GPU-Blacklist zu ignorieren, was bedeutet, dass einige GPUs für Grafikkarten nicht empfohlen werden, WebGL auszuführen, da sie zu alt sind und andere Gründe. Mit diesem Parameter kann der Browser diese schwarze Liste ignorieren und WebGL zum Ausführen erzwingen.

-Allow-File-Access-From-Files bedeutet, dass Sie das Laden von Ressourcen aus lokaler Zeit zulassen. Wenn Sie kein WebGL -Entwickler sind und keine WebGL entwickeln und debuggen müssen, sondern nur einen Blick auf die WebGL -Demo werfen möchten, können Sie diesen Parameter nicht hinzufügen.

Firefox-Benutzer, bitte geben Sie in der Adressleiste des Browsers ein, geben Sie im Filter (Filter) ein und suchen Sie nach Webgl. setze webgl.disabled auf false; Suche nach Security.Fileuri.strict_Origin_policy im Filter (Filter), setze Security.Fileuri.strict_Origin_policy auf false; Schließen Sie dann alle Firefox -Fenster, die derzeit geöffnet sind, und starten Sie Firefox neu.

Die ersten beiden Einstellungen sind die Unterstützung der WebGL -Unterstützung, und die letzte Sicherheit. Wenn Sie kein WebGL -Entwickler sind und keine WebGL entwickeln und debuggen müssen, sondern nur einen Blick auf die WebGL -Demo werfen möchten, können Sie dieses Element nicht festlegen.

Suchen Sie im Menü Eigenschaften → Fortgeschrittene, wählen Sie Entwicklungsmenü an, wenden Sie sich dann zum Entwicklungsmenü und wählen Sie WebGL ein.

Der folgende Code ist nur eine kurze Zusammenfassung der relevanten Konzepte. Es stammt aus dem chinesischen Tutorial in der Referenz und beinhaltet viel Wissen in 3D. Interessierte Schüler können direkt zum chinesischen Tutorial in der praktischen Referenz zum Lernen springen, was viel detaillierter und genauer ist als das, was ich hier erklärt habe. Schüler, die sich dem Spaß anschließen, können nur einen Blick darauf werfen, ohne sich mit der Bedeutung jeder Codezeile zu befassen.

Unnötig zu erwähnen, dass es als Rendering -Container ein Leinwandelement zur Seite hinzufügen soll. Zum Beispiel:

<bodyonload = "start ()">

<canvasid = "glcanvas" width = "640" height = "480">

Yourbrowserdoes nichtAppeartosupport theHtml5Canvaselement.

</canvas>

</body>

Hier ist die Zeit, um offiziell Skripte zu schreiben. Schauen wir uns zunächst den Programmeingang und die Gesamtstruktur an:

functionStart () {

varcanvas = document.getElementById ("Glcanvas");

initgl (canvas);

initshaders ();

initbuffer ();

GL.Clearcolor (0,0,0,0,0,0,1,0);

GL.Enable (GL.Depth_test);

Drawscene ();

}

Verschiedene Methoden hier repräsentieren die Zeichenschritte eines typischen WebGL:

Der Code für diese Methode lautet wie folgt:

vargl;

functionInitgl (canvas) {

GL = NULL;

versuchen{

//TryTograbTHestandardContext.Ifitfails, FallbackToExperimental.

GL = canvas.getContext ("webgl") || canvas.getContext ("Experimental-Webgl");

}

catch (e) {} // ifwedon'theaveGlcontext, giveUpnow

if (! gl) {

alert ("unabletoinitializewebgl.yourBrowsmaynotsupportit.");

}

}

Diese Methode ist sehr einfach, um die WebGL -Zeichnungsumgebung zu erhalten. Sie müssen die Parameter WebGL an die Methode canvas.getContext übergeben. Da der aktuelle WebGL-Standard jedoch nicht abgeschlossen wurde, sind die in der Versuchsstufe verwendeten Parameter experimentell-Webgl. Natürlich ist es auch in Ordnung, Canvas.getContext (Experimental-Webgl) zu nennen. Nachdem die Standards festgelegt sind, können Sie einen anderen Code ändern.

Das Konzept von Shader Shader ist relativ einfach, um es unverblümt auszudrücken, es ist der Befehl zur Grafikkartenoperation. Die Erstellung einer 3D -Szene erfordert viele Berechnungen für Farb-, Position und andere Informationen. Wenn diese Berechnungen von der Software durchgeführt werden, ist die Geschwindigkeit sehr langsam. Wenn Sie also die Grafikkarte diese Vorgänge berechnen lassen, ist die Geschwindigkeit sehr schnell. Wie man diese Berechnungen durchführt, wird vom Shader angegeben. Der Shader Code ist in einer Shader -Sprache namens GLSL geschrieben, und wir werden nicht mehr über diese Sprache sprechen.

Shader können in HTML definiert und in Code verwendet werden. Natürlich ist es für Sie gleich, einen Shader mit einer Zeichenfolge in Ihrem Programm zu definieren.

Schauen wir uns zuerst die Definition an:

<scriptId = "Shader-fs" type = "x-shader/x-Fragment">

PrecisionMediumpfloat;

varyingvec4vcolor;

voidmain (void) {

GL_FRAGCOLOR = VCOLOR;

}

</script>

<scriptId = "Shader-vs" type = "x-shader/x-wetex">

AttributeveC3averTexposition;

AttributeveC4Avertexcolor;

UniformMat4umVmatrix;

UniformMat4UpMatrix;

varyingvec4vcolor;

voidmain (void) {

GL_POSION = upmatrix*UmvMatrix*vec4 (avertexposition, 1.0);

vcolor = avertexcolor;

}

</script>

Hier sind zwei Shader: Face Shader und Scheitelpunkt -Shader.

In Bezug auf diese beiden Shaders müssen hier erklärt werden, dass die 3D -Modelle in Computern im Grunde genommen durch Punkte in Kombination mit Dreiecksgesichtern beschrieben werden. Der Vertex -Shader verarbeitet die Daten dieser Punkte und der Oberflächen -Shader verarbeitet die Daten von Punkten auf dem Dreieck durch Interpolation.

Der oben definierte Scheitelpunkt -Shader definiert die Position und Farbberechnung von Scheitelpunkten; Während der Oberflächen -Shader die Farbberechnung Methode interpolierter Punkte definiert. In den tatsächlichen Anwendungsszenarien wird auch die Verarbeitung von Licht und anderen Effekten in Shaders umfasst.

Definieren Sie Shaders, Sie finden sie im Programm und verwenden sie:

Varshaderprogramm;

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)) {

wachsam ("könnte nichtinitialiseshaders");

}

GL.UseProgram (ShaderProgram);

ShaderProgram.vertexPositionAttribute = gl.GetAttriBllocation (ShaderProgram, "avertexposition");

Gl.EnablevertexAttribarray (ShaderProgram.vertexPositionAttribute);

saderprogram.vertexcolorattribute = gl.getAttriBllocation (ShaderProgram, "avertexcolor");

Gl.EnablevertexAttribarray (ShaderProgram.vertexcolorattribute);

saderprogram.pmatrixuniform = gl.getuniformLocation (Shaderprogram, "upmatrix");

saderprogram.mvmatrixuniform = gl.getuniformLocation (ShaderProgram, "Umvmatrix");

}

Es gibt einen Shader, aber wie kann die Grafikkarte ausgeführt werden? Programm ist eine solche Brücke. Es ist ein nativer Binärcode von WebGL. Seine Funktion besteht im Grunde genommen darin, die Grafikkarte den Shader -Code ausführen zu lassen, um die angegebenen Modelldaten zu rendern.

Hier ist auch eine Hilfsmethode GetShader. Diese Methode besteht darin, das HTML -Dokument zu durchqueren, die Definition des Shaders zu finden und den Shader nach der Erfassung der Definition zu erstellen. Ich werde hier nicht auf Details eingehen:

functionGetShader (GL, id) {

VarshaderScript, Thesource, CurrentChild, Shader;

saderScript = document.getElementById (id);

if (! ShaderScript) {

returnnull;

}

thesource = "";

currentChild = saderScript.Firstchild;

while (currentChild) {

if (currentChild.nodetype == currentChild.text_node) {

thesource+= CurrentChild.TextContent;

}

CurrentChild = CurrentChild.NextSsibling;

}

if (saderScript.Type == "x-shader/x-fRagment") {

Shader = Gl.CreateShader (GL.Fragment_Shader);

} elseif (saderScript.Type == "x-shader/x-Vertex") {

sader = gl.CreateShader (gl.vertex_shader);

}anders{

// UNNAKTIONSHADERTYPE

returnnull;

}

Gl.Shadersource (Shader, diese Tarnung);

// CompiletheshaderProgram

GL.comPileshader (Shader);

// SeifitcompiledSuccessibil

if (! Gl.getShaderparameter (Shader, GL.Compile_status)) {

Alert ("Anerroroccurred compilingTheshaders:"+gl.getShaderinfolog (Shader));

returnnull;

}

returnshader;

}

In diesen kleinen Beispielen werden die Modelldaten grundsätzlich direkt generiert. In den tatsächlichen Programmen sollten diese Daten aus der Modellbelastung erhalten werden:

VarTiangErvertexPositionBuffer;

VarTiangEververtexcolorBuffer;

functionInitBufers () {

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 (Scheitelpunkte), Gl.static_Draw);

tiangElevertexPositionBuffer.ItemSize = 3;

tiangElevertexPositionBuffer.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 (Farben), Gl.static_Draw);

TrianglevertexcolorBuffer.ItemSize = 4;

TrianglevertexcolorBuffer.NumItems = 3;

}

Der obige Code erstellt die Eckpunkte und Farbdaten des Dreiecks und stellt sie in den Puffer.

Übergeben Sie nach der Vorbereitung der Daten sie einfach an WebGL, um das Rendern zu erhalten. Die GL.Drawarrays -Methode wird hier aufgerufen. Schauen Sie sich den Code an:

FunktionDrawscene () {

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 (saderprogram.vertexPositionAttribute, TrianglevertexPositionBuffer.ItemSize, Gl.Float, False, 0,0);

Gl.bindbuffer (GL.Array_Buffer, TrianglevertexcolorBuffer);

gl.vertexAttribpointer (saderprogram.vertexcolorattribute, TrianglevertexcolorBuffer.ItemSize, Gl.float, False, 0,0);

setMatRixuniforms ();

Gl.Drawarrays (GL.Triangles, 0, TrianglevertexPositionBuffer.NumItems);

}

Diese Funktion setzt zuerst den Hintergrund der 3D -Welt auf schwarz, setzt dann die Projektionsmatrix, legt die Position des Objekts zu zeichnen und zeichnet das Objekt dann gemäß den Scheitelpunkt- und Farbdaten im Puffer. Es gibt auch einige Hilfsmethoden zum Generieren von Projektionsmatrix- und Modellansichtsrechten (unter Verwendung der Matrix -Auxiliary -Methode in der OAK3D -Grafikbibliothek), die wenig mit dem Thema zu tun haben, daher werde ich es hier nicht ausführlich erklären.

Grundsätzlich gibt es so viele Prozesse. Aufgrund dieser werden komplexere Texturen, Licht usw. implementiert. Weitere Informationen finden Sie im folgenden chinesischen Tutorial, das detaillierte Beispiele enthält.

Wie wäre es damit? Wie ist es, native WebGL -Entwicklung zu verwenden? Sie benötigen nicht nur ein tiefes 3D -Wissen, sondern Sie müssen auch verschiedene Implementierungsdetails kennen. WebGL passt sich flexibel an verschiedene Anwendungsszenarien an, aber für die meisten nicht professionellen wie mir müssen viele Details nicht bekannt sein. Dies hat zu verschiedenen Klassenbibliotheken für die Unterstützung der Entwicklung geführt, z. Im nächsten Abschnitt wird eine weit verbreitete drei.js -Grafikbibliothek eingeführt.

Chinesisches Tutorial: http://www.hiwebgl.com/?p=42

Entwicklungszentrum: https://developer.mozilla.org/en/webgl