Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 15 2013

07:30

HTML5: Using IndexedDB with WebGL and Babylon.JS


  

In this article, I’d like to share everything I’ve been learning while developing the support for IndexedDB inside our 3D WebGL Babylon.JS game engine. Indeed, since 1.4.x, we’re now supporting storing & loading the JSON scenes containing our 3d meshes and their .PNG or .JPG textures as blobs from IndexedDB.

May 30 2013

02:15

Tutorial: How to create a 3D vector using Cinema 4D and Illustrator

3D is a useful and important tool for graphic designers. Not only it is highly useful for prototypes, interior and construction design, it also comes in handy for graphics and logos. While you can have raster and vectors mashed up in a graphic design, a logo and a t shirt design has to be strictly vector. You can create 3D in Illustrator but the engine is not up to the mark and the dedicated 3D programs render in raster formats but still you can try vector exports; alas they will disappoint you again. So if you want a perfect 3D vector for the logo project or T-shirt design project you are working on you have come to the right place.

In this tutorial you will learn how to create a striking 3D vector logo. I used Cinema 4D as my 3D software but you can use any 3D program. This logo was created by me for a band called “Traced in Shadows”.

Step 1 – Render settings…

Having the correct render settings is very important. These are the render settings I used for my project:

Output : 1920*1080 at 72 ppi.

Save: Format- PNG with Alpha Channel on (this will render without a background).

Anti Aliasing : Best at min. and max. 16*16 each.

Apply Global Illumination

NO Ambient Occlusion please.

1ea495626eb6e05f3a81d9a6b7056d2f

Step 2 – Model the Logo …

The first step is to model the logo. And here is what mine looked like.

..

Step 3 – Apply the materials …

This is a crucial step because how you edit the materials will determine the quality of your vector. Don’t apply any specular or colors just apply a luminance which will give your logo perfect color and make it easier to vectorize. Here is how my “Material Editor” looked like…

Step 4 – Add a camera object…

This is relatively simple, just go to “Scene Objects” and add a “Camera” object

Step 5 – Lighting

Lighting is important too but we do not want realistic lighting because it will ruin the vector. So I found out the trick for perfect lighting:

a) Create a Sphere.

b) Enlarge it so that it engulfs the subject of your logo.

c) Apply a plain white material(only luminance) to it.

d) Apply a composting tag to it and disable the “Seen by Camera” option in the the “Tag” panel.

Step 6 – Rendering.

Render out your logo and now you are halfway through…

Step 7 – Open up the PNG file in Adobe Illustrator.

Open the render in the Illustrator.

Step 8 – Live Trace the image…

Yes you read it correct; Live Trace the image. It is the easiest and fastest way to vectorize anything and because your logo is without shadows and stuff, the trace will be perfect. Be careful about your tracing presets and choose them according to the number of colors you have in your logo. Also, go to Advanced Trace Settings and check the “Ignore White” box. This will give you a transparent background…

Play around with the settings until you get the perfect trace and then go to Object>Live Trace>Expand which will give you the paths.

This is my trace…

7320b06d9b92c7a71613c941282295b7

Step 9 – Saving

Save it as an AI file and EPS file. These are the formats most clients require and which you need for submitting designs on Design Crowd.

Conclusion

So now you know how to create a perfect 3D vector using Cinema 4D and Illustrator. This tutorial will come in handy for a lot of 3D logo projects, t-shirt projects and what not. So thanks for bearing with me. Hope this was helpful and enjoyable.

Sarao Arts is a freelance graphic designer from Winnipeg, Canada. See his DesignCrowd portfolio here

July 19 2012

18:50

WebGL Essentials: Part I

WebGL is an in-browser 3D renderer based on OpenGL, which lets you display your 3D content directly into an HTML5 page. In this tutorial I will cover all the essentials you need to get started using this framework.


Introduction

There are a couple things you should know before we get started. WebGL is a JavaScript API that renders 3D content to an HTML5 canvas. It does this by using two scripts that are known in the "3D world" as Shaders. The two shaders are:

  • The vertex shader
  • The fragment shader

Now don’t get too nervous when you hear these names; it’s just a fancy way of saying, "position calculator" and "color chooser" respectively. The fragment shader is the easier one to understand; it simply tells WebGL what color a given point on your model should be. The vertex shader is a little more technical, but basically it converts the points in your 3D models into 2D coordinates. Because all computer monitors are flat 2D surfaces, and when you see 3D objects on your screen, they are merely an illusion of perspective.

If you want to know exactly how this calculation works, you’d need to ask a mathematician, because it uses advanced 4 x 4 matrix multiplications, which are a bit beyond the ‘Essentials’ tutorial. Luckily, you don’t have to know how it works because WebGL will take care of most of it. So let’s get started.


Step 1: Setting Up WebGL

WebGL has a lot of small settings that you have to setup nearly every time you draw something to the screen. In order to save time and make your code neat, I am going to make a JavaScript object that will contain all the ‘behind the scene’ things in a separate file. To get started, create a new file called ‘WebGL.js’ and place the following code inside it:

function WebGL(CID, FSID, VSID){
	var canvas = document.getElementById(CID);
	if(!canvas.getContext("webgl") && !canvas.getContext("experimental-webgl"))
		alert("Your Browser Doesn't Support WebGL");
	else
	{
		this.GL = (canvas.getContext("webgl")) ? canvas.getContext("webgl") : canvas.getContext("experimental-webgl");	
		
		this.GL.clearColor(1.0, 1.0, 1.0, 1.0); // this is the color 
		this.GL.enable(this.GL.DEPTH_TEST); //Enable Depth Testing
		this.GL.depthFunc(this.GL.LEQUAL); //Set Perspective View
		this.AspectRatio = canvas.width / canvas.height;
		
		//Load Shaders Here
	}
}

This constructor function takes in the IDs of the canvas and the two shader objects. First, we get the canvas element and make sure it supports WebGL. If it does, then we assign the WebGL context to a local variable called "GL". The clear color is simply the background color, and it is worth noting that in WebGL most of the parameters go from 0.0 to 1.0 so you would have to divide your rgb values by 255. So in our example 1.0, 1.0, 1.0, 1.0 means a white background with 100% visibility (no transparency). The next two lines tell WebGL to calculate depth and perspective so that an object closer to you will block objects behind it. Finally, we set the aspect ratio which is calculated by dividing the canvas’s width by it’s height.

Before we continue and load the two shaders, let’s write them. I am going to write these in the HTML file where we are going to put the actual canvas element. Create an HTML file, and place the following two script elements just before the closing body tag:

<script id="VertexShader" type="x-shader/x-vertex">
  
	attribute highp vec3 VertexPosition;
	attribute highp vec2 TextureCoord;
	
	
	uniform highp mat4 TransformationMatrix;
	uniform highp mat4 PerspectiveMatrix;
	
	varying highp vec2 vTextureCoord;
	
	void main(void) {
		gl_Position = PerspectiveMatrix * TransformationMatrix * vec4(VertexPosition, 1.0);
		vTextureCoord = TextureCoord;
	}
</script>

<script id="FragmentShader" type="x-shader/x-fragment"> 
	varying highp vec2 vTextureCoord;
	
	uniform sampler2D uSampler;
	
	void main(void) {
		highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
		gl_FragColor = texelColor;
	}     
</script>

The vertex shader is created first, and we define two attributes:

  • the vertex position, which is the location in x,y and z coordinates of the current vertex (Point in your Model)
  • the texture coordinate; the location in the texture image that should be assigned to this point

Next, we create variables for the transformation and perspective matrices. These are used to convert the 3D model into a 2D image. The next line creates a shared variable to the fragment shader, and in the main function we calculate the gl_Position (the final 2D position). We then assign the ‘current texture coordinate’ to the shared variable.

In the fragment shader we just take the coordinates we defined in the vertex shader and we ‘sample’ the texture at that coordinate. Basically we are just getting the color in the texture that corresponds to the current point on our geometry.

Now that we have written the shaders, we can go back to loading them in our JS file. So replace the "//Load Shaders Here" with the following code:

var FShader = document.getElementById(FSID);
var VShader = document.getElementById(VSID);

if(!FShader || !VShader)
	alert("Error, Could Not Find Shaders");
else
{
	//Load and Compile Fragment Shader
	var Code = LoadShader(FShader);
	FShader = this.GL.createShader(this.GL.FRAGMENT_SHADER);
	this.GL.shaderSource(FShader, Code);
	this.GL.compileShader(FShader);
	
	//Load and Compile Vertex Shader
	Code = LoadShader(VShader);
	VShader = this.GL.createShader(this.GL.VERTEX_SHADER);
	this.GL.shaderSource(VShader, Code);
	this.GL.compileShader(VShader);
	
	//Create The Shader Program
	this.ShaderProgram = this.GL.createProgram();
	this.GL.attachShader(this.ShaderProgram, FShader);
	this.GL.attachShader(this.ShaderProgram, VShader);
	this.GL.linkProgram(this.ShaderProgram);
	this.GL.useProgram(this.ShaderProgram);
	
	//Link Vertex Position Attribute from Shader
	this.VertexPosition = this.GL.getAttribLocation(this.ShaderProgram, "VertexPosition");
	this.GL.enableVertexAttribArray(this.VertexPosition);
	
	//Link Texture Coordinate Attribute from Shader
	this.VertexTexture = this.GL.getAttribLocation(this.ShaderProgram, "TextureCoord");
	this.GL.enableVertexAttribArray(this.VertexTexture);
}

Your textures have to be in even byte sizes or you will get an error…like 2×2, 4×4, 16×16, 32×32…

We first make sure that the shaders exist, and then we move on to loading them one at a time. The process basically gets the shader’s source code, compiles it, and attaches it to the central shader program. There is a function, called LoadShader, that gets the shader code from the HTML file; we will get to that in a second. We use the ‘shader program’ to link the two shaders together, and it give us access to their variables. We store the two attributes we defined in the shaders; so we can input our geometry into them later.

