Floorplanner's adventures in foam

Rendering interior designs at 4K in only a couple of minutes


The rendered interior designs on Roomstyler are by default 640 x 480px, and they are free. When you need more pixels we offer renderings at a higher resolution for a couple of euros, either 1280 x 960px or 2048 x 1536px.

With our new hardware – adding machines on a regular basis – we want to create better images in less time. For this experiment we wanted to render an interior design at an Ultra HD resolution of 3840 x 2180px aka ‘4K’ or ‘2160p’. And we wanted to render it under 5 minutes!

I’m very pleased to say that this experiment turned out even better than we anticipated! Have a look at these results which have been rendered in only a couple of minutes.

Rendering at a 4K resolution is not ready for production at the moment, but we will keep working on it to be able to offer it to our community soon.

Architectural Sections

cross section, also simply called a section, represents a vertical plane cut through the object, in the same way as a floor plan is a horizontal section viewed from the top. — WikiPedia

Well we don’t have the vertical ones yet, but even the horizontal ones proved to be very helpful when visualizing living space.  Without them, much of the interior is occluded by walls, and you have to take a bird’s eye view to see what’s in.


Now the procedural geometry that our walls are made of is tricky in itself. Luckily the approach that we took to make it, allows us to create and render architectural sections rather easily. The trick is to use the geometry as a set of surfaces, and apply set theoretic boolean operations on these sets: union, subtraction, intersection.


Ordinary floorplan…


…minus a box…


…et voilà!

That’s it, we just need to create a box covering all walls, with its ground facing face elevated where we want our section to be, then simply subtract this box from every (or all) the walls.

HTML5 floorplan viewer renders 2D view a lot faster

A lot faster than our current Flash floorplan viewer that is. Try it out yourself with this massive floorplan.

Btw. our WebGL engine is not fully up for this task of rendering this floorplan in 3D (yet).

New (beta) HTML5 2D/3D floorplan viewer available for all floorplans

We made a fair bit of progress with our new HTML5 floorplan viewer app. Last time the 3D view (WebGL) was only available in a test app, but now we merged it with the 2D view (Canvas) to create an actual viewer app.

As the title suggests, you can open any floorplan on in the new floorplan viewer app. It’s not in production yet, but you can get it by manually adjusting the URL. Make sure the URL looks like this:{projectID}/desktop

You can see two samples of random floorplans here:

Please try it out yourself and if you encounter any issue let me know.

How to install RVM, Ruby, Rails, MySQL, MongoDB on Mac OSX Mavericks

Installing Ruby on Rails on a Mac can be a daunting task. From 10.6 to 10.9, I’ve been through all the issues. Starting with mac ports and all kinds of ruby installers. I’m going to explain how to setup the rails environment as easy as possible. We’re going to start with a clean Mavericks install, so we don’t have any conflicts with already installed software.

Step 1. Install Homebrew

Homebrew is a package manager for the Mac. Just like you have apt or yum on linux. It can install all sorts of applications and libraries. Start off with installing Homebrew by issuing the following command:

ruby -e "$(curl -fsSL"

To make sure Homebrew is installed correctly run:

brew doctor

Step 2. Install RVM

RVM stands for Ruby Version Manager. It can manage multiple ruby versions. This is especially handy when you have more than one applications to control. But it’s also handy to isolate ruby and it’s gems. Starting a new app with the latest version of ruby, no problem, while still running your older app simultaneously.

curl -sSL | bash -s stable

Reload your bash_profile, so it can initialise RVM.


Run RVM requirements to install basic required packages with Homebrew. Accept the license agreement and install Xcode Tools. After installing the tools continue the rvm requirements installation.

rvm requirements

Step 3. Install latest Ruby

Install ruby, ruby-head is the latest version. You can also use 1.9.3 for example or even a ruby version with a different patchlevel. For ease of use we use ruby-head. You can call ‘rvm list known’ for all available rvm environments.

rvm install ruby-head

Optional. Install Git

Git a version control system, which can be used to control your code repository.

brew install git

Optional. Install MySQL

Install MySQL database and the client to connect to it. This used to be a tricky ordeal because the mysql2 gem needed specific locations for the files. Right now it should work out-the-box.

brew install mysql

Optional. Install MongoDB

