WebGL
WebGL is a technology supported by major browsers that aims to bring 3D-graphics to the browser without the need for plugins such as Flash. It is based on OpenGL and, as such, is supported on a wide array of systems; including decent mobile devices. Below are various incremental versions of a test project that I've been working on.
Note: you can use the arrow keys (or WASD) to move around in the 3D world in most of these examples.
Most examples are best viewed with Chrome/Firefox on a decent laptop/desktop, mobile devices may also work to some extent.
- April 26 2015: rendering basic geometry with WebGL
- April 27 2015: rendering simple meshes exported with Blender (.obj) with WebGL
- May 2 2015: rendering colored meshes from Blender (.ply) with WebGL + code restructuring
- May 23 2015: implemented very basic picking with WebGL, performance still needs to be improved
- May 25 2015: allowed picking of grid tiles
- May 31 2015: improved the picking performance
- June 1 2015: camera edits and grid movement
- June 3 2015: rendering basic textured terrain with WebGL
- December 6 2015: rendering the geometry from a Collada file exported with Blender (.dae) with WebGL
- December 7 2015: rendering a textured model exported with Blender (.dae) with WebGL *
- December 13 2015: using joints to manipulate groups of vertices within a mesh with WebGL *
- December 18 2015: first animation, a wolf with a moving tail *
- December 29 2015: loading and rendering an animated object from a Collada file *
- January 2 2016: using WebGL to render text on fixed positions on the screen and in the 3D world (facing the camera without perspective, basically billboarding + orthogonal projection)
- January 4 2016: switched to using HTML for overlay texts and added basic lightning support (currently only point lights) *
- January 18 2016: added a basic A* pathfinding algorithm and started work on ray casting for picking in the world editor (is still buggy)
- January 18 2016: early steps of terrain generation
- January 21 2016: terrain generation with per vertex normals (instead of per face) for smoother lightning
- January 23 2016: pathfinding in 3D world (currently moves along face edges as long as the Z difference is not too big)
- February 8 2016: using an octree and ray casting for fast picking of many selectable items
- February 13 2016: updating and pruning an octree with moving objects inside
- March 5 2016: beginnings of a world editor, adding hills and valleys, smoothing surfaces
- May 4 2016: walking character (click on the terrain to move the character and watch it switch between a walking and an idle state)
- May 9 2016: beat up the other dude
- July 22 2018: converted to TypeScript and carrying a stickman (joint attachments)
- August 22 2018: lots of changes, bone animation matrices are now loaded from a data texture instead of (lots of) uniforms, major changes to path finding, a navigation mesh is now generated (realtime at the moment, note the slow loading and high memory usage)
- August 28 2018: loading geometry and navigation graph from file (much faster and memory efficient), conditional gates in the path finding graph (beat the door guard to open the door), smoother height transitions, and better terrain picking.
- August 31 2018: loading the scene as a single file, with compression enabled. Generalized the path finding and movement code so entities can now wander around the map.
- September 2 2018: updates to the demo map (fiddling with simplex noise for map generation) and added a skybox.
- September 10 2018: larger demo map and improvements to navigation mesh generation.
- September 12 2018: using a dynamic sub-graph to find an optimal route in the coarse path found by pathfinding (essentially an extra layer of pathfinding).
- October 5 2019: converted to an Angular project with Webpack. Now loading the basics of the Crytek Sponza test scene.
- April 3 2020: Fixed dynamic lightning for animated model.
- April 5 2020: Added spot lights and added fading limits to lights.
- April 24 2020: Added basic shadow mapping.
- May 10 2020: Added shadow mapped cube textures. Rendered real-time in this example so framerate may be low.
* The wolf model is taken from TF3DM.com. I use it to test my Collada file processor and WebGL-renderer.
Some of the textures used in these examples were taken from Texturelib.com.
Skybox images taken from http://www.humus.name and Jockum Skoglund.