Now let’s look at the LoadShader function, You should put this outside of the WebGL function:

function LoadShader(Script){
	var Code = "";
	var CurrentChild = Script.firstChild;
	while(CurrentChild)
	{
		if(CurrentChild.nodeType == CurrentChild.TEXT_NODE)
			Code += CurrentChild.textContent;
		CurrentChild = CurrentChild.nextSibling;
	}
	return Code;
}

It basically just cycles through the shader and collects the source code.


Step 2: The "Simple" Cube

In order to draw objects in WebGL you are going to need the following three arrays:

  • vertices; the points that make up your objects
  • triangles; tells WebGL how to connect the vertices into surfaces
  • texture coordinates; defines how the vertices are mapped on the texture image

This is referred to as UV mapping. For our example let’s create a basic cube. I will split the cube into 4 vertices per side which connect into two triangles. let’s make a variable that will hold a cube’s arrays.

var Cube = {
	Vertices : [ // X, Y, Z Coordinates
	
		//Front
		
		 1.0,  1.0,  -1.0,
		 1.0, -1.0,  -1.0,
		-1.0,  1.0,  -1.0,
		-1.0, -1.0,  -1.0,
		
		//Back
		
		 1.0,  1.0,  1.0,
		 1.0, -1.0,  1.0,
		-1.0,  1.0,  1.0,
		-1.0, -1.0,  1.0,
		
		//Right
		
		 1.0,  1.0,  1.0,
		 1.0, -1.0,  1.0,
		 1.0,  1.0, -1.0,
		 1.0, -1.0, -1.0,
		 
		 //Left
		 
		-1.0,  1.0,  1.0,
		-1.0, -1.0,  1.0,
		-1.0,  1.0, -1.0,
		-1.0, -1.0, -1.0,
		
		//Top
		
		 1.0,  1.0,  1.0,
		-1.0, -1.0,  1.0,
		 1.0, -1.0, -1.0,
		-1.0, -1.0, -1.0,
		
		//Bottom
		
		 1.0, -1.0,  1.0,
		-1.0, -1.0,  1.0,
		 1.0, -1.0, -1.0,
		-1.0, -1.0, -1.0
	
	],
	Triangles : [ // Also in groups of threes to define the three points of each triangle
		//The numbers here are the index numbers in the vertex array
		
		//Front
		
		0, 1, 2,
		1, 2, 3,
		
		//Back
		
		4, 5, 6,
		5, 6, 7,
		
		//Right
		
		8, 9, 10,
		9, 10, 11,
		
		//Left
		
		12, 13, 14,
		13, 14, 15,
		
		//Top
		
		16, 17, 18,
		17, 18, 19,
		
		//Bottom
		
		20, 21, 22,
		21, 22, 23
		
	],
	Texture : [ //This array is in groups of two, the x and y coordinates (a.k.a U,V) in the texture
		//The numbers go from 0.0 to 1.0, One pair for each vertex
		
		 //Front
		 
		 1.0, 1.0,
		 1.0, 0.0,
		 0.0, 1.0,
		 0.0, 0.0,
		 
		
		 //Back
		
		 0.0, 1.0,
		 0.0, 0.0,
		 1.0, 1.0,
		 1.0, 0.0,
		
		 //Right
		
		 1.0, 1.0,
		 1.0, 0.0,
		 0.0, 1.0,
		 0.0, 0.0,
		 
		 //Left
		 
		 0.0, 1.0,
		 0.0, 0.0,
		 1.0, 1.0,
		 1.0, 0.0,
		
		 //Top
		
		 1.0, 0.0,
		 1.0, 1.0,
		 0.0, 0.0,
		 0.0, 1.0,
		
		 //Bottom
		
		 0.0, 0.0,
		 0.0, 1.0,
		 1.0, 0.0,
		 1.0, 1.0
	]
};

It may seem like a lot of data for a simple cube, however, in in part two of this tutorial, I will make a script that will import your 3D models so you don’t have to worry about calculating these.

You may also be wondering why I made 24 points (4 for each side), when there is really only eight total unique points on a cube? I did this because you can only assign one texture coordinate per vertex; so if we would only put in the 8 points, then the whole cube would have to look the same because it would wrap the texture around all the sides that the vertex touches. But this way, each side has it’s own points so we can put a different part of the texture on each side.

We now have this cube variable and are ready to start drawing it. Let’s go back to the WebGL method and add a Draw function.


Step 3: The Draw Function

The procedure for drawing objects in WebGL has a lot of steps; so, it’s a good idea to make a function to simplify the process. The basic idea is to load the three arrays into WebGL buffers. We then connect these buffers to the attributes we defined in the shaders along with the transformation and perspective matrices. Next, we have to load the texture into memory, and, finally, we can call the draw command. So let’s get started.

The following code goes inside the WebGL function:

this.Draw = function(Object, Texture)
{
    var VertexBuffer = this.GL.createBuffer(); //Create a New Buffer

    //Bind it as The Current Buffer
    this.GL.bindBuffer(this.GL.ARRAY_BUFFER, VertexBuffer);

    // Fill it With the Data
    this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Vertices), this.GL.STATIC_DRAW);

    //Connect Buffer To Shader's attribute
    this.GL.vertexAttribPointer(this.VertexPosition, 3, this.GL.FLOAT, false, 0, 0);

    //Repeat For The next Two
    var TextureBuffer = this.GL.createBuffer();
    this.GL.bindBuffer(this.GL.ARRAY_BUFFER, TextureBuffer);
    this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Texture), this.GL.STATIC_DRAW);
    this.GL.vertexAttribPointer(this.VertexTexture, 2, this.GL.FLOAT, false, 0, 0);
    var TriangleBuffer = this.GL.createBuffer();
    this.GL.bindBuffer(this.GL.ELEMENT_ARRAY_BUFFER, TriangleBuffer);
    //Generate The Perspective Matrix
    var PerspectiveMatrix = MakePerspective(45, this.AspectRatio, 1, 10000.0);

    var TransformMatrix = MakeTransform(Object);

    //Set slot 0 as the active Texture
    this.GL.activeTexture(this.GL.TEXTURE0);

    //Load in the Texture To Memory
    this.GL.bindTexture(this.GL.TEXTURE_2D, Texture);

    //Update The Texture Sampler in the fragment shader to use slot 0
    this.GL.uniform1i(this.GL.getUniformLocation(this.ShaderProgram, "uSampler"), 0);

    //Set The Perspective and Transformation Matrices
    var pmatrix = this.GL.getUniformLocation(this.ShaderProgram, "PerspectiveMatrix");
    this.GL.uniformMatrix4fv(pmatrix, false, new Float32Array(PerspectiveMatrix));

    var tmatrix = this.GL.getUniformLocation(this.ShaderProgram, "TransformationMatrix");
    this.GL.uniformMatrix4fv(tmatrix, false, new Float32Array(TransformMatrix));

    //Draw The Triangles
    this.GL.drawElements(this.GL.TRIANGLES, Object.Trinagles.length, this.GL.UNSIGNED_SHORT, 0);
};

The vertex shader positions, rotates, and scales your object based on the transformation and perspective matrices. We will go more in depth into transformations in the second part of this series.

I have added two functions: MakePerspective() and MakeTransform(). These just generate the necessary 4×4 Matrices for WebGL. The MakePerspective() function accepts the vertical field of view, the aspect ratio, and the nearest and farthest points as arguments. Anything that is closer than 1 unit and farther than 10000 units will not be displayed, but you can edit these values to get the effect you are looking for. Now let’s take a look at these two functions:

function MakePerspective(FOV, AspectRatio, Closest, Farest){
	var YLimit = Closest * Math.tan(FOV * Math.PI / 360);
	var A = -( Farest + Closest ) / ( Farest - Closest );
	var B = -2 * Farest * Closest / ( Farest - Closest );
	var C = (2 * Closest) / ( (YLimit * AspectRatio) * 2 );
	var D =	(2 * Closest) / ( YLimit * 2 );
	return [
		C, 0, 0, 0,
		0, D, 0, 0,
		0, 0, A, -1,
		0, 0, B, 0
	];
}
function MakeTransform(Object){
	return [
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, -6, 1
	];
}

Both these matrices effect the final look of your objects, but the perspective matrix edits your ’3D world’ like the field of view and the visible objects while the transformation matrix edits the individual objects like their rotation scale and position. With this done we are almost ready to draw, all that’s left is a function to convert an image into a WebGL texture.


Step 4: Loading Textures

Loading a texture is a two step process. First we have to load an image like you would in a standard JavaScript application, and then we have to convert it to a WebGL texture. So let’s start with the second part since we are already in the JS file. Add the following at the bottom of the WebGL function right after the Draw command:

this.LoadTexture = function(Img){
	//Create a new Texture and Assign it as the active one
	var TempTex = this.GL.createTexture();
	this.GL.bindTexture(this.GL.TEXTURE_2D, TempTex);  
	
	//Flip Positive Y (Optional)
	this.GL.pixelStorei(this.GL.UNPACK_FLIP_Y_WEBGL, true);
	
	//Load in The Image
	this.GL.texImage2D(this.GL.TEXTURE_2D, 0, this.GL.RGBA, this.GL.RGBA, this.GL.UNSIGNED_BYTE, Img);  
	
	//Setup Scaling properties
	this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MAG_FILTER, this.GL.LINEAR);  
	this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MIN_FILTER, this.GL.LINEAR_MIPMAP_NEAREST);  
	this.GL.generateMipmap(this.GL.TEXTURE_2D); 
	
	//Unbind the texture and return it.
	this.GL.bindTexture(this.GL.TEXTURE_2D, null);
	return TempTex;
};

It’s worth noting that your textures have to be in even byte sizes, or you will receive an error; so they have to be dimensions, like 2×2, 4×4, 16×16, 32×32, and so on. I added the line to flip the Y coordinates simply because my 3D application’s Y coordinates were backward, but it will depend on what you are using. This is due to some programs making 0 in the Y axis the top left corner and some applications make it the bottom left corner. The scaling properties that I set just tell WebGL how the image should up-scale and down-scale. You can play around with different options to get different effects, but I thought these worked best.

