Converting HTML hex color to RGB value

Hi everyone,

I had to solve a little problem: converting hex color value (like CSS/HTML color code #FFFFFF) to a blender friendly color code (a triplet of float numbers, range(0,1) like (1,1,1)) and back again.

Ok: this is not THE problem, and maybe lots of you will be laughting reading this, but this has been MY BIG problem for 30 minutes. And I've got to thank a lot Alvaro Moe from OpenTechSchool workshops (Berlin), a very skilled Python and Javascript developer who is spending his days at Campus Party Europe with me. So... let's go!



1 - From HTML color to CG color:

Taking this light-blue color HTML hex code #1075f5 is built this way:

# - the identifier
10 - the value for Red channel
75 - the value for Green channel
f5 - the value for Blue channel

Each couple can handle 0-255 value. As standard, if we have one number only we've to add '0' in front of it to keep six element rule. In this example we won't take care of alpha value because it's not handled by 'color picker' element but you can add it easely.

First of all, let's convert a simple HEX couple (the first, RED channel) to a FLOAT number; Javascript gives us a nice instruction in order to do this:

• red = parseInt("10", 16);

Now we need to map the 0-255 value to a 0-1 scale. Let's divide it for 255:

•   red = parseInt("10", 16) / 255;

Let's do it for each channel:

• red = parseInt("10", 16) / 255;
• green = parseInt("75", 16) / 255;
• blue = parseInt("f5", 16) / 255;

Ok, but <color_picker>.value is a string. I've got to parse it to get the single couples, removing '#' symbol and slicing the couples:

• splitted = hex.substr(1);
• red = parseInt(splitted.slice(0, 2), 16) / 255;
• ...splitted.slice(2, 4)...
• ...splitted.slice(4, 6)...

Genau! Now we're ready to build our function:

2 - From CG color to HTML color:

And now, let's invert the process!
Our function will take as input an array on float numbers, ranged between 0 and 1, and will return a string.
The Javascript function to translate a number to a string value is this:

• red_hex = red.toString(16);

By the way, we'll have an array and we need to multiply the value for 255:

• r = (colors[0] * 255).toString(16);

Next step: checking if the value is less or more than 'F'. Why? Because we need to build a string.length = 6 plus the '#' character elsewhere we'll not perform a correct conversion.

• if (r.length == 1) { r = '0' + r };

As last step, let's compose the final string:

• hex = '#' + r + g + b;

We're ready to build our new function:

As I've written before, I'm not handling alpha channel because I don't need it but you can do that in few minutes if you want.

Greetings from Berlin and Campus Party Europe!
Pietro

MissGelo on Sketchfab - Emit material

Hello,
here's my last release on Sketchfab:


What's that? This is an original italian product, made in Sicily, and her name's MissGelo; this machine can help you in making a perfect sicilian granita.
As I've made the animation when the product has been launched, I wanted to rebuild it for realtime visualization too. I think that 3d animation is a nice and powerful tool for presentation and advertise but I think also that a realtime experience could be a better way to explore and check a product before to buy it. You can look closer, change perspective and study color and shapes.

I would like to publish a "making of" too, but unfortunately I cannot share these data because of contracts and industrial secret. So... I can just give you some more tips in order to have a nice result while using Sketchfab.


Lights

For this scene, I had to illuminate a big box. And this is not only a simple box, but a metal box, that involves reflections; this is in my opinion a good example of a simple object hard to light correctly.
I've started with the M.White light setup, because it is useful and simple, but:

• I've doubled the fill lights, so they're four now
• I've added two cold lights, one for the top and one for the bottom
• there's no keylight but only the main specular
• I've removed backlight and "white pusher"

It's important for this scene to have a more uniform lighting.

I've baked ambient occlusion and textures, even if AO now can't help too much because we haven't got some holes or complicated shapes: technically it's just a box with some buttons and textures. But anyway, some AO is better than nothing.

About auto-illuminant material

Yes, it's not only possible but it works very VERY perfectly. The exchange between Blender and Sketchfab is really transparent and extremely easy: what you see is what you get.

The emittin material you can see in my work is a simple Lambert shader with "Emit" parameter setted to 0.40. Nothing more.

I suggest you to focus a lot on specular's effects of each light, because is really what give you the difference between each scene and shader!

And as last, the previous animation:

Ciao,

Pietro

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