3D modelling project: Part 5

Finally I wanted to try to input my model into Unity. I have never used Unity before and it seems like quite a complex program. Fortunately, first time I used it, it loaded up a default game world and it was easy for med to import my model as .fbx directly into it. Looks good!

However I had some problems loading in the materials I created in blender. (the materials shown here are similare materials that I added in Unity). Will have to investigate how to export from blender to unity in .fbx with the materials included.

3D modeling project: Part 4

Now I had my model ready and done!

Next up I wanted to add the green and gold textures of the trash bin. I found it quite hard to work with textures for this material since it does not really have much of a texture. It is smooth painted metal. This was easier to make with materials and lightning. I experimented with different materials and adding lightning and thought the result was quite good.

My modelling of the trash bin was finished!

3D modelling project: part 3

Now I was ready to start modelling!

First i loaded in a front photo of the trash bin in Blender as background, moved it slightly to the side and then started to try to make the starting cube object of blender look like the trash bin form.

Since the trash bin i very symmetrical. I had great help from the  Loop Cut tool in blender. The Cut Tool basically creates new subareas (edges and faces) on the object. But what is great about it, is that it makes these sub dividings symmetrically all around the object. So for example, when i sliced  up a hole for the opening on the trash bin, the same opening was there to but cut opened on the opposite side.

I cut open four holes in the top of the object for the holes and dragged the side of the opening slightly inwards. I also rounded the roof of the trash bin.

Then i worked with the two golden parts of the form. There are two parts of the trash bin where the shape is shaped in three lines of golden bands. I had to extend and intended the surface and the round all parts. 

I also added a rectangle on each side of the trash bin. I don't know that function it has, but it is there on the real trash bin so I wanted to add it.

So, this was the final model of the trash bin!

3D modeling project: part 2

My teacher had told me that he and his team were interested in 3D models of objects and building on the KTH Campus. Since my project would be kind of small and simple I chose to model a trashbin. These are the photos that i took! (It was very snowy, so pictures could definitely have been better! Especially if I wanted to make textures tiles from the photos. However, later I came to the conclusion that materials might actually look better for the kind of very smooth painted surface of the trashbin.)

3D Modeling Project: Part 1

3D Modeling Project: Part 1

For  the course DH2320 Introduction to Visualisation and Computer Graphics I am doing a 3D modeling project.

The instructions where according to email exchange with my teacher (see below)

I am nearly finished with the labs. However I will probably not be in Stockholm for the exam in January.  It has >been stated that it is possible to do a project instead of the labs. But would it be possible to instead replace the >exam with a project?

Sure, this is no problem. You can do a small project instead of just the project, or if you are doing a project already, increase its scope somewhat to cover the exam.

About project ideas, I am very interested to learn some Unity!

Excellent! Some basic modelling of objects in Blender that could be brought into Unity would be fine. Here is an example project from DH2320 for a different student who is also doing a project solely instead of the exam: http://kthbenches2014.wordpress.com/

And here's a blog from a previous course that could give you an example of the process: http://dh2323bus.wordpress.com/