Now that we are done with the JS file, let’s return to the HTML file and implement all of this.


Step 5: Wrapping It Up

As I mentioned earlier, WebGL renders to a canvas element. That’s all we need in the body section. After adding the canvas element, your html page should look like the following:

<html>
	<head>
		<!-- Include Our WebGL JS file -->
		<script src="WebGL.js" type="text/javascript"></script>
		<script>
			
		</script>
	</head>
	<body onload="Ready()">  
	  <canvas id="GLCanvas" width="720" height="480">
	    	Your Browser Doesn't Support HTML5's Canvas.  
	  </canvas>
	  
	<!-- Your Vertex Shader -->
	
	<!-- Your Fragment Shader -->
	
	</body>
</html>

It’s a pretty simple page. In the head area I have linked to our JS file. Now let’s go implement our Ready function, which gets called when the page loads:

//This will hold our WebGL variable
var GL; 
	
//Our finished texture
var Texture;
	
//This will hold the textures image 
var TextureImage;
	
function Ready(){
	GL = new WebGL("GLCanvas", "FragmentShader", "VertexShader");
	TextureImage = new Image();
	TextureImage.onload = function(){
		Texture = GL.LoadTexture(TextureImage);
		GL.Draw(Cube, Texture);
	};
	TextureImage.src = "Texture.png";
}

So we create a new WebGL object and pass in the IDs for the canvas and shaders. Next, we load the texture image. Once loaded, we call the Draw() method with the Cube and the Texture. If you followed along, your screen should have a static cube with a texture on it.

Now even though I said we will cover transformations next time, I can’t just leave you with a static square; it’s not 3D enough. Let’s go back and add a small rotation. In the HTML file, change the onload function to look like so:

TextureImage.onload = function(){
		Texture = GL.LoadTexture(TextureImage);
		setInterval(Update, 33);
};

This will call a function called Update() every 33 milliseconds which will give us a frame rate of about 30 fps. Here is the update function:

function Update(){
	GL.GL.clear(16384 | 256);
	GL.Draw(GL.Cube, Texture);
}

This is a fairly simple function; it clears the screen and then draws the updated Cube. Now, let’s go to the JS file to add the rotation code.


Step 6: Adding Some Spin

I’m not going to fully implement transformations, because I’m saving that for next time, but let’s add a rotation around the Y-axis. The first thing to do is add a Rotation variable to our Cube object. This will keep track of the current angle, and allow us to keep incrementing the rotation. So the top of your Cube variable should look like this:

var Cube = {
	Rotation : 0,
	//The Other Three Arrays
};

Now let’s update the MakeTransform() function to incorporate the rotation:

function MakeTransform(Object){
	var y = Object.Rotation * (Math.PI / 180.0);
	var A = Math.cos(y);
	var B = -1 * Math.sin(y);
	var C = Math.sin(y);
	var D = Math.cos(y);
	Object.Rotation += .3;	
	return [
		A, 0, B, 0,
		0, 1, 0, 0,
		C, 0, D, 0,
		0, 0, -6, 1
	];
}

Conclusion

And that’s it! In the next tutorial, we will cover loading models and performing transformations. I hope you enjoyed this tutorial; feel free to leave any questions or comments that you might have below.


November 07 2011

13:00

Free Stuff: Strata Design 3D Cxi for the Mac – Comment to Win

My friends over at Strata have just added their powerful Design 3D Cxi software to the Mac App store, and I have 1 coupon code for a free copy to give away this week.

Available only through the Mac App Store, Strata Design 3D CXi is a professional-level 3D modeling and animation software that delivers end-to-end power for the entire 3D design workflow. Quickly bring your creative ideas to life with a simplified learning curve and award-winning rendering quality rivaling any software.

Be sure to read the rules, and good luck!

Contest Rules:

  • All you have to do is to tweet the post, to share it on Facebook or to leave a comment on the post.
  • Only comment once.
  • 1 winner will be randomly chosen
  • Comments will remain open for about a week

July 06 2011

10:20

3D Modeling Tutorials to Ignite Your Creativity

Advertisement in 3D Modeling Tutorials to Ignite Your Creativity
 in 3D Modeling Tutorials to Ignite Your Creativity  in 3D Modeling Tutorials to Ignite Your Creativity  in 3D Modeling Tutorials to Ignite Your Creativity

3ds MAX, Maya, Zbrush, RealFlow & VRay are all highly regarded software solutions that not only model but also animate, render and create realistic designs. They produce mesmerizing results that can take nearly anything that you can imagine, and transform it into a breathtaking reality. These programs have become something of a magic wand for graphic designers as they are equipped to create near life-like creations. Effectively widening the field of possibilities for what designers can achieve.

This post is a compilation of some of the best 3D Modeling tutorials made using various programs like 3ds MAX, Maya, Zbrush, RealFlow & VRay, so that you can enhance your skills in the third dimension.

The Tutorials

Creating Washroom in Maya

You will learn how to create a Washroom in Maya. This tutorial will be more helpful to those who have basic knowledge of Maya.

Bathroom in 3D Modeling Tutorials to Ignite Your Creativity

Making of Ganesha – God of Wisdom

This is again exclusively a Maya tutorial in which the author has shared his take on creating his Lord’s idol. Very detailed and interesting article.

Ganesha in 3D Modeling Tutorials to Ignite Your Creativity

Making of 3D Render Hover Before The Storm

A very useful tutorial which covers the making of an architectural visualization using Maya, RealFlow, Mudbox and VRay together.

Hover1 in 3D Modeling Tutorials to Ignite Your Creativity

Project Overview: Sheikh Zayed

This tutorial focuses on creating a Portrait that was modeled in Maya, and other parts were covered using ZBrush and Mental Ray.

Sheikh in 3D Modeling Tutorials to Ignite Your Creativity

Create a Grand Piano in Maya Lessons

Learn how to do the modeling of a Grand Piano in this detailed tutorial. You will model the body(exterior) as well as the interior, strings, pins, dampers, hammers and guides.

Piano in 3D Modeling Tutorials to Ignite Your Creativity

Modeling The “Adam Syringe” From “Bioshock”

If you are a video game lover, you will enjoy this tutorial a lot. Learn how to create a high-res model of the “ADAM Syringe” from the popular video game “Bioshock”.

Bioshock in 3D Modeling Tutorials to Ignite Your Creativity

Modelling a Hand in 3D – A quick and effective guide

Enjoy this tutorial on how to make a fantastic hand model. Although this tutorial is in Maya, it can also be replicated in any other 3D program.

Hand-modeling in 3D Modeling Tutorials to Ignite Your Creativity

Video Tutorial: Head Modeling in Maya

In the previous tutorial you learned to model a hand. Now learn how to model a head with this tutorial.

Head-modeling1 in 3D Modeling Tutorials to Ignite Your Creativity

Occlusion Shading Opacity Mapped Geometry In Maya

Possess the knowledge of how to create a custom shading network inside Maya. The author has further used PaintFX and Mentalray.

Shading-maya in 3D Modeling Tutorials to Ignite Your Creativity

Facial Rigging – Maya Tutorial

This is a video tutorial that shows you an easy and understandable way of how to rig a face.

Polyface in 3D Modeling Tutorials to Ignite Your Creativity

Rigging a Cartoon Bottle using Maya

In this tut, the author shows us his methodology to rigg a cartoon bottle using Maya with joints, locators, custom attributes, set driven keys, expressions and constraints.

Rigging-bottle in 3D Modeling Tutorials to Ignite Your Creativity

Interior Design – Modeling a Room

In this tutorial the author shows us how to model a room. This is an important tutorial for the architects and interior designers.

Room-modeling in 3D Modeling Tutorials to Ignite Your Creativity

Model, Texture, and Render a Bathroom Interior Design with Maya

Once again this is another important tutorial for interior designers as they will learn how to give life to a bathroom interior using Maya.

Bathroom-modeling in 3D Modeling Tutorials to Ignite Your Creativity

Making of Dragon

Here the artist has created a lovely Dragon in Maya, sculpted and detailed in ZBrush, textured and composed in Photoshop.

Dragon in 3D Modeling Tutorials to Ignite Your Creativity

Video Tutorial: Realistic Glass of Water

In this video tutorial the artist demonstrates how to create a realistic glass of water (liquid) with Maya Mental ray materials.

Glass-of-water in 3D Modeling Tutorials to Ignite Your Creativity

Procedural Modeling with MEL Script in Maya

For those who want to learn MEL Script in Maya, this tutorial can be of great help.

Procedural-modeling2 in 3D Modeling Tutorials to Ignite Your Creativity

How to Model a Low Poly Building for Games – Maya Tutorial

This tutorial works well for both beginners as well as intermediates. Learn how to model a low poly building for game designs.

Buildings in 3D Modeling Tutorials to Ignite Your Creativity

Character Animation Fundamentals with Maya—Analyzing a walk

In this look at character animation fundamentals you can actually clear your Maya basics. This tutorial is made from scratch to animation so you can brush up your skills.

Character-animation in 3D Modeling Tutorials to Ignite Your Creativity

Super Toon Sample

Learn how to create Maya cartoon character animation through Maya 3d modeling.

Toon in 3D Modeling Tutorials to Ignite Your Creativity

Maya: Simple 2D Eyelid Rigs

Learn how to create eyelid rigs that emote as well.

Eyelid in 3D Modeling Tutorials to Ignite Your Creativity

Making of Little Bunny

Create a wierd and interesting little Bunny with the help of this tutorial.

Bunny2 in 3D Modeling Tutorials to Ignite Your Creativity

Hair Polygon Modeling Tutorial

This tutorial is more for beginners and it throws light on how to create hair polygon modeling.

Hair-polygon in 3D Modeling Tutorials to Ignite Your Creativity

Making of Don’t Beat Me

