Présentation de WebGL 3D de HTML5 (partie 1) - WebGL Native Development ouvre une nouvelle ère de rendu 3D sur les pages Web

WebGL a ouvert une nouvelle ère de rendu 3D des pages Web, qui permet de rendre le contenu 3D directement dans Canvas sans l'aide d'aucun plug-ins. Comme l'API 2D Canvas, WebGL manipule les objets via des scripts, de sorte que les étapes sont fondamentalement similaires: préparer le contexte de travail, préparer les données, dessiner l'objet dans la toile et les rendre. Contrairement à 2D, la 3D implique plus de connaissances, comme le monde, la lumière, la texture, la caméra, la matrice et d'autres connaissances professionnelles. WebGL a un bon tutoriel chinois, qui est le premier lien de la référence ci-dessous, donc je ne montrerai pas mes compétences ici. Le contenu suivant n'est qu'un bref résumé de ce que j'ai appris.

Puisque Microsoft a son propre plan de développement graphique et n'a pas pris en charge WebGL, IE ne peut pas exécuter WebGL, sauf pour l'installation de plugins. D'autres navigateurs grand public tels que Chrome, Firefox, Safari, Opera, etc., sont tous installés avec la dernière version. En plus d'installer le dernier navigateur, vous devez également vous assurer que le pilote de carte graphique est également à jour.

Après les installer, vous pouvez ouvrir le navigateur et entrer l'URL suivante pour vérifier la prise en charge du navigateur pour WebGL: http://webglreport.sourceforge.net/.

Après avoir installé le navigateur ci-dessus normalement, vous ne pouvez toujours pas exécuter WebGL, vous pouvez donc activer avec force le support WebGL et l'essayer. La méthode pour l'activer est la suivante:

Nous devons ajouter des paramètres de démarrage à Chrome. Les étapes de fonctionnement spécifiques suivantes sont prises comme exemple: trouvez le raccourci vers le navigateur Chrome, cliquez avec le bouton droit sur le raccourci et sélectionnez les propriétés; Dans la zone cible, après les citations après Chrome.exe, ajoutez le contenu suivant:

Cliquez sur OK pour fermer Chrome, puis utilisez ce raccourci pour lancer Chrome Browser.

Les significations de plusieurs paramètres sont les suivantes:

- Les moyens de Websable pour activer la prise en charge de WebGL;

--Ignore-GPU-Blacklist signifie ignorer la liste noire GPU, ce qui signifie que certains GPU de la carte graphique ne sont pas recommandés pour exécuter WebGL car ils sont trop vieux et autres raisons. Ce paramètre permet au navigateur d'ignorer cette liste noire et de forcer WebGL à s'exécuter;

- Allow-File-Access-from-Files signifie que vous autorisez le chargement des ressources à partir de localement. Si vous n'êtes pas un développeur WebGL et que vous n'avez pas besoin de développer et de déboguer WebGL, mais que vous voulez simplement jeter un œil à la démo WebGL, vous ne pouvez pas ajouter ce paramètre.

Utilisateurs de Firefox, veuillez entrer: Configuration dans la barre d'adresse du navigateur, entrez, puis recherchez webgl dans le filtre (filtre), définissez webgl.force compatible sur true; définir webgl.disabled sur false; Recherchez Security.fileuri.strict_origin_policy dans le filtre (filtre), définissez la sécurité.fileuri.strict_origin_policy à false; Fermez ensuite toutes les fenêtres de Firefox qui s'ouvrent actuellement et redémarrez Firefox.

Les deux premiers paramètres consistent à forcer le support WebGL, et le dernier paramètre Security.Fileuri.strict_origin_policy est de permettre le chargement des ressources de la zone locale. Si vous n'êtes pas un développeur WebGL et que vous n'avez pas besoin de développer et de déboguer WebGL, mais que vous voulez simplement jeter un œil à la démo WebGL, vous ne pouvez pas définir cet élément.

Trouvez des propriétés → Avancé dans le menu, sélectionnez Afficher le menu de développement, puis accédez au menu de développement et sélectionnez Activer WebGL.

Le code suivant n'est qu'un bref résumé des concepts pertinents. Il vient du tutoriel chinois dans la référence et implique beaucoup de connaissances en 3D. Les étudiants intéressés peuvent passer directement au tutoriel chinois dans la référence pratique à Learn, qui est beaucoup plus détaillé et précis que ce que j'ai expliqué ici. Les étudiants qui se joignent au plaisir peuvent simplement jeter un coup d'œil, sans se plonger dans le sens de chaque ligne de code.

