topical media & game development

talk show tell print

mobile-query-three-plugins-ogsworkshop-slides-index0.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>Three.js workshop</title>
          <base target=”_blank” />
          <meta charset='utf-8'/>
          <script src="vendor/jquery-1.7.2.min.js"></script>
          <script src='slides.js'></script>
  </head>
  
  <body style='display: none'> 
          <style>
                  article[data-markdown] em {
                          color                : orange;
                          font-style        : normal;
                          font-weight        : bolder;
                          
                  }
                  article[data-markdown] h3 {
                          font-size        : 180%;
                  }
                  span.orange {
                          color                : orange;
                  }
                  span.larger {
                          font-weight        : bolder;
                          font-size        : 120%;
                  }
          </style>
          <section class='slides layout-regular template-default'>
  
  <!-- ****************************************************************************
                  Talk Introduction
  ********************************************************************************* -->
          <article data-markdown>
                  # *three.js workshop*
                  
  
# webgl made easy

                  ## Jerome Etienne
          </article>
  <!-- ****************************************************************************
                  presentation
  ********************************************************************************* -->
          <article>
                  <h3>Who Am I</h3>
                  <img style="float:right" src='jetienne-avatar.jpg' />
                  <ul>
                          <li>coder, speaker, trainer</li>
                          <li>Javascript, Node.js, WebGL and other HTML5 games stuff</li>
                  </ul>
                  <h4>Learning Three.js</h4>
                  <ul>
                          <li>Author of <a href="http://learningthreejs.com">learningthreejs</a> blog</li>
                          <li>Lists of three.js tutorials or "WebGL for dummies"</li>
                  </ul>
                  <h4>Contacts</h4>
                  <ul>
                          <li>
                                  <a href='twitter.com/jerome_etienne'>@jerome_etienne</a> on twitter,
                                  <a href='http://github.com/jeromeetienne'>jeromeetienne</a> on github
                          </li>
                  </ul>
          </article>
          <article data-markdown>
  
