Tag Archives: Training

Alpha Map Shadows; Problem?

Link back to old alpha tutorial.

Talk about the option within the render settings to show the correct shadows – three steps, quick tutorial.

Mention compositing for the reflections afterwards.

Show the difference it makes and conclude post.

Reference while writing post:

http://www.gamedev.net/topic/362393-shadow-map-alpha-testing-question-solved/

http://3dsmaxrendering.blogspot.com/2010/01/transparent-alpha-channel.html

http://students.autodesk.com/ama/orig/Curriculum/ADA2011/2010/HTML/AA_Level_1/PDF_Tutorials/Texture_Basics/AA_L1_Texture_Maps.pdf

Alpha Mapping to Create Realistic Leaves

Alpha mapping is a technique in 3D computer graphics where an image is mapped (assigned) to a 3D object, and designates certain areas of the object to be transparent or translucent. The transparency can vary in strength, based on the image texture, which can be greyscale, or the alpha channel of an RGBA image texture.

1-Hello everyone, in this lesson we will talk about alpha maps, alpha maps are really important cause they are helpfull to create very detailed or photo realistic result in 3d from leaves for a plant or tree to character’s hair for video games.

So basically there is one rule that says  : White is visible – Black is invisible (transparent).

We will start with a leave image in photoshop to understand an Alpha map, simply search google to find any of your choice:

2 – Lets press F7 on keyboard  to open up layers window and double click on our image (name background) and press Ok; this will convert that to a layer.

3- Select magic wand tool and change the tolerance to 25, click on white area and press Delete key on your keyboard. Select magic wand tool again and click out of the screen to deselect that area.

4- So now we have a transparent leaf image in photoshop, its time to make the background green, so if any pixel fails in our alpha map, that will have the same color of our leaf and its not going to be noticable . Create a new layer, select eye dropper tool, click anywhere off leaf, then select paint bucket tool and fill that layer by clicking in our image. Don’t forget to drag our green layer under the leaf layer.

5- Select move tool, Press control-T on your keyboard and rotate the leaf a bit to get a better direction. When you are done, press enter on your keyboard.

6- Press filter menu and click in sharpen—> sharpen mask and change the values as follows, this will help us to made our leaf image sharper and better in quality to prevent blur (you can change the values as its based on your image, so play with the percentages).

7- Now its time to save our image as a jpg file. A quality of 10 would have a balance of quality and file size. Also save a PSD file just in case you want to edit something later.

8- Select the green background, select a black color and fill the background layer using paint bucket tool.

9- Select the leaf layer, click on FX icon and click color overlay.

10- Select a pure white color and click OK .

11- Now save this image as our alpha-map, also click on image—>image size and remember to write the size of our image in pixels.

12- Open your 3d software, in our case its 3ds max, and create a plane the same size as your image size. Dont worry if it looks too big, you can always scale it down.

13- Now press M to open material editor, select a material, add the leaf image we created in photoshop as diffuse and add the alpha image as opacity. Also check two sided box.

14- Make sure the plane is selected then press “assign material to selection” and “show standard map in viewport”.

15. Now we simply finished to get a working alpha map in our 3ds max software. By adding more segments to our plan and moving them around or adding a bend modifier, we can create a good result that we can use on our models.

I hope you enjoyed using this method, please dont hesitate to ask if you have any other questions.  Don’t forget to check out the other tutorials in our Texturing section, and if you’d like more information on this technique have a look at our older alpha map tutorial.

Happy alpha mapping!

3D Rendering Tutorial Part Two

Welcome again! It’s time to continue writing more code for our small, simple and regularly fast 3D renderer. Today we will write a few more classes: Vertex3D, Plane3D, Object3D, World3D, FlatFiller, and Triangle. – Our “Hello World”, which is actually a rotating flat-filled triangle, will also be written on this lesson.

1. Vertex3D.as

A 3D vertex is basically a 3D point (x, y, z) that includes more information related to the presentation of the object that contains the vertex. Information such as color, texture information, light and more. – But for now, we’ll write a small vertex code that has includes only color information.

The following code goes in a file named “Vertex3D.as” on the “xr/core” folder.
[code]
/**
** Vertex3D.as
**
** Definition of a 3D Vertex3D.
**
** Written by J. Palencia (support@ciachn.com) (c) 2009-2011
*/

package xr.core
{
/**
** @prot: public class Vertex3D
**
** @desc: Describes a 3D Vertex. That is, a vector in 3D space that also
** has related properties such as light, texture information, etc.
*/

public class Vertex3D extends xr.core.Vector3D
{
/**
** @prot: public var vs: xr.core.Vector3D;
**
** @desc: Coordinates of the vertex in view-space (not world-space).
*/

public var vs: xr.core.Vector3D = new Vector3D ();

/**
** @prot: public var color: uint;
**
** @desc: Color of the vertex.
*/

public var color: uint;

/**
** @prot: public var _2d: Vector2D = null;
**
** @desc: Coordinates of the point in 2D space of the 3D vertex after
** a 3D to 2D projection is performed.
*/

public var _2d: Vector2D = new Vector2D ();

/**
** @prot: public function Vertex3D (x: Number = 0, y: Number = 0, z: Number = 0)
**
** @desc: Constructor of the 3D vertex. If no parameters are provided
** a vector at the origin (0, 0, 0) is created.
*/

public function Vertex3D (x: Number = 0, y: Number = 0, z: Number = 0)
{
this.x = x;
this.y = y;
this.z = z;
}

/**
** @prot: public function project () : void
**
** @desc: Performs a projection and stores the resulting 2D coordinates on
** the point2d object of the vertex.
*/

public function project () : void
{
this._2d.x = 0.5*640 + 256 * (vs.x / (vs.z + 256));
this._2d.y = 0.5*480 – 256 * (vs.y / (vs.z + 256));
}

/**
** @prot: public function transform (tm: Matrix3D) : void
**
** @desc: Transforms the vertex using the given matrix.
*/

public function transform (tm: Matrix3D) : void
{
tm.mulv (vs, true);
}

/**
** @prot: public function reset () : Vector3D
**
** @desc: Resets the ViewSpace vector and returns it.
*/

public function reset () : Vector3D
{
this.vs.x = x;
this.vs.y = y;
this.vs.z = z;
this.vs.w = w;

return this.vs;
}

};
};
[/code]
As you can see, the actual information is only the “color” field, which specifies the color of the vertex. As we advance to make a slightly more complicated renderer, we will modify this class to include more informational fields.