Inutile de dire qu'il s'agit d'ajouter un élément de canevas à la page en tant que conteneur de rendu. Par exemple:

<bodyOnload = "start ()">

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

YourBrowSerDoes notAPAPEARTOSUPPRORT theHtml5Canvaselement.

</ canvas>

</docy>

Voici le temps de commencer officiellement à écrire des scripts. Tout d'abord, jetons un coup d'œil à l'entrée du programme et à la structure globale:

functionstart () {

varCanvas = document.getElementById ("glCanvas");

InitGL (toile);

IniTSHADERS ();

initbuffers ();

gl.ClearColor (0,0,0,0,0,0,1,0);

gl.enable (gl.depth_test);

drawScene ();

}

Plusieurs méthodes représentent ici les étapes de dessin d'un webgl typique:

Le code de cette méthode est le suivant:

vargl;

functionInitgl (canvas) {

gl = null;

essayer{

//TryTograbthestandardContext.ifitfails,FallbacktoExperimental.

gl = canvas.getContext ("webgl") || canvas.getContext ("expérimental-webgl");

}

Catch (e) {} // ifwedon'thaveAGLContext, GiveUpNow

if (! gl) {

alert ("Unabletoinitializewebgl.yourbrowsermayNotsupportit.");

}

}

Cette méthode est très simple, c'est-à-dire d'obtenir l'environnement de dessin WebGL. Vous devez passer le paramètre WebGL à la méthode canvas.getContext. Cependant, comme la norme Webgl actuelle n'a pas été finalisée, les paramètres utilisés au stade expérimental sont expérimentaux-Webgl. Bien sûr, il est également acceptable d'appeler Canvas.getContext (Experimental-Webgl). Une fois les normes définies, vous pouvez modifier un autre code.

Le concept de shader shader est relativement simple, pour le dire franchement, c'est la commande de fonctionnement de la carte graphique. La construction d'une scène 3D nécessite de nombreux calculs de couleur, de position et d'autres informations. Si ces calculs sont effectués par le logiciel, la vitesse sera très lente. Donc, si vous laissez la carte graphique calculer ces opérations, la vitesse est très rapide; Comment effectuer ces calculs est spécifié par le shader. Le code de shader est écrit dans une langue shader appelée GLSL, et nous ne parlerons plus de cette langue.

Les shaders peuvent être définis en HTML et utilisés dans le code. Bien sûr, c'est la même chose pour vous de définir un shader avec une chaîne dans votre programme.

Regardons d'abord la définition:

<scriptid = "shader-fs" type = "x-shader / x-fragment">

PrecisionMediumpFloat;

variantvec4vcolor;

voidMain (void) {

gl_fragcolor = vColor;

}

</cript>

<scriptid = "shader-vs" type = "x-shader / x-vertex">

AttributVec3AverTexpositif;

AttributeVec4AvertexColor;

UniformMat4umvMatrix;

UniformMat4upMatrix;

variantvec4vcolor;

voidMain (void) {

GL_POSITION = UPMATRIX * UMVMATRIX * VEC4 (AVERTEXOSITION, 1.0);

vColor = AvertexColor;

}

</cript>

Voici deux shaders: Shader du visage et shader de sommet.

En ce qui concerne ces deux shaders, il est nécessaire d'expliquer ici que les modèles 3D dans les ordinateurs sont essentiellement décrits par des points combinés avec des faces de triangle. Le vertex shader traite les données de ces points, et le shader de surface traite les données des points sur les faces de triangle via l'interpolation.

Le vertex shader défini ci-dessus définit la position de position et de calcul des couleurs des sommets; tandis que le shader de surface définit la méthode de calcul des couleurs des points interpolés. Dans les scénarios d'application réels, cela impliquera également le traitement de la lumière et d'autres effets dans les shaders.

Définissez les shaders, vous pouvez les trouver dans le programme et les utiliser:

VarshaderProgram;