In terms of what to model, it would be useful if you could model something that fits in with the KTH scene that we are constructing (see: https://kth.box.com/s/qt7s8wr74fu36t8we85n).

To be specific, some items that we have a need for (that nobody has agreed to work on yet) include a Stockholm style bins, lamps, traffic signs and street markings. Let me know if any of these strike you are interesting. 

Yes, that's it. You might also find the method described in this link to be useful (once you have a little more experience with modelling): http://www.youtube.com/watch?v=qJJRC2ebvSE

Modelling buildings is also possible, but that starts to get into a larger project than that covering just the exam.

You might take a few photographs of the objects, both to use as textures and to help with modelling. You would load those into e.g. Blender as a background and then start to create the 3D model from there. Later, you would export it into Unity as an FBX file (really just a few mouse clicks). How does something like that sound? 

Okay so lets go!

The method recommended by my teacher and the youtube video he referred to used Blender as a modeling environment. I have previously only used Maya, so I wanted to do a tutorial of some sort understand the interface and work process in Blender. I downloaded Blender and followed a tutorial to create a simple cup model.

I followed this tutorial to do the cup https://www.youtube.com/watch?v=y__uzGKmxt8

Im ok with the result. The handle was a little long/big maybe....but for a first try I am pretty happy!

As for Blender i thought it was a really great tool! I liked it a lot more than Maya(as of now) so happy i made the switch.

Now that I know the Blender interface, the next step is to watch the whole video of the method recommended by my teacher where you model from a 2D image as background.

DH2320: Lab 1 - WebGL and Three.js

This lab was an introduction to WebGL and Javascript 3D-Library Three.js. My experience of using the two is that it was much easier getting in to Three.js. The sample code given was straight forward and not as dense as the WebGL. Also Three.js has a lot of built-in methods which are extremely easy to use. 

For example: new THREE.CubeGeometry( 2, 2, 2 );  will generate the geometry for a cube with size 2.

Make the first cube look as the second one:

This was pretty straight forward as instructions were exact. In short i needed to change some different parameters. However, it was good to see hoe the two scenes worked and how they differ. 

Adding a tetraherdon:

This was a harder task since it requiered me to "think" in 3D which I was not used to.

In WebGl you have to manually define the vertices of an object. I drew a XYZ-system on paper to try to see where the points should be placed. A tetrahedron has 4 faces, all of which are spanned within 3 vertices, and there is a total of 4 vertices in the tetrahedron.

However I was unsure about edge length and so on. I used information from wikipedia[Link]

where it says that:

The following Cartesian coordinates define the four vertices of a tetrahedron with edge length 2, centered at the origin:

(±1, 0, −1/√2)

(0, ±1, 1/√2)

To understand how the vertices should be connected I tried to think of each vertices as defines by which faces it spanned:

verticesTetra = [

        // Red Face

        1, 0,  -1/Math.sqrt(2), //Red - Yellow - Pink

         -1, 0,  -1/Math.sqrt(2), //Red- Yellow -Green

         0,  1,  1/Math.sqrt(2), // Red Green Pink

        //Yellow face

        1, 0,  -1/Math.sqrt(2), //Red - Yellow - Pink

        -1, 0,  -1/Math.sqrt(2), //Red- Yellow -Green

         0,  -1,  1/Math.sqrt(2), //Yellow-Green-Pink

        // Green face

         0,  -1,  1/Math.sqrt(2), //Yellow-Green-Pink

        -1, 0,  -1/Math.sqrt(2), //Red- Yellow -Green

          0,  1,  1/Math.sqrt(2), // Red Green Pink

        // Pink face

        1, 0,  -1/Math.sqrt(2), //Red - Yellow - Pink

         0,  1,  1/Math.sqrt(2), // Red Green Pink

          0,  -1,  1/Math.sqrt(2), //Yellow-Green-Pink

    ];

So there are 4 vertices and they are all connecting to three of the vertices.

For Three.js there is a method THREE.TetrahedronGeometry() which helps with creating the geometry of the object, very helpful. However, I had some problem figuring out how to make sure that the size of the tetrahedron was the same as the in the WebGL scene. The THREE.TetrahedronGeometry() method takes one argument, radius of a circumsphere which fits the tetradhedron. Again, according to wikipedia the radius is given by:

  where a = edge length. 

Since edge length of the tetrahedron i used for WebGL was 2, I used a=2.

DH2320: Lab 2 - Photoshop Techniques

This lab was about Image Restoration, Retouching, Designing and Creating Textures in Photoshop. I will go through all the steps of the assignment together with my comments

Restoration:

❏ Read the excerpts from Photoshop Restoration & Retouching.


Comment:OK



❏ "Work on baby.png (Figure 3). Correct the faded colors by adding an adjustment layer. Save the result. Make sure to work on the assignment image called baby.png that is shown when you click on the image! This must be done for all other images as well."

Comment: The image in the lab assignment is not called baby.png which was confusing(same goes for all the other pictures). I added two adjustment layers with blending mode Multiply on top of each other. The first one with opacity 100%, the second one with 50%. I then cropped the images a little bit to remove the edges which still looked a bit faded.



❏ "Work on scratched.png (Figure 4 below). Fix the following issues by using the Clone Stamp(and copy-paste if needed)"


The image is damaged on the right hand side.


There are a large number of scratches and dirty areas. (You only have to remove the most prominent of these.)


Don’t forget to work in new layers so you don’t destroy the original background layer!"





Figure 4. Scratched.png

Comment: I corrected the scratches and the damage using the clone tool. I was pretty straight forward. I noted that you have to be careful with lines and shadows in the image and do your best to try to make those continuous in the updated picture.




❏ "Work on pink_flowers.png (Figure 5). Use Image -> Adjust -> Replace Color… to change the pink flowers to a different color! Try to achieve a natural-looking result."

Figure 5. Pink flowers.png


Comment: I used the Replace Color tool to sample several pinks in the flowers and then replaced all of them with red. I think the image was a poor choice since it is so pixelated. It is hard to tell how successful the result was.



❏ "Work on marsvin.png (Figure 6). Correct the color shift and the balance between shadows and highlights. You will notice that some information is missing in the darkest and lightest areas, so you will probably not achieve a perfect result. But give it your best try. Also, the composition isn’t entirely successful – it is unclear what the subject is. Try to improve it!"





Figure 6. Marsvin.png

Comment: The Auto-Tone and Auto-Contrast adjustments helped me out here to correct color and get more contrast in to the the image. I then fined-tuned with the Shadow/Highlights tool to get as much information out of the photo as possible. Finally i created a duplicate layer, which i blured. I then used the erase-tool to cut the boy and the guinea pig out, them showing from the background layer. This gives a focus in the photo.

Retouching:

❏ "Work with phat.png (figure 7). Reduce the weight of the model! Here is a suggested workflow: Copy the background layer to a new layer. Select the area that you want to modify with Elliptical Marquee. Choose Filter -> Liquify… and use a large brush with low pressure to “push” and “pull” the shape. Use Reconstruct tool (in the Liquify dialog) to improve places where the distortion becomes too large."


❏ "Improve the composition of the image."



Figure 7. Phat.png


Comment: To make the model thinner I followed instruction using the Filter -> Liquify.To improve composition I played around with the Shadow/Highlight tool to make the sky more interesting.

Creating seamless textiles:

❏ "Work with wood.png (figure 8). Create a 512x512 wooden tile from the texture! Any kind of manipulation is allowed! There are a number of problems in the image that you may have to correct before you begin creating the actual tile: There is a camera distortion, there is a coffee stain, the lighting is not uniform across the image, and there’s a shadow in the bottom right corner."

Figure 8. Wood.png


Comment: This was by far the part of the lab I spent most time on. There were no real instructions on how to make a tile. So i had to google most of it.

Creating a Square:
I started with using Filter->Lens Corrections to try to fix the slight lens bending(fish eye?) of the picture. Then I used the Clamp Tool to try to remove the coffee stains and the shadow in the right corner. Next I used the Crop Tool to cut out as big of a square as possible from the image. I used the left side of the picture since there seemed to be more balance in lightning. This in the end made most of my previous corrections mostly unnecessary since I cut out big parts of the image anyway. I resize the cut out square to 512 x 512 pixels and continued my work with that as background.


Balancing Light:
To balance the light, I duplicated the background layer to a new layer which I inverted and then used a blur filter on and put opacity to 50%. This helped a bit with balancing the light so i merged the layers. Next i played around with the Shadow/Highlight tool to try to further balance the light. I also made the wood a bit darker and with more contrast. My tile now looked like this:

I was quite happy with this so i moved on(then ran in to trouble on the next task)

Webpage

❏ "Using the code from the your finished DH2320 Lab 1 create a webpage that only contains the Three.js part."


❏ "Use the wooden tile image created previously as a texture for the rotating cube. The tetrahedron should have the same coloring as before"


Comment: I followed the instructions to add the texture to the cube which was pretty straight forward. And I think the results looked pretty okey. But the instructions also said that the texture should be repeated at least two time on each direction(one face = 4 tiles). When adding this, you could clearly see a pattern of tiles on the cube. I thought that maybe i had not done enough on my tile texture so I went back to edit it. I found a number of guides on the internet which all recommended using Filter -> Other -> Offset to make the tile more seamleass. I created a duplicate layer of the tile, then used Offset to move the pixels a certain amount horizontally and vertically. This, as i understand it, is used to destroy patterns in the image. I then used a mask on the layer and erased out parts to smoothen the edges the offset hade created.


My new tile looked like this:

When adding this to the cube it looked slightly better and you could not notice the pattern of the tiles as much. I still feel that covering the whole face with one tile looked better but kept the 2x2-repeat since that was given in the assignment.

Result:

LINK

Montage and Design:

❏ Create a graphic design for a poster for a real or imagined public event of your choice, e.g., a concert, a lecture, a party, etc.

Comment: I made a poster about an interactive bag that we created in a interaction design course.

The purpouse of the poster was to describe the features and the interaction of th bag. For the Logo/Name i took a photo of the fabric that we used on the bag and imported it to photoshop where i cut out the letters. The other pictures were imported and contrast and color balance was edited. Here is a low res version of the poster