Présentation de WebGL 3D en HTML5 (Partie 1) : le développement natif WebGL ouvre une nouvelle ère de compétences didactiques de rendu 3D de pages Web_html5

WebGL ouvre une nouvelle ère de rendu 3D sur les pages Web, qui permet de restituer le contenu 3D directement dans le canevas sans aucun plug-in. WebGL est identique à l'API Canvas 2D. Il manipule les objets via des scripts, les étapes sont donc fondamentalement similaires : préparer le contexte de travail, préparer les données, dessiner l'objet dans le canevas et le restituer. La différence avec la 2D est que la 3D implique davantage de connaissances, telles que le monde, la lumière, la texture, la caméra, la matrice et d'autres connaissances professionnelles. Il existe un bon tutoriel chinois sur WebGL, qui est le premier lien dans la référence d'utilisation ci-dessous, je ne ferai donc rien à ce sujet ici. Le contenu suivant n'est qu'un bref résumé du contenu d'apprentissage.

Prise en charge du navigateur
Étant donné que Microsoft a son propre plan de développement graphique et n'a pas pris en charge WebGL, IE n'est actuellement pas en mesure d'exécuter WebGL, sauf pour installer des plug-ins. Pour les autres navigateurs grand public tels que Chrome, FireFox, Safari, Opera, etc., installez simplement la dernière version. En plus d'installer le dernier navigateur, vous devez également vous assurer que le pilote de la carte graphique est également à jour.
Après les avoir installés, vous pouvez ouvrir le navigateur et saisir l'URL suivante pour vérifier la prise en charge du navigateur pour WebGL : http://webglreport.sourceforge.net/.

Si vous ne parvenez toujours pas à exécuter WebGL après avoir installé normalement les navigateurs ci-dessus, vous pouvez essayer de forcer l'activation de la prise en charge de WebGL. La méthode d'ouverture est la suivante :
Navigateur Chrome
Nous devons ajouter certains paramètres de démarrage à Chrome. Les étapes spécifiques suivantes prennent le système d'exploitation Windows comme exemple : Recherchez le raccourci de Chrome. navigateur, cliquez avec le bouton droit sur le raccourci Méthode, sélectionnez Propriétés ; dans la zone cible, après les guillemets derrière chrome.exe, ajoutez le contenu suivant :

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

Fermez Chrome après avoir cliqué sur OK, puis utilisez ce raccourci pour lancer le navigateur Chrome.
La signification de plusieurs paramètres est la suivante :
--enable-webgl signifie activer le support WebGL
--ignore-gpu-blacklist signifie ignorer la liste noire du GPU, ce qui signifie qu'il y a des graphiques ; cartes et GPU Parce qu'il est trop ancien et pour d'autres raisons, il n'est pas recommandé d'exécuter WebGL. Ce paramètre permet au navigateur d'ignorer cette liste noire et de forcer WebGL à s'exécuter
--allow-file-access-from-files signifie ; pour permettre le chargement local des ressources. 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 souhaitez simplement jeter un œil à la démo WebGL, vous n'avez pas besoin d'ajouter ce paramètre.

Navigateur Firefox
Utilisateurs de Firefox, veuillez saisir "about:config" dans la barre d'adresse du navigateur, appuyez sur Entrée, puis recherchez "webgl" dans le filtre (filtre) et remplacez webgl Définissez .force-enabled sur true ; définissez webgl.disabled sur false ; recherchez "security.fileuri.strict_origin_policy" dans le filtre et définissez security.fileuri.strict_origin_policy sur false ; puis fermez toutes les fenêtres Firefox actuellement ouvertes, redémarrez Firefox.
Les deux premiers paramètres visent à forcer l'activation de la prise en charge de WebGL, et le dernier paramètre security.fileuri.strict_origin_policy consiste à autoriser le chargement de ressources à partir de sources locales. Si vous n'êtes pas un développeur WebGL, vous n'avez pas besoin de le faire. développer et déboguer WebGL, mais je veux juste jeter un œil à la démo WebGL, alors vous n'avez pas besoin de définir cet élément.

Navigateur Safari
Recherchez « Propriétés » → « Avancé » dans le menu, sélectionnez « Afficher le menu de développement », puis allez dans le menu « Développer » et sélectionnez « Activer WebGL ».

Étapes de développement

Le code suivant résume simplement les concepts pertinents. Il provient du tutoriel chinois de la référence et implique davantage de connaissances en 3D. Les étudiants intéressés peuvent accéder directement aux tutoriels de chinois dans la référence pratique, qui sont beaucoup plus détaillés et précis que ce que j'explique ici. Les étudiants qui participent au jeu peuvent simplement y jeter un œil sans approfondir la signification de chaque ligne de code.

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

Copier le code

Le code est le suivant :

Votre navigateur ne semble pas prendre en charge l'élément canvas HTML5.

< /body>

Il est temps de commencer officiellement à écrire le script. Tout d'abord, jetez un œil à l'entrée du programme et à sa structure globale :