functionInitShaders () {

varFragmentShader = getShader (gl, "shader-fs");

VarvertexShader = getShader (GL, "Shader-vs");

shaderProgram = gl.CreateProgram ();

Gl.Attachshader (ShaderProgram, vertexshader);

Gl.Attaches (ShaderProgram, FragmentShader);

GL.LinkProgram (ShaderProgram);

if (! gl.getprogramparamètre (shaderProgram, gl.link_status)) {

alerte ("pourrait notitinitiaSeshaders");

}

gl.useprogram (shaderProgram);

shadderprogram.vertexPositionAttribute = gl.getAttriBlocation (shaderProgram, "AvertexPosition");

GL.enableVerTexAttRribArray (ShaderProgram.VertexPositionAttribute);

shadderprogram.vertexcolorAttribute = gl.getAttriBlocation (shaderProgram, "AvertexColor");

gl.enableVerTexAttribArray (shaderProgram.VertexColorAttribute);

shadderprogram.pmatrixuniform = gl.getUniformLocation (shaderProgram, "upmatrix");

shadderprogram.mvMatrixUniformes = gl.getUniformLocation (shaderProgram, "umvMatrix");

}

Il y a un shader, mais comment faire en sorte que la carte graphique s'exécute? Le programme est un tel pont. Il s'agit d'un code binaire natif de WebGL. Sa fonction consiste essentiellement à permettre à la carte graphique d'exécuter le code de shader pour rendre les données du modèle spécifiées.

Voici également une méthode auxiliaire GetShader. Cette méthode consiste à traverser le document HTML, à trouver la définition du shader et à créer le shader après avoir obtenu la définition. Je n'entrerai pas dans les détails ici:

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

}autre{

// UnknownShaderType

returnnull;

}

gl.shadersource (shader, thesource);

// CompileTheShaDerProgram

gl.compileshader (shader);

// SeeIFitCompiledSuccess

if (! gl.getShaderParameter (shader, gl.compile_status)) {

alert ("anerroroccurredCompilingTheShaders:" + gl.getShadeRenfolog (shader));

returnnull;

}

returnShader;

}

Dans ces petits exemples, les données du modèle sont essentiellement générées directement. Dans les programmes réels, ces données doivent être obtenues à partir du chargement du modèle:

VaritringleverTexPositionBuffer;

VRTRIANGLEVERTEXCOLORBUFFER;

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 (couleurs), gl.static_draw);

trianglevertexcolorbuffer.itemSize = 4;

trianglevertexcolorbuffer.numitems = 3;

}

Le code ci-dessus crée les sommets et les données de couleur du triangle et les met dans le tampon.

Après avoir préparé les données, remettez-la à WebGL pour le rendu. La méthode Gl.Drawarrays est appelée ici. Regardez le code:

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.itemsize, gl.float, false, 0,0);

gl.bindbuffer (gl.array_buffer, trianglevertexcolorbuffer);

gl.vertexattribpointer (shaderProgram.vertexcolorattribute, trianglevertexcolorbuffer.itemsize, gl.float, false, 0,0);

setMatrixUniformes ();

Gl.Drawarrays (Gl.Triangles, 0, TrianglevertexPositionBuffer.numitems);

}

Cette fonction définit d'abord l'arrière-plan du monde 3D en noir, puis définit la matrice de projection, définit la position de l'objet à dessiner, puis dessine l'objet en fonction du sommet et des données de couleur dans le tampon. Il existe également des méthodes auxiliaires pour générer une matrice de projection et des rectangles de vue du modèle (en utilisant la méthode auxiliaire de la matrice dans la bibliothèque graphique OAK3D) qui ont peu à voir avec le sujet, donc je ne l'expliquerai pas en détail ici.

Fondamentalement, il y a tellement de processus. Des textures plus complexes, de la lumière, etc. sont implémentées en fonction de celles-ci. Veuillez vous référer au tutoriel chinois ci-dessous, qui contient des exemples détaillés.

Et ça? Comment est-ce d'utiliser le développement de Webgl natif? Non seulement vous avez besoin d'avoir des connaissances 3D profondes, mais vous devez également connaître divers détails d'implémentation. WebGL fait cela pour s'adapter à divers scénarios d'application de manière flexible, mais pour la plupart des non-professionnels comme moi, de nombreux détails n'ont pas besoin d'être connus. Cela a donné naissance à diverses bibliothèques de classe pour aider le développement, telles que la bibliothèque OAK3D utilisée dans cette section (afin de démontrer le développement WebGL, seules les méthodes d'assistance à la matrice ont été utilisées dans les exemples). La section suivante introduira une bibliothèque graphique Three.JS plus utilisée plus largement utilisée.

Tutoriel chinois: http://www.hiwebgl.com/?p=42

Centre de développement: https://developer.mozilla.org/en/webgl