This is a vast tutorial with multiple programs used along with Maya. The author has also used Mudbox and ZBrush. So you will get opportunity to check out your skills on that software too.

Beatbhanu in 3D Modeling Tutorials to Ignite Your Creativity

Spider Texturing In Maya

This tutorial focuses on texturing a spider for an organic model.

Textured-spider in 3D Modeling Tutorials to Ignite Your Creativity

3D Rendering – Render Layers – Maya Tutorial

Learn how to render layers in Maya through this turorial.

Maya-rendering in 3D Modeling Tutorials to Ignite Your Creativity

(rb)

May 02 2011

23:47

Free Stuff: Strata Design 3D SE + Strata Foto 3D SE Bundle (3) – Comment to Win

Ive got some more awesome software up for grabs. My friends at Strata have recently launched some new products that I think you guys (and gals) will love. Strata Design 3D SE and Strata Foto 3D SE. It’s my job to give 3 copies of both in a bundle from the Mac app store to 3 lucky BittBox commenters. Be sure to read the rules, and good luck :)

Free Stuff: Strata Design 3D SE + Strata Foto 3D SE Bundle - Comment to Win

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 3 winners will be randomly chosen from the comments.
  • You must leave an email address in order to win.
  • Comments will remain open for 1 week.

February 28 2011

20:36

Strata Design 3D and Foto 3D Bundle Winner!

Nearly two hundred entries, yet there can be only 1 winner. And that winner is Todd Edwards! Congratulations to Todd, and a big thanks to Strata for offering such a great prize :) (More Strata giveaways will be coming soon, wink, wink)

Free Stuff: Strata 3D Giveaway - Comment to Win

December 31 2010

10:00

55 Unique 3D Models Looking Like Photographs From Real Life

3D modeling, also known as, meshing is the process of making an object in three-dimension with the use of software such as 3D Studio Max, Solidworks, Blender, etc.

In our time today, 3D models are widely used by movies and video games as characters. Even the architecture industry now uses 3D model as the way of showing proposed structures. And in the world of designing, one great thing you can do to attract and put a touch of creativity is to use 3D as an element on their design. For viewers are getting amaze on how detailed and realistic objects are made.

To amaze you more with this, I have rounded up in this article with the best 3D models you may find as your inspiration in making one.

Realistic 3D Design

1. Audi TT Interior

Software Used: 3D Studio Max, Photoshop, VRay

Audi TT Interior

2. Housing Interior

Software Used: 3D Studio Max, Photoshop

Housing interior

3. Students Room

Software Used: 3D Studio Max, Photoshop

Students room

4. Summer at Noon

Software Used: CINEMA 4D, VRay

Summer at noon

5. Feminine Kitchen

Software Used: 3D Studio Max, Photoshop

Feminine kitchen

6. Westbound, With mail

Software Used: 3D Studio Max, Photoshop, VRay

Westbound with mail

7. Restaurent

Software Used: 3D Studio Max, Sketch Up, VRay

Restaurant

8. Casas do Forte

Software Used: 3D Studio Max, After Effects, Photoshop, VRay

Casas do Forte

9. Heels

Software Used: 3D Studio Max, Photoshop, VRay

Heels

10. Simple Corner

Software Used: Blender, GIMP

Corner

Character Model Design

11. EVIL WITCH

Software Used: 3D Studio max, Mental Ray, Photoshop

Evil witch

12. Open Green

Open_Green_by_cryinghorn

13. Thor, the son of Odin

Software Used: 3D Studio Max, Mental Ray, Mudbox, Photoshop

ThorHead

14. Wolverine

Software Used: 3D Studio Max, Mental Ray, VRay, Photoshop

Wolverine_light

15. Buzz

Software Used: 3D Studio Max, ZBrush, Photoshop

BUZZ

16. Conforming Outfit V4 Alice

Conforming_Outfit__V4_Alice_by_parrotdolphin

17. La Espera

Software Used: LightWave, Fiver FX, SUBPATCH

La-espera

18. Day of the Tentacles

Software Used: 3D Studio Max, Mental Ray, Photoshop, ZBrush

Day of the tentacles

19. Chumani for Aponi, Freebie

Chumani_for_Aponi_by_Shox00

20. Moe’s

Software Used: Mental Ray, Photoshop

Moe's

21. Barack Obama

Software Used: ZBrush, Maya, Mental Ray, Photoshop

Obama

22. Max and Milton

Software Used: Maya, Photoshop

Max and milton

23. Cell

Software Used: 3D Studio Max, ZBrush

CellFinal

24. X14 Sci-Fi Suit for V4 Alice

X14_Sci_Fi_Suit_for_V4_Alice_by_parrotdolphin

25. Benjamin Linus

Software Used: Cinema 4D, ZBrush, Photoshop

Benjamin-linus2000

26. Fish Man

Software Used: 3D Studio Max, Mental Ray, Photoshop, ZBrush

Fish man

27. Fortress Giant

Software Used: 3D Studio Max, ZBrush, Photoshop

Fortress giant

28. Udaan (Flight)

Software Used: Maya, Photoshop

Udaan flight

29. Gollum

Software Used: Maya, Modo, Zbrush, Photoshop

Gollum

30. Starcraft Ghost, Yimin Zhang (3D)

Software Used: Maya

Starcraft Ghost, Yimin Zhang (3D)

31. Cali (short film lead character)

Software Used: Combustion, Maya, Mental Ray, Photoshop

Cali

32. Twisted Dolls: Mistress Lili

Software Used: 3D Studio Max, Mental Ray, Photoshop, ZBrush

Twisted Dolls Mistress Lili

33. TMNT

Software Used: 3D Studio Max, Mental Ray

Tmnt

34. Darth Necros Zbrush model

Darth_Necros_Zbrush_model_by_RedHeretic

35. 3D Iron Man for Maya

Software Used: Maya 8.5

3D_Iron_Man_for_Maya_by_parka

Car Model Design

36. Ikarus 260 city bus

Software Used: 3D Studio Max, VRay

Ikarus_260_city_bus_by_Lorddarthvik

37. Land Rover Encounter

Land Rover Encounter

38. Renault Landstorm

Renault Landstorm

39. Porsche 911 996 Top Art Chrome Look

Porsche 911 996 Top Art Chrome Look

40. Ford Focus WRC Concept

Ford focus wrc concept

41. Mustang Classic

Software Used: 3D Studio Max, VRay

Mustang classic

42. Mach 5 Toy Model

Mach 5 toy model

43. Setra 700 Series

Setra 700 Series

44. ‘Hawk’ Concept Vehicle

Software Used: Cinema 4D

Hawk concept vehicle

45. EB-One

EB-One

46. 3–D Modeling

3-D Modeling

47. BMW 250tti Concept

BMW 250tti Concept

48. 1971 Plymouth Satellite

Software Used: 3D Studio Max, VRay

1971 Plymouth Satellite

49. Truck

Software Used: Maya, Ligthwave

Truck

50. Volkswagen Microbus

Volkswagen_Microbus_by_TomerM

Robot Model Design

51. urz-t

Software Used: Cinema 4D

Urz_t_by_d0rn

52. Robot Hopper

Software Used: 3D Studio Max 5, Brazil RS

Robot_hopper_medium

53. Scorbot

Software Used: 3D Studio Max, Photoshop, VRay

348046_1249286658_medium

54. Blue Wondering

Software Used: Maya, Mental Ray, Photoshop


130820_1131574289_medium

55. Spektrum XL13

PhpThumb_generated_thumbnail

And those are just some of the amazing 3D models you can find on the web. I hope you enjoyed and got inspired in creating your own 3D model.

BONUS: 3D Tutorials Resources

3D Tutorials

A comprehensive tutorial database site featuring free 3D Studio Max, Maya, Lightwave, Bryce, SoftImage and Cinema 4D tutorials. The site is updated daily with new 3D tutorials being added all the time.

Tutorial Guide

TutorialGuide.net is a website dedicated to finding tutorials for you. The people behind Tutorial Guide calls the website as a tutorial index website. The purpose of is to provide you with a great collection of tutorials on all sorts of subjects in a safe and easy way. It strives to have good and unique tutorials in our database on as many subjects as possible.

free3Dtutorials

This site (free3Dtutorials.com) have been founded by guys around the 3d.sk websites. It aims to create the most valuable sites for CG and 3D artists from all around the world. The people behind this website wants to help people grow, to improve skills and knowledge. They like to help people new to CG by providing them with top-notch free tutorials and even more!

Tutorials 3D

The tutorials3D.com main objective is the accomplishment of high quality online tutorials to provide to the student a fast and effective learning method of the main 3D design tools.

In addition, like complementary service, tutorials3D.com is a sale point of high resolution 3D models, where the 3D models creators can add their creations to our bank of models, so all the interested people can visualize them and even buy it.

I hope you feel inspired in creating your own 3D model with the help of these 3D tutorial resources.

What did you like the most on the 3D models? Or do you want to share your own 3D models? Feel free to share your thoughts on the Comment section.

December 16 2010

10:00

25 Free 3D Modeling Applications And Websites: Create & Download

3D refers to objects that been created in 3 position (X, Y and Z). Now a days, there are a lot 3D objects that you can see in movies, product designs, logo, advertisements, etc. Even they are commonly seen these days but they are not easy to create. You need 3D authoring tool or website that offers ready-made 3D models to  create a masterpiece.

For this post, I know that this will cost a lot to non –  professional users so I will be featuring open source 3D modeling tool and places where you can download free 3D models but be sure to read the owner’s rights before you use it for your commercial or personal use.

1. Blender

3D_modeling_tools_website_1

Blender is a free and open source modeling and animation application that is great for modeling. The essentials of using this tools is having Interface, Modeling, Rigging, Rendering, Animation, UV Unwrapping, Shading, Physics and Particles, Imaging and Compositing, Real Time 3D/Game Creation, and Phyton scripting.

Pros:

  • Great variety of features
  • Easy access of online help
  • Non-overlapping interface

