Overview
When I heard about WebGL, I thought it would be a great idea to make something with it for my portfolio. Initially, I wrote the renderer. Forward rendering, 3D. After I had completed the renderer, I decided to add an Entity Component System to provide a space for game (client) code and an abstraction layer to sit on top of the renderer, I/O manager, Physics engine etc.
The project as you see it now is made of three parts. A renderer, a physics engine (Cannon.js) and an ECS pulling them together.
Javascript was a very strange language to write in. I wanted to write in an object-oriented manner for a couple of reasons, so after skimming through Learning JavaScript Design Patterns I imposed a kind of object-oriented style on my project.
Besides familiarity, I really wanted access to polymorphism for the implementation of the Entity Component System. ECS is a very simple pattern that relies on iterating 2 types: GameObjects and Components. GameObject doesn't need to be derivable; it's essentially a collection of components and a bit of meta information. Components, on the other hand are most easily implemented via polymorphism. Components provide all game functionality within an ECS. Some cruical components will be provided along with the engine, but most will be written by clients writing their own game. In order to provide a common interface to the engine for all these unknown component types, I wanted to define a base type "Component" and have all real components implement this component type.
Once the ECS was up and running, I decided to add some physics. I looked around the internet for javascript rigidbody libraries and found Cannon.js to be particularly well documented and with a straightforward API.
So thats it. The ECS provides a place for game logic to be written and simplifies working with the renderer and physics simulation. Connecting the game logic to the renderer is the Mesh component, which holds model (VBO, IBO) and material data (Shader program handle, uniform data). Connecting game logic to the physics simulation is the Rigidbody component. Rigidbody retains a reference to an object within the physics simulation and provides accessors to certain properties of that object. The final basic component is Transform, which holds the model matrix and methods for translation, rotation, scaling.