Posts Tagged ‘3D’

Project – RKGO


I’ve just finished a project that I had been working on for about 4 weeks on and off, It’s a sample web page site for a made-up musical instrument company.

I wanted to create a site that was dynamic and interactive. My main focus was initially on the design of the website and a product brochure to follow, but I quickly realized I didn’t have any materials to work on and I didn’t want to use any existing product images due to copyright infringement, so I decided to use the 3D skills I have and quickly came up with a mock-up design in 3Ds Max, this took just over a day to model and render.

So after the RKHOS was born; I had something to build on and I used the rendered images to create a simple flash banner and the 3D model to create a short video ad. Premiere was used to edit the clips together and the audio was added in using a simulated piano software, since I don’t own a usb midi keyboard, I had to resort using the mouse to play the notes; hence the poorly played 1 note tunes.

For the brochure I used InDesign, I went for a vibrant dynamic look to add a bit more character and appeal to the pages. I used paragraph styles and columns to keep it clean and consistent looking. I exported it in pdf and swf format with the interactive page curl tool which is a cool feature in InDesign.

The design of the site had to be simple to navigate with all the information easily accessible but also include some sort of visual impact to give a nice user experience.

I had been learning a bit of JQuery in the early stages of the site design and found it to be a powerful yet fairly easy tool to use. I applied what I had learnt and used it on most of the dynamic parts of the site such as the faded transitions of the images and the tab menu buttons.

I used the fairly new HTML5 video and audio player functions to implement the media files into the site. First I had to convert my media files into the right compatible format for HTML5, for this I used Miro Video Converter which is a great simple to use open-source software.

I kept all the media files at an optimal file size to create a quick and smooth viewing experience with as little loading time as possible. The total file size for all the images is under 200KB which was well optimized but the problem I had was the video file is over 1MB which wasn’t ideal. So I did some research and found the preload=”none” function which tells it to start the video download only once it’s been activated.

The web page is quite media-rich in content and my aim had been to get it under 1mb in page size. I’ve tested the page loading site using some of the web tool sites and it calculated the web page size to be 532KB on one reading and 720KB on the other which was what I had hoped for and it’s all helped by the small preloading code.

I’ve tested the site on 5 of the main browsers and surprisingly I didn’t encounter any major compatibility issues, the JQuery script worked fine on all of the browsers which was great. I also checked on the older IE and it worked near perfect on all versions even on IE 6. HTML5 video and audio doesn’t work on IE 8 and lower but I have added an alternative hyperlink to the media files which shows up on the old versions. The drop down menu on the navigation also doesn’t work but the solution would be to create a separate page for each main category link.

I’m pleased with the final piece, it involved applying some of the things I had learnt in the past and also a few new things like HTML5 and JQuery which I think I’ll be using a lot more often now.

Tags: , , , , , , , , .

3D – Bathroom Scene

3D Bathroom Scene

Here is the finished 3D render of my bathroom scene.

The WIP image of this piece can be seen by clicking here. There were a few things that were missing in the original scene such as skirting boards and blinds which have now been incorporated along with some additional objects like the plants and the rug to add some finer details to the overall image.

I wanted to achieve a warm vibrant setting for the scene so I’ve went with earthy toned colours to give a natural look and feel.

I’ve added a Noise modifier on the rug and towels for uneven roughness but most of the overall appearance is achieved by the texture. I’d gathered a fabric image on the net and got rid of the seams using Photoshop offset filter so that it could be tiled seamlessly.

The leaves on the plant were simple plane geometries with a leaf texture applied to the material and using an alpha channel on the bitmap to hide the unnecessary outer part. In the render setting, I’ve ticked the force 2-sided box so that the leaf texture would appeared on both sides.

The longest time spent was dealing with the lighting of the scene, I’ve tried using different lights such as Omni and V-Ray dome lights but could not get the desired look. In the end I’d used Four V-Ray lights and a V-Ray Sun; Three of them were pointing in through the windows and one shining directly down from the ceiling. The V-Ray Sun created a natural light source and produced nice soft shadows.

I’ve used a V-Ray Physical Camera instead of the standard camera provided with 3Ds Max since it complimented well with the V-Ray lights and also had more settings to play with.

It took just over 5 hours to render the final image in larger resolution and 10-15 minutes each for the ambient occlusion and depth pass.

Photoshop was used for post production work. There were some odd noise issues with the pixels surrounding the edges of the windows which perhaps is caused from the Sun being overly bright, so I’ve painted back in the correctly toned colours.

I’ve added a backdrop in after the render instead of doing it in 3Ds Max as it was more easier to add in Photoshop and allowed more flexibility. I’d imported in my holiday photo as the scenery and used the alpha channel in the rendered image to have just the windows selected; I’d then added a layer mask on the photo layer and inverted it to show only the photo through the windows.

The final touches were adjustments in Levels, Curves and Photo Filter which added more contrasting tones.

I’m pleased with the outcome of the scene. I’ve paid particular attention to the placement of each object in order to try and achieve a nice balanced composition. I think the colours and the lighting set up used in the scene helped to achieve the warm ambient feel that I was going for.

Tags: , , .

    Comments Off on 3D – Bathroom Scene

3D – Toy Robots

Destroy All Humans! Affirmative...

Here is the finished scene of the toy robots. It took just under 2 hours to render and another hour to render both the ambient occlusion pass and depth pass.

The materials were fairly simple to make as they were mostly made up of the same type of plastic, apart from the head and body which had a speckle map added.

There was one V-ray light used which I believed was all that was required to lit the scene. Photoshop was used to combine the passes together and for the post production work.

Click here to see my production process of this work.

Tags: , , .

    Comments Off on 3D – Toy Robots

Game – Dumpster [WiP]

3D - Dumpster 1 [WiP]

Here’s a high poly model of a dumpster. At the moment it counts just under a million tri’s which is quite a big amount but this will be baked down to a low poly version and then textured with some lovely grime and rust.

Tags: , .

    Comments Off on Game – Dumpster [WiP]

3D – Toy Robot [WiP]

3D - Toy Robot 1 [WiP]

3D - Toy Robot 2 [WiP]

Here’s a basic 3D model of my retro toy robot which also happens to be a handy pencil sharpener.

Tags: , .

    Comments Off on 3D – Toy Robot [WiP]