permet à un contenu web d'utiliser l'API basée sur
OpenGL ES2.0 pour effectuer un rendu 2D et 3D dans un
canvasdans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.
Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.
Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le webgl-examples GitHub repository.
Préparation au rendu 3DLa première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
</body>
La fonction main() dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.
main();
//
// Début ici
//
function main() {
const canvas = document.querySelector("#glCanvas");
// Initialisation du contexte WebGL
const gl = canvas.getContext("webgl");
// Continuer seulement si WebGL est disponible et fonctionnel
if (!gl) {
alert(
"Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.",
);
return;
}
// Définir la couleur d'effacement comme étant le noir, complètement opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Effacer le tampon de couleur avec la couleur d'effacement spécifiée
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée canvas.
Une fois que nous avons le canvas, nous essayons de lui obtenir un WebGLRenderingContext, en appelant getContext et en lui passant la chaîne "webgl". Si le navigateur ne supporte pas WebGL, getContext retournera null, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.
Si le contexte est initialisé avec succès, la variable gl sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).
A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.
Voir le code complet | Ouvrir cette démo dans une nouvelle page
Voir aussiRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4