Room 7

New version of the room. I remade the chair, using some new technics (now it has 5 legs as the real one).

Google Sketchup

Google Sketchup is a 3d modeling program specially designed from architectural projects.

I’ve heard about this software from Google before, but only now I had time to download and test it. I’ve watched some tutorials and just learned how to draw a chair.

It’s known that Google Skecthup is good for modeling, but not for texturing. So, I decided to export my simple chair to Blender. It took me sometime to find out how to “sucessfully” do it.

First of all, I used the most recent version of Blender (2.48a), Python (2.5) and Sketchup (7.08657). Then I exported my chair through : File > Export > 3D Model… and saved with .kmz extension.

Now, you have to rename the extension to .zip and extract it. One of the items extracted is a folder named ‘models’. There you’ll find a filename with extension .dae. Now open blender and go to Import > COLLADA 1.4 … and import the .dae file.

So far so good, but when I tried to export my simple chair it could not import the legs and the cilinders correctly. It creates empties instead. I don’t intend to spend more time learning this tool by now, but it’s always good to learn new stuff.

Allan Brito and Lux Render

I’ve been busy with my college work, but I think this week I’ll have more time. The only things I could do since the last post was read Allan Brito’s blog and test Lux Render [4].

I’d like to highlight two posts of his blog.

One is about modeling using subdivision [1]. There is a link to some tutorials, in spanish, using the software Modo [2]. They tell that there are three types of modeling: using NURBS, hard surface modeling and subdivision. I’ve been working with the second one, with little experience with the first. I found the tutorials quite advanced. Furthermore, Blender lacks some of the tools or characteristis of Modo, for example, binary operation like intersection, union and difference can only be applied for objects with volume, so an operation between a plane and a circle won’t work (correctly).

The other interesting post was a tutorial from Allan Brito himself, the modeling of a Barcelona Chair [3]. It seems complicate at first sight but he uses some tricks that turns the job easier. Unfortunately the tutorial is divided into parts and he just published the first one yet.

Last, I couldn’t get good results from Lux Render yet. The good aspect of this renderer is that it shows the whole image while rendering, while Blender internal just shows the image when the render is done. The following image is the result of the Barcelona’s Chair tutorial, rendered with Lux Render:

[click to enlarge]

Reference:
[1] Modelagem 3d por subdivisão [Portuguese]
[2] Técnicas y trucos modelado por subdivisión [Spanish]
[3] Tutorial: Criando uma cadeira Barcelona [Portuguese]
[4] Lux Renderw

Rounded Corners and Shadow Borders for Websites

Well, there are a lot of ways to design rounded corners sites using CSS. But I always missed some that provided a tutorial to draw the borders. So I decided to draw my own using gimp.

I use this layout for my current college page,

First, let’s open a new file in Gimp: File > New…
Choose a width so that it is larger than the width of your page. The height can be like 400px.
In advanced options, change to Fill with: Transparency.

(There was an image here, but Imageshack seems to have lost it)

We now use the “Rectangle Select Tool” (the first icon at the main panel). Check the option “Rounded Corners” and choose a suitable radius, say ‘25.0′, like the image below (nicely marked in red):

Draw a rectangle with the size almost the same as the image, then go to Edit > Fill with FG Color (you can change this color by clicking at the small rectangle just below the icons in the main panel). I used a red FG color to get this:

Next, go to Filters > Light and Shadow > Drop Shadow…
If you want shadow borders in both sides, you have to set offsets to ‘0′. You can play with the other parameters or leave them with default values, just like I did:

Click OK. It was created a shadow around the rectangle. Maybe it’s difficult to see it because of the transparent background, but you can verify it opening the Layers Panel:
Go to Dialogs > Layers (alternatively type Ctrl+L)

We have two layers, one of them named ‘Drop Shadow’ (left image below). Before starting cropping, we shall merge these layers: just right click in the ‘Drop Shadow’ layer and choose ‘Merge Down’. We’ll get the image at the right below:

Now, with the “Rectangle Select tool” (you may uncheck the ‘Rounded Corners’ option), select the bottom of the rectangle (more or less at the height where the corner ends). Copy it and open a new image with transparent background. Its size can be the same of our current image. Paste the selection there:

This will be the bottom of the web site. But as we don’t know the actual size of the site, we need to split up the left and right corners. Using my CSS model, we need the left side to include the border and at the right we just need the corner. So, let’s cut the right corner from this image. Unselect the current image by clicking away from it and again using the ‘Rectangle Select Tool’, select the right corner and cut it. Again, create a new transparent backgrounded image with any sufficiently large size and paste the corner there. Now, let’s correct the size of these images. In both of them go to:
Image > Auto-crop Image…