2. Plane3D.as

This is the most important part of the engine because all objects in our world are made up of planes. Since this will be seen thousands of times in the object queue it needs to be small and simple. Same as last time, this file goes into the “xr/core” folder.
[code]
/**
** Plane3D.as
**
** Definition of a plane in 3D space.
**
** Written by J. Palencia (support@ciachn.com) (c) 2009-2011
*/

package xr.core
{
/**
** @prot: public class Plane3D
**
** @desc: Describes a 3D plane. This is the most important part of the
** engine because all objects are made up of planes.
*/

public class Plane3D
{
/**
** @prot: public var v1: Vertex3D, v2: Vertex3D, v3: Vertex3D;
**
** @desc: Vertices that make up the 3D plane. Only three vertices are
** needed because we are using triangular planes.
*/

public var v1: Vertex3D;
public var v2: Vertex3D;
public var v3: Vertex3D;

/**
** @prot: public var filler: String;
**
** @desc: Name of the filler class. This is used to fill the plane.
*/

public var filler: String;

/**
** @prot: public function Plane3D (v1: Vertex3D, v2: Vertex3D, v3: Vertex3D)
**
** @desc: Constructor of the 3D plane.
*/

public function Plane3D (v1: Vertex3D = null, v2: Vertex3D = null, v3: Vertex3D = null)
{
this.v1 = v1;
this.v2 = v2;
this.v3 = v3;
}

/**
** @prot: public function depth () : Number
**
** @desc: Returns an approximation of the depth level of the plane, this
** is calculated as the average of the Z coordinate of each vertex.
*/

public function depth () : Number
{
return (this.v1.z + this.v2.z + this.v3.z) / 3;
}

/**
** @prot: public function project () : void
**
** @desc: Performs a projection on each of the vertices of the plane.
*/

public function project () : void
{
v1.project ();
v2.project ();
v3.project ();
}

/**
** @prot: public function transform (tm: Matrix3D) : void
**
** @desc: Transforms the vertices of the plane.
*/

public function transform (tm: Matrix3D) : void
{
v1.transform ™;
v2.transform ™;
v3.transform ™;
}
};
};
[/code]

The depth() function is used by the renderer to perform object ordering before showing the objects, this will be highly required to build a correct final scene. Later on we will see two small flash files, one with depth ordering and one without it, the difference will be highly noticeable.

