a r i e s p r a n a t a . c o m

Minion Speed Sculpt

2015-06-29T15:34:00.002+07:00

Belloo!! Who wants Bana-na-naaa? :D

Minion Speed Sculpt

This is a recorded video of me doing the speed sculpt of Minion. I used ZBrush, did it in about 1 hour from scratch to final pose. However, the video was edited to 2x speed for more convenient view.

I actually used so many ZBrush special features in this making, such as ZSphere, ZRemesher, Fiber Mesh, and Transpose Master.

I hope you find this useful.
Thanks for watching and cheers! :D

Dark Knight

2015-04-28T09:58:00.000+07:00

This is a personal project I did in my free time. Batman is a character which story always falls between the two polar opposites of moral value, good and evil; where everything is in grey area. So, I thought that it would be fun to think, "What if he falls into the dark side?" because generally, he is always perceived as the good guy.

The word "Fear" is what Batman is all about; so I use that keyword as the main concept in this demonic version of him.

PS: Coincidentally, this version resembles the "Nightmare Batman" version which I didn't know before until a friend told me. :)

I started with dynamesh in ZBrush, render it, and did some retouch in Photoshop.

Dark Knight

Dark Knight 3D Model

Hope you guys like it.

Cheers!

Egyptian Royal Priest

2015-03-24T05:53:00.001+07:00

This is my latest Character concept, an Egyptian Royal Priest. Well, it's been like more than a year since I created my own Character.. hehe.. been busy with other works that has nothing to do with 3D and stuffs. So, let's say that it's kinda my stress reliever. :p

I started with Dynamesh, without knowing what I'd create, until this guy appeared in my head and.. Ta Da! (just click on the image to see the better quality)

Egyptian Royal Priest Concept

The left one is the clay render for you to see the model clearly and the right one is to give him more glorious look. Sorry that I didn't do the paint job on this guy because I was just way too lazy to do that.. Forgive me, ok? :p

By the way, this was also the first time I used my 1-month-old wacom pen tablet (finally, yay!) in ZBrush. I gotta admit that it helps a lot, compared to using mouse.

Hope you guys like it, and have a nice day.

Cheers!

Engraved Shotgun - Reverse Engineering

2014-11-11T19:30:00.001+07:00

So here we go, I'd like to share one of my projects that might be interesting for you to look at. This project, for me personally, is kind of 'expansion' of what my knowledge and skill in 3D can do. So far, I've been doing 3D only for visualization and animation. But this one is for manufacturing industry, which is new to me.

I'm really grateful to meet some friends at Rannova Indonesia that gave me a chance to work with them in this project. The project is what we call a reverse engineering, a process of recreating something based on the existed thing which in this case is a wooden engraved shotgun body.

So this guy has a wooden shotgun with some engraving on it and he wanted this shotgun to be available for mass production. For a time being, it took a lot of time to produce the shotgun because it needs craftsmen, a human resources to do the job. Furthermore, since every craftsmen has different skill, it's hard to standardize the quality of the engraving. There comes an idea of how to make this product available to be created by machine.

This is the rendered image of final 3D file that I created based on the original product:

Final 3D File for Prototyping

Then my friends at Rannova Indonesia did the rest, the process of milling and so on which I actually don't really understand. :p

Then after the long process, this is what we got:

First look of the Final Product

It reminds me of Gunpla kits btw. LOL

Cheers!

[Freebies] MAXScript: Rendering AO Pass Made Easy

2014-11-07T00:53:00.000+07:00

As you all know, there are many ways to create an Ambient Occlusion Pass. We can use the default Ambient Occlusion Pass in Render Element, use the mr_shader_element with AO shader set on it, or use the Material Override and do the render. The first two is much faster to do, but resulting in solid black background image that might be quite annoying when in compositing process. The last one needs some steps to do before doing the render, but we can set the background to solid white.

MAXScript: Rendering AO Pass made easy

So I took some time learning MAXScript and decided to create this simple one that might help me do the task. So, what does this script do? This script is actually doing the third method mentioned above, in automatic way:

switch the renderer to mental ray
remove all lights
turning off FG (to speed up render a little bit)
create an AO material and apply it on ALL objects (you might want to hidden the objects you don't want to render)
set the background environment to white
set the gamma to 1.0 (so you won't get a washed-out AO)
do the render
saving the file (only if you set the Save File on your Render Setting)
then set everything back as if nothing happened

One nice thing about this script is you don't need to worry about what render engine you use for your main renderer. As long as mental ray is (by default) come as one package with your 3ds Max, then this will work. When you run this script, it will render the AO pass and leave your scene back as it was before the rendering process.

INSTALLATION
The installation is very easy. First you need to download the .ms file (link available below). Run your max, click on MaxScript - Run Script, then browse the downloaded file. Nothing happened but don't be panic, click on Customize - Customize User Interface. Then click on Toolbars tab, choose Main UI on the Group dropdown menu, and find ariespranata on the Category.

You should find the renderAO in the Action as shown in image above. Just drag it to your toolbar on top and the button will be created automatically there. Just click on that render AO button, and new window will appear.

Render AO Pass parameter dialog

There are some parameters that you might want to set to define the quality of your AO pass. The parameter setting is actually the same as the mental ray AO shader and I guess they are pretty much self-explained.

The "-suffix Name" is the text that will be used as a -suffix in your filename. This will only apply when you check the Save File on your Render Setting. No worries, if this script find the same file name, it will ask your permission first whether to replace it or not. Say that you have a file named "Interior.jpg", then the AO will be saved as "Interior_AO.jpg" at the same directory.

DOWNLOAD: MAXScript: Render AO Pass
NOTE: you might need to temporarily turn off your ad blocker. If you find this script useful, I'd be very grateful if you share this blog post instead of the direct link. :)

MAXScript: Render AO Pass version release
ver 1.0
- Initial Release, tested and developed on Max 2011. Update: tested also on Max 2013 and 2015.

If you have some idea to improve this script, please comment below. I'd love to hear that and I'll try to improve this script in my free time.

Cheers!

[Flash] Action Script 3.0 Basic Part I

2014-08-30T18:24:00.002+07:00

Today, I will explain about the basic programming in ActionScript 3.0 (AS3) using Adobe Flash Professional. This is a very basic principle and it's actually the fundamentals of any programming language. You can use this principle to any programming language. The only difference is just the syntax (the way the code is written), but the concept remains the same.

So in this part 1, I will cover some basics about:
- Declaring Variable
- Conditional Statement
- Loop Statement

You can use this in any version of Flash Professional that supports ActionScript 3.0 (Macromedia Flash 8, CS, and CC version). Let's get started! :D

Creating New File

When we open Flash, there will be a Welcome Screen. With that many options, choose Create New File - ActionScript 3.0. Then we're ready to code, as simple as that. Note that if you use AS3 code in AS2 project, you will get error message when you compile the movie.

A few things to keep in mind before we begin to code in AS3:

- AS3 is case-sensitive language, meaning the uppercase and lowercase letter is recognized differently. For example, if we type a text data 'string' instead of 'String', then we'll get error. Because Flash recognizes 'String' (with capital S letter) instead of 'string' as a data type for text data. The easiest way to avoid that mistake, you can notice that the term will always change to blue color if Flash recognizes it as its default scripting term.
- Always use semicolon (;) to end a statement. It's recommended to use semicolon (;) to end each statement so you'll not find really hard when you learn other programming language that force you to use it. In Flash, it's actually not really necessary to use, you can simply use a line break (Enter), but still, I recommend you to use semicolon.
- You can access the ActionScript window by pressing F9, and compile the script by using Test Movie (Ctrl+Enter).
- Like any other programming language, AS3 will be executed in order from top to bottom lines. So in some cases, if the order is not right, then it will throw some errors. For example, we set a value to a variable before declaring that variable first will throw error because it's unable to find the variable. It's illogical to set a value to a non-existed variable.

Declaring Variable

So, what is variable? Variable is like a container to hold something, and this container have specific type to match with the content. For example, if we have a water container, then it should be used to contain water. So if we have a text variable, then we can use it to contain text data. Variables value can also be changed dynamically as long as the value is the same type as the variable type.

The syntax:

var var_name:var_type = value;

var_name is the variable name, you can name it everything you like with some conditions: variable name cannot contain only number or started by number, but combination of text+number is fine. Also it's recommended to avoid the same name as Flash default scripting term (when the text turns to blue). For example:

var 123:int; is incorrect
var 1ove:int; is incorrect
var a:int; is correct
var number01:int; is correct
var var:int; is incorrect since var is Flash default scripting term

var_type is the type of the variable. Normally, when we type var a:, then the autocomplete window will appear, showing the list of all available data type to help us get the right term. You can see it in the image below (the color might be different from yours because I have my actionscript color preferences set to my custom colors). :p

AutoComplete Feature in Flash Professional

Now, let's try creating a variable. You can type this into your Actions window:

var a:int;
trace(a);

int is a data type for round number, it's derived from the word 'integer'.
trace() is a function to show a value of a variable. The value will be shown in the Output window when we compile the movie.

Now, hit Ctrl+Enter to execute the script. You will get 0 in the Output window. Why? because we didn't set any value to the variable a yet. Now set the value to 2.

var a:int = 2;
trace(a);

Hit Ctrl+Enter again and now it will show 2. That means that our variable 'a' now has a value, which is 2.

Now let's try a simple math:

var a:int = 2;
var b:int = 3;
var c:int;

c = a+b;
trace(c);

Hit Ctrl+Enter again and now you will see 5 in the output window. What exactly happened here? First, we create a variable a with value 2, variable b with value 3, and variable c with empty value. Then, we set the value of variable c by adding 'a' value (2) with 'b' value (3). Thus we get 5.

Conditional Statement

Conditional Statement is used when we need to check whether a condition is met or not.

The syntax:

if (condition){
    //Do something
}

condition is where we put something to check; I'll explain next with an example. Note that in this syntax, we use brackets {}. This is what we call a 'code block', a place where we can put some code to be executed when certain condition is met. Also, you can see the //, this is called a 'comment'. Anything that we put after the // will not be executed by the compiler (try yourself and see what you type turns to grey color), so it is good to use when we want to give notes.

Now, let's try a little example:

var a:int = 1;
if (a==1){
    trace("a is one");
}

What this code means? It means that we want to check whether the value of 'a' is equal to 1. Notice that I use == instead of =. When we want to check the value of a variable, we use ==. = is used when we want to set a value.

Then, what happened when the condition is met? Hit Ctrl+Enter and you can see 'a is one' text in your output window. Since the value of 'a' is equals to 1, it means the condition is met, so the code within the code block is executed, which is trace("a is one"). Wait, why use double quotes ("")? Whenever it's a text data (called String data type), we have to use " before and after the text. If we don't, Flash will throw errors. We can also use single quotes (') interchangeably if our text data contain double quotes, e.g. 'a is "one" ' . In Flash, every String data will turns to green color by default.

Now, what if the condition is not met? Let's modify our code a little:

var a:int = 2;
if (a==1){
    trace("a is one");
} else {
    trace("a is not one");
}

I change the value of 'a' to 2, and add an else clause. What does this else clause do? Whenever a condition is not met, the code within the else clause will be executed. If you don't give any else clause, then nothing will be executed. Now hit Ctrl+Enter, you should now see 'a is not one' text in your output window because the value of 'a' is 2 and not 1.

Let's make things a little bit more complicated. What if the condition to check is more than 1? If so, we can use the else if clause:

var a:int = 2;
if (a==1){
    trace("a is one");
} else if (a==2){
    trace("a is two");
} else {
    trace("a is not one nor two");
}

Now hit Ctrl+Enter again, you will see 'a is two' text in your output window. What happened here is Flash will first check, whether the value of 'a' is equals to 1, which is not. So, Flash will skip the first code block and jump to the second check: is value of 'a' equals to 2? It's true, so Flash runs the following code block, thus we get 'a is two' text in our output window. Note that once a condition is met, then Flash won't run the following else and else if clause (if there is any). In our case, the else clause won't be run because the condition (a==2) has been met.

Loop Statement

Loop Statement is used to execute some codes repeatedly for a specific number of times when a certain condition is met.

The syntax:

for (counter; condition; action){
    //Do Something
}

counter is any number variable, it's used as an iterator or starting number. The second parameter is condition, this is where we set a condition for our counter to meet. The last parameter is action, where we define how the counter will increase, decrease, or multiply. This action will be executed for every loop cycle.

Let's say we want to trace "Hello World!" for 5 times, in ancient-fashioned way, we can use:

trace("Hello World!");
trace("Hello World!");
trace("Hello World!");
trace("Hello World!");
trace("Hello World!");

Imagine when we need to trace that for a hundred times.. @.@
Instead, we can use this:

var i:int;
for (i=0; i<5; i++ {
    trace("Hello World!");
}

When you hit the magic button, Ctrl+Enter, you will find exactly the same result as the first one.
First, we start by declaring a variable 'i' with integer type, then followed by the for-loop statement.
- i=0 is how we set the starting number of our counter; we set it to 0.
- i<5 is the condition we set for our counter to meet.
- i++ has the same meaning as i=i+1, which will add 1 to our counter for each loop cycle. You can use any math operation of course to accommodate your need, increasing our counter by 1 for each loop cycle is what we most generally used.

To explain better how this for-loop statement works, we will modify our code a little:

var i:int;
for (i=0; i<5; i++ {
    //trace("Hello World!");
    trace("Hello World!, i="+i); //will trace the value of i
}

This will result:

How the For-Loop Statement Works

You can see that our counter starts with 0, as we stated before i=0. Then after executing the trace() code, it increases by 1 for every loop cycle. The cycle stops when the counter reached 5, because it's no longer meet our i<5 or i is less than 5 condition. That's why the last trace() executed is when the counter value is 4.

--
So, this is the end of part 1. I hope this will be a useful tutorial, especially for those who wants to start learning AS3. Any positive comments are welcomed to make this tutorial better. :)

Cheers!

[3ds Max] Quick Tips: X-Ray Shader

2014-02-15T06:48:00.001+07:00

Hi, guys. Today I'm gonna show you how to create an x-ray shader in 3ds Max. Nice thing is, this shader is using only procedural map, so we don't need to create any texture map our own.

X-Ray Shader in Autodesk 3ds Max

So first thing first, we need a reference of how an x-ray image looks like in real world. It's always been a good habit for us, as an artist, to look for real-world reference before we start making anything. So, I googled a little and found this image:

x-ray crab | source: nationalgeographic.com

It's an x-ray crab. :D ....now, let's start a brief research of the image.

First, notice that x-ray makes the object looks hollow. The intensity of the outer part of the objects is high and gradually decrease when it comes to the inner part.
Second, the overlap parts have even brighter intensity. This effect is similar to when we use 'Add' in Photoshop layer mode.
Third, we have some noise when it comes to the inner part.

So, that's our quick examination. Let's get into 3ds max and we'll start the shader creation.

Open 3ds max, create an empty scene. Now hit M to show our Material Editor window. Grab an empty material slot and switch it to a Standard Material if it isn't.

Set to Standard Material

Click on the little square beside the Opacity and select Falloff map in the Material/Map Browser window. The Falloff map generates a value from white to black, based on the angular falloff of the face normals on the surface of the geometry. Well, that words might be too difficult to understand, so when you see the result once the map is applied, you will understand.

Use Falloff for Opacity map

The Falloff map will make our material have 100% intensity on the outer side and gradually decrease to 0% in the inner part. Thus, our shader looks like it's hollow in the inside. We can also adjust the intensity by playing with the black and white color in the parameters.

Now, drag our Opacity map to our Self Illumination map, make an Instance copy. X-ray creates no shadow, so it's a good idea to use the Falloff map also in the Self Illumination map so that our shader will 'glow' and pop out. Don't forget to check on the 2-Sided too.

Make an Instance Copy of Falloff map to Self Illumination

Remember the 'additive' part in our brief research? We can do that by checking on Additive in the Extended Parameters rollout. Now we are a little bit closer to our x-ray.

Use Additive Type

Click on the M square button to adjust our Falloff map parameter. Since we use our Falloff map in the Opacity slot, then we can play the opacity of our material by adjusting the black and white color. White means 100% opacity, black means 0% opacity, and grey means between them. Adjust the black color to a dark grey so that our material won't be 100% transparent in the inside.

Now you might want to test the material. Create an object, I used Torus Knot, in the scene and hit render. You should get something similar to this image:

Torus Knot with X-Ray Shader

Nice one, eh? :D
So this is our basic shader for x-ray. We can adjust and playing with the maps to create more detailed effect. For example, we can use Noise map in our Falloff map to make some noise in the shader too.

Use Noise Map to Give Detailed Look

Some Parameter Tweaking of the Noise Map

I also adjust the diffuse color to a bluish one and got something like this:

Well of course you can still play more with the shader to achieve better result. You might need to adjust some of the size parameters in the maps to fit your model. By the way, the more detail your model is, the better you will get the effect.

If you're interested, I want to share my x-ray shader that I used for the T-Rex above. Basically it's the same shader I used from above tutorial, but with a little tweaking and some more maps for the detail. You might learn something from this.

DOWNLOAD: X-Ray Shader
This is a .max file created using 3ds Max 2011 (you can't open this in older max version). Open the file then open the Material Editor and you'll get the shader there.

I hope you find this tutorial helpful and have a nice day. :D

Cheers!

[Flash] Load a Web Page using Adobe AIR

2014-02-13T00:13:00.001+07:00

Hi, guys. I've been testing about using Flash and Adobe AIR recently to create an app for mobile devices. One tips that I'd like to share with you today is how we can easily load a web page in Flash. Wait, why would we want that? By doing so, we are actually creating a web app specifically for our website without having to code again from zero. Isn't that cool to have an app with your brand name on it? :D

So what do we need to have? First we need to build our website (of course), preferably a responsive one so that it should match wide variety of device resolution.. especially for Android phones, they have a very wide range of device resolution since they're created by many manufacturers.

Then we need Flash to build our Air application, or other Flash IDE such as Flash Builder or flashdevelop. In this tutorial, I will use Flash CS6. Fyi, Flash CS6 supports Adobe AIR for Android and iOS, and it allows you to manage the AIR SDK, so we can always replace it with the latest SDK. If you don't know where to download the latest Adobe Air SDK, you can download it from Adobe AIR Developer Center. Flash CS6 has ver. 3.5 included by the way.

So we're all set up, then let's code ;)

Preparing the Project File

Every time we open Flash, we'll be asked about what project we're going to create. This time, instead of choosing ActionScript 3.0, we'll use the AIR project.

Flash Professional Welcome Screen

Notice that there're 3 options for AIR projects, AIR, AIR for Android, and AIR for iOS. Actually they're all the same. The only differences is the targeted device: AIR for desktop PC, Air for Android for Android device, and AIR for iOS for iOS device. So, in this tutorial, I will use the Air for Android option.

Click on that, and we'll now have a 480x800 px blank new file with the Publish Settings already set for Android device.

Using StageWebView Class for Loading Web Page

StageWebView class is the class that we'll be using to load our awesome website. If you want to dig depper about this class, you can see the documentation here.

Now, I'll explain you the code. First, we need to calculate the width and height of the screen, since we don't know where this app will be installed considering that wide-variety of resolution.

//This will return the actual width value of our stage
var wView:int = stage.stageWidth;
//This will return the actual height value of our stage
var hView:int = stage.stageHeight;

After we get the size, then we need to create our StageWebView object and assign the screen size to it using viewPort property. The viewPort property uses Rectangle value, so we need to set the screen size using Rectangle object (it uses 4 values: x position, y position, width, and height).

//Create a new StageWebView object
var swv:StageWebView = new StageWebView();
//Set the size of StageWebView object created to match the screen size
swv.viewPort = new Rectangle(0,0,wView,hView);

When you're done, now we will load the webpage using loadURL property, and show it using the stage property. NOTE: StageWebView is not a DisplayObject, so we cannot call it using addChild method like we've used to do when calling a MovieClip or Sprite. Thus, StageWebView object will always be put on top of everything and make us unable to place another object on top of that. Suppose you want to place a button or movie clip on top of that, you need to hide the real StageWebView object and convert it to BitmapData using drawViewPortToBitmapData() method. Then show the bitmap instead of the real StageWebView object. Read the full explanation in the documentation.

//Load the Google Page
swv.loadURL("http://www.google.com");
//Show the StageWebView Object
//If you want to hide it, set the stage property to null
swv.stage = this.stage;

Now hit the magic shortcut (Ctrl+Enter) and you should see the Google page shown on your screen.

StageWebView Object showing Google Web Page

The nice thing about StageWebView is when the page is longer than the screen, then it will actually show the scrollbar. So we don't need to mess with the scrolling page code. ;)

Now, try to load a heavier website. You'll notice that the StageWebView will show a white blank page before it completes loading the webpage. We can avoid that white blank page being shown by setting the stage property only after the webpage is fully loaded. So what to show, while it's loading? Well, a movie clip with loading animation would be a good idea. :D

//Add an event listener when the webpage is fully loaded
swv.addEventListener(Event.COMPLETE,onCompleteHandler);
function onCompleteHandler(e:Event):void {
    swv.removeEventListener(Event.COMPLETE,onCompleteHandler);
    swv.stage = this.stage;
}

So our full code would be something like this. *Do not forget to import the required class also*

import flash.display.Stage;
import flash.geom.Rectangle;
import flash.media.StageWebView;
import flash.events.Event;

var wView:int = stage.stageWidth;
var hView:int = stage.stageHeight;

var swv:StageWebView = new StageWebView();
swv.viewPort = new Rectangle(0,0,wView,hView);
swv.loadURL("http://www.google.com");

swv.addEventListener(Event.COMPLETE,onCompleteHandler);
function onCompleteHandler(e:Event):void {
    swv.removeEventListener(Event.COMPLETE,onCompleteHandler);
    swv.stage = this.stage;
}

Publishing the Application

Well, I'm not going to explain the detail step to do this because that will make this post much much longer. But you can get the documentation in the Adobe official website:
- Publishing for Android device
- Publishing for iOS device

Btw, it's better for you to have a real device to test when developing a mobile device app, because if you have your code work in Test Movie doesn't guarantee that it will work on the device.

Okay, I think this is the end of the tutorial. I hope you find something useful here.
Cheers!

In Christ Alone

2014-01-24T16:02:00.000+07:00

Okay, so I am not an illustrator. I know for sure that my drawing skill is not quite great but I just want to share this. :p One day, my friend made me to draw for her, an illustration that tells the story about her struggling when she worked on her final project. I think that would be fun, and since we both love the illustration style of HJ-Story, I tried to make one with that style.

This illustration tells all: about how she learned to rely on God's strength instead of hers to do her final project. The texts, it was taken from a song by Brian Littrel, In Christ Alone (you should hear the song, it's very nice). It was the song that gave her strength in her struggling.

In Christ Alone

..and for her graduation surprise. :D

Grace is

To remind us that it's all by HIS grace. Cheers! :)

Iron Man Mark III Helmet

2014-01-24T15:13:00.000+07:00

Well yeah, you may call me LAME for posting this old project. This is my first hard-surface modeling and I just want this project to be documented well in my site, so, yeah here we go...

Iron Man Mark III Helmet

And for some wireframe

Iron Man Mark III Helmet - Wireframe

Cheers!

Perfections: Window Film Simulator

2014-01-23T14:01:00.001+07:00

Perfections is a brand of premium automotive window film in Surabaya. This is a project that I've been working a few months ago. I did the web design (remaking the old one) and created the window film simulator.

Home Page perfectionsfilm.com

The window film simulator was developed using Flash. User is able to choose their car color, and choose what type of window film that is suitable for them. Along with the specification info for each type.

Window Film Simulator perfectionsfilm.com

If you want to see how this simulator works, you can visit www.perfectionsfilm.com and click on the PRODUCTS tab.

Cheers! :)

SUHO ft. IU - Monday thru Sunday | 2D Animation

2014-01-07T18:41:00.003+07:00

Hi guys,

I've just browsed my old YouTube channel and I found this old 2D animation I and my friends did in 2009 for campus assignment.

It was for 2D animation class, lectured by awesome Is Yuniarto, the famous comic artist in Indonesia: author of Garudayana and Knights of Apocalypse.

Personally, I really love this work, so that's why I'd like to share here.. and btw, If you think that the illustration is awesome, meet my friend, Michael R.H. He did all of the character drawing in this animation. As for me, I did the animation (it was all done in adobe Flash).

Suho ft. IU - Monday thru Sunday | 2D Animation

A little bit about the production process:

Gathering Reference
In this step, we gather all the references, images, video, and text we think is cool and suitable for our projects. Since the assignment required us to create a Music Video, then we choose the song first before we look for the other reference. In our case, we choose the song of Suho (feat IU), titled Monday thru Sunday -> No special reason for this, it just because.. well, you know.. the K-Pop is getting very popular in my country. :p

Creating Story
After all the references are gathered, we start creating the story. We search for the lyric and start creating the story from that. We wrote it down, then convert those text into storyboard. The storyboard is an important step because it will be our main guide for the animation process, especially for camera angle and timing guide.

Creating Asset
As the the story team do their job, the asset team start to create the asset. We sketch it first on paper, then trace it on Adobe Illustrator for the line art and paint them on Photoshop. The characters has special concern since it is going to be animated. We planned to use tween animation as much as we can because the frame-by-frame method will take longer time and the deadline is short. So, we decided to split the characters into some body parts. As you can see in the sprite sheet below:

2D Body Part Sprite for Animation

Notice that we only created half part for arm and leg, either left or right. This is because we were going to mirror those parts in the animation process.

Animation Process
Like the explanation above, the splitted body parts help so much in using tween animation. We use Motion Tween in Adobe Flash for the entire animation, including the texture and visual effects e.g. lighting effects in ferris wheel shot. We were also supposed to use Bone method for rigging (see that we split the girl's arm into 3 parts), but the feature wasn't available yet at that time. What we did was manually transform those parts in difference layers, applying Motion Tween on each layer, and set the registration point (pivot) to the correct joint position.

So, it was only in some shots, we used frame-by-frame method, e.g. the curtain animation in the intro shot. The animation is entirely done by using the storyboard we had created earlier as the main guide.

Video Editing
The last thing we do is the video editing process. We export all the shots from Flash into movie files, then arrange and synced those files with the song in Adobe Premiere.

Cheers! :)

[3ds Max] Wireframe Render with Scanline

2014-01-05T04:48:00.000+07:00

Hi, guys.

Yesterday, one of my friend (and also my teacher in 3D), Juliansun, commented in my facebook post of my latest blog post: [3ds Max] Quick Tips:Wireframe Render. I said in my video tutorial that it wasn't going to work if we don't switch our render engine to mental ray. Yes, it's true, if we do it with the method I explained in that video (using Composite Material) we will only get the wire, without white shaded below it when we use Scanline renderer. Then he said that we actually can do the same wireframe render with only Scanline renderer which I'm gonna tell you how. ;)

Wireframe render of a teapot with Scanline

First, we need a new Standard Material. Just open the Material Editor [M], then select any empty material and switch it to Standard Material if it isn't. Then select the little box next to Diffuse Color to open the Material/Map Browser window. Select the Tiles map.

Using Tiles Map as Diffuse Color

Scroll down in Tiles until you get Advanced Controls rollout. Change the Horiz. Count and Vert. Count value to 1.0 (I will tell you next, why we have to do this). Then you should get something similar to my material preview.

Change the Tiles Map parameter

We're done with our material setup. Now what we need to do is assign a UVW Map modifier to any object that we want to render wireframe (it's a teapot in my case). Set the Mapping parameter to Face. This would make 1 polygon in our object represents 1 tile. That's why we changed the Tiles count to 1.0.