Cons:

  • More on the advanced users
  • Overwhelming features

2. K – 3D

K-3D is free-as-in-freedom 3D modeling and animation software. It features a plugin-oriented procedural engine for all of its content, making K-3D a very versatile and powerful package.K-3D excels at polygonal modeling, and includes basic tools for NURBS, patches, curves and animation.

Pros

  • Free
  • Interaction with 3D objects during playback
  • Variety of tools to render

Cons

  • Complicated features for beginners
  • Still in development process so there are still bugs

3. Arts of Illusions

3D_modeling_tools_website_3

Art of Illusion is a free, open source 3D modelling and rendering studio. The highlights include subdivision surface based modelling tools, skeleton based animation, and a graphical language for designing procedural textures and materials. It is stable and powerful enough to be used for serious, high-end animation work.

Pros:

  • Great modeling features
  • Simple but powerful tool

Cons:

  • Written in Java so it is usable in Java Virtual Machine

4. Google Sketch Up

3D_modeling_tools_website_4

Google SketchUp is an open source software that you can use to create, share and present 3D models.It promise that you can have a great fun and for anyone use. Even it is for modeling your house, models for Google Earth etc.  There are dozens of tutorials and videos that you can use to brace yourself in using this.

Pros:

  • Easy access to 3D modeling
  • Dozens of tutorials and tips
  • User friendly
  • Upload your work in Google Earth
  • Integrated with Google Maps

Cons:

  • Lacks advanced features of major CAD apps
  • No export to CAD format in free version
  • Can’t add text and images to designs in free version

5. Anim8or

3D_modeling_tools_website_5

Anim8or is a 3D modeling and character animation program which allows users to create and modify 3D models with built-in primitives such as spheres, cylinders, platonic solids, etc.; mesh-edit and subdivision; splines, extrusion, lathing, modifiers, bevel and warps.

Pros:

  • Introduces 3D graphics
  • No install required

Cons:

  • No light sources available
  • Difficult to navigate
  • No help file

6. Seamless3D

3D_modeling_tools_website_6

Seamless3d is open source 3D modeling software free and available for all under the MIT license.It is a very powerful and practical 3d modelling software for anyone who wants to make quality 3d animated content for the web. Real time editing , compact tool bar, fast backups, animation and more.

Pros :

  • Lots of good features

Cons:

  • Not really professional lookin

7. BRL -CAD

3D_modeling_tools_website_8

BRL-CAD is a powerful tool for geometry solid modeling system that includes an interactive geometry editor, ray-tracing for rendering & geometric analyses, network distributed framebuffer support, image & signal-processing tools.

8. Draw Plus

3D_modeling_tools_website_7

Impressive drawing tools and brilliant effects that has a stunning free vector drawing program from Serif. It also have a friendly interface and drag and drop artwork and content.

Pros:

  • It’s easy to use
  • Great for designing web graphics and creative print projects
  • Draw, paint & sketch
  • Design professional-quality logos and graphics
  • ‘How To’ guides and comprehensive help system

Cons:

  • Very limited tools and effects.
  • Tricky to initially find and use curve tools.

9. Edrawings

3D_modeling_tools_website_10

eDrawings is a free software that lets you view and print eDrawings (eDRW, ePRT, eASM), DXF, and DWG format files.Fast, reliable, and convenient, representations of 3D models and 2D drawings created with the many of widely used CAD systems. Point-and-click animations that make it easy for anyone.

Pros:

  • Point and click animations
  • 2D and 3D modeling

Cons:

  • Has malware and it will take up your time getting ride of an antivirus program that attaches itself and program can’t be uninstalled in windows add remove.

10. K3DSurf

3D_modeling_tools_website_9

K3DSurf is a tool that visualize and manipulate Mathematical models. It features include 3D, 4D, 5D, and 6D, hyper objects visualization, full support of all mathematical functions , support of mouse event in the drawing area (left rotate, right scale and middle translate), animation and Morph effect, PovRay script and .OBJ files generation and Parametric equations and Isosurfaces.

Pros:

  • ability to save a config file to store information about colors and isosurfaces resolution.
  • variety of features

Cons:

  • lots of options to learn in detailed

11. DesignWorkshop Lite

3D_modeling_tools_website_11

DesignWorkshop lets you build your own 3D models for home design and visualization of architecture, landscapes, exhibits, or any kind of spatial design. You can view and walk-through ready-made models of any size.

Pros:

  • Mac-like user interface
  • Great Architectural designs

Cons:

  • Will work most of the interior and exterior designers, not really for web designs

12. GDesigns

3D_modeling_tools_website_12

GDesign is a 2D/3D free generative art application for Windows. It can interactively build, test, and edit complex models using DOL, Stochastic and Parametric LSystems, mixed up with some Cellular Automata techniques and other tricks.It also has full 3D turtle movements and Euler angles rotations,special branching system withselective stacks,up to 5 nested LSystems each with its independent parameters and use of bitmaps to control objects’ behaviors and position.

Pros:

  • Improved generative languages and rules: macro, automatic effects and user functions
  • Visual and user-friendly interface. User manual and help.

Cons:

  • Mostly for intermediate to advanced users

13. Sweet Home 3D

3D_modeling_tools_website_13

Sweet Home 3D is a free interior design application that helps you place your furniture on a house 2D plan, with a 3D preview. It is available in different language.

Pros

  • Easy to use
  • Excellent 3D walk-around
  • Lots of furniture to choose from
  • Handles round rooms and walls
  • Auto-recovery from crashes
Cons
  • Graphics aren’t great
  • Not many preferences

14. trueSpace7

3D_modeling_tools_website_14

trueSpace7.6 is a fully-featured 3D authoring package that will let you model, texture, light, animate and render 3D content. As well as traditional images and movies, you can also make 3D content for online shared spaces, and for Virtual Earth.It is only 3D application that lets you meet other people in online shared spaces, whether you want to meet other 3D artists to work or learn together, or just to meet friends for fun.

Pros:

  • Export to Virtual Earth and X Format
  • Work in real-time
  • Improved UV editor

Cons:

  • Complicated features for beginners

15. TurboSquid

3D_modeling_tools_website_11

TurboSquid is a 3D marketplace for your needs in your 3D projects. It has a vast library categories such as  people, cars, architecture, places and more.  You can also choose from the variety of models that are created in different 3D tool such as maya, blender , 3ds Max etc,.

16. 3 Delicious

3D_modeling_tools_website_16

3 Delicious has a great 3D modeling pieces. You can also view what are the daily best, weekly best or any date frame that are mostly downloaded. The great thing is that you don’t need to register to get the coolest 3D artwork.

17. Archive3D

3D_modeling_tools_website_17

Archive3D has the most great designs in terms of architect and interior designs.  It offers more than 25000+ free 3D models for your commercial use.

18. Sketch Up Warehouse

3D_modeling_tools_website_18

Sketch Up Warehouse is the collections of 3D  models created in Sketch Up software. If you are not good in using the Sketch Up, you can just download a 3D model for your next project.

19. 3DM3

3D_modeling_tools_website_19

3DM3 gives visitors a vast variety of 3D models in different categories. There is also a forum for the 3D creator and also tutorials that you can use to create this great designs.

20. Exchange 3D

3D_modeling_tools_website_20

Exchange 3D is really an exchange of 3D model pieces to the visitors. You can try the free ones for your projects. A huge collections of 3D models awaits you for this website.

21. Mr Furniture

3D_modeling_tools_website_21

Mr Furniture offers more on the office and home furniture. It will be a great use in terms of getting good interior designs for your home and office to see the actual look or feel of your home.

22. Infinitee-Designs

3D_modeling_tools_website_22

Free 3D models for beginner to advance users. The model can be imported in different 3D applications that you can enhance the texture and style.

23. 3D Nucleus

3D_modeling_tools_website_23

Great designs for 3D modeling. Lots of categories to choose from the library.

24. Telias

3D_modeling_tools_website_24

Simple website but offers a lot of 3D models. For me the designs are quite simple comparing to others.

25. Oyonale

Oyonale offers free usable 3D objects for your personal or commercial 3D art and animations.It is available in POV-Ray, Cinema 4D and/or Wavefront OBJ formats.

3D_modeling_tools_website_25

If we have missed any useful resource or tool, please feel free to let us know and we’ll be happy to update the article.

December 03 2010

13:58

Post-Production Trends in 3D Visualizations

Advertisement in Post-Production Trends in 3D Visualizations
 in Post-Production Trends in 3D Visualizations  in Post-Production Trends in 3D Visualizations  in Post-Production Trends in 3D Visualizations

Post-production might well be the most underappreciated part of creating 3D visualizations. It gives you the power to easily make some changes; put in the sky you like, add some dirt, make the colors more vibrant and even correct some little mistakes in your 3D mesh.

Most of the traditional 3D artists tried to do as much as possible wihtin their 3D package since these packages were not focusing on post, but rather on the 3D products themselves. Rendering masks for the different color corrections one would like to do was a painstaking job of fixing the lighting and materializing — making artists choose to do most of the work in 3D (such as adding dirt and textures) and so leaving only color correction for post-work.

The techniques and styles of correcting images in post-production have changed a lot over the last couple of years. First, we shall take a look at some of the trends and techniques that are happening right now. Next to that, we will take a look at the most impressive architectural visualization shot that CGI has ever seen and at the post-production in that shot. Next to that, the trend it started in terms of post-production.

Different Styles of Post-Production

This is what a 3D image should look like according to the corporate industry. Basically, what you do is the following: take a render, do some minor color correction and add some glow. Despite the fact that this is mostly considered standard, it should belong to the past. There are a lot of techniques out now to create better looking, more beautiful images with the help of post-production software. Let’s look at some examples.

Trazar in Post-Production Trends in 3D Visualizations

This image, created by a Dutch company called “Trazar” explains exactly what the “standard” is. The image looks great and a client would absolutely love it because the building is so clearly visible, but it looks too perfect. So to a 3D specialist, it still looks fake.

