topical media & game development
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(/&gt;/g,'>');
html = html.replace(/&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
//
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.