Valeur de cette activité : 5 points
Compétence :
PEPS - WebGl - 2D et 3D

A-Module 25 : Web-3D : 5 points - difficulté : 3

WebGl

Description

WebGL permet la création de des graphismes 2D et 3D sur le Web en introduisant une API qui est très conforme à OpenGL qui peut être utilisée avec le langage HTML5.

ATTENTION : votre navigateur web doit supporter cette technologie.
Cliquez ici afin d'afficher la liste des navigateurs supportés
Vous pouvez utiliser les navigateurs iceweasel, chromium, firefox, google-chrome ou opera.

Si vous utilisez le navigateur Iceweasel, tapez dans la barre d'adresse :
about:config
Rechterche le terme webgl
Réglez par un double clic webgl.force-enable à true

Si vous utilisez le navigateur Google-Chrome, fermez votre navigateur et lancez-le en tapant dans le terminal :
google-chrome --enable-webgl --ignore-gpu-blacklist
Vous pouvez tester ensuite en tapant dans le terminal :
google-chrome --enable-webgl --ignore-gpu-blacklist http://ladifference.info/i/images//profPierreMorissette/x3dom/x3dom1.html

Si vous utilisez le navigateur Opera, tapez dans votre barre d'adresse :
opera:config#Enable%20WebGL
et indiquer la valeur 1 dans le champ Enable Webgl et cliquez sauvegarder Vous pouvez tester ensuite en tapant dans le terminal :
opera http://ladifference.info/i/images//profPierreMorissette/x3dom/x3dom1.html
"WebGL est une bibliothèque JavaScript donnant accès aux fonctionnalités d'OpenGL permettant ainsi de réaliser des rendus 3D et 2D directement dans une page Web. La bibliothèque s'intègre complètement dans les standards du Web. L'affichage du canvas utilise la puissance de la carte graphique de la machine cliente. De plus, des éléments Web peuvent être assemblés dans le rendu WebGL. WebGL, tout comme OpenGL est conçu et maintenu par Khronos." (source : http://jeux.developpez.com/tutoriels/OpenGL/WebGL/)


Exemple


Notez que vous pouvez répéter cette activité effectuant plusieurs leçons du tutoriel.

Voici quelques liens afin de visualiser des applications WebGl
  1. Autres exemples
  2. http://bomomo.com/
  3. http://www.hongkiat.com/blog/48-excellent-html5-demos/
  4. http://www.hongkiat.com/blog/webgl-chrome-experiments/
  5. http://www.webdesignerdepot.com/2016/05/how-webgl-is-reinventing-flashs-legacy/
  1. Sélectionnez le menu AIDE + À PROPOS .. de votre navigateur web pour vous assurer que vous utilisez bien le navigateur FIREFOX ou Midori
  2. Activez le webgl en :

    A) tapant about:config dans la barre d'adresse
    B) Recherchez webgl
    C) Modifiez la valeur webgl.force-enabled à true

    ou
    visitez ce site pour obtenir plus d'informations afin d'activer le WEBGL

  3. Affichez ce site ***** pour une démonstration/vérification du fonctionnement WebGl
  4. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 74813

  5. Inscrivez dans le champ titre : WEBGL

  6. Sélectionnez la section : MODULE JAVASCRIPT

  7. Sélectionnez la matière : informatique

  8. Inscrivez dans le champ no de la directive : 74813

  9. Inscrivez dans votre page le titre de niveau 1 : WEBGL

  10. Inscrivez dans votre page le titre de niveau 1 indiquant le titre et le numéro de votre tutoriel

  11. Accédez à un des tutoriels disponibles :
    1. http://jeux.developpez.com/tutoriels/OpenGL/WebGL/ (****** suggéré)
    2. Cours webgl
    3. Développement de jeux en webgl avec la librairie Babylon
    4. Documentation WEBGL de Mozilla (anglais)
    5. Cours Webgl de Mozilla (anglais)


  12. Produisez le code pour la leçon choisie

  13. Ajoutez une courte description de votre travail en indiquant un élément du langage WEBGL appris.

  14. Téléchargez au besoin vos documents dans votre espace de téléchargement.

  15. Visualisez votre page et apportez des modifications au besoin.