Scenario World Builder - HU-ICT-LAB/WebVR-Demo Wiki


This showcase has been made by Floris Videler ([email protected]) and Shahin Basht Bavian ([email protected]). And we choose to work on a small world builder showcase. This because we think this shows both a lot of components of SD but also some of AI. In this showcase you can walk around in a flat area or a random generated terrain and place or delete blocks to your heart's content. Now this showcase is a sort of game, however this could also be a architects tool to help build and design houses! But for now it's a game to attract new students.


For this showcase, we added a lot of features which will be shown in this section and will be explained in more details.

Perlin Noise

Connected issues: Basic world / map generation algorithm We wanted to generate a random terrain, this because else all the worlds would lookalike. But before we could get started on generating random terrain we had to find an algorithm to generate a height map we could turn into a 3D object. We choose Perlin noise. The reason for this is that this is one of the most used terrain generation algorithms and there are the most sources available. This doesn't mean that this makes it an easy algorithm, to get a better understanding we used a lot of blogs and articles: Understanding Perlin Noise & Perlin Noise: A Procedural Generation Algorithm are the most used.

After struggling for a while getting the algorithm to work in JavaScript, we got a 2D demo working. You can see this in the image below

Perlin noise 2D demo

Terrain generation

Connected issues: Map / world generation algoritme implementeren in A frame Now that we have a 2D map we need to make it a 3D terrain. We can do this by using the 2D map as a height map to create a 3D model. This turned out harder than expected. The plan was to create a plane and edit the vertices as shown on this page A-frame geometry. However this wasn't possible anymore, the underlying 3D rendered Three.js changed the way vertices can be changed on a plane. This had mostly to do with performance, you can only edit the buffer. After getting the hang of this we were able to generate a 3D terrain.

Perlin noise 3D terrain demo

Playable area

Connected issues: Make the game playable in random generated terrain, Make generated terrain on playing level, Smooth playing area of random terrain As you saw we have a 3D terrain, however we need it to be flat in the middle. This is the area where the player can build or play. As of now we carve out a square. This will add a lot more life to the showcase. Terrain with playable area

Smoothing a 3d terrain only in a specific area was harder than expected. There is a first version of terrain smoothing around the playable area. We smooth the terrain by looking at the surrounding pixels of the playable area and getting the average of those. We do this till the edge has reached the playable level. INSERT PICTURE HERE.


Raycaster is a component that provides line-based intersection testing with a Raycaster. Raycasting is a method of extending a line from an origin towards a direction to check whether the line intersects with other entities. Using this method helped us to create the functions for add, snap and delete objects.

Add objects with right-hand controller

Connected issues: Add object To be able to add objects to the world we had to add a function to the right-hand controller. To do that we used a method called Raycaster to get the position of where the joystick faced and created a function to get the position from Raycaster and add an object in that position. For objects we use a-mixin which is a reusable bundle of components and we can use it to create voxels which is an object like a box but attached with a few custom a frame attachments.

Adding objects

Snap objects together

Connected issues: Snap object To be able to snap objects together we had to add a function to the block so they can snap together. To do that we used the Raycaster method to get the position of the block and make a grid and add a block next to the other block or on top of the other block.

Snapping objects

Delete an object with left-hand controller

Connected issues: delete object After adding objects we wanted to make it possible to remove objects with left-hand controller. To do that we used the Raycaster method to get the object and remove it from the scene.

Deleting objects

Change Color

To make the game even more fun for players we decided to add a function to change the color of blocks so they can have more space to be creative. To make this function we used a collection of colors to and we cycle through it to change the color of blocks.

Random textures

Random textures


Trees in game

Known bugs and limitations