Some things that immediately come to mind:

  • Everything is completely balanced; you can see the sky clearly (it is not too bright), but you can also see every little detail in the shadows.
  • There is a blank spot at the horizon, which is odd, because it’s situated in the middle of a city.

Here is another example, made by a company called “Archiform”. This render too looks very realistic, but still doesn’t look quite as good as it could with some heavy post production.

Archiform1 in Post-Production Trends in 3D Visualizations

Same thing here:

  • The colors are too vibrant.
  • The glow of the sky makes the trees blue

Degraded Photorealism

A synopsis to explain what I’m talking about. Degrading your images in post with scratches, vignetting, lens blur and many more things, making your image look more like a photo taken by a (bad or old) camera that uses film rather then a 3D render. What we make in our 3D packages can look perfect: our edges can be exactly 90 degrees (or 89 for that matter), our tabletops can be completely clean without dents in them, as well as that we can produce images in low light condition with an ISO of 6400 without a single drop of grain in the final images.

This technique focuses on how to overcome the perfectness of 3D. It is unmistakably the most popular post-production trend at the moment used in non-corporate 3D visuals. Let’s look at the only example needed to illustrate this technique. This video is made by Alex Roman, a 3D visualization expert.

The Third & The Seventh by Alex Roman.

Now, the first thing that’s noteworthy is that everything except the people and the birds is 3D. The art of 3D visuals has come a long way and if we would give a good 3D artist one year of free time on his hands to make whatever he wants, this is what he would come up with (at least, “Alex Roman” did).

Alex Roman’s “The Third & The Seventh” shook-up the 3D world by using a great cinematic style to make the architecture stand out. Most of the time, you don’t even realize it’s 3D.

So, what part of this is done in his 3D package, and what part is done in post? To let Alex answer the question himself, here is another video of the compositing breakdown. He shows a wireframe or smooth shaded view of the model inside 3D studio max, after that the bare render. Each next frame includes a new step of post-production.

Compositing Breakdown (T&S) by Alex Roman.

As we can clearly see he replaced the sky, added people, corrected the color and added some other visual elements in post. Those things are purely decorative. What really sets the mood, is the use of vignetting, lens flares and lens blur. He makes it look like this was a movie shot in the early nineties. Don’t get confused, it is not only the post-production that made this mood happen (cameramen wearing somewhat classic clothing, etc.), but this is certainly something that helps a lot! This movie would have been completely different if it hadn’t been corrected in post.

Techniques

Let’s discuss how we can achieve this effect, and look at the stuff that will work, and how the same stuff, applied in a wrong way, won’t work. In the examples below, these effects have been exaggerated to see the difference clearer. I’ve had to limit myself to a couple effects since it is simply too much to discuss all of the techniques that can be used. The ones I’ll describe below should get the basics though.

Grain in Post-Production Trends in 3D Visualizations
Large view

When using old cameras with film, there are pictures that often show grain in the darker areas of the image because the film won’t pick up the details in the darker part of the image. This effect can easily be achieved in our post-production package. I used photoshop in this case.

Do:

  • Make the effect barely visible, only noticeable if you look good.
  • Use plugins like “NIK color effects” that can simulate actual grain from a certain film. This will boost the credibility of the grain.

Don’t:

  • Add noise in brighter areas of the image, this will look unrealistic.
  • Overdo it. Some noise is good, but don’t make it disturbing, the end product should still look good.

Vignette in Post-Production Trends in 3D Visualizations
Large view

Vignetting can have different causes in photography. The main cause is using a cheap lens / camera. Most of the time this effect is unwanted, but sometimes it can create an image that centers your eye, or guides it to a specific part of the image.

In post, we can use two types of vignetting; one brightens the middle of the image, the other darkens the edges. Normally, the second one is used, since the 3D render still has to maintain its function of showing the subject properly 6mdash; if it’s too bright, this isn’t always possible.

Do:

  • Add vignetting to your renders! It looks cool.

Don’t:

  • Tell your client about is, they won’t like that you are degrading otherwise perfect images just too make them look cool. If you use this effect moderately, they probably won’t even notice.
  • Overdo the effect. This will make your image look very dark, and might not fit its purpose.
  • Add them when you are rendering studio setups and such. The effect needs to be believable. Studio cameras are often setup to not have vignetting; so when applied in this case, it won’t look realistic but rather disturbing.

ChromaticAberations in Post-Production Trends in 3D Visualizations
Large view

Chromatic aberrations are caused by a lens that refracts the light spectrum in different ways on different places. Like with a prism, the light will disperse and fall on the sensor incorrectly.The effect will occur more on wide-angle lenses rather then tele-lenses.

It’s is a very subtle effect and will pretty much only show up in the corners and on the side of the images (unless your camera equipment is really bad). If you look in the circle drawn in the image above at the black beam, there is a red, blurry line next to it, that’s chromatic aberration (CA).

Do:

  • Use it (heavily) when you have rendered with a wide angle lens and adapt the amount of chromatic aberrations when using a tele-lens.
  • Make sure you use the correct color slider; the most often occurring colors of CA are red and green. In photoshop, you can also make blue and yellow ones.

Don’t:

  • Overdo the effect (again? yes again!). This is really important. All of these effects should be only very subtle to make them work. You are trying to make it look like a stylized photo, not like you screwed up your image in post.
  • Add it in the center of the image, it will look disturbing instead of realistic.
  • Add it in the beginning of the post; make sure to make this one of your last steps so that the colors of the aberrations are not effected by your color corrections.

Color in Post-Production Trends in 3D Visualizations
Large view

This is were the fun begins. Color correction. The most common thing is to look at “lomography” photographs; they have huge amounts of saturation, produce those artifacts we want to see, and still manage to look stunning. This step is somewhat personal, and I can see why some people don’t like this effect, but I personally like to take this step over the top.

In this image I’ve added a bunch of adjustment layers:

  • Three gradient maps (set to various blending modes).
  • One color balance.
  • One black & white layer set to soft light.
  • A levels adjustment.

All of the layers have a very low opacity (less than 25%) to make the effects subtle, but visible. A little side note; before I added these, I made sure my image was “correct”. No overexposed areas, no huge amounts of contrast and no unsharp areas.

Now, all of these effects standing alone might not be very cool, but added together, it gives a completely different feel to the scene.

Final in Post-Production Trends in 3D Visualizations
Large view

One thing to keep in mind, is that the render you start out with, has to look good already. It has to look somewhat photorealistic to make these effects work. If you start out with a simple render with simple materials that on its own doesn’t look convincing; you should work on those qualities first. After that, you can let yourself go in post to degrade the images again.

Next to the effects described above, there is a ton of stuff you can add; blooming, lens flares, haze, depth of field, motion blur, etc. I have just scratched the surface here. Check the “More to Read & Watch” section for some tutorials and interesting articles.

Hybrid 2D / 3D Visualization

Another upcoming trend is to use 2D in conjunction with 3D to create pictures that look like they were painted or drawn, but were the geometry was made in 3D. This movie is made by CMI studio — this technique is relatively new and uncommon, but I think it’s noteworthy simply because it looks great! Let’s look at an example of this technique:

If you take a good look at the movie, you will find a lot of things that are peculiar, and normally don’t happen in a 3D company. The rendered image is printed out, drawn over, the drawing is scanned, and that is the one getting color. So the 3D part isn’t visible in the end product at all! Check the “More to Read & Watch” section for some “making of” videos. I think this is one of the upcoming new things that will become greatly used in the upcoming years.

Wrapping Up

The last couple of years, the amount of post-production has grown, most things are easier to add into post, than in your 3D package.

Despite the fact that it has been growing in the corporate way (Because that’s where the money is), I think artist will start showing more of what they can do in post, and the companies buying 3D renders will soon realize that stylized images look much better than the plain, blend ones without some sort of a feeling too it. Adding real-life imperfections to your renders should be something that has to be done a lot more often.

Nothing in the world is perfect, your 3D renders shouldn’t be either!

More to Read & Watch

Would you like to see more article on 3D / Visualization on Smashing Magazine?



Would you like to see more articles on 3D / Visualization on SM?Market Research

(sp)(ik)(vf)


© Roland Peelen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: 3D, post-production, visualization

October 29 2010

21:18

Strata 3D Bundle Winner!

Congrats to Susie! The lucky winner of the Strata 3D bundle. Thanks to Strata for making the giveaway possible! Susie, we hope you enjoy the software :)

Free Software: Live 3D and Strata 3D CX Giveaway - Comment to Win

a

October 27 2010

19:44

Free Software: Live 3D and Strata 3D CX 2 Giveaway – Comment to Win

A Bittbox Exclusive! Strata is offering Bittbox visitors a sneak preview ahead of tomorrow’s official launch of Strata Live 3D CX 2 and the opportunity to win a software bundle worth nearly $1400! Strata Live 3D CX2 allows users to quickly and easily publish and share interactive 3D content online (see example below). Strata Design 3D CX is a professional 3D modeling and animation tool. All Strata software is for Mac and PC and you can download trial versions or learn more at www.strata.com. Just post a comment and a random winner will be chosen on Friday. Good Luck!

Note: Strata also informed me of a Sponsored Tweet Treat from the Adobe MAX conference for a 35% discount on all Strata software through October 31 using Coupon Code: MAX35 in Strata’s online store

Free Software: Live 3D and Strata 3D CX Giveaway - Comment to Win

Preview/Example

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 1 lucky winner will be randomly chosen from the comments.
  • You must leave an email address in order to win.
  • Comments will remain open until Friday, October 29th.

GOOD LUCK!

a

October 06 2010

06:00

3D Slides Built with HTML5, CSS3, and SVG

Over on my personal blog I talk about a 3D slide deck I’ve created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to ‘zoom’ into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I’ll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can ‘accordian’ open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

Read more to learn about the 3D slide deck and how I built it.

September 21 2010

21:00

40+ Stunning 3D Text Effect Photoshop Tutorials