MongoDB is very well known document database. Only install it when you know you need it. There are many alternatives such as Redis for key-value database.

brew install mongo
sudo mkdir -p /data/db/
mongod # to start

Optional. Install PostgreSQL

Postgres is a more advanced SQL database. I think it’s becoming more default now since MySQL was taken over by Oracle. Decide which one you would want to use. Beginners can better start with MySQL.

brew install postgresql

All done!

That’s it after install all these packages you can start a new rails app by running:

rails new your_application_name

Rails shouldn’t be that hard to install anymore. Best of luck!

My working environment

Lastly, here is my Mac working environment. I use all of the applications on a daily basis:

First new Floorplanner tutorial movie: how to draw walls

In a previous post I mentioned that we bought a Yeti microphone to create tutorials with sound. However, for this first new tutorial movie we didn’t use Yeti,  because we didn’t have it yet. For the next ones we’ll use it.

Hopefully you’ll be amazed by the sound quality then!

A Yeti microphone to create tutorial movies with sound

We got a new gadget at the Floorplanner office! It’s an USB microphone called Yeti.

The Yeti is one of the most advanced and versatile multi-pattern USB microphones available anywhere. Combining three capsules and four different pattern settings, the Yeti is an ultimate tool for creating amazing recordings, directly to your computer. With exceptional sound and performance, the Yeti can capture anything with a clarity & ease unheard of in a USB microphone.

Why do those guys need a microphone you might ask. Well, that’s because we are creating a new set of tutorial movies, and this time they will have sound! Yes they will have sound, unlike our silent-hit-movie with over 2.5M YouTube views.

Keep an eye on the Floorplanner help section for the new tutorial movies.

A first glimps of Floorplanner’s new 3D floorplan rendering using WebGL


See a live demo here (best performance in Chrome).

We are working for some time now on using WebGL to render 3D floorplans on the client and I think the time has come to share the first beta version with you.

Our new WebGL version has to improve two things over to our current Flash version; the floorplan has to look better and it has to load faster, a lot faster. We are not there yet, but I think we are making great progress.

For our new WebGL engine we use a technique called deffered rendering. If you are interested to learn more about it check out Florian Boesch’ post WebGL Deferred Irradiance Volumes and our Rendering transparency in a deferred pipeline.

A very nice feature of the new viewer is that it’s completely backwards compatible. So when we’ll launch the new WebGL viewer all the floorplans in our database – nearly 12 million and counting – will be instantly more beautiful and load a hell of a lot faster!

See a live demo here (best performance in Chrome).

Buy Roomstyler Credits with Bitcoin


At Floorplanner we like Bitcoin and that’s why you will soon be able to purchase Roomstyler Credits by paying with Bitcoin.

We are now in the final stages of testing the new system, so buying and spending Roomstyler Credits is – at this moment – limited to a small group of users. If we don’t encounter big road blocks we should be able to release it within a couple of weeks.

Roomstyler Credits, why? Well, that’s because we are going to offer premium features and those premium features won’t be free. Think of rendering photo realistic interior images at a higher resolution or requesting custom 3D furniture models or materials. And this is just the start, many more premium features will follow (for example virtual panoramas).

Most of the premium features will cost a small amount of money – only a couple of Euros – and most people don’t like going through a payment system for only a small amount of money. That’s why we are introducing credits. Buy a couple of credits once and spend them – without any friction – on all kinds of different things.

So if you are looking for a new and creative way to spend your Bitcoins, you might consider becoming an interior designer at Roomstyler.

An experiment to create a virtual panorama from a Roomstyler room

We did an experiment – see live demo here – so see if we could create a virtual panorama from an existing Roomstyler room. The room we used is called Modern Vintage Nursery and was made by ladyfakessi (btw. she won the Nursery Room contest with it).

For the panorama we created a standard cubestrip image by rendering several images and stitching them together. The viewer we used for this experiment is the krpano Panoramic Viewer.

The experiment showed us that it is possible to create panoramas from Roomstyler rooms. So potentially we can turn any room into an interactive panorama! But… it took very long to render the needed images at this resolution, over 3 hours. Hopefully we’ll find a way to substantially decreased this time by improving our render speed.

See live demo here.

« Older posts

© 2014 Techblog

Theme by Anders NorenUp ↑