# *WegGL API isn't Webby* ? *tQuery* !! #### a Different Way to Advocate WebGL ## Jerome Etienne

Who Am I

coder, speaker, trainer
Javascript, Node.js, WebGL and other HTML5 games stuff

Learning Three.js

Author of learningthreejs blog
Lists of three.js tutorials or "WebGL for dummies"

Contacts

@jerome_etienne on twitter, jeromeetienne on github

### What We Gonna Talk About ? #### Advocating *WebGL is Hard* * Reasons, Audiences #### Libraries as *Possible Solutions* * How libraries can help? #### Relation with *tQuery Library* * My take on this issue * how it fit in all that ?

### Is It Needed? *Yes* Advocating WebGL is Needed! #### Unprecedented Rendering Quality * no other web layer is even close * Canvas 2D is a century away #### Way under used * Many people want to know * it should be everywhere e.g. in game * but it is nowhere

### So Why it is hard? #### Issue in WebGL advocacy 1. Varied audience, Devs origin 1. API unsuitable to normal webdev

# *Audience* ## Who are we talking to ?

### Possible Audiences #### Identified 2 audiences * Where do they come from when they reach WebGL ? #### OpenGL personn * Coming *from Desktop world* #### WebDev personn * Coming *from Web World*

### Audience: *From OpenGL* #### *Profile* Estimation * experienced coder * already knows 3D concepts #### *Perception* of WebGL * typically don't know Web techs * May even reject javascript * perceived as messy and slow * ok righfully ;) [wtfjs](http://wtfjs.com/)

### Audience: *From the Web* #### *Profile* estimation * typically less experienced coder * Not confortable with 3D concepts #### *Perception* of WebGL * complex (pipeline/new vocabulary) * full of scary math * So verbose and hard to learn

### Advocacy *Needs* #### Who: *OpenGL personn* #### Not Much Needs * need to go beyond cultural choc * "just" have to learn web tech * quite simple techs * come on, js isn't that horrendous!

### Advocacy *Needs* #### Who: *OpenGL personn* #### How to help them with WebGL ? * They already knows all the hard parts * 3D concept, experienced coder * **Actual need :** to learn the web #### How to learn the Web * Already covered by Normal Web Tutorials. * Many already exists.

### Advocacy *Needs* #### Who: *WebGL personn* #### More needs - Lot more to learn. * need to go beyond "Math are scary" * to understand 3d concepts * to learn WebGL mechanism and API

### WegGL from old time * WebGL comes from OpenGL * 1992 by sgi * it is old in Web Time * Web was barely alive at the time * 1990 : publication of Hypertext paper => *Not insync with WebDevs Culture*

### Random Numbers #### From [learningwebgl](http://learningwebgl.com/blog/) tutorials #### a triangle and a square * [post](http://learningwebgl.com/blog/?p=28) / [demo](http://learningwebgl.com/lessons/lesson01/index.html) * in 2d - pure white * *200 lines!!* #### a box and a texture * [post](http://learningwebgl.com/blog/?p=684) / [demo](http://learningwebgl.com/lessons/lesson07/index.html) * *500 lines!!*

### WebGL is Low Level #### Origin * designed for hardware accelerated graphic * Talk to the hardware directly #### Fitness ? * Uses a logic foreign to common WebDevs * Usual Web API are far more abstract * cf. canvas2D

### WegGL API Status * WebGL is Old * WebGL is Low Level * WebGL is Verbose => *Not Suitable for Webdevs Culture*

### Let's Make WebGL Webby #### WebGL is Old ? * So let's make *a modern API* #### WebGL is Low Level ? * So let's make *a high level API* #### WebGL is Verbose ? * So let's make *a eloquent API* => *Seems nice, let's try*

tQuery

three.js power + jQuery API Usability

My Try to make WebGL more Reachable

### *t*hree.js + j*Query* #### Goal: *Bring 3D to non specialists* #### three.js power * actively developped by a team of skilled dev * significant community around three.js * Very popular #### jQuery API usability * successful plugin ecosystem * Very popular (85% market share?)

### tQuery is on top of three.js #### three.js is *Already a simplication of WebGL* #### *Thin Layer* on top of three.js * three.js : 100k min+gzip * tQuery.js : 8k min+gzip #### *Dumb library* on top of three.js * Different API, Different defaults * Same Semantic * Both works well together * Easy to go in/out tQuery and three.js

### tQuery Mimics jQuery API #### Motivation * It makes tQuery very easy to learn if you know jQuery * => So *very important* #### Principles * "Copy jquery API whenever possible" * helpers may be provided, but jquery is the auhority

### In Bed with *jQuery* #### Key aspects of jQuery * DOM tree from webpages * Chained API * ID and Class * CSS-like selector * DOM events #### *All Present in tQuery too!*

### Some *Features plugins* #### 4 featured plugins among 45 #### Nice to experience tQuery * How does it react in the field

### a Sport Car 40 lines of js - [Demo](http://jeromeetienne.github.com/tquery/plugins/car/examples/)

### a minecraft guy 20 lines of js - [Demo](http://jeromeetienne.github.com/tquery/plugins/minecraft/examples/)

### Dom Events [Demo](http://jeromeetienne.github.com/threex/examples/threex.domevent/)

### a 3D Pong 300 lines of js - [Demo](http://jeromeetienne.github.com/pongGL/index.html)

### *Minimal* Page - [live coding](http://jeromeetienne.github.com/tquery/www/live/editor/index.html) ``` < !doctype html>Minimal tQuery Page ``` #### Fun Facts * Full HTML5 page * Valid HTML5 * only 6-lines

### *Minimal* Page - [Demo](http://jeromeetienne.github.com/tquery/plugins/minimal/examples/)

### tQuery *Produces Short Code* #### *Plugins* make code shorter * [Don't Repeat Yourself](http://en.wikipedia.org/wiki/Don%27t_Repeat_Yourself) principle. * [Convention over configuration](http://en.wikipedia.org/wiki/Convention_over_configuration): thus coders don't need to specify the same things over and over #### *Mimicking jQuery API* makes code shorter * thanks to chained API and reasonable defaults * shorter code is faster to learn and write.

### Plugins *helps Reuse Code* #### Hope to reproduce success of jQuery plugins ecosystem #### "When a plugin already exists..." * i dont have to learn how to code it, and to actually code it * i can use it without fully understanding it * i code faster

### tQuery is *Simple to Teach* #### Minick jQuery API * Very Webby API as copied from jQuery * More natural to WebDevs #### Less things to learn * jQuery syntax is already known * Less Math requirement thanks to three.js * limited to 3D positions/rotations * DOM Concept is already known

### What remains *to Learn* #### WebDevs still needs to learn stuff * WebGL concepts * for advanced usage or top performance * Modeling in 3d * How to get assets * Physics * Always a trouble in 3D

### tQuery seems a good recipe #### tQuery provides a *much smoother contact to WebGL* * So Easier to advocate #### What is the recipe * provide familiar API * a nice plugins system #### All thanks to "*t*hree.js power + j*Query* Usability"