40+ Stunning 3D Text Effect Photoshop TutorialsTypography is defined as the art and technique of arranging type, type design, and modifying type glyph, and in order for you to master this art you should learn more techniques and methods to manipulate text to create stunning typography art. Using 3D effects makes text & typography more realistic and brings it to life. In this article I compiled a list of 40+ 3D Text Effect Photoshop Tutorials for you to learn new 3D text effects.

1. 3D Textured Text Effect

2. Floral 3D Text Effect

3. Create 3D Typography with Advanced Texturing and Lighting Effect in Photoshop

4. Create Awesome Splashing Water Text Effect in Photoshop

5. Design a Zebra-Skinned Crimson Text Effect in Photoshop

6. Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

7. Design a Super Delicious, Shining and Glossy Text Effect in Photoshop

8. Design a God of War III Inspired Cracked Text Effect in Photoshop

9. Make a 3D Colorful Abstract Text Effect

10. Create Colorful 3D Text Effect in Photoshop

11. Colorful Plexi Text Effect using Photoshop

12. 3D Layered Text Effect

13. Metal Text Under 12 O’clock Spot Light

14. Create Awesome Text Made of 3D Blocks

15. How to Create A Realistic 3D Typography in Photoshop

16. Create a Spectacular Style Text Effect

17. How to create 3D Love text composition

18. Design a Slick 3D Ice Text Effect

19. Create an Extruded Glossy 3D Text Effect in Photoshop

20. How to Create an Incredible Typographic Illustration: Part 1, Part 2

21. Add Fantastic Color to 3D Text: Part 1, Part 2

22. Create a Steam Powered Typographic Treatment: Part 1, Part 2

23. How to Create High Quality Metal 3D Text in Photoshop

24. How to Design a Stunning, 3D, Sunset Type Illustration

25. Using Light and Shade to Bring Text to Life

26. Create a Spectacular Flaming Meteor Effect on Text

27. Design Soft Stylized 3D Type

28. Create a Spectacular Grass Text Effect in Photoshop

29. Recreate the ‘Bee Movie’ Text Effect

30. Create This Dazzling 3D Text Effect in Photoshop

31. How to Create Remarkable 3D Text in Photoshop

32. How to Create a 3D Text Photo Manipulation

33. Create a Dream Design with 3D Typography

34. 3D Text On Fire

35. Kaboom! Exploding Text

36. Create 3D type art using Photoshop CS5

37. 3D Type with Repoussé in Photoshop CS5 Extended

38. The Making of “Climb” – An Awesome 3D Text Composition in Photoshop

39. Create an Awesome Funky Text Effect

40. Create A Beautiful 3D Text Composition

41. Create a Cool 3D Graffiti Text Effect using Line Art in Photoshop

Let us know if we have missed some thing awesome and we will be happy to update the article.

September 14 2010

11:00

“Or so they say…” by Mr. Doob

Via Mr. Doob comes a cool canvas demo called "Or so they say..." he created. What's interesting about this demo is it uses HTML5 Audio and Canvas, including Mr. Doob's Three.js library and sequencer that he also used on The Wilderness Downtown project.

Three.js is similar to Papervision3D in the Flash world, allowing you to build up 3D scenes. Three.js then draws the 3D scene graphs using either Canvas, SVG, or WebGL. It's a very interesting library, but needs more docs (hint hint Mr. Doob!).

In the "Or so they say..." demo (source), Mr. Doob starts by setting up Three.js, the camera, and the backing renderer:

JAVASCRIPT:
container = document.createElement( 'div' );

camera = new THREE.Camera( 60, 800 / 600, 1, 20000 );

renderer = new THREE.CanvasRenderer();
renderer.setSize( 800, 600 );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
 

The sequencer is then initialized and various 3D and time effects are added; a small snippet:

JAVASCRIPT:
sequencer = new Sequencer();

sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 200 ), new THREE.Vector3( 0, 0, 10000 )  ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
sequencer.add( new Part1Effect( camera, renderer ), keys[ 0 ], keys[ 1 ] );

sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 1000 ), new THREE.Vector3( 0, 0, 400 ) ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
sequencer.add( new Part2Effect( camera, renderer ), keys[ 1 ], keys[ 2 ] );
 

The audio is straightforward:

JAVASCRIPT:
audio = document.getElementById( 'audio' );
audio.currentTime = keys[ key ] / 1000;
audio.play();
 

Mr. Doob has some notes about performance:

It's all software rendering (no WebGL), so don't expect much performance. It's running at 20-30fps on my Mac Mini Core 2 Duo @ 2.53Ghz with Ubuntu/Linux. If you are running MacOS. I'm sorry to say that it won't run faster than 1fps... For some reason Chrome team decided to use CoreGraphics instead of Skia.

August 30 2010

11:00

August 16 2010

10:00

Tricks From Our Flash Friends: 3D in a 2D Context

If you’ve seen some of the cool work that folks like Mr. Doob or Gerard Ferrandez have done with HTML5/CSS3/SVG/etc., you’ve probably seen them emulating nifty 3D effects in the browser (move your mouse within the demo inline below to pan the camera):

The demo above, by Gerard, uses SVG plus various mathematical tricks to emulate 3D.

Mr. Doob has a similar demo that emulates 3D but using the Canvas tag using his Three.js library:

What both of these samples have in common is they are using special math to simulate three dimensions on a two-dimensional surface (i.e. our screen using SVG, the Canvas tag, or CSS3 Transforms).

I’ve realized recently that the Flash world is a bit ahead of us in the HTML5 world in terms of doing nifty effects using special tricks such as simulating 3D in a 2D space. I’ve been actually trying to go deep into learning Flash so that I can learn some of these tricks but use them in an HTML5 context.

I reached out to Gerard Ferrandez recently to ask him where he learned the math to do his demos, and he told me he learned them from the Flash world. He pointed me to an absolutely excellent Flash tutorial series that explains in depth how to do such 3D tricks in your own code. It’s straightforward to learn the math but apply it in an HTML5 context. The tutorial series is very complete and easy to understand, basically explaining how to do perspective drawing, first invented in the Renaissance. A classic perspective drawing from the Renaissance:

Notice the lines superimposed on the painting above; shapes that are closer to the viewer are scaled larger, while shapes in the background are smaller. In addition, the location of the shapes on the painting change based on where they located along what is called the ‘vanishing point’. Instead of emulating these with paint, as the Old Masters used to do, we use simple mathematics that can then determine the correct x and y coordinates on our fake 2D ‘window’ in order to simulate a perspective point, then draw it using SVG, Canvas, etc.:

As I continue learning tricks from our Flash friends but in an HTML5 context I’ll keep posting here on Ajaxian.

August 03 2010

05:38

Architectural Projection Mapping the future of motion graphics?

If you’ve gotten bored with traditional motion graphics and haven’t quite gotten into 3D movies yet you’re in luck. Architectural projection mapping is here and ready to boggle your mind. The idea is that you project a 3D object onto a 2D surface. Like the facade of a building. This makes for some large scale creativity and makes buildings come to life or collapse in front of your eyes. This could begin to get very interesting as technology progresses in the future… There could be all kinds of uses for architectural projection or it could be directly projected on people! Imagine someone walking around the street and buildings move and bend to try and get prospective customers to enter to check out their merchandise. Here are some awesome examples of where Architectural Projection Mapping is now… Could you see design crossing into this medium?

Battle of Branchage

Architectural Projection Mapping @ Branchage Film Festival 2009

Kraft Work

Architectural projection Mapping @ Autostadt, Wolfsburg 2010

BMW JOY 3D: Asia’s 1st Interactive 3D Building Projection

Watch as we transform busy office buildings in Singapore from a symbol of work, into a symbol of Joy.
Witness Joy coming alive at Suntec City, Towers 2 & 3.

Watch as we transform busy office buildings in Singapore from a symbol of work, into a symbol of Joy. Witness Joy coming alive at Suntec City, Towers 2 & 3.

Hirzberger Events – Digital Wallpaper

Once in a while it is nice to not work on a commercial project and have the freedom of doing whatever you want. Fortunately the people at Büro Hirzberger hirzbergerevents.com were totally open to whatever we presented them to decorate parts of their office space in Vienna.  My fellow co-workers at Strukt Design Studio strukt.com came up with this digital wallpaper, using 2 projectors to map an entire wall and using VVVV to do the deskewing and to generate the content. Many thanks go to the great guys at Concept Solutions derigel.at to provide us the equipment for the test set-up.

ENVISION : Step into the sensory box

ENVISION: Step into the sensory box. Under this name hides the immersive experience offered by Alcatel-Lucent to its customers at the last Mobile World Congress. An experience-based video mapping designed by the agency and the Department SUPERBIEN New Media Agency \ Auditorium. The public was invited into a cube and discover an artistic vision of the tagline of the event: Transforming the mobile experience.

ACDC Vs Iron Man 2 – Architectural Projection Mapping on Rochester Castle

On the site of a thousand years of violent history, ACDC were pitted against Iron Man in a ground breaking architectural projection mapping project. The front facade of the Great Keep at Rochester Castle, was brought to life using the latest in 3D animation techniques. This onslaught of the senses, saw the castle confront it’s ultimate challenge. Warping, morphing, spewing and collapsing before the audiences eyes. Let there be rock!

3D Projection Mapping

3D Projection mapping in the city of Sugarland, Texas for New Years Eve 2010. This video is courtesy of Texas Video & Post who created the content. LD Systems provided sound, lights, video and staging for the 25th anniversary of the city. The equipment included a gramdMA lighting console, Barco HD projectors, Hippotizer HD media server and mapping system, and EV X-Line concert speakers. LDS and TV&P collaborated for this event on the heels of the overwhelmingly successful Glowrama event.

Samsung 3D Projection Mapping In Amsterdam

Perfectly mapped to a historic building in Amsterdam, the projection realistically cracks the building in half, sending debris shattering down before it fills up with water and then drains into a rain forest revealing the new Samsung 3D LED TV!

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Architectural Projection Mapping the future of motion graphics?

