webGL for lazy dudes Janne Lautamäki 1 GLGE – Janne Lautamäki

First Demo! To attract interest and to show the most complex example view-source: 164 rows (110 rows of js) view-source: 10 rows (light+camera) view-source: rows with a couple of really long lines 2500 KB 2 GLGE – Janne Lautamäki

About GLGE JavaScript library intended to ease the use of WebGL Under heavy development. Version 0.8 Attempting to add at least one big feature a month Created by one man: Paul Brunt: Education: Physics Bachelor of Science Just turned to 30 year Has created a lot of other stuff too: Svg-flip: Berts Breakdown: 3 GLGE – Janne Lautamäki Give it a try lazy dudes! WEll even if its meant for lazy people, its pretty helpful for non-lazy web developers also!

GLGE Features: 1.Keyframe animation 2.Perpixel lighting directional lights, spot lights and point lights 3.Normal mapping 4.Animated materials 5.Skeletal animation(WIP) 6.Collada format support 7.Parallax Mapping 8.Text rendering(probably bitmap) 9.Fog 10.Depth Shadows 11.Shader based picking 12.Environment mapping 13.Reflections/Refractions 14.Collada Animations 15.Portals (via jiglibJS) 4 GLGE – Janne Lautamäki Planed additions(pending no technical walls), not necassarily in this order 1.Shape keys 2.LOD 3.Culling 4.2D Filters 5.Primitives Creation 6.+ Much more!

Documentation API Documentation: OK ~50 classes with functions, APIs documented Names of the classes are quite a good and descriptive NOTHING ELSE No drawings about architecture No tutorial or quickstart tips … BUT: Good demoes Tutorials are availlable elsewhere glge-tutorial/ 5 GLGE – Janne Lautamäki

Components Package 8 JavaScript –files, total size 392KB No documentation glge.jsBase for all things glge_collada.jsfor manipulating collada models glge_filter2d.jsfor making filters glge_input.jsmouse and key events GLGE_math.jsmatrix and vector operations glge_particles.jsparticle-effects (smoke etc.) glge_quicknote? glge_wavefront.js? 6 GLGE – Janne Lautamäki

Minimal example Project form eclipse: HTML –file: 1.Import js libraries 2.Add canvas 3.create a GLGE document 4.Create onLoad callback function 5.create a new renderer 6.create a new scene 7.pass the scene to the renderer 8.load the xml containing the scene data XML-file: 1.the mesh data is defined. The mesh data is exported from Blender 2.Then a camera is defined 3.Texture is defined 4.Animation is defined 5.Then the scene graph is defined 6.a simple point light 7.box primitive 7 GLGE – Janne Lautamäki

MISC License BSD (3-clause license ("New BSD License" or "Modified BSD License") Irc channel, -list Forum Active 136 threads, 388 posts,1230 registered users Examples 11 different examples Other Projects GammaJS, KataSpace, OutBricks, SteamCube ( Evaluation Quite a ok, some tutorials and more documentation would do the trick It would be nice to try out and do a demo 8 GLGE – Janne Lautamäki

Other demos Check out the rest of demoes 9 GLGE – Janne Lautamäki

References + Questions Developer Framework Tutorial glge-tutorial/ 10 GLGE – Janne Lautamäki