3D Architecture

Swipe Up, Down, Left, Right. Tap: See New Rooms

Swipe Up, Down, Left, Right. Tap: See New Rooms

House Features

Living Room

The 3D living room includes a soft sofa with pillows, area rug on hardwood, sliding glass doors, deck, track lights, marble table and flat screen TV.

Bath

The 3D bathroom includes glass shower doors, marble vanity, marble trimmed tub and washbasin. Hanging lights create reflections off the glass shower doors. The floor features blue ceramic tile.

Bedroom

Bedroom style and palette provide consistency with the rest of the house, including hardwood floors, french doors on the closet, beautiful exterior view, blue and muted gray walls with soft blue comforter.

House Prepared from Blueprints

The tiny house was modeled and rendered with 3ds Max. Each model was mapped with consistent styles and palette. However with 3D models it's easy to change color schemes quickly.

WebGL Optimization

Most architecture renders online mapped to the inside of a cube or sphere. There's no need to download an entire room with mesh elements, vertices and individual textures for each element. Cubes and spheres look awesome, display and download quickly.

Optimized Code: Efficiency

This app uses a number of techniques to load quickly and run efficiently. Cubic views, one model for all views, render to texture (RTT) and rapid texture changes with pre-loaded registers, increase speed and decrease download time.

Cube View

Each view is actually a cube that is texture mapped with a rendering of the current scene. You're viewing scenes, or rooms, from inside a cube. Shapes were modeled and mapped with 3ds Max then exported as cubic views.

One Model

One cube displays for every view in this app. Only one cube's required to display every frame and every scene. The cube for this example uses just eight vertices. The vertices for a fully modeled room or background would require hundreds of thousands of vertices.

Additionally each scene would require a different set of vertices. The app would need to download multiple 3D models. Cube views require millions fewer vertices than architectural or environmental models, which allows a much faster download and initialization time.

RTT

Each view, scene, environment or room was modeled and mapped with 3ds Max. Similar models often require scores of texture maps. However with 3ds Max, all texture maps were combined into one image with the render to texture (RTT) feature.

With render to texture only one texture image is downloaded for each view, allowing for faster viewing.

Tap - Change Views

Every scene in this app's pre-loaded into a register. When you interact with this app, changes to the view process with fast and simple register switches.

Interactivity's coordinated between JavaScript and WebGL shaders. First this application loads image data, for each view, into a set of GPU registers. Samplers access image data from those registers, during the run time of this app's shaders.

Tap the canvas then JavaScript with WebGL, changes the register that one or more samplers in the fragment shader access.

The fragment shader processes that image data and sends it out to render, or display, on this canvas. Therefore changing the register that samplers access, changes the scene you're viewing. This allows you to see views fade into each other.

3ds Max

Every element in this online house was modeled, mapped or modified with 3ds Max. Small adjustments were applied with Photoshop.

I modeled and mapped the deck, curtains, kitchenette, cupboards, marble bathroom vanity with mirror, bath with reflective sliding glass door, painting, bed with pillows and mattress, chrome washer and dryer, built-in shelving, trim, hardwood floors and structure of the house, from floor plans.

Blueprint

Modifications

The final model included a few modifications from the blueprint.

In the living room sliding glass doors replace French doors. A deck displays outside the sliding glass doors. The kitchen area's a simple counter top with some cupboards. A flat screen TV replaces the front two windows.

The bedroom replaces French doors with a large window.