Assign UWV Map modifier

Assign the material to our objects, then hit Render. You should get something similar to the picture at the top. Of course you can adjust and play with the color parameter, etc to everything that you like. Here's an example how I use the material and mix it in Blend material with Gradient Ramp map as the Mask.

Wireframe Render with Blend Material

Well, I hope this tutorial helpful. If you have something in mind or you have created something awesome with this material, don't hesitate to comment below. :D

Cheers!

[3ds Max] Quick Tips: Wireframe Render

2014-01-03T18:09:00.000+07:00

Ever wondering how to do a wireframe render inside 3ds Max? Now I'll explain the trick for you. :)

How to Render Wireframe with 3ds Max

The question is why would we want a wireframe render?

Well, in my opinion, it's just for a presentation. There are times when our client wants us to show the wireframe, and it's not very "artistic" to just screen grab our viewport. So that's why we need a better presentation.

Wireframe Render example

This tutorial covers how to set up a wire material, and also how to use Material Override for more practical ways. Check the video tutorial (you may need to temporarily turn off your ad blocker): Quick Tips: How to Render Wireframe with 3ds Max.

NOTE: the tutorial is in Bahasa Indonesia, but you can turn on the Captions to get the English subtitle. -- Tutorial ini disampaikan dalam bahasa Indonesia dengan subtitle bahasa Inggris --