Copiez le code

Le code est le suivant :

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

Les différentes méthodes présentées ici représentent les étapes typiques du dessin WebGL :

Étape 1 : Initialiser l'environnement de travail WebGL - initGL
Le code de cette méthode est le suivant :

Copier le code

Le code est le suivant :

vargl;
functioninitGL(canvas) {
gl=null;
try{
//Essayez de saisir le contexte standard. En cas d'échec, repli sur expérimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
>
catch(e){} //Si nous n'avons pas de contexte GL, abandonnez-le maintenant
if(!gl){
alert("UnabletoinitializeWebGL. Yourbrowsermaynotsupportit.");
}
}

Cette méthode est très simple. Il s'agit d'obtenir l'environnement de dessin WebGL. Vous devez passer le paramètre "webgl" à la méthode canvas.getContext. Cependant, puisque le standard WebGL actuel ne l'est pas. finalisés, les paramètres utilisés dans la phase expérimentale sont tous "experimental-webgl". Bien sûr, vous pouvez également appeler directement canvas.getContext("experimental-webgl") Une fois la norme définie, vous pouvez modifier un autre code.

Étape 2 : Initialiser les Shaders - initShaders
Le concept de shader est relativement simple, pour le dire franchement, il s'agit d'une instruction de fonctionnement de la carte graphique. La construction d'une scène 3D nécessite une grande quantité de calculs de couleur, de position et d'autres informations. Si ces calculs sont effectués par logiciel, la vitesse sera très lente. Par conséquent, laisser la carte graphique calculer ces opérations est très rapide ; la manière d’effectuer ces calculs est spécifiée par le shader. Le code du shader est écrit dans un langage de shader appelé GLSL, que nous ne décrirons pas ici.
Les shaders peuvent être définis en HTML et utilisés dans le code. Bien entendu, il en va de même si vous utilisez une chaîne pour définir un shader dans votre programme.
Regardons d'abord la partie définition :

Copiez le code

Le code est le suivant :

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>

Il y a deux shaders ici : le shader de visage et le shader de sommet.
Concernant ces deux shaders, il faut expliquer ici que les modèles 3D dans les ordinateurs sont essentiellement décrits par des points combinés avec des patchs triangulaires. Le vertex shader doit traiter les données de ces points, et le surface shader est par interpolation, le. les données des points sur le patch triangulaire sont traitées.
Le vertex shader défini ci-dessus définit la méthode de calcul de la position et de la couleur du sommet tandis que le surface shader définit la méthode de calcul de la couleur du point d'interpolation ; Dans les scénarios d'application réels, des effets tels que le traitement de la lumière dans le shader seront également impliqués.
Définit les shaders, vous pouvez les retrouver dans le programme et les utiliser :

Copier le code

Le code est le suivant suit :

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");
shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}


Le shader est là, mais comment laisser la carte graphique l'exécuter ? Le programme est ce genre de pont. C'est le code binaire natif de WebGL. Sa fonction est essentiellement de laisser la carte graphique exécuter le code du shader pour le rendu. les données du modèle spécifiées.
Une méthode auxiliaire getShader est également utilisée ici. Cette méthode consiste à parcourir 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 :

Copier le code

Le code est le suivant :

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

Étape 3 : Créer/ charger les données du modèle - initBuffers
Dans ces petits exemples, les données du modèle sont essentiellement générées directement dans le programme réel, ces données doivent être chargées à partir du modèle :

. Copiez le code

Le code est le suivant :

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

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

Étape 4 : Rendu - drawScene
Après avoir préparé les données, remettez-les simplement à WebGL pour le rendu. La méthode gl.drawArrays est appelée ici. Regardez le code :

Copiez le code

Le code est le suivant :

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

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 des matrices de projection et des rectangles de vue de modèle (en utilisant les méthodes auxiliaires matricielles de la bibliothèque graphique Oak3D) qui n'ont pas grand-chose à voir avec le sujet et ne seront pas expliquées en détail ici.
En gros, c'est tout le processus. Des textures, des lumières, etc. plus complexes sont toutes implémentées en ajoutant certaines fonctionnalités WegGL sur cette base. Veuillez vous référer au didacticiel chinois suivant pour des exemples détaillés.

Et si ? Qu'est-ce que ça fait de développer en utilisant WebGL natif ? Non seulement vous devez avoir des connaissances approfondies en 3D, mais vous devez également connaître divers détails de mise en œuvre. WebGL fait cela pour s'adapter de manière flexible à divers scénarios d'application, 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 classes qui aident au développement, comme la bibliothèque Oak3D utilisée dans cette section (afin de démontrer le développement WebGL, seule la méthode auxiliaire matricielle est utilisée dans l'exemple). La section suivante présentera une bibliothèque graphique Three.js couramment utilisée.

Référence pratique :
Tutoriel chinois : http://www.hiwebgl.com/?p=42

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