Graphics Engine Development

three.js Graphics Engine

This week, I spent the majority of my time developing a basic graphics engine using three.js.

Kubus graphics engine running standalone

I set up a three.js application in a modularized way that can be easily inserted into a larger HTML structure. Currently, the entire application runs from one JavaScript file which is executed from within the canvas wrapper HTML element. 

Kubus graphics engine running inside the first iteration of our web application page

I've placed my basic engine in the first iteration of our web application front end page. Next steps include creating interactions between the UI elements and the canvas itself.

three.js setup

This code sets up the three.js framework (the scene, camera and renderer objects) and performs several other setup tasks. I had to write a function to take care of canvas sizing in case the browser window was resized (responsivity). This function (updateCanvasSize()) as well as others are defined below.

Containers for design elements

These variables will contain a library of defined resources that users will use to construct their designs. This format makes it easy to add new resources as well as determine which array elements each belong to (for use with user triggered events later in development).

Helper functions

These helper functions (like updateCanvasSize() as mentioned earlier) support the application's functionality and are largely used within the render() function.

Render function

render() is three.js' update/draw loop and is called at the very end of the script. Any code in this function will be updated every frame of the application (by default, 60 fps). So far, I simply have example functionality written into the engine to prove that it works.

Instructions:

• press a to add a new slender cube to the scene
• press m to toggle object movement

Graphics Engine Design

The engine is designed to deal with graphical elements in the following way:

1. on receiving user input, append a new code object into the draw_list (persistent list of scene data)
2. call updateDrawList() which constructs the three.js Scene object
3. update the data of any existing items in the draw_list
4. render the scene with the camera

In retrospect, a better name for updateDrawList() is reconstructScene(), since it's actually preparing the scene data that three.js will render (as opposed to performing any action on the draw_list variable).

Something that I don't completely understand is how (if the renderable scene object is only reconstructed every time a new object is added) does changes to draw_list elements (rotation in this my example) actually effect the objects that were previously added to the scene. I figure this is because data is by default passed and assigned as references in JavaScript, but I need to research this a bit more to understand fully how this is actually working.