Webgl academy

Xavier Bourry

• Studio de dev SPACEGOO ( spacegoo.com )
• Auteur de : Webgl: guide de programmation d'applications web3D
• Cours 28h Programmation 3D avec Webgl à l'ESIPE - page du courshttp://www.webglacademy.com/cours_2013
• Mail : xavier@spacegoo.com

Probléme

• Apprendre WebGL
• Effort initial important : cube coloré
• Cours magistraux seuls : pas pédago,
• Console seule (codeacademy) : pas suffisant,
• Editeur de code/tutos (jsfiddle) : pas assez progressifs

Demo

Inside webglacademy

Codemirror

• Editeur de code avec coloration syntaxique, indentation auto, bracket matching, etc...
• Open source, licence MIT, codemirror.net,

• <textarea id='ma_textarea' height='480' width='640'/>
  var texte="hello";
  alert(texte);
  </textarea>

  <link rel="stylesheet" href="lib/codemirror.css">
  <script src="lib/codemirror.js"></script>
  <script src="mode/javascript/javascript.js"></script>
  <script>
    document.body.addEventListener("load", function() {
      var myTextarea = document.getElementById("ma_textarea");
      var editor = CodeMirror.fromTextArea(myTextarea, {      
        mode: "javascript",
        smartIndent: true
      });
    }, false);
  </script>
  

Codemirror demo

Formulation des cours

• cours décrits avec XML
• chargés avec AJAX

  <course>
  <name>HTML Hello word</name>
  <description>Make a simple HTML document, where you will insert your webgl application</description>
  
  <stage id="0">
     <name>
         This first lesson begins with HTML, just to familiarize yourself with this interface.
         &lt;br/&gt;&lt;br/&gt;
         CLICK ON THE NEXT BUTTON
     </name>
  </stage>
  <stage id="1">
     <name>
         Scripts and stylesheet will go into the first part, and page content into the second part. It is not advisable to insert scripts into the &lt;body&gt;&lt;/body&gt; part.
     </name>
  </stage>
  <stage id="2">
     <name>
         This is your HTML hello word. Now, click on the RUN button.
         &lt;br/&gt;&lt;br/&gt;
         Then click on the &lt;img src='images/fullscreen.png' style='width: 32px; vertical-align: absmiddle'/&gt;icon at the bottom left of the screen.
     </name>
     <work>
         Now, change "Hello word" by an other word, then click on RUN again.
     </work>   
  </stage>
  
  
  
  <file name="index.html">
      <stage id="0" comment="It means it is a HTML5 document">
          &lt;!DOCTYPE html&gt;
          
      </stage>
      <stage id="0" comment="Begin of HTML code">
          &lt;html&gt;
          
      </stage>
      <stage id="1" comment="Header of document">
          &lt;head&gt;
      </stage>
      <stage id="2" comment="We use UTF-8 Character encoding">
          &lt;meta charset='utf-8'/&gt;
      </stage>
      <stage id="1">
          &lt;/head&gt;
      </stage>
      <stage id="1" comment="Document body">
          &lt;body&gt;
      </stage>
      <stage id="2">
          Hello word
      </stage>
      <stage id="1">
          &lt;/body&gt;
      </stage>
      <stage id="0" comment="End of HTML code">
          &lt;/html&gt;
      </stage>    
  </file>
  </course>

Exécution

• Dans une iframe,
• Envoi du code source par formulaire POST et affichage en PHP,
• Remplacement des caractères < et > pour bypasser les filtres anti-XSS,
• Faille XSS non permanente → pas de login par cookie sur le même domaine !
• Download et exécution plein écran → méthode similaire
• Reroutage des console.log(), utilisation de window.onerror() pour rediriger les erreurs
• Capture pas toujours TOUTES les erreurs :(

Le projet

• Créé en support de cours pour noobs JS et 3D,
• Avant le passage à un IDE plus complexe ( Netbeans ),
• Code cours, peu structurés, framework agnostic
• Lancé en Juillet 2013, mis en oeuvre,
• Next step : ouverture de la plateforme

Questions ?