Massing Production

Project:

Date:

Team:

Credit:

Keywords:

A Web Development Tool for Generating Massings

2022.8-2022.9

Biru Cao, Maoran Sun

Pengcheng Sun, Yuebin Dong

Web development, JavaScript, AR

In the early design stages in architecture design or urban design, such as concept design, the massing study is often the main focus. The general workflow of generating a schematic massing often involves the back-and-forth work between 2D and 3D, sketching and modeling, which is quite time-consuming and not effective enough because of the transition between dimensions, software, and materials. This less productive workflow also leads to the impreciseness of delivering concepts because of the loss of information during transitions. To address the pain points, this tool aims to develop a more intuitive way of input by sketching on touch tablets’ screens and makes it easier to perceive building volumes with Augmented Reality.

Problem Research

Commonly used tools for architecture concept design phase

Proposal

Project architecture

From the background research on the conceptual design phase of architecture, its importance could be addressed. Moreover, most architecture students start concept design with pen and pencil sketches for generating rough and quick designs, followed by 2D digital modeling in software such as AutoCAD. Finally, 3D modeling in software such as Rhino leads to massing. Furthermore, some people use physical models to test the massing in the site and adjust its scale.

Design concept

Workflow

This project tries to shorten the ordinary routine to a workflow directly from 2D hand sketches to 3D digital models. The 2D space, 3D space and VR space work together for generating a well -round and high-efficient design environment.

Design

User interface

This tool is web-based so it could be run on any touch-captive device. The user interface is designed as simple as possible to save the most screen space for canvas and make users focus more on their design. The page is split into two sections and the ratio between the two could be adjusted, the upper one is for users to sketch on, and the lower one is for 3d model display. The side buttons are for mode selection and layer operations, the toolbar in the middle is for program and height selection. Users could draw in two modes: free form and orthogonal, and in both modes, a void geometry could be subtracted from the existing buildings. When 2D shapes and 3D volumes are generated, users could drag or delete them to revise the design.

1. Choose program and height

2. Polygons are formed with 4 lines

3. Generate geometries

4. Select and move the shape on 2D canvas

5. Select and delete the shape on 2D canvas

6. Create geometries on a new layer

User manual

Orthographic mode

Drawing void mode

AR Display

The workflow architecture consists of three elements: a tangible user interface for designers to input plans with hand drawings on the canvas, a 3D space for displaying the geometries based on the user’s input, and an augmented reality environment for viewing the design on top of physical models.

Drawing void mode

Physical model with marker

# Setup AR Toolkit Source
arToolkitSource = new THREEx.ArToolkitSource({
sourceType : ‘webcam’,
});
# Setup AR Toolkit Context
arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: ‘https://ratpvisualtest.s3.amazonaws.com/camera_para.dat’,
detectionMode: ‘mono’
});
# Build marker controls
markerRoot1 = new THREE.Group();
let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
type: ‘pattern’, patternUrl: “https://ratpvisualtest.s3.amazonaws.com/cube.patt”,
});

Real-time displaying model with AR

Contents