UPDATE: If you want to use only Scanline renderer instead of mental ray, you may check my post: [3ds Max] Wireframe Render with Scanline

...By the way, this is my first time to do a video recording. And I was very nervous. :p
So if you have something in mind, write your comment below.

Cheers!

[3ds Max] Basic Human Modeling

2014-01-02T19:30:00.001+07:00

This tutorial is about basic human modeling with basic topology for animation. The tutorial covers step-by-step modeling process (box modeling) in 3ds max, though you may still apply the principle in any 3D modeling app.

Tutorial 3D Modeling: Basic Human Body with 3ds Max

Tutorial 3D Modeling: Basic Human Head with 3ds Max

Btw, the tutorial is created in flash-based app (for Windows only). Open the .exe file and you may find the 'how to' to navigate along the tutorial. It is divided into 2 part, one for basic body, and the other for basic head (with no ear, maybe I'll update later).

THE LINKS
(you may need to temporarily turn off your ad blocker):
3D Modeling: Basic Human Body (22.7 MB, RAR)
3D Modeling: Basic Human Head (24.1 MB, RAR)

I hope this is helpful. If you have any comment or suggestions, please comment below.

Cheers!

Augmented Reality Competition

2014-01-02T18:04:00.000+07:00

This is my submission for 3D Augmented Reality Competition held by Aurecmedia a few months ago.

Screenshot of my video submission

The theme of the competition is: Aurecmedia, the latest innovation in digital marketing. I choose a billboard as the representative of 'marketing', and by seeing this model on user's mobile device (with AR app installed), they're actually seeing the latest innovation in digital marketing.

307 polygons, fully textured (diffuse, self illumination, opacity) in 1K bitmap each, fully animated with animation clip:

frame 0-10 : standby mode
frame 10-120 : animation being played when user touch the box
frame 121-160 : loop animation

Well, too bad I didn't win nor lose, since the competition was cancelled and I was the only participant in this category. (what a bad luck, lol) ..and sorry for the video quality. *cheers*

[Blender] Lighting Study with Cycles

2012-04-08T09:48:00.004+07:00

Recently, I am interested in CG lighting.. Because I believe that it defines how good our picture/animation/film's look.. We delivered a final render to our audience, that's why lighting plays a big role in how great the visual they see..

Well, it feels like it's challenging me, "how far you can achieve realism with CG lighting?" So I decided to do some practice using Blender Cycles and see how good my skill and this render engine is :D

here's what I got, (click the image for larger size)

Lighting Study with Blender

3D model was downloaded from here
I did the lighting and render in Blender Cycles with some adjustment in Photoshop.

I know that it's still far from realism, so any suggestion will be appreciated! Thx! :D

Just Trust Him

2012-02-13T03:35:00.005+07:00

Hello everybody.. long time no post here.. hehe.. I've been so busy these weeks (and I thank God because being busy means that He still bless me.. haha! )

OK back to topic.. Well, you know, shit happens in life.. It happens in my life, your life, and everybody's life.. If there's one saying that he/she has never faced any problem in their life, you know they're lying.. :D

So, it was this nite, when I got a BBM message from my brother.. It's about trusting Him that everything happened in our life is in His control, and it's for our good.. If you think that you're really in a deep shit right now, you'd better read this and start being grateful ;)

