Translating a 3D still into realtime engine. Game? No, design!

Here I am!

Time for an update.

First, I'm glad to publish my second Sketchfab work:

This is based on my previous work named M.White, that is a remake of a job I made during my teaching activity; here's the original image:

Now, the reason why I feel so satisfied of my result on Sketchfab is that while the original image has been made in 3DStudioMax, rendered in VRay and retouched in Photoshop, while the realtime stuff has been done in Blender, rendered with Blender Internal engine.

As a plus, you can explore the model and look at it from different point of view.

It is exactly what I have been trying to doing with WebGL, but is ready to go.

Why did I choose Blender? Firstly, I love Blender and I like in my spare time dig into it, trying different solution of rendering setup and modeling techniques. Therefore, the Blender textured preview is amazingly the same of Sketchfab viewer! 

Look at the following images.

This is the Blender Internal render, without postproduction: only the raw render.

 And this is the model as showed by Sketchfab:

This is really helpful, because when I tried to do the same operation the most hard task was to "guess" light power, color, and material features: the export and the conversion (remember: you're migrating from a render engine to another) could make a mess of your carefully-crafted setup.

Those boring technical stuff

Now, I wish to suggest you some technical stuff and tricks I've discovered making this work, because it's not so easy transpose a scene designed for a powerful raytracer as VRay to a WebGL engine.

The first thing you have to know is that at the moment shadows and area light are not supported.
Due to this important note, the key to present a decent illumination is to study it and to think about it. Maybe that too much automation made us stopped thinking, so why not try to do it again?

Ligths

This is my setup, based on a classical 4 point lights (1 keylight, 2 fill, 1 backlight) with 2 more helping lights: the "main specular" and the "white pusher" (no dude, it's not what you're thinking about...).

• keylight: in my scene is totally wrong; it's insane indeed to place a keylight behind the camera. But this is not a raytracer, so let's go with "creative lighting". Here the parameters:
• color = [1,0.949,0.867]RGB
• energy = 1.0
• falloff = inverse linear
• no shadow
• no specular

• hot_fill: this add that hot feeling on the right and let you bring some light where keylight can't. Parameters:
• color = [1.0,0.66,0.257]RGB
• energy = 1.0
• falloff = inverse linear
• no shadow

• cold_fill: because of karma, if you put something hot you'll have something cold too. 
• color = [0.269 , 0.533, 1.0]RGB
• energy = 1.0
• falloff = inverse linear
• no shadow

• backlight: sometimes people forget about the backlight, but that's a shame as it helps you to sculpt the edges of your model and can be useful to create some tension behind the polygons.
• color = [1,1,1]RGB
• energy = 0.60
• falloff = inverse linear
• no specular
• no shadow 

• main_specular: I've added this to get more directional and controlled speculars; I needed more control on them because of the metal-like material.
• color = [1,0.949,0.867]
• energy = 1.0
• falloff = inverse linear
• no diffuse 
• no shadow 

• white_pusher: this is the trick I've used in order to push out the white of the chair's top; don't forget that we're working on a white image material to be showed on a light gray background... it's not that easy.
• color = [1,1,1]RGB
• energy = 0.480
• no specular
• no shadow 

Ambient Occlusion Pass

In addition to this cool lighting setup, we can add some Ambient Occlusion in order to enhance details and to bump-out the model shapes. Anyway, we need to bake AO pass directly in the diffuse texture because it will be calculated by Blender Internal but not by the WebGL engine. Then, the first thing you have to do is to unwrap your model: for this reason people is used to say always "KEEP A NICE TOPOLOGY!"
A nice topology is the ground for good smoothing, working subdivision surfaces, correct reflecting materials and wonderful texturing. And for baking process, of course!
If you don't know how to unwrap your model, I suggest you to begin from one of the millions of tutorial on youtube.

Unwrapping maybe tricky, specially if you haven't followed a clean and nice topology in modeling your 3D object. Luckly, baking Ambient Occlusion is incredibly easy: just setup you World (I've choosen 16 sample per pixel, Adaptive QMC, treshold 0.01), select the object, create new texture (mines were 2048x2048) and click "Bake" selecting only "ambient occlusion".

You can bake what you want, of course!

Shaders

Just create one material per object and assign as texture the correct one. Don't forget to save baked images before leaving Blender!

Now two words on shader: they MUST be very simple, mainly due to WebGL limits. And also because the simpler = the better, never forget it.

From the left: the metal, the disc-metal, the top-sitting:
 

Ambient occlusion texture is assigned to "Diffuse: intensity 0.5" I came to this solution after some test and this was my best.

Last but not least: once you've finished your scene and you're ready to go, rember to pack textures into blend files. This is useful if you upload it through Sketchfab interface, otherweise you can use the excellent Blender Exporter of Bart Crouch

UPDATE:
sorry I've forgotten to upload the scene. Here you can download it!

That's all for now,
I'm working on my next realtime model: more complex, more cool.

Ciao!
Pietro