Flat shaded:
Diffuse and Emissive textured:
This is a very minimal implementation of WebGL ported to run with node.js/npm modules. The code is only about 26k without the textures. It's completely inspired by the techniques demonstrated by Erik Möller's fantastic 2.5 hour video on YouTube WebGL 101, the vast majority of code is all Erik's i have just added a few node.js things to make it easier to deploy with the command npm install webgl-sandbox
, ( i have included Erik's original license in the repo ), also follow the links to additional resources if you are interested in getting started using WebGL in the browser.
There are 2 Blender model exporters included in public/scripts
to run them you need to to use 2 commands in the Blender Python Console
:
- exec(open('/path/to/script/export_webgl101.py').read())
- exportWebGL101('ModelName', '/path/to/exported/model/files/modelname.json') change the model name in the 2nd command to select a model from the Blender scene
The WebGL 101 samples are available live at
- http://emoller.github.com/WebGL101/01-minimal.html
- http://emoller.github.com/WebGL101/02-minimal-draw.html
- http://emoller.github.com/WebGL101/03-minimal-shader.html
- http://emoller.github.com/WebGL101/04-fragmentshader.html
- http://emoller.github.com/WebGL101/05-texturing.html
- http://emoller.github.com/WebGL101/06-xhr-shaders.html
- http://emoller.github.com/WebGL101/07-xhr-mesh.html
- http://emoller.github.com/WebGL101/08-flat-shading.html
- http://emoller.github.com/WebGL101/09-leaving-flatland.html
- http://emoller.github.com/WebGL101/10-perspective-projection.html
- http://emoller.github.com/WebGL101/11-camera.html
- http://emoller.github.com/WebGL101/12-scene-graph.html
- http://emoller.github.com/WebGL101/13-textured-mesh.html
- http://emoller.github.com/WebGL101/14-real-mesh.html
The two slides from the video are available at
- http://emoller.github.com/WebGL101/documents/opengl-timeline.html
- http://emoller.github.com/WebGL101/documents/programmable-pipeline.html