Trust God in all times

Me: God, can I ask You a question?

God: Sure!

Me: Promise You won't get mad
... ... ... ...

God: I promise

Me: Why did You let so much stuff happen to me today?

God: What do u mean?

Me: Well, I woke up late

God: Yes

Me: My car took forever to start

God: Okay

Me: at lunch they made my sandwich wrong and I had to wait

God: Huummm

Me: On the way home, my phone went DEAD, just as I picked up a call

God: All right

Me: And on top of it all off, when I got home ~I just want to soak my feet in my new foot massager & relax. BUT it wouldn't work!!! Nothing went right today! Why did You do that?

God: Let me see, the death angel was at your bed this morning and I had to send one of My Angels to battle him for your life. I let you sleep through that.

Me (humbled): OH

God: I didn't let your car start because there was a drunk driver on your route that would have hit you if you were on the road.

Me: (ashamed)

God: The first person who made your sandwich today was sick and I didn't want you to catch what they have, I knew you couldn't afford to miss work.

Me: (embarrassed) Okay

God: Your phone went dead because the person that was calling was going to give false witness about what you said on that call, I didn't even let you talk to them so you would be covered.

Me: (softly) I see God

God: Oh and that foot massager, it had a shortage that was going to throw out all of the power in your house tonight. I didn't think you wanted to be in the dark.

