Now for the trickiest part and the conclusion to the theme of my original question of how accurate and realistic can WebGL render architectural realisations. And more to the point: will all the advanced lighting and materials translate to the web browser and still provide good performance (high fps).

I’m delighted to say yes. Yes it does:

This was awesome. On a 5 year old desktop computer (which is by today’s standards, average spec) the model looks great and is clearly rendering at a high and consistent frame-rate.

I then tested it on my iPhone 6. The visual results were even better thanks to the retina display and it ran just as smoothly as it did on the desktop computer.

 

Take a look for yourself.

Encouraged, I loaded up the webpage on my iPad Mini 3. It was ok, but the performance was about half that of the iPhone 6 and approaching unusable. Slightly perturbed, I braced myself as I tried it on my iPad 3 and while it looked fine, it hardly moved rendering it complete useless.

I needed to work out where the bottleneck in performance was. Before adjusting the settings in my WebGL scene I looked at the specs of the devices to see if there was any obvious clues:

• iPhone 6 – A8 chip with 64-bit architecture
• iPad Mini 3 – A7 chip with 64‑bit architecture
• iPad 3 – Dual-core Apple A5X with quad-core graphics

Clearly there is a big difference between even the iPad Mini 3 and iPad 3 but I was surprised to see how poorly WebGL ran on the iPad 3 given I have seen some very impressive 3D native applications.

I am obviously asking too much of WebGL. Time to work out where in my scene the bottleneck was being caused.

Quite quickly I ruled out the polygon count. My Lego Trains WebGL project runs fine on the iPad 3 and contains over 16k polygons. There is also about 40 different materials in the Lego project so it can not be the amount of materials as I only have 9.

Just to be sure, I created a simple material and applied it all the model’s components and tried it on the iPad 3. It ran perfectly. It has to either be the materials or the lighting. I was hoping it was going to the be complexity of the materials as the prospect of removing the lighting was grim as it would leave the scene looking really flat.

I tried disabling all the lights and re-applying the complex materials. Dispassionately, it ran fine on the iPad 3 meaning it was the lights. I tried with just the directional (sun) light to hope it was the amount of lights that had slowed it previously (3 lights in total), but sadly, even with only the 1 light it ran terribly.

It was a little disheartening but I have to remember, these are just mobile devices and the iPhone 6 shows what the near future of 3D will be like in WebGL. I decided to focus on developing the concept just for the iPhone 6 (and equivalent iPad) and desktop computers.

I decided to add a floor to the scene which will hopefully give the house model some context as one of a number of houses on the development. I still wanted the focus to be on the house in question so I decided to create a texture of the estate in wireframe on a white background. I couldn’t find an appropriate image online as DWH use full colour renders for their publicly available site plans so I had to draw it in vectors. I then blended the edges using a circular gradient and lightened it dramatically so you get the suggestion of context but only in a very subtle way:

Together, the scene started to come together but I couldn’t get the fact the project ran terribly on even an iPad 3 Mini which is just as powerful as a lot of 4-5 year old desktop computers. I didn’t want this project to leave out the majority of DWH/Barratt’s key demographic.

I had to investigate making it work better without lights. See the next update for how I plan to achieve this.