What is WebGl html5 api come directly from OpenGL OpenGL ES 2.0 no extension Same OpenGL as on Mobile </article> <article data-markdown> What is Three.js under [MIT license](http://opensource.org/licenses/mit-license.php) * studied thru *tQuery API* </article> <article data-markdown> vocabulary *vertex* ? a point in 3d space warning: plural is vertices *fragment* ? a pixel on screen *shader* ? a program running on GPU run super fast in // *texture* ? image mapped on 3d object

  
# More strange words ? texel, fustrum, quad </article> <article data-markdown> What is tQuery [repo](github.com/jeromeetienne/tquery) [homepage](http://jeromeetienne.github.com/tquery/) > <article data-markdown> [bjacob](http://people.mozilla.org/~bjacob/webgl-spotlight-js-2012/) * links on greggman </article> <!-- **************************************************************************** Geometry ******************************************************************************** --> <article data-markdown> Dynamic geometry TODO [examples to use](http://mrdoob.github.com/three.js/examples/webgl_geometry_dynamic.html) > <!-- **************************************************************************** Material ******************************************************************************** --> <article data-markdown> material TODO [examples to use](http://mrdoob.github.com/three.js/examples/webgl_geometry_dynamic.html) > <!-- **************************************************************************** Lights ******************************************************************************** --> <article data-markdown> # Lights </article> <article data-markdown> What is a light TODO to write </article> <article data-markdown> Which are available in three.js TODO to write </article> <article data-markdown> Casting shadow possible on hwich light how to do it ? </article> <!-- **************************************************************************** Shiny stuff ******************************************************************************** --> <article data-markdown> # Post Processing </article> <article data-markdown> what is it ? </article> <article data-markdown> what is available in three.js ? </article> <article data-markdown> how can they be used ? </article> <article data-markdown> links # Image processing [glfx](http://evanw.github.com/glfx.js/) </article> <!-- **************************************************************************** Input ******************************************************************************** --> <article data-markdown> User input webcam keyboard device orientation </article> <!-- **************************************************************************** Shader ******************************************************************************** --> <article data-markdown> # Shaders! </article> <article data-markdown> What are shaders "little code which run super fast on gpu" written in a kindof C called *glsl ES* Vertex shaders where to draw

  
fragment shaders which color to draw TODO see [greggman posts](http://games.greggman.com/game/tag/webgl/) on this </article> <article data-markdown> fragments shaders TODO [fullscreen on](http://mrdoob.github.com/three.js/examples/webgl_shader.html) * TODO [reused in 3d faces](http://mrdoob.github.com/three.js/examples/webgl_shader2.html) * Plenty to reuse [glsl sandbox](http://glsl.heroku.com/) * [nice eyes](http://glsl.heroku.com/e#3695.0) > <!-- **************************************************************************** The End ******************************************************************************** --> <article data-markdown> # *Questions ?* Jerome Etienne </article>

  <!-- ****************************************************************************
                  Admin Script
  ********************************************************************************* -->
          <script>
          // ==UserScript==
          // @name Use Markdown, sometimes, in your HTML.
          //
author: Paul Irish <paulirish.com/>
// gray http://git.io/data-markdown // @match * // ==/UserScript== // If you're not using this as a userscript just delete from this line up. It's cool, homey. (function markdownSlideToHtml(){ if (!window.Showdown){ var scr = document.createElement('script'); scr.onload = markdownSlideToHtml; scr.src = 'vendor/showdown.js'; document.body.appendChild(scr); return; } [].forEach.call(document.querySelectorAll('[data-markdown]'), function fn(elem){ // strip leading whitespace so it isn't evaluated as code //var text = elem.textContent.replace(/\n\s*\n/g,'\n'); // jerome- to have better support of html within markdown var text = elem.innerHTML; //console.log("origin innerHTML", text.split('\n')); // remove all blanks lines //text = text.replace(/\n\s*\n/g,'\n'); //console.log("step text", text) // set indentation level so your markdown can be indented within your HTML var matches = text.match(/^\n([ \t]*)/); var leadingws = matches[1].length; //console.log("first line", matches) //console.log("leadingws", leadingws) var regex = new RegExp('\\n[ \\t]{' + leadingws + '}','g'); var md = text.replace(regex,'\n'); //console.log("pre md", md); html = (new Showdown.converter()).makeHtml(md); //console.log("post html", html); // to support prettyprint html = html.replace(/<code><br \/>/g,'<pre class="prettyprint">'); html = html.replace(/<br \/><\/code>/g,'</pre>'); // unescape [><] html = html.replace(/&amp;gt;/g,'>'); html = html.replace(/&amp;lt;/g,'<'); //console.log("escaped html", html); // here, have sum HTML elem.innerHTML = html; }); // callback prettyprint to highlight code found in markdown prettyPrint(); }()); </script> <script>

//////////////////////////////////////////////////////////

// scan the whole webpage and replace url to their local location // - usefull to have local copy of the slides in conference when internet is unavailable // - and still have slides which works when internet is available // open -a "/Applications/Google Chrome.app" --args --disable-web-security --allow-file-access-from-file setTimeout(function(){ location.href.match(/^file:/) && jQuery('a').add('iframe').each(function(index, element){ var attrNames = { 'A' : 'href', 'IFRAME': 'src' }; var attrName = attrNames[element.nodeName]; var url = jQuery(element).attr(attrName); url = url.replace(/^http:\/\/jeromeetienne.github.com\/tquery\// , 'file://localhost/Users/jerome/webwork/tquery/') url = url.replace(/^http:\/\/jeromeetienne.github.com\/augmentedgesture.js\// , 'file://localhost/Users/jerome/webwork/augmentedgesture.js/') url = url.replace(/^http:\/\/jeromeetienne.github.com\/webaudio.js\// , 'file://localhost/Users/jerome/webwork/webaudio.js/') url = url.replace(/^http:\/\/jeromeetienne.github.com\/pongGL\//, 'file://localhost/Users/jerome/webwork/pongGL/') url = url.replace(/^http:\/\/jeromeetienne.github.com\/threex\//, 'file://localhost/Users/jerome/webwork/threex/') url = url.replace(/^http:\/\/learningthreejs.com\//, 'file://localhost/Users/jerome/webwork/learningthreejs.com/') url = url.replace(/\//, '/index.html') jQuery(element).attr(attrName, url); }) }, 100); </script> </body> </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.