Me: I'm Sorry God

God: Don't be sorry, just learn to Trust Me.... in All things , the Good and the bad.

Me: I will trust You.

God: And don't doubt that My plan for your day is Always Better than your plan.

Me: I won't God. And let me just tell you God, Thank You for Everything today.

God: You're welcome child. It was just another day being your God and I Love looking after My Children...

See? When bad things happened in our life, it's also for our own good.. Sometimes we just don't understand why this and that must happened in our life, but He wants us to learn to trust Him in all times.

Job 2:10b - "Shall we accept good from God, and not trouble?" In all this, Job did not sin in what he said.

Jeremiah 29:11 - "For I know the plans I have for you," declares the LORD, "plans to prosper you and not to harm you, plans to give you hope and a future."

Let's learn to trust Him. ;)

Get Some Life!

2012-01-29T01:48:00.000+07:00

Oh yeah.. I just found this while I'm wandering on my facebook timeline..

Always leave office on time, shall we?

..honestly, this really slapped me.. lol

Yeah, it's true that life isn't just about working and losing the meaning of our life.. so I'll start thinking again about this from now on.. and I hope you do so if you are some kind of 'workaholic' like me.. *cheers*

[Blender] SSS Skin Shader in Cycles

2012-01-04T04:20:00.002+07:00

