100 likes | 251 Views
webGL for lazy dudes http://www.glge.org/ Janne Lautamäki. First Demo! . To attract interest and to show the most complex example http://www.glge.org/demos/leveldemo/ view-source:http://www.glge.org/demos/leveldemo/ 164 rows (110 rows of js)
E N D
webGL for lazy dudeshttp://www.glge.org/Janne Lautamäki GLGE – Janne Lautamäki
First Demo! To attract interest and to show the most complex example http://www.glge.org/demos/leveldemo/ view-source:http://www.glge.org/demos/leveldemo/ 164 rows (110 rows of js) view-source:http://www.glge.org/demos/leveldemo/level.xml 10 rows (light+camera) view-source:http://www.glge.org/demos/leveldemo/warfare.dae 3000 rows with a couple of really long lines 2500 KB 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: http://www.paulbrunt.co.uk/ • Education: Physics Bachelor of Science • Just turned to 30 year • Has created a lot of other stuff too: • Svg-flip: http://www.paulbrunt.co.uk/svgflip/ • Berts Breakdown: http://www.paulbrunt.co.uk/bert/ Give it a try lazy dudes! WEll even if its meant for lazy people, its pretty helpful for non-lazy web developers also! GLGE – Janne Lautamäki
GLGE Features: • Keyframe animation • Perpixel lighting directional lights, spot lights and point lights • Normal mapping • Animated materials • Skeletal animation(WIP) • Collada format support • Parallax Mapping • Text rendering(probably bitmap) • Fog • Depth Shadows • Shader based picking • Environment mapping • Reflections/Refractions • Collada Animations • Portals (via jiglibJS) Planed additions(pending no technical walls), not necassarilyin this order Shape keys LOD Culling 2D Filters Primitives Creation + Much more! GLGE – Janne Lautamäki
Documentation • API Documentation: • OK • ~50 classes with functions, APIs documented • Names of the classes are quite a good and descriptive • http://www.glge.org/api-docs/ • NOTHING ELSE • No drawings about architecture • No tutorial or quickstart tips • … • BUT: • Good demoes • Tutorials are availlable elsewhere http://www.rozengain.com/blog/2010/06/23/hands-on-webgl-basic-glge-tutorial/ GLGE – Janne Lautamäki
Components • Package • 8 JavaScript –files, total size 392KB • http://www.glge.org/api-docs/?url=/files.html • No documentation • glge.js Base for all things • glge_collada.js for manipulating collada models • glge_filter2d.js for making filters • glge_input.js mouse and key events • GLGE_math.js matrix and vector operations • glge_particles.js particle-effects (smoke etc.) • glge_quicknote ? • glge_wavefront.js ? GLGE – Janne Lautamäki
Minimal example • Project form eclipse: • HTML –file: • Import js libraries • Add canvas • create a GLGE document • Create onLoad callback function • create a new renderer • create a new scene • pass the scene to the renderer • load the xml containing the scene data • XML-file: • the mesh data is defined. The mesh data is exported from Blender • Then a camera is defined • Texture is defined • Animation is defined • Then the scene graph is defined • a simple point light • box primitive GLGE – Janne Lautamäki
MISC • License • BSD (3-clause license ("New BSD License" or "Modified BSD License") • Irc channel, email-list • Forum • Active • 136 threads, 388 posts,1230 registered users • Examples • 11 different examples • Other Projects • GammaJS, KataSpace, OutBricks, SteamCube (www.glge.org) • Evaluation • Quite a ok, some tutorials and more documentation would do the trick • It would be nice to try out and do a demo GLGE – Janne Lautamäki
Other demos Check out the rest of demoes GLGE – Janne Lautamäki
References + Questions Developer http://www.paulbrunt.co.uk/ Framework http://www.glge.org Tutorial http://www.rozengain.com/blog/2010/06/23/hands-on-webgl-basic-glge-tutorial/ GLGE – Janne Lautamäki