Experients

Wobbleton

Wobbleton is a stylized building toy inspired by Townscaper and Dr. Seuss. Play here.

The toy lets users fill and clear cells in a 3D grid which results in a building. When the grid is updated, meshes are generated to fit the 3D grid. The positions and normals of the meshes are distorted by a perlin noise field to achieve a dr seuss-like effect. Because the meshes are distorted directly instead of through a shader, we can use them as mesh colliders to handle player interaction. This perlin noise field is used to transform the positions of smaller objects and particle effects as well.

The meshes used to fill the 3D grid are chosen through wave function collapse (WFC). One at a time, pieces are randomly chosen that can fit in the gaps of the parts of the 3D grid that were modified. Then, any old pieces that were in the way are removed and any remaining gaps from that are filled in. To determine if a piece can fit in a particular location, each piece has a list of cells relative to its origin that must be filled or empty. Pieces can be rotated 90 degrees on the Y axis, so each piece has four possible configurations for its filled and empty cells.

Two grids are used to represent the building, an occupancy grid and an asset grid. The occupancy grid stores bool values for whether a cell is filled or not. The asset grid holds references to the meshes spawned in the world. The structure of the grid went through two iterations. First, a grid the same size as the occupancy grid was used which had references to all 6 faces of each cell. However this complicated the WFC code because faces needed to be explicitly specified, so the asset grid was updated to be twice as large as the occupancy grid and pointed to the meshes directly. An individual cell in this grid could refer to the center of a cell, a face, an edge, or a corner of a mesh depending on its location. This let the WFC code iterate over the assets uniformly.

A rippling effect happens through the structure when you add or remove a block. This was accomplished with a vertex shader, which uses a position at the center of the target block and distorts the mesh at a given radius away from the center, which increases over time. The animation of the particles when you remove a block are also driven by a shader, which simulates a light moving over a sphere. A third party shader was used for the outline effect.