Hi, guys! I bet you all must have been wondering how to create SSS Skin in Cycles.
I've tried googling it before and found some ways to do it. But after I tried that, none is quite satisfying for me :(

Then i did a little experiment and finally got this:

Blender Cycles SSS Skin Shader test on Suzanne

And for the shader node:

Blender Cycles SSS Skin Shader node with 3 layer

This is kind of basic shader of SSS Skin.. well, of course you can improve it more by connecting your texture map and so on.. :p
I've also tested it by moving the source light and it works like a charm! *love*

Wish I could do some programming to access more properties of the nodes.. so I could control how deep the light will pass through each shader and so on..

Well, I hope you find this helpful. Enjoy! ;)

[Blender] Candy Shader in Cycles

2012-01-01T20:32:00.002+07:00

Soo, who wants some candy? LOL

In the last 2 weeks, I started learning Blender. An interesting 3D app, honestly. ;)
You can download it for free at www.blender.org

Here's my testing using Cycles render. I tried to create a green suzanne candy.. hahaha..

Blender Cycles candy shader test on Suzanne

If you're interested in the material, I've also put the screenshot of the material nodes.. or download the .blend file here.

Blender Cycles candy shader node

Frankly I kinda satisfied with the result. The only thing that really bothers me is the render time. I took me more than 3.5 hours just to render a simple scene with 720x405 pixel! *faint* - I'm using CPU since my VGA doesn't support the GPU render in Cycles.

I need to crank up the sample up to 1000 to get a less-noisy final image. :(

Enjoy! ;)

Red Demon

2011-12-20T22:38:00.001+07:00

So, the story goes when I got stressed from work. Then I remembered that I haven't tried Dynamesh, a new feature of Pixologic ZBrush 4R2, yet.

So after 7 hours* playing around, I came up with this. :D
*the render process itself took about 2 hours -.-"