The “filler” string is used to determine what is the class that fills the contents of the plane, a string is better because it needs little storage. On this lesson we will write code for one common filler known as the FlatFiller (for flat filling, that is a plain-single-colored plane 🙂

3. Object3D.as

The Object3D class provides a base for all objects that are used for modelling. It provides the famous ModelView matrix and currently only the render() method which should be overridden by child classes.
[code]
/**
** Object3D.as
**
** Generic 3D object. It is the base object for all modelling object. It includes
** model view matrix and rendering methods.
**
** Written by J. Palencia (support@ciachn.com) (c) 2009-2011
*/

package xr.core
{
/**
** @prot: public class Object3D
**
** @desc: Generic 3D object. It is the base object for all modelling
** object. It includes model view matrix and rendering methods.
*/

public class Object3D
{
/**
** @prot: public var modelView: Matrix3D;
**
** @desc: Model view matrix of the object.
*/

public var modelView: Matrix3D;

/**
** @prot: public function Object3D ()
**
** @desc: Constructor of the generic object.
*/

public function Object3D ()
{
this.modelView = Matrix3D.identity ();
}

/**
** @prot: public function render () : void
**
** @desc: Renders by transforming the object and generating fundamental
** objects (Plane3D) if necessary, the results are sent to the
** World’s rendering queue for further drawing.
*/

public function render () : void
{
// Should be implemented by child classes.
}
};
};
[/code]

4. World3D.as

[code]
/**
** World3D.as
**
** The world global object provides a clean mechanism to store and render objects
** using their “object data” which in this scope are just Plane3D objects.
**
** Written by J. Palencia (support@ciachn.com) (c) 2009-2011
*/

package xr.core
{
/**
** @prot: public class World3D
**
** @desc: The world global object provides a clean mechanism to store and
** render objects using their “object data” which in this scope are
** just Plane3D objects.
*/

public class World3D
{
/**
** @prot: public static var cameraView: Matrix3D;
**
** @desc: Camera view matrix of the world.
*/

public static var cameraView: Matrix3D = Matrix3D.identity ();

/**
** @prot: private static var queue: Array;
**
** @desc: Internal queue to store each Plane3D object.
*/

private static var queue: Array = new Array ();

/**
** @prot: private static var fillers: Object;
**
** @desc: List of registered plane fillers.
*/

private static var fillers: Object = new Object ();

/**
** @prot: public static function addFiller (name: String, code: Object) : Boolean
**
** @desc: Registers a filler in the system.
*/

public static function addFiller (name: String, code: Object) : Boolean
{
fillers[name] = code;
return true;
}

/**
** @prot: public static function clear () : void
**
** @desc: Clears the queue.
*/

public static function clear () : void
{
queue = new Array ();
}

/**
** @prot: public static function push (obj: Plane3D) : void
**
** @desc: Adds an object to the queue.
*/

public static function push (obj: Plane3D) : void
{
queue.push (obj);
}

/**
** @prot: public static function draw (g: flash.display.Graphics) : void
**
** @desc: Draws all primitive objects stored in the queue.
*/

public static function draw (g: flash.display.Graphics) : void
{
for each (var i in queue)
{
i.transform (cameraView);
i.project ();
}

g.clear ();

for each (var i in queue)
{
if (fillers[i.filler] == null)
continue;

fillers[i.filler].draw (i, g);
}
}
};
};
[/code]

5. FlatFiller.as

The FlatFiller provides an standard draw() method which will fill a provided plane with the color of the first vertex of the plane. The result is written to a graphics surface provided as a parameter. For this file you will need to create another folder on xr named “filler”. The file path should be xr/fillers/FlatFiller.as.
[code]
/**
** FlatFiller.as
**
** Flat filler. Nothing much to say.
**
** Written by J. Palencia (support@ciachn.com) (c) 2009-2011
*/

package xr.fillers
{
import xr.core.World3D;

/**
** @prot: public class FlatFiller
**
** @desc: Flat filler. Nothing much to say.
*/

public class FlatFiller
{
/**
** @prot: public static var reg: Boolean;
**
** @desc: Registers the FlatFiller class using the name “flat”.
*/

public static var reg: Boolean = World3D.addFiller (“flat”, new FlatFiller ());

/**
** @prot: public function draw (p: xr.core.Plane3D, g: Graphics) : void
**
** @desc: Draws the plane on the given graphics surface. The actual color
** used to fill is the color of the first vertex.
*/

public function draw (p: xr.core.Plane3D, g: flash.display.Graphics) : void
{
g.beginFill (p.v1.color);
g.moveTo (p.v1._2d.x, p.v1._2d.y);
g.lineTo (p.v2._2d.x, p.v2._2d.y);
g.lineTo (p.v3._2d.x, p.v3._2d.y);
g.endFill ();
}
};
};
[/code]
All filler classes should implement a draw() method as shown above receiving two parameters, one of type xr.core.Plane3D and another of type flash.display.Graphics. The filler can assume that the “_2d” field of the vertices of the plane are ready (aka already projected to 2D space).

A filler should also register itself using World3D.addFiller() with a string specifying its name, this way when a Plane3D object uses the same name on its “filler” field the correct object will be located.

6. Triangle.as

Since we’re now done with the core and the fillers, you can forget about those folders. Now create another one with the name “model”, here we will be storing the modelling object. And for our first object we’ll create “Triangle”.
[code]
/**
** Triangle.as
**
** Triangle class for object modelling.
**
** Written by J. Palencia (support@ciachn.com) (c) 2009-2011
*/

package xr.model
{
import xr.core.Object3D;

import xr.core.Vertex3D;
import xr.core.Plane3D;

import xr.core.World3D;

/**
** @prot: public class Triangle
**
** @desc: Triangle class for object modelling.
*/

public class Triangle extends xr.core.Object3D
{
/**
** @prot: public var plane: Plane3D;
**
** @desc: Plane that describes the triangle.
*/

public var plane: Plane3D = new Plane3D ();

/**
** Properties used to forward to the plane properties.
*/

public function get v1 () { return plane.v1; }
public function get v2 () { return plane.v2; }
public function get v3 () { return plane.v3; }
public function get filler () { return plane.filler; }

public function set v1 (v: Vertex3D) { plane.v1 = v; }
public function set v2 (v: Vertex3D) { plane.v2 = v; }
public function set v3 (v: Vertex3D) { plane.v3 = v; }
public function set filler (v: String) { plane.filler = v; }

/**
** @prot: public function Triangle (v1: Vertex3D, v2: Vertex3D, v3: Vertex3D)
**
** @desc: Constructor of the 3D triangle.
*/

public function Triangle (v1: Vertex3D = null, v2: Vertex3D = null, v3: Vertex3D = null)
{
this.v1 = v1;
this.v2 = v2;
this.v3 = v3;
}

/**
** @prot: public override function render () : void
**
** @desc: Renders the object. Overrides Object3D.render().
*/

public override function render () : void
{
modelView.mulv (plane.v1.reset (), true);
modelView.mulv (plane.v2.reset (), true);
modelView.mulv (plane.v3.reset (), true);

World3D.push (plane);
}
};
};
[/code]
Well, now we have everything we need for the hello world #1!! The following code is the Main.as file which will use all the stuff we have done so far.
[code]
/**
** Main.as
**
** Skeleton code for an ActionScript 3 application.
**
** Compile using: as3compile -X 640 -Y 480 Main.as
** Download as3compile from: http://www.swftools.org/
*/

import flash.display.MovieClip;
import flash.events.*;

import xr.core.Vector2D;
import xr.core.Vector3D;
import xr.core.Matrix3D;
import xr.core.Vertex3D;
import xr.core.Plane3D;
import xr.core.World3D;

import xr.fillers.FlatFiller;

import xr.model.Triangle;

// Main package.
package Main
{
// Main class.
public class Main extends MovieClip
{
public var a, b;

public function Main ()
{
var w: int = 50;
var h: int = 50;

a = new Triangle (); a.filler = “flat”;
a.v1 = new Vertex3D (w, h, 0);
a.v2 = new Vertex3D (-w, -h, 0);
a.v3 = new Vertex3D (-w, h, 0);
a.v1.color = 0xFF0000;

b = new Triangle (); b.filler = “flat”;
b.v1 = new Vertex3D (w, h, 0);
b.v2 = new Vertex3D (w, -h, 0);
b.v3 = new Vertex3D (-w, -h, 0);
b.v1.color = 0xFFF000;

stage.addEventListener (Event.ENTER_FRAME, onEnterFrame);
}

public function onEnterFrame (e: Event)
{
World3D.clear ();

World3D.cameraView =
World3D.cameraView
.rotate (0.06, 0, 0, 1)
.rotate (0.02, 0, 1, 0)
.rotate (0.07, 1, 0, 0);

a.render ();
b.render ();

World3D.draw (this.graphics);
}
};
};
[/code]
Don’t worry about compilation, or which folder to use. The result is a square with two colors that rotates on all axes on every frame that is updated on the AS3 project.

If you want to download the files (all of them) including the executables, examples and the batch files used to compile you can click here: http://www.ciachn.com/lab/3d/06.zip

Next lesson is going to be a little bit harder because it will be time to write a lot more object modelling classes and begin writing more complex figures! 🙂

Mental Ray Caustics Tutorial (Maya)

Alright, after so much anticipation in creating a lighting tutorial in Maya, I’m back with a proper, easily understood, video lesson regarding Caustics. The Video lesson is about 20 minutes and focuses on Maya’s Mental Ray system shaders and lighting techniques. Caustic effect is an important and a remarkable effect which occurs in nature and is very much required in creating a realistic looking glass lighting effect.  As this is a more advanced tutorial beginners may have a little trouble initially; don’t worry, I’m available if you’ve any questions.

The Topics in the video can be categorized as follows:

  1.  Intro: Discussing “what is caustics?” with examples
  2. Creating basic caustic effect using Maya’s own default material nodes
  3. Discussing about Photon transmission, GI/Caustics
  4. Creating Caustics with Mental Ray materials
  5. Ways and Tips to make Renders times faster
  6. Conclusion: Showing mental ray renders with properties and Photon Map Visualizer.

So, grab a pack of something (I’d recommend chips) and let’s get started!

Maya Mental Ray Caustics Tutorial from Heather Craik on Vimeo.

Alternatively, you can watch it on Prantic’s Youtube channel.

3D 101 Expanding on Matrices

Affine Transformations

First and foremost, an affine transformation is simply a linear transformation followed by an addition. A linear transformation is an equation that operates on a vector to transform it into something else, the most popular linear transformations are rotation, and scaling.

Ordinarily we perform linear transformations by evaluating equations, take for example the equations for X-axis rotation found on the first lesson of this tutorial, which are defined by:

Z’ = Z*COS(Θ) – Y*SIN(Θ)

Y’ = Z*SIN(Θ) + Y*COS(Θ)

 

The above equations contain 4 multiplications and 2 additions, for a total of 6 arithmetic operations just for X-axis rotation. Now imagine we have about 3000 vertices that need to be rotated in X, Y and Z axes, and then need to be scaled (which requires 3 multiplications one for each vector component), that gives us a total of 63,000 operations just to rotate and scale each vertex, imagine if we had a more complex object that had more vertices and required more actions such as scaling more than once, or translating, and rotating using different axes, the final number of operations required would easily grow to millions, here’s where our beloved matrices come in!

Note: Before anything, there is need to mention a slight mistake in the previous lesson, when describing matrix multiplication I strictly said only squared matrices can be multiplied, but in fact that’s not true. In order to correctly multiply matrices A and B, the matrix A should be of size NxM and matrix B must be of size MxP, (in other words, the number of columns of A should match the number of rows of B), now after processing the multiplication the resulting matrix will be of size NxP. – Apologies for my mistake.

With matrices we are able to perform parallel multiplication of vectors, to make this clear imagine we combine the above equations into a single matrix, the result would be:

As you can see, the matrix shown above (A) can be multiplied with a 3D vector (V) and the result obtained (R) will be the same result as the one obtained with equations for X-axis rotation. But still, we have a small problem, what if our equations were changed to something like this:

 

Z’ = Z*COS(Θ) – Y*SIN(Θ) + 777

Y’ = Z*SIN(Θ) + Y*COS(Θ) + 555

 

I have deliberately added an addition on both equations (the +777 and +555), if you think about this for about five minutes you will realize there is no way to use a 3×3 matrix to produce the exact same output as these equations.

 

1. Homogeneous Coordinate Space

Homogeneous coordinate space is the solution to the problem we found a few seconds ago in the previous paragraph. The term “homogeneous” can be more easily understood as “to be symmetric”, for example imagine when you’re baking, and the cake mix has some small lumps, you whisk and keep whisking the mix until it’s smooth and all evened out, right? What you did was to obtain a “homogeneous” mix.

The same applies to matrix arithmetic, with matrices we are able to multiply, and divide, but addition of an scalar value is not possible. But when using homogeneous coordinates we are able to use all basic arithmetic operations and combine them in a single matrix.

Imagine we have the usual 3D vector <x, y, z>, to make it homogeneous the only thing we need is to add a new coordinate to the vector with the value of “1”, the actual letter for the new coordinate may vary, but most books use the letter “w”. Our vector <x, y, z> becomes the homogeneous vector <x, y, z, w> with “w” being the value “1”.

Similarly we do the same with our matrices, if we had a 3×3 matrix we will now add another column and another row to make it 4×4. And now we’re using homogeneous vectors and homogeneous matrices.

Let’s retry the previous problem, and let’s see if now we’re able to create a single matrix that can produce the same result as the equations shown below:

Z’ = Z*COS(Θ) – Y*SIN(Θ) + 777

Y’ = Z*SIN(Θ) + Y*COS(Θ) + 555

 

Our brand new homogenous matrix is:

The matrix “A” (also known as augmented matrix, or affine transformation matrix) effectively produces the correct result when multiplied with a homogeneous vector, and as you can see using the magical w coordinate we can perform addition within the same matrix without problems of any kind.

But what does this mean?

This means, one simple thing that’s incredibly important: We can now combine several linear transformations such as rotation, scaling and now even translation into one single matrix and use it only when we need it. A single matrix multiplication operation with a homogeneous vector will be the equivalent of evaluating ALL the linear transformations at once, saving indeed some speed and code complexity.

To combine the transformations, first you have to figure out the affine transformation matrix for the equations of the transformation you want to combine (let’s call this matrix B), just like we did on this lesson to figure out the matrix for the X-axis rotation.

Once you have that matrix, just multiply it with an existing matrix (let’s call it A) where A is the current matrix, which initially is set to an identity matrix. The identity matrix is a matrix where it’s diagonal contains only “1”s.

2. Affine Transformation Matrices

The following is a list of matrices for most of the operations we will be needing on our simple 3D renderer.

 

In all the matrices,  Θ is the angle in radians. fX, fY and fZ are scaling factors for the X, Y and Z axes respectively. And dX, dY and dZ are displacement values used when translating the X, Y and Z axes respectively.

Combine multiple matrices by multiplying them, and the resulting matrix will be the matrix representation of the operands. For example, if we have matrix A for X-rotation, matrix B for scaling matrix C for translation, and a homogeneous vector v which is the vector we want to transform. The goal is to perform A, B then C on the vector.

Evaluating step by step, we have:

v1 = A * v

v2 = B * v1

v3 = C * v2

v’ = v3

Above you can see v1, v2 and v3, which are temporal vectors which represent the product of the respective matrix with the previous vector. v’ represents the result vector. Now, the previous statements are equivalent to say:

v’ = C * (B * (A * v))

The following was obtained by replacing temporal vectors v1, v2, v3 on the final equation for the result “v’ = v3”. We can now remove parenthesis and we get:

v’ = C * B * A * v

Using associative properties of matrices we can continue factorizing to obtain:

v’ = ((C * B) * A) * v

And finally we combine the matrix product of C*B and A on a single matrix we’ll call M, and the final result is:

v’ = M * v

What you see here, this simple equation is the one we’ll see the most on our 3D renderer, the matrix M is obtained by multiplying C by B and then by A. Note that the order is VERY important, matrix multiplication is NOT commutative. Meaning that A*B is NOT the same as B*A, be careful there.

The matrix M is known as the Model View Matrix, which is the combination of all the transformations required to make our 3D model look the way it’s supposed to on the rendered world, all of our 3D objects have a model view matrix.

On the next lesson we will begin coding all these fundamentals in actual code.

 

3D Burning Paper Tutorial (FumeFX)

3D Burning Paper Effect (Ian Steve) from Heather Craik on Vimeo.

Hello everyone, I’m Ian Steve, welcome to another 3d tutorial. In this tutorial we are going to  to create a nice 3d burning paper effect with FumeFx plugin in 3DS Max. Ok.. let’s get started.

The first step, let’s create a simple plane on perspective view. Size or color doesn’t matter.

Open up material editor, select ‘Get Material’ and apply Gradient Ramp on the first slot.

Now, we can add 2 keys on the Gradient Ramp color until we get a white thin line like picture below. Set the noise amount to 0.1 and size to 2.

Now, let’s create texture for the paper. Drag the first slot material to the diffuse color on the second slot and choose ‘instance’. Rename it to ‘Paper’. Then apply it to the paper on stage.

Apply UVW Map modifier to the paper. Rotate the gizmo 900 and scale it up little bit.

Let’s scale up the timeline to 400 or 450. Go to the first slot of your material editor then turn on Auto Key. Animate the 3 middle keys from left to right. Then, turn off the Auto Key.


 

Go to second slot, drag/copy the diffuse map to opacity map, and clear its diffuse map.

Go to gradient ramp parameters delete the second keys and edit the color like picture below. Don’t move or delete the other keys.

We can now create the temperature map. Copy the opacity map to the new slot then rename it to ‘Temperature’, select ‘output’ and choose ‘invert’.

Edit the gradient color of the temperature map like below.

Now, let’s apply the FumeFx grid to the whole paper. Select FumeFx Helpers, choose ‘Object src’ and draw this outside the grid. Choose ‘pick object’ and click the paper.

Select the Object Src, set the Fuel, Temperature, and Smoke map to ‘Source from Intensity’. Chose instance for all map.

Open FumeFx UI, go to General Tab and set the Spacing to 1 . Then go to Simulation tab set the parameters like below :

–          Quality : 3 (depends on your computer spec)

–          Bouyancy : 0.65

–          Burn rate : 12.5

–          Dissipation strength : 5

–          Check Fire Creates Smoke.

Go to Obj/Src tab and choose ‘pick object’. Then click the src helper on stage. You can also change the fuel or smoke color from Rendering tab. Let’s start the simulation. And here is what I got on output preview.

Finally, render the scene as video and see the final result. Happy 3d ^^

3D101 Introduction to Matrices

Introduction to Matrices

We have talked about transformations, projections, spaces and many other cool things belonging to 3D fundamentals. But one of the most important things in this 3D world is to know your way around matrices, we’ll learn why they are used and how we can use them properly to optimize our final code.

 

  1. What the heck is a matrix?

 

According to Wikipedia The Free Encyclopedia, a Matrix is defined as follows:

 

            In mathematics, a matrix (plural matrices, or less commonly matrixes) is

a rectangular array of numbers, symbols, or expressions. The individual

items in a matrix are called its elements or entries.

 

 

To make things simpler, let’s take a look at the matrix shown below. Just like Wiki said, a Matrix is simply a rectangular disposition of elements, similar to a table. All matrices have size, and it is defined as MxN where M is the number of rows, and N is the number of columns. Hence the matrix on the sample is a 3 by 2 matrix (3 rows, and 2 columns), which can also be written just 3×2. – Most times matrices are written inside square brakets as shown on the figure, but you can also use curly braces and even huge parenthesis.

 

If the values of M and N are the same (such as 3×3 or 4×4) the matrix is said to be a  squared matrix because the number of columns and rows are the same, effectively resembling a perfect square figure. Squared matrices have special properties that will be discussed on following sections.

Each element of a matrix can be any mathematical object (such as a number, an equation, and even another matrix!) each of these elements on the matrix have their own location, and this location is defined by coordinates of the form (i, j) where i is the row number and j is the column number. To follow the example matrix shown above the location of the numbers: 1 is (1, 1), 5 is (2,2), 6 is (3,2), 2 is (2, 1), etc. This is very important to remember and to understand.

Since matrices are mathematical objects, we are able to perform several operations with them just like we do with numbers. With numbers we can add, subtract, multiply, divide and many other operations. With matrices we can also perform operations such as: Addition and Subtraction, Scaling, Transpose, and Multiplication. There are several other operations that can be performed over matrices, but to avoid lengthening too much this lesson we will cover only the basic operations mentioned above.

 

1.1 Matrix Addition

Addition and subtraction are essentially the same operation, the only difference is simply convenience for us humans, since it is faster for us to evaluate 1 – 2  (written as a subtraction) than 1 + (-2) (written as an addition). To perform matrix addition we need two matrices of the same size. For example, let’s evaluate the following matrix operation:

To evaluate this expression correctly we need to make sure that all matrices are of the same size. The first matrix has size 3×2, and the second is also 3×2 so we can now proceed without issues.

Given two matrices A and B, both of size MxN, the addition of those matrices will produce a matrix C also of size MxN, each element C(i,j) is defined to be: C(i,j) = A(i,j) + B(i,j)

In more easier terms the previous statement means that each element of the resulting matrix C will be the sum of the corresponding element on A and B. So, the result is:

The same principle applies for subtraction. As follows:

1.2 Matrix Scaling

Scaling a matrix is also known as multiplying by an scalar factor, an “scalar” is simply a number. Scaling is a binary operation involving one matrix and one scalar factor. The factor is usually written on the left side of the matrix as a coefficient.

Given a matrix A of size MxN and an scalar factor k, the scalar multiplications of both terms will produce a matrix also of size MxN, where each element of C = k*A is will be k*A(i,j). – In other words, each element of the matrix A will be multiplied by the factor k, and that will be the corresponding element of the resulting matrix C.

1.3 Matrix Transposition

Transposition operation is used to reverse the size of the matrix (including all elements inside it). This is a unary operation in which only one matrix is required. The transposition operation is written using an uppercase T as a super index on the matrix as in: AT

Given a matrix A of size MxN, assuming B is the transpose of A written as B = AT then each element of B is defined as B(i,j) = A(j,i) and the resulting matrix B will have size NxM.

1.4 Matrix Multiplication

Multiplication of matrices is most of times what makes people really angry in just a few minutes, specially when multiplying on paper. It is a lot more difficult than the rest of the matrix operations. So, let’s start already! – Matrix multiplication is a binary operation that requires forcefully two squared matrices of the same size.

Before going further, there is need to define the dot product of two vectors. Imagine we have two vectors A and B for instance A = <1, 2, 3> and B = <4, 5, 6>, the dot product of A and B defined as C = A•B is defined to be the sum of the product of each corresponding element on the vectors, so, C = 1*4 + 2*5 + 3*6, therefore C = 32.

Given two matrices A and B both of size NxN, if C = A*B (matrix multiplication) then the resulting matrix will also be of the NxN, and each element of C is defined to be

C(i,j) = A(row-i) • B(col-j) , where “•” is the dot product operation.

Let’s view the following example, here we are multiplying matrix A (bottom left) with matrix B (top right), the result is matrix C (bottom right).

The definition basically says that for every ROW i in A, we have to take one COLUMN j from B and perform dot product, the result is the element (i, j) of the resulting matrix.

In the example ROW i=1 of A is <1, 4, 7> and COLUMN j=1 of B is <1, 2, 3>, the dot product operation explained is 1*1 + 4*2 + 7*3 which results in 30. This final result is the element (1, 1) of the result matrix.

Matrices can be a bit complicated at first, but once you get the grasp of them you will see how useful they actually are. Matrices will save us a lot of time, and they have a lot of uses, some of those uses apply to 3D algorithms as well and will be detailed on our next lesson.

Make sure you understand all matrix operations, specially multiplication. Doing that will be give you great advantage on the next lesson “Affine Transformations”.

Matrices are scary at first, but they are your friends. 🙂

 

How to Use Clipping Masks in Photoshop


Learning how to us clipping masks only takes a few minutes and it will be a skill you’ll use again and again.  When you create a clipping mask in one layer, it hides the contents of the layers above.  Your clipping mask can be whatever you like; it could be a shape or text.  I’m using text in this example and here’s what we’re going to achieve:

First thing you need is your background image.  In your finished product this is the image that will ‘shine through’ your text.  I’m using a tropical beach scene.

 

Next, create a new text layer and write the text that will form the object for the clipping mask.  It’s always a good idea to use a fat, bold font when creating clipping masks from text so you can really see the image behind.  I’m using a great, 100%-free font called Bevan (you can download it here for free: http://www.fontsquirrel.com/fonts/bevan).

 

Now we need to create the ‘mask’ layer.  Go to you your Layers Palette and click the “Create a New Layer” button.  You need to fill this layer with a solid color.  I chose white but you can choose any colour.

 

We now have the three layers we need to start the magic!  Go to your Layers Palette again and put your layers in this order:

  1. the beach image
  2. the text
  3. the new, blank layer

Your Layers Palette should look like this:

 

Now we need to Create a new Clipping Mask.  Make sure you’ve selected the beach photograph layer, then click on the Layers Palette menu button in the top-right of the Layers Palette Window.  Select “Create Clipping Mask”.  Alternatively, you can press ALT + CTRL + G.

 

Ta-da! It’s as easy as that!  Your clipping mask has magically appeared.

 

You can now make the final adjustments to the text to make it stand out.  I’m going to add a 3px stroke to the inside of the text.  Double-click on the text layer to bring up the Styles Palette and add a 3px Stroke:

 

That’s it, you’re done!  Here’s the finished product:

 

I guess the question that you are all wondering though is where can I use this skill? Well, there are a number of different places that creating beautiful text can assist you. These include:

  • Creating bold and noticeable headlines for pamphlets or leaflets that you plan to deliver.
  • Making a website really stand out from the rest with an attractive and professional design.
  • Using them in emails, so that people are immediately drawn to the design and don’t simply disregard the message as spam or yet another offer for them.
  • Making attractive cards or other handicrafts, either for sale or to send to someone on their birthday or at Christmas.

As can be seen, the use of this technique is only hampered by your own creativity. So, be original and get experimenting – the results can be totally spectacular!

Two Types of Purpose

In the first post we talked about why having a purpose behind your work is important.  I also mentioned briefly that there are two types of purpose we can use in creative projects, this post shows how to create both of them.

In order to succeed, wildly, you’ll need:

In order for your project to ‘work’ to the best of its ability you need two different types of purpose.  Rather than belabouring the point at this stage, lets dive in and take a look at how to make them.

Creative Type Definition

Creative purpose gives life and soul to your projects; it deals with the higher meaning, why you want to do it, and what change you’re trying to make in the world (or whatever social group you’re comfortable with).  Without this, even if you have an amazing business purpose the idea itself will be a shell, possibly uninspired and definitely lack spark.

Creating the Creative Purpose

Look at your life and what matters to you.  Think about what you believe, feel the things that tug on your heart, and start from there.  The creative purpose is the most personal part of any project; I couldn’t and probably wouldn’t tell you how to find it.

There aren’t any road maps to defining what’s right or what you want to say and it’s different for every person.  In my opinion this is why we’re able to have so many different art forms and artists; not one of us thinks in exactly the same way as another, and we all have different messages and things we want to talk about.  This part can take a long time to find, and to get ‘right’.  You’ll know it when you have, sometimes you have to start work before it’s fully formed (that’s another issue entirely) however I’d urge you to wait until you have at least a rough idea before beginning.

Creative Purpose is your cornerstone after all, it’s worth taking the time to do this part properly.

Structuring your Creative Purpose

The beauty of the creative purpose is that there’s no iron-clad structure.  Often a simple statement is enough.

That is, as long as the statement conveys the following points to you (and those you work with!) whenever you read it:

  • The change you want to make
  • The circumstance you want to improve
  • The emotion you want others to feel
  • The message you want to send
  • It has an emotional connection with you; you should feel it in your gut

Example: Creative Purpose for July’s Themed Posts

My creative purpose for this month’s feature series reads something like this:

Provide clarity to creators so we can see more awesomely cool stuff.

Ulterior motives aside, that works for me.  My logic follows that we can’t make our absolute best projects without having a reason for doing so, and sometimes we can start with one and lose it along the way (or without one, which is scary but we’ve all done it).  By defining both types of purpose there’s a clear direction for us to travel in, since I believe this is really important and I want to be around to see some really well written games, animations, scenes, stories, etc… This theme was born.

Business Type Definition

On the other hand the business purpose gives structure to the idea.  What you’re making, what targets you’re trying to reach, who will use the finished product, and so on through all the more practical concerns.  This determines how successful your project will be at getting the message out and/or making money.

Building your Business Purpose

Before you can write your business purpose you’ll need to make three main choices.  First you’ll have to decide what you’re making; can’t go far wrong here and your creative purpose might point you in the right direction.

Second, what you’re trying to achieve.  This is a little trickier and speaks to your motives more than anything else.  Maybe you have a product and you’re trying to generate more sales.  Or you have a website / blog and you’d like more visits and views.  Possibly you want to win a competition, or get your message out to the greatest amount of people possible.  Aim high, but not cripplingly so here, and be specific.  Instead of saying something like ‘I want more people to visit my site’, go for something like ‘I want 50 people to visit my site per day by 1st January 2011’.  Constrain your goal.  Make it achievable, but not too easy.  Really go for it!

The third and potentially most important decision is about who you’re trying to reach.  Do you have a specific target audience (if not, why not?)?  Who would you most like to connect with?  How do they spend their time?  Are they students, working, not working, within your industry, in a specific age range, location, gender… There are a lot of questions you could be asking here.  As with your ‘goal’, your target audience has to be specific.

Structuring your Business Purpose

Unlike the creative purpose your business purpose has a generally accepted format.  It takes the form of a short sentence covering each of the three areas we just discussed.  You can almost copy/paste each section into the structure below:

A [what you’re making] for [target audience] in order to [business target/goal].

Example: Business Purpose for July’s Themed Posts

Continuing our example from before, the business purpose for this month’s themed features looks a bit like this:

Create a series of blog posts for creative professionals looking to make their own, successful, projects in order to revive my blog and bring visitors per day up to 45 by August 15th 2011.

Since it’s a blog project I’m running my first section was a given (I actually cheated and had the form before my creative purpose because I had a specific slot to fill per week).  My target audience was defined in a fairly broad sense because this particular set of blog posts can be applied by multiple disciplines, since I have a few creative avenues myself it makes no sense to over specify at this stage.

However, I did pin-point it to creative professionals (people working within creative industries, or wish to, with the skills required) and a mindset (looking to make their own, successful, projects).  The mindset it key at this point because it focuses the direction of each post back to an ultimate goal – partially defined in my creative purpose.

As for my target – I’m a blog owner that’s had a semi-dead blog for the last year due to time constraints.  I needed to come back out with a bang though traffic doesn’t grow overnight.  45 people seemed a fair goal, and by placing the deadline half way through next month each post should have time to gather a little momentum.

Next Time

This week we’ve gone through the process of creating our own creative and business purposes in order to define our projects and give ourselves definite goals.  In the next post we’ll be taking a closer look at finding these purposes in existing projects; both client defined and personal.

Right now though I’d like you to choose one of your projects (or things you do) and come up with both a creative purpose and a business one.  Comment below and let me know how you got on.

3D 101 Fundamentals of 3D Renderers

Now that you’re familiar with the fundamentals of 3D (spaces, coordinates, projections, and rotations) it’s time to begin to learn how to write a quick and clean 3D renderer. But first, let’s talk about how 3D objects are defined.

1. Object Definitions

In 3D we define objects using vertices just like in any other space, for example a line is defined as an object having two vertices. Certain other objects require a different definition such as the sphere which is defined by a center vertex and a radius. There are also fundamental objects such as the triangle which can be used to form much more complex objects such as planes, spheres, hexagons and many many more.

Most of time objects are defined using the latter method, that is, using triangles to define more complex objects. Triangles are used because it’s a fundamental figure, the first that is a closed shape with minimum number of points (3).

Now imagine a complex polygon as shown on the following figure (left figure) that polygon can be represented using triangles only as it is shown in the right figure. The action of converting one polygon to a sequence of smaller objects which collectively can accurately represent the source polygon is known as tessellation.

Before we continue, there’s need to think about what a 3D renderer actually is. To make things simple it’s enough to say that “A 3D renderer performs rendering which in this context is drawing 3D objects in a 2D display with as much accuracy as possible.”

There are two basic types of renderers, real-time and non-real-time. Non-real-time renderers use mathematical equations to generate thousands of vertices and draw objects with great accuracy. This type of renderer is very very slow but has an amazing output image quality due to the incredible number of vertices generated. Non-real-time renderers are used in commercial applications such as movies and animated series.

Real-time renderers on the other hard are incredibly fast and efficient because they need to render an entire scene dynamically on demand in real time. These renderers lack of high detail because of the technique used, which uses less detailed approximations of the real object to make rendering time faster, that is the primary goal of real-time renderers, provide output as fast as possible with averagely good quality. Real-time renderers are used in games, software, interactive applications and more.

As shown on the figure above, the left side shows a generic triangle rendered as a one piece object which is usually how a real-time renderer would draw a triangle. The right side shows a tessellated triangle with 16 sub-pieces, this has a much higher detail when lights and reflections are rendered, this is how a non-real-time renderer would draw the triangle, although probably with more than just 16 sub-pieces, since non-real-time renderers use micro polygons which can be as small as 2 or 3 pixels each.

Nowadays real-time renderers are much more efficient than they were 18 years ago when Doom(Game, 1993, ID Software) blew our minds for the first time, this is due to the powerful help of 3D accelerated graphics cards which can render millions of polygons per second, allowing us to build highly detailed frames without worrying about speed.

2. Renderer Operations

As we mentioned before, a renderer has to take care of drawing objects appropriately in a 2D display, to do this there are several basic stages that we need to go through in order to achieve a correct output image. The following sections will describe these basic rendering stages. Note that a fully featured renderer may or may not implement more stages in this process, depending on the level of quality and methods used. In future lessons these processing stages will be written in code one by one.

2.1. Consumption of Object Data

In this stage the data of objects in the scene is sent to the renderer for further processing, these data is added to the object queue. By object data we refer to all the required information about an object that is required in order to draw it correctly, such as vertices, texture coordinates, shading method, light parameters, view model matrix, etc.

2.2. Vertex Lighting

In this stage a light modeling algorithm such as the phong reflection model is used along with the light sources defined in the scene to calculate the color and intensity of lights on the all the vertices of all objects in the object queue. Lighting is an optional stage at first and should be added only until the basic renderer is stable and produces correct results.

2.3. Camera Transformation

In this stage a camera view matrix is used to transform the entire world to make it look like it’s being viewed from point of view of the camera. This is commonly known as converting from world-coordinate-space to view-coordinate-space.

2.4. Fundamentals Generation

In this stage the renderer has to convert or tessellate objects (if necessary) to generate fundamental polygons (triangles). After this stage has finished the object queue will be composed only of fundamental polygons.

2.5. Polygon Culling

In this stage the renderer has to discard from the object queue all polygons that are either facing backwards (process known as backface culling) or those which are behind a non-translucent polygon (known as hidden surface removal), the result is a much smaller set of polygons which are always visible.

2.6. Clipping

In this stage all polygons in the object queue have to be checked to verify that they are in fact inside the view volume, all polygons outside it are removed. Sometimes a polygon lies partially outside the view volume, in which case the polygon is clipped against the view volume and this usually results in the generation of one or more smaller polygons that effectively lie inside the view volume. Clipping is essential to render frames correctly.

2.7. Projection Transformation

In this stage all polygons are projected to 2D space using a projection matrix. This is usually known as converting from view-coordinate-space to viewport-coordinate-space.

2.8. Viewport Clipping

In this stage the resulting points from the last stage are clipped against the viewport to make sure no polygon lies outside the valid rectangle viewport range.

2.9. Polygon Scan Conversion

In this stage all polygons are scan-converted to generate scanlines which can easily be drawn later by even the most basic graphics library.

2.10. Polygon Filling

In this final stage all polygons are drawn one by one simply by filling the scanlines with appropriate data using an specified shading method, such as a plain color (flat shading), a gradient (gouraud shading), an image (texturing) or even a simple wireframe.

All these stages are executed by hardware when 3D accelerated cards are available, to make use of these cards a hardware-enabled library such as OpenGL or DirectX should be used when developing 3D applications instead of a custom made library.

Despite of all the scary stages, there’s no reason to panic! A highly simplistic renderer can be developed with only four stages (2.1, 2.7, 2.9 and 2.10). Later on in future lessons we will develop a somewhat simple renderer with 6 to 7 stages.