Embed Size (px)
Citation preview
webGL for lazy dudeshttp://www.glge.org/
Janne Lautamäki
1
GLGE – Janne Lautamäki 19.04.23
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
2
GLGE – Janne Lautamäki 19.04.23
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/
3
GLGE – Janne Lautamäki 19.04.23
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 19.04.23
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• 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/
5
GLGE – Janne Lautamäki 19.04.23
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 ?
6
GLGE – Janne Lautamäki 19.04.23
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 19.04.23
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
8
GLGE – Janne Lautamäki 19.04.23
Other demos
Check out the rest of demoes
9
GLGE – Janne Lautamäki 19.04.23
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/
10
GLGE – Janne Lautamäki 19.04.23