Red Demon

Modeled in ZBrush using Dynamesh, rendered in 3ds max using mental ray.

Enjoy! ;)

Multimedia Creative Festival 2011

2011-12-07T22:06:00.001+07:00

Multimedia Creative Festival (MCF) 2011

So here it is! MCF 2011!! :D

This is a final assignment for final year students in Multimedia Universitas Surabaya. They are required to give their best works, compiling them into a nice portfolio and holding an exhibition.

There will be also some speakers from the creative industries in Surabaya sharing their experiences. We have speakers from open source-based animation studio, comic artist, 3D printer and scanner supplier, fashion design school, local TV station, Autodesk ATC, etc.

check the complete list of speakers here

So if you're on Surabaya and you want to get inspired, this is the right place to come. Please come and get inspired!! :D

History of 3D in a Nutshell

2011-11-26T04:01:00.001+07:00

On contrary to popular belief, 3D is not a new thing. Although it was as late as 2010 that 3D motion pictures became mainstream, the history of 3D imaging goes way back much further. The idea of making an image which imitates the live-eye view is 160 years old now.

The first known record of using 3D were stereoscopic photographs presented on The Great Exhibition in London in 1851. More than seventy years later, in 1922, the idea was taken up by Harry K. Fairhall and Robert F. Elder, who made the first and actually only film released in the two-camera two projector process.

The 80’s brought milestone in 3D development. “Tron”, released in 1982 was the first film to make extensive use of computer animation. The same year, there was the first 3D broadcast in United Kingdom’s television. It was an episode of “The Real World”, weekly science show on BBC.

In the 90’s the progress accelerated to an extent that wasn’t known earlier. The first-person shooter Wolfenstein 3D, introduced in 1992 was the first game of this genre which gathered lots of players. In 1995 3D imaging became available to almost anybody, when the first version of Blender was released. It is still the most popular free software tool for making 3D animations. That same year we witnessed the first ever motion picture made entirely with computer-generated imagery – “Toy Story”.

The 21st century brought a giant progress in creating 3D imagery. In 2009 the first digital stereo camera was introduced by Fujifilm. The same year, “Avatar” earned almost 3 million dollars and pushed 3D movies into mainstream. As a result, next year after its release, 8 out of 20 highest revenue making films at the box office were available in 3D and the prototypes of 3D television sets were introduced on Consumer Electronics Show.

In 2010 3D became available to practically any user of the major web browsers when Burster was introduced. It is a plugin which enables to present Blender files in a web browser.

And this is definitely not the end. In 2011 the manufacturers of video-game consoles announced that the next generation of consoles will focus on 3D.

3D History in a Nutshell

This article was written by iTechnologie
source: CGArena

Getting Over Stagnancy in Life

2011-11-24T03:03:00.000+07:00

A few days ago, one of my best friend came to me and sharing about his life. He felt like he was having stagnancy in his life. He told me that he already has some part-time jobs that fulfill his needs every month...., but that's it. He had lost his passion and kinda regret his past, why he did not be more serious at college.

Finally he asked me about what I do when I get home after work. Well, I always have things to do: either playing with my nephew, sharing stories with my family, doing some freelance jobs, doing lecturer's homework, or just browsing the Internet looking for something new and learn from it. And honestly, I procrastinate sometimes when I get saturated. :p

Since I've known him for a few years, I started reminding him about his passion before. I remind him that God has a great plan for his life that he will be a great man someday. I believe that passion is the first ingredients to make people move on their life.

But the next question is how to make people keep moving? Here's what I do: Challenge ourselves!! We need to deliberately put some 'sharks' on our life so that it will force us to move. When we do this, we only have 2 choices: move or die.

How do we put this 'shark' on our life? I believe each people has their own way, but I'll share what I do: I accept 'impossible' freelancer projects.

My latest on going 'impossible' project is creating a TVC for a product. My client gave me the storyboard and she asked me to visualize it in a full 15 secs of 3D animation with 2 weeks deadline. Well, that sounds possible enough, but i haven't told you the full story. :p

The scene took place in a soccer stadium, when a penalty kick is happening. So I have to create about 3 full-rigged main characters with a stadium and the crowds! I know this project is possible for a big animation studio where they have some artists and hi-end PC's, but it's 'impossible' for me whose working almost alone (I only asked 2 of my friends to take care of the rendering, SFX, and the BGM). Fyi, I am not a fulltimer in this field yet, I still have to give lecture about 4 subjects/week and required to stay 12 hours/week at the campus office. I also can't ask for more help since the fee is not big enough for a project with such brief. The only reason I accepted this project is that I need to build my portfolio and to put a 'shark' on my life. Yeah, money isn't everything. :)

Before we dealt, my client asked me to give her a shot sample from the full animation. I chose the hardest shot, created a character, textured it, rigged it, animated it, set some light, render, and composed it only in less than 14 hours! Which I didn't believe I could do that before..

Succeeding in creating the sample shot has given me more confidence in completing the full project. It is enough to prove me that when I put a 'shark' on my life, I will move and upgrade myself. The bigger the 'shark', the faster I will upgrade myself at the maximum potential. This way, I will never have stagnancy in life.

Furthermore, this 'shark' will also force me to think creatively no matter what. Remember that creativity emerges from limitation and pressure.

So, are you brave enough to put a 'shark' on your life? ;)

Be blessed!