Other Room purpose was to build a meditative scene that users could project on a wall at home to create the illusion of a another room just beyond the wall. To avoid creating a stressing experience the interaction would consist only of sound, the scene slightly changing depending on the current volume. Thus the user could put on their favorite harmonic music and watch the assets of the other room sway to the gentle music.

We wanted to create this room inside WebGL with Three.js to allow for us to learn graphics on a deeper level and focus more on the three individual graphics elements we each wanted to work on, fire, water and artistic rendering. We purposely left the interaction simple to give us more time to study and implement our individual projects.

This project was a part of the Advanced graphics and interaction 2015 course at KTH.

Challenges and learning

The biggest challenge for us three was learning WebGL and Three.js, since we all lacked any major experience with this these two. WebGL is a powerful graphical engine and studying it gave us insights into how the internal graphical pipeline functioned (transforming the 3d scene into a 2d image), but it took time to understand new concepts and terms. Three.js helped in this learning process since it packages many of the WebGL functions in a more beginner friendly API.

To add to the challenge we wanted to get a taste of either state of the art graphic elements or at least very advanced ones, and try to implement as much as we could of it into our scene.

Things we learned under the process consisted of tasks such as:

Individual Work

Artistic Rendering by Mikael

Artistic rendering can be achieved in many ways, through for example post editing the created 2d image, or as in our case, edit the actual 3d scene before it is rendered. The purpose it to make a scene look aesthetically pleasing, often by mimicking features of real hand drawn paintings, and can be considered a branch within non-photorealistic rendering (NPR). My shoot at artistic rendering consist of mimicking the work of Kaplan et al. (2000), which uses geografatals (dynamically generated particles) attached to the faces of a 3d object to create a hand drawn effect or textured effect. We decided in the end against including artistic rendering in the scene, but some examples of the result I achieved can be seen here:

Fire by Lennart

Fire can look and feel so different depending on what type of fire you are after. The way we were trying to create it is by using Perlin Noise together with deformation of a figure that is to represent fire. By altering variables like Lacunarity, Gain and noise in all directions, we could get fires that differentiate alot and gives a whole range of possibilites on macro-level. This example follows the paper "Real-time Procedural Volumetric Fire (2007) by Alfred R. Fuller, and code for 3D noise algorithm is from Ashima's GitHub Together with this there is also a simple particle system to add smoke and small fire particles to give it extra depth of behaving like fire does. The result of some varying fires can be seen below:

Water by Huiting

Within the Graphics pipeline architecture, shading is the overwhelming key for rendering water. There are two types of shaders in Three.js, vertex shaders and fragment shaders. Vertex shaders define the final position of the vertex on screen while fragment shaders define colors, textures and lightings. My work follows the example of Jonas Wagner (2012), learning to simulate the basic characteristics of water: waves, reflection, refraction, absorption, scattering, etc. Examples for different wave shapes rendering:


Lennart J├Ânsson
Human Computer Interaction

Huiting Wang
Human Computer Interaction

Mikael Eriksson
Computer Science