June 28 2010

07:00

Super Cool CSS Flip Effect with Webkit Animation

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

View the Transformers Top Trumps CSS demo

View the demo

Safari browser required to experience the animated Webkit flip effect.

Webkit flip transition in action

Flipped view

The example I’ve put together shows how the flip effect can be used to reveal information as if flipping over on a card. Hover over the Optimus Prime and Megatron top trump cards to see their scores. Now, let’s take a look at how it was made.

The HTML

<div id="transformers-rule">
	<div class="container megatron">
		<div class="card">
			<div class="face front">

			</div>
			<div class="face back">

			</div>
	 	</div>
	</div>
</div>

The HTML is pretty simple, it’s basically made up of a couple of <div> elements to form containers for each card.

<div class="face front">
	<img src="megatron.png" alt="Megatron" />
</div>
<div class="face back">
	<h2>Megatron</h2>
	<img src="decepticons.png" alt="Decepticons logo" />
	<p>Megatron is the primary antagonist and leader of the evil Decepticons.</p>

	<dl>
		<dt>Skill</dt>
		<dd>7</dd>

		<dt>Power</dt>
		<dd>8</dd>

		<dt>Agility</dt>
		<dd>5</dd>

		<dt>Bravery</dt>
		<dd>7</dd>

		<dt>Speed</dt>
		<dd>4</dd>
	</dl>
</div>

The front and rear face of the cards are split into two more divs and the relevant content placed inside them.
On the front is a single image, whereas on the back is the complete spec for each character. A <h2> creates a title, paragraph element and image for a brief description, then the scores are listed out in a definition list <dl>.

The CSS

.megatron {
	float: left; position: absolute; top: 30px; left: 20px;
}
	.megatron .front {

	}
	.megatron .back {
		width: 284px; height: 372px; padding: 20px;
		background: #a3a3a3 url(texture.png);
	}
		.megatron .back h2 {
			width: 287px; height: 42px; margin: 0 auto 20px auto;
			background: url(megatron-title.png); text-indent: -9999px;
		}
		.megatron img {
			float: right;
		}
		.megatron p {
			float: left; width: 185px; margin: 0 0 20px 0;
			font-size: 17px; line-height: 28px; color: #4c4c4c;
		}

The background of the card is first given a repeating grey texture, then each of the HTML elements is styled up. The h2 is replaced with an image of the same text but with some added Photoshop effects. The font-size and colour is set on the paragraph elements and they’re floated alongside the Autobots and Decepticons logos.

.megatron dl {
	font-size: 30px; font-weight: bold;
	line-height: 40px; color: #717171;
	width: 264px; padding: 5px 10px; overflow: hidden;
	background: #cfcfcf url(gradient.png) repeat-y;
	-webkit-box-shadow: 0 1px 5px #888;
	text-shadow: 0 1px 1px #f5f5f5;
}
	.megatron dl dt {
		float: left; clear: both;
	}
	.megatron dl dd {
		float: right;
	}

In order to display the character specs side by side, the definition title (dt) and definition description (dd) are floated left and right respectively. The definition list element (dl) itself is given the gradient background and text styling, which is inherited down to the dt and dd.

The webkit animation

.container {
	width: 324px; height: 412px;
	-webkit-perspective: 1000;
}

.card {
	width: 324px; height: 412px;
	border: 8px solid #fff;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
}

In order to get the whole thing working a bunch of webkit animation and transform properties are brought into play. Starting at the top, the container divs are given a -webkit-perspective of 1000 to add some realism to the flip motion, otherwise it all seems a little flat. Next, -webkit-transform-style: preserve-3d; and -webkit-transition: 0.5s; are added to the card div. The preserve-3d transform style simply ensures that child elements follow the three dimensional motion rather than staying flat and the transition value of 0.5s sets the speed of the overall effect.

.container:hover .card {
	-webkit-transform: rotateY(180deg);
}

.face {
position: absolute;
-webkit-backface-visibility: hidden;
}

When the card is hovered by the mouse, a webkit transform of rotateY(180deg) is added, which rotates the object 180 degrees on the Y axis. -webkit-backface-visibility: hidden; is another fancy webkit property that is put to use on the face of each card. This ensures the opposite side of the card is no longer visible, without this the object would simply flip into a mirror image rather than display the other side.

The full HTML

View the full HTML

The full CSS

View the full CSS

View the Transformers Top Trumps CSS demo

View the demo

Be sure to show DeviantArt user UdonCrew some love for their awesome Transformers concept art.

June 01 2010

11:37

Beautiful Futuristic 3D Scenes For Inspiration

Advertisement in Beautiful Futuristic 3D Scenes For Inspiration
 in Beautiful Futuristic 3D Scenes For Inspiration  in Beautiful Futuristic 3D Scenes For Inspiration  in Beautiful Futuristic 3D Scenes For Inspiration

By Janos Racz

Science-fiction is a genre with endless possibilities. The unpredictability of the future gives tremendous freedom to creative minds, so it’s no wonder that many artists find this style so appealing. So much so that most 3D galleries have a whole separate section for sci-fi scenes. In this collection we’ve brought you some interesting works on the Web. Impressive spaceship designs and futuristic cities in many forms that show the endless possibilities of imagination and the diversity of this genre. Make sure you also check out artist’s portfolios for more gems!

Beautiful 3D Scenes

Future Station by Neil Maccormack

Futuristic 3d Scenes 1 in Beautiful Futuristic 3D Scenes For Inspiration

Far from the city by tredowski

Futuristic 3d Scenes 2 in Beautiful Futuristic 3D Scenes For Inspiration

Grand Space Opera Entry by Moritz Füllgrabe

Futuristic 3d Scenes 3 in Beautiful Futuristic 3D Scenes For Inspiration

Be All My Sins Remember’d by Diston

Futuristic 3d Scenes 4 in Beautiful Futuristic 3D Scenes For Inspiration

The Hub by EStreet

Futuristic 3d Scenes 5 in Beautiful Futuristic 3D Scenes For Inspiration

ORBITALS by Edlo

Futuristic 3d Scenes 6 in Beautiful Futuristic 3D Scenes For Inspiration

Proto Pegasus by Diston

Futuristic 3d Scenes 7 in Beautiful Futuristic 3D Scenes For Inspiration

Atlantis City Daytime by Diston

Futuristic 3d Scenes 8 in Beautiful Futuristic 3D Scenes For Inspiration

Trenchtown by Stefan Morrell

Futuristic 3d Scenes 9 in Beautiful Futuristic 3D Scenes For Inspiration

The Clouds Will Soon Roll By by BWS

Futuristic 3d Scenes 10 in Beautiful Futuristic 3D Scenes For Inspiration

Sunset Soar by SgtHK

Futuristic 3d Scenes 11 in Beautiful Futuristic 3D Scenes For Inspiration

Frontier: The Customs by AlexWild

Futuristic 3d Scenes 12 in Beautiful Futuristic 3D Scenes For Inspiration

Chopper WIP4 – Geometry by kheng

Futuristic 3d Scenes 13 in Beautiful Futuristic 3D Scenes For Inspiration

Lost City IV by jfliesenborghs

Futuristic 3d Scenes 14 in Beautiful Futuristic 3D Scenes For Inspiration

The Mall by Frenic

Futuristic 3d Scenes 15 in Beautiful Futuristic 3D Scenes For Inspiration

Metropolis 2106 by Thmc

Futuristic 3d Scenes 16 in Beautiful Futuristic 3D Scenes For Inspiration

aircraft concept 01 by Kerko

Futuristic 3d Scenes 17 in Beautiful Futuristic 3D Scenes For Inspiration

Bon Voyage by ChristianBeyer

Futuristic 3d Scenes 18 in Beautiful Futuristic 3D Scenes For Inspiration

The Inevitable by Stefan Morrell

Futuristic 3d Scenes 19 in Beautiful Futuristic 3D Scenes For Inspiration

1st wave by EhsanA

Futuristic 3d Scenes 20 in Beautiful Futuristic 3D Scenes For Inspiration

Une Ville by sanfranguy

Futuristic 3d Scenes 21 in Beautiful Futuristic 3D Scenes For Inspiration

Grand Space Opera Winner by Alexander Preuss

Futuristic 3d Scenes 22 in Beautiful Futuristic 3D Scenes For Inspiration

About New Times by ChristianBeyer

Futuristic 3d Scenes 23 in Beautiful Futuristic 3D Scenes For Inspiration

Cosmo by George Arevshatov

Futuristic 3d Scenes 24 in Beautiful Futuristic 3D Scenes For Inspiration

Carrier Concept Final by Kheng

Futuristic 3d Scenes 25 in Beautiful Futuristic 3D Scenes For Inspiration

Cityscape by Stefan Morrell

Futuristic 3d Scenes 26 in Beautiful Futuristic 3D Scenes For Inspiration

Frontier: The Customs by AlexWild

Futuristic 3d Scenes 27 in Beautiful Futuristic 3D Scenes For Inspiration

Battles City by dIeGoHc

Futuristic 3d Scenes 28 in Beautiful Futuristic 3D Scenes For Inspiration

DSS: Diplomatic Mission by AlexWild

Futuristic 3d Scenes 29 in Beautiful Futuristic 3D Scenes For Inspiration

2263: Chao Lu Spaceport by AlexWild

Futuristic 3d Scenes 30 in Beautiful Futuristic 3D Scenes For Inspiration

3001 by sanfranguy

Futuristic 3d Scenes 31 in Beautiful Futuristic 3D Scenes For Inspiration

Space Cruiser by Togman-Studio

Futuristic 3d Scenes 32 in Beautiful Futuristic 3D Scenes For Inspiration

Lost city III by jfliesenborghs

Futuristic 3d Scenes 33 in Beautiful Futuristic 3D Scenes For Inspiration

D.S.E. delta04 by MarkusVogt

Futuristic 3d Scenes 34 in Beautiful Futuristic 3D Scenes For Inspiration

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl