WebGL workshop

Today at 15.00 I'll be coaching a workshop about WebGL at Campus Party Europe (Berlin).
More info on:
http://www.campus-party.eu/2012/developers.html#OpenTechSchool
http://campusparty.opentechschool.org/

Pietro

Hi,

as I'm working on a new model for realt-time visualization I wish to explore normal and bump mapping. In particular, what I'd like to have is a quick reference table with those "magic values" that will work in almost every situations.

Of course, I don't believe in "magic values" to make your BEST rendering ever, but everyone knows that if you begin from a solid and quick start you can trigger and tune later your results to the top.

Now, the scene:

this is a very simple blender's scene, with six couples (half sphere + plane) showing the same shader per couple (total: 6 materials). Material's base is the same, what change are image source for test (normal map on the left, bump map on the right) and the value of "Normal" influence.

This is the raw render in Blender:

As you can see immediately, a normal map gives a better result and, most important, is almost the same as showed in Blender rendering; so you can get a perfect feedback of your work while making it.

Normal/Bump maps from Eat3D

Ciao,
Pietro

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

Appunti per 3D Studio Max - principianti - ITA

Mettendo ordine nei miei hard disk ho trovato queste dispense datate 2010: si tratta di tre PDF a supporto di un corso che che feci ai tempi per CompuntoUnico (MI) e che servono come compendio alle spiegazioni.

• Il primo è una breve introduzione all'interfaccia di MAX, con un riassunto delle combinazioni di tasti più utilizzate e dei problemi più comuni per chi inizia.
• Il secondo è un tutorial in più passaggi per la modellazione di una piccola vetrinetta espositiva: il tutorial è pensato per presentare gli strumenti di MAX a un pubblico di principianti, ed attraversa modellazione poligonale, primitive, modellazione parametrica, tool di selezione ed allineamento, modellazione per spline e l'uso di alcuni modificatori.
• Il terzo documento riassume i parametri principali del motore di resa Mental Ray ed il rapporto di questi con la Global Illumination.

CLICCA QUI PER IL DOWNLOAD

E' importante tenere presente che questi documenti da soli non rappresentano un corso, ma sono studiati a supporto di un'attività didattica continuativa seguita da un docente. Ho deciso di rilasciarli sotto CC perchè possono essere utili, soprattutto il primo ed il terzo, come piccolo breviario dei parametri più utilizzati e degli errori più comuni.

Sono benvenuti suggerimenti ed impressioni.

Ricordo inoltre che sono disponibile da settembre a novembre a Milano per lezioni private e/o aziendali, mentre ad agosto sarò a Berlino e da novembre, probabilmente, a Parigi.

Insegno indifferentemente in lingua italiana e inglese, ed in lingua tedesca solo il corso introduttivo, 3DStudioMax / VRay / MentalRay / Blender.

Buona lettura,

Pietro

Upside down - Escher tribute on Sketchfab

Hello,
I've just terminated my last personal work. It's a simple architectural model inspired by Escher operas: an house made by mixed walls and railings, where you can't find a direction or a reference.
As my first Sketchfab experiment, I would make something planned to be explored and watched from different point of views. I think that the power of realtime visualization is that you are not locked to a single point of view or an animation timeline: you can create indeed your own story and everyone can get his own personal experience from the model viewing.
I tried some framework for webgl developing (three.js, p3d, osgjs, ...) but I found Sketchfab very comfortable and easy to use.



The model is done entirely in Blender 2.6x by me except for men, that are MIT_Stickman from Michiel Tieleman, a very nice and skilled Blenderartist's user.
Shadows and Ambient Occlusion are baked into textures, while lights are loaded directly from Blender: the very cool feature of Sketchfab is that they provide you Sketchup, 3DStudioMax and Blender free exporter and you're able to load your scenes from the software.
Another very cool thing is that you can also load .blend files with packed textures and it will be ready to go in a few seconds, depending on file size (mine was about 6Mb and tooked a minute from file picking to scene live exploring on the website).


Here's more render of my work:

  


Ciao!
Pietro

Camera target in Blender 2.6

Ok, this could be obvious for most of you. For me it wasn't and I have to search for it every time I begin a new work.

So: in 3DStudioMax you have "free camera" and "targeted camera". The former is only a camera which can be translated and rotated, the latter is a camera linked to a dummy object (the target). You can't rotate this kind of camera because it rotates itself looking to the target.

In Blender you've got only one Camera, which is a "free camera" type; but what if one (like me) feels more comfortable moving the target and having a camera that looks at it?

1 - create a camera [shift+A, "camera"]

2 - create empty object [shift+A, "empty"]

3 - select camera

4 - select empy [shift+select]

5 - make track [ctrl+T]

6 - select "track to constraint"

I think this is the Blender way for 3DS' "look at" constaint.

Ciao!

Pietro

Sketchfab model

Hi,

I'm playing around with webgl technologies and I found Sketchfab.

Its viewport management is really fluid and amazing, so I tried to stress it with an heavy model like this gate I made for an animation:

It's easy to use and they've developed exporters for Blender, Max, Sketchup, and support lot of formats for upload. Pietro