Save them as “bottom_right.png” and “bottom_left.png” (jpeg format won’t preserve transparency). Well, we have our “bottom_right” and “bottom_left” parts.The process for obtaining the upper parts is the same, but for my CSS tutorial they won’t be necessary. We just need to get the lateral shadows. For this, go back to the rectangle image and select a small part of the left border (just the shadow), like I did below:

Copy it and open in a new image (transparent background as always). Auto-crop it again and save as “top_left.png”. Now, simply go to:
Image > Transform > Rotate 180°
and save the resulting image as “top_right.png”.

Let’s go to the code!
The example I tested the generated borders has the following structure:

HTML code:
http://pastebin.com/f1e91e89f (wordpress won’t let me paste html code here?)


/* CSS Code */

.bottom_left {
background:
url(bottom_left.png)
top left no-repeat;

margin-right: 54px; /* Controls the length of the bottom */
padding-bottom: 30px; /* Parameter */
}
.bottom_right {
height: 30px;
background:
url(bottom_right.png)
top right no-repeat;
margin-right: -55px; /* Controls the distance between the left and right bottom parts */
padding-bottom: 30px; /* Parameter */
}
.top_left {
background:
url(top_left.png)
bottom left;
background-repeat:repeat-y;
}
.top_right {
background:
url(top_right.png)
top right;
background-repeat:repeat-y;
}
.container {
margin: 0 auto;
margin-top: -10px;
width: 900px;
}

.text {
margin-right: 12px; /* Parameter */
margin-left: 12px; /* Parameter */
background-color: green;
padding: 25px;
}

Put all these files and those images in the same directory and test all parameters until you get the desired result. I put a green background on purpose to show where we have the border.

Favicon and Python

I decided to create a favicon [1] for my site. It’s not well designed, but I think the general idea is good for future versions. I just posted this information here because I did it using inkscape.

The second part of the news is that I started coding in python. I recently borrowed a book about it, “Learning Python” by Mark Lutz and David Ascher.

I’ve tried to solve some programming problems from SPOJ [2] to get a feeling, although I’ve already programed before (but I totally forgot about!) Well, but I’m learning python for another reason this time: I might need it for Blender!

Reference:
[1] Wikipedia – Favicon
[2] SPOJ

Room 6

Just applied bevel modifier to the bed and used WardIso specular shader for a shining surface. Also added the drawers again to the desk, this time with more details.

Ray Tracing – More theory

Getting back to lesson 2 in the ray tracer tutorial [1], I read a little about Photo exposure [2], Gamma function [4] and the sRGB format [3].

I then proceeded to lesson 3 [6], where there is a good discussion on Procedural Textures (which I’ve already read about [5]) and Texture Mapping and how they can be implemented.

I didn’t have time to analyze the code carefully yet, but I’ll do as soon as possible.

[1] A raytracer in C++ – Lesson 2
[2] Wikipedia – Tone mapping
[3] Wikipedia – sRGB
[4] Wikipedia – Gamma correction
[5] Kunigami’s Weblog – Texture Types
[6] A raytracer in C++ – Lesson 3

Room 5

From the previous attempt, I only added the window grid. I managed to fix the blurred shadow cast by the outside light source. After taking a look at the Spot Lamp manual [1] I discovered that the scene was being rendered using Buffered Shadows, which is fast but renders low quality shadows. The other option is Ray Tracing, which is slow, but renders shadows at a very good resolution.

Room 5 with spot lamp rendered using ray tracing (rendering time: 2m:29s) :

Room 5 with spot lamp rendered using buffered shadows (rendering time: 1m:22s):

Reference:
[1] Manual/Spot Lamp

Room 4

I re-modeled all the objects using the same scale as the real ones. I added more reallistic textures to the bed, the desk and the floor (wood textures). I imported the baseboard from another scene I did for another post (Texture Types) using the append tool [1].

Another major change is the addition of global illumination, a light effect that Blender doesn’t support (AFAIK). There are several ways to fake it. I read about one at “Noob to Pro“, but I didn’t like the result. I discovered by chance a property in Shading > Material Buttons > Shaders Panel called Emit. This feature is useful if we want an object to emit light, but if all the objects in the scene emit a small amount of light, the scene seems to have global illumination!

The result of this changes follows:

I also tried to add an external light source for a cool effect, but the shadows cast by this light have low resolution. I still have to learn how to control this effect:

Reference:
[1] Blender tutorial – Append

Room 3

After learning some new features of blender, I decided to improve the modeling of my desk. The result can be seen below:

Unfortunately I did something wrong when building the faces of the new desk and when applying smoothing its faces become weird:

I’ve asked for help in blender artistis forum, but couldn’t get it solved yet. The full discussion can be seen here.