Oogami O_O!?!?!

I think since Oogami's release, people start to discuss about its stylish rendering effect -- water drawing. I think my last post about how to achieve the result was not reasonable. So after taking opinions from my brother and coworkers, I deside to challenge this rendering technique again! ^^;

This time I have 2 models ready, one is rendered in CW order to create the outline and the other one is the original model. The difference between the 2 is that their shapes are alil bit different so I can use that to produce those unbalenced outlines in Oogami. After the preparations, I follow the steps below to achieve my result.

1. Render Outline only to a texture for post effect later.


Original Outline, the shape is different with with the real model

2. Do Glow effect to this texture
3. After the glow, I use some color conversion filters to control the contrast of the color in order to produce the stylish outlines. Diff contrast can create diff style~ ^^
4. Finally multiply with the original texture to get the result.

Hehe, to be honest I didnt know the result will be this impressive ^^; If I spent more time on adjust the coloe conversion, I think there will be more cool rendering results than this~ ^^




The result is like this, does it look like Oogami? ^^

Some Links~

These are some links people sent me or found by myself~ have a relaxing break and enjoy it~ ^_^

http://lukwama.com/e32006/3fight.swf
2006 E3 War~ hehe

http://www.youtube.com/watch?v=dsw-KSiO0VE&search=transformers
Saint Seiya + Transformers... my god

http://www.gametrailers.com/umwatcher.php?id=2366
FFXIII...!!!!!!

http://video.google.com/videosearch?q=bakuten
Famous Japanese celebrity "Hard Gay" (HG). you will laugh to death if you understand japanese~ lol

http://blog.xuite.net/cwlin/iloveheikko/6104607
Dumb magician ^^;

http://www.youtube.com/watch?v=9wlmx8qQHiA&eurl=http%3A%2F%2Fwww%2Efazed%2Eorg%2Fvideo%2F%3Fid%3D275
Cool performance~

http://www.gametrailers.com/player.php?type=mov&id=10179
God of War2 trailers~ Cool
Some models are made by this guy. so gonna advertise for him one more time~

http://youtube.com/watch?v=5ynp8izBqeM&search=Darth%20Vader
Japanese Police and Darth Vader~ lol

http://youtube.com/watch?v=TKzYLUkEjvY
If you know this cartoon... the real person one is NOT fun compared to the cartoon!

http://www.wretch.cc/blog/xen&article_id=1948270
funny blog... ^^;;

http://game.coden.ntt.com/contest/work/29/29.html
A creative music game~

http://fun.bowmans.com/poker/
Poker...dont regret after you played @_@

http://www.videovat.com/videos/1193/ak47-home-shopping-network-skit.aspx
People sell this on TV??!?!

http://www.youtube.com/w/Memoirs-of-a-Geisha--Mad-TV?v=_AQvqsZFgDY&search=mad20tv
Memoirs-of-a-Geisha mad version -_-

http://home.so-net.net.tw/pinkba/mystery/mystery.htm
fun clip

http://blog.xuite.net/allpass97/share/5761505?st=c&w=24277&re=list&p=1
Violent kid....

http://video.google.com/videoplay?docid=-7184420933710108270
Banned MasterCard Commercial~~hehe

http://blog.onlyone.idv.tw/article.asp?id=656
If you know chinese this will be a fun song~

Bad Day @_@;

Actually it happened a few weeks ago but I havent got a chance to take the pics( aka too lazy =P ) so I didnt make the post until now. Damn George you lazy worm!^^;

I had a external harddrive ( exHD...lazy me ) full of my "collections" ( if you are a man you should know what those are...hehe ). One night when I wanted to do some "review", something bad happened; my pc couldnt recognize it anymore. It kept saying "cannot recognize the device" no matter whereever I plugged it. So I brought it to the office and asked my coworkers. "Oh, might be something wrong with the case, maybe you can try another case." OKay... I would give it a try. So I borrowed a case from one of my coworkers and at the time I plugged the case, I smelled someone cooking...nonono, its like something burned!! Yea, the case was already smoking... WTH..did I plug something wrong?? Stupid person like me borrowed another case to prove my dumbness...Of course I burned it again. @_@

OMG, why was I so unlucky. I not only broke my HD but also burned 2 cases borrowed from coworkers. And the worst was I lost my "collections"!!!( men should know the feeling...hehe ) Good thing was my HD and the external case were still under warranty so I could just replace them. But I still had to buy 2 new cases to apologize for my dumbness~ Since that day, I never trust external HD case no more. ><; So remeber! Good kids always backup your data. @_@;


Left is my angle HD, right one is the demon case~

HLSL Glow

We can see Glow effect in almost every game now. Indeed it really improves the visual result to the next level~ In this demo, I used some simply ways to implement the glow effect. Of course the first thing was to render the scene into a texture since its another post-processing rendering. So I rendered the scene with specular on and saved it to my texture and used it for my glow texture creation.

In order to produce that blurry effect, I first copied the scene texture to another small size one. This not only decreased the shader calculation but also created the basic blurry effect =P. After that I made the texture to multiply itself several time to make the bright color brighter and the dark color darker. And then I used Gaussian Blur to blur the result and Yea! a glow texture was done. Finally I added it with the original scene texture and its done~ ^_^


The result was like this~

NPR Style[EX!]

What!? NPR again? Hehe...but this time is more challenging~ The main focus of this demo is color distortion effect. The rendering result is quiet attracting(to me =P ).

This is another post-processing demo so as usual we will output the scene color to a texture. But for new edge detection effect, we will need the scene normal and depth as well. So we output the normal as "rgb" and depth as "a" into another texture. And after that we will use these textures to do the post-processing part.

Step1~~Color Distortion:
Use this method to distort the color and make the output look like hand drawing. Steps are:
1. Downsample color texture into a smaller texture.
2. Convert from RGB to HSV color space and quantize color values. This color space conversion is done via a dependent lookup into a volume texture.
3. Sample the same image at 2 displaced positions; using 2 2D offset textures.


Sampling textures~
4. Compare the samples; if the samples are different enough, we output the average of them in S and V channels, keeping hue from the original center sample. This will effectively displaces image saturation and value at color boundaries.
5. Convert back from HSV to RGB using another volume texture lookup.


Before and after~

Step2~~Edge Detection:
Differ from my old HLSL posts, this time we use pixel's normal and depth to find the edge; if the angle between the normals is big enough(45degree to me), we count it as the edge. Also we compare the difference of the pixel's depth; if the depth difference is big enough, we count it as an edge too. Below is the result i got. It got both silhouette and edge~cool!^_^)b

Result of edge detection~
Finally we combine all the results together and here we have~


Color Distortion + Edge Detection + Hatching~
The most ineteresting part of this demo is the color distortion. I was wondering if I modify the sampling textures, will I get any remarkable change from the result?^^ Oh, one funny part I found out was that I tried rendering the toon effect by first converting the RGB to HSV and adjusted the S and V channels. Because the H was not changed so the result will keep the same color but different saturation and value. The result color was alot softer than the older methods; no those dark and dirty colors~ take a look^_^


Top is old RGB method, Bottom one is the HSV result. What do you think?^^

Ambient Occlusion

Ambient Occlusion(will call it AO in this post~) measures the amount that a point on a surface is obscured from light that might otherwise arrive from the outside. The result of this method will simulate a soft self-shadow to the model and add a great deal of believability to the lighting. In this demo I used both software and hardware implementations as below:

Hemispherical visibility test:
As shown in the picture below, rays are traced outward from a given surface point p over the hemisphere around the normal N. we check if these rays hit any other sufaces to calculate the accessibility of p; the more rays hit other surfaces, the lower the accessibility. And finally we gather all these values and store them in vertex color for rendering.

I used the method above and used random 512 rays per vertex to calculate the vertex color. Due to the software implemetation, the speed of calculating the result was way too slow for real time purpose @_@; But the result was kind of nice~ The rendering results are the pictures below( click to see the original size^^)~


Depth Map Based Ambient Occlusion Lighting:
As below, the 2nd method is to surrounding the scene with a sphere of lights. The light directions are used for sample weighting, while associated depth maps are used for visibility determination. We can see that the lights here are similar as rays in Hemispherical visibility test. After all the shadow map comparisons, we will have the accessibility of all vertices and we can use the scene's texture coordinate as output position to output accessibility as an AO texture. With this texture, we can just use it to render AO without doing calculations again.

Below are the result using Depth map AO rendering. With the support of hardware, the speed of calculating AO improves aaallllooot!( an 512x512 AO map only takes few secs ). One thing worth mentioning is that there are artifacts in the woman's rendering result. This is due to the duplicated vertex normals( could see the lines even if I only do diffuse lighting calculation ). But the sheep didnt have this problem when I rendered it, so there are some restrictions when choosing models for this rendering method.


Render result, notice the artifacts?



The calculated AO map looks like this~

Although Depth map is faster than Hemispherical visibility test, it still can't reach the real time speed. I know there is already a way to render Dynamic AO in GPU Gems2. So both these methods will retire soon~@_@; Yea, I will take some time to see how Dynamic AO works~ ^_^;

Hong Kong Trip

Due to xxx reason ( top secret^^; ) so I had to travel to HongKong during March. hmm? March? Isnt it April now? Thats right, I'm too lazy to re-organzie these pictures and stuff. But if I dont do it, I probably will lose all those memories like I never been to HongKong @_@ So, here goes the 3 days 2 nights trip to HongKong~

March 17th, this was our first time travel by ourselves. To be honest, I was a little nervous ^^; Although I have been to HongKong before with my family, I didnt have any memory of that place...^^; Anyway, here we go Hongkong, me and my girl friend started our trip. When we arrived at HongKong airport, I somehow felt alot better because most people here did understand Manderin. We picked up our luggage and head to our first stop -- Nikko Hotel.


After we leave our luggage in the hotel, we randomly picked a japanese restaurant near the hotel because it was 14:00 already. A nice restaurant tho with decent price~ after the quick lunch, we headed to our 2nd stop -- The Peak Tower! To go there, of course we would take the Peak Tram. Yea, my memory of HongKong was totally no use, I didnt know where we were when we went out from the train station. Thank god there were good people helping us to find the Peak Tram station. Thanks to those poeple ^^

This is what Peak Tram looks like~



Here we go The Peak Tower...What the hell! its redecorating(T_T) what a lucky day. Well, since we were here, lets just look around in the shopping mall next to the tower. And I found this~

After the Peak Tower, it was almost 6 already, so we desided to visit the buzzing centre of clubs -- Lan Kwai Fong. And we finally got lost as usual lol we had no idea where we were, so we had to head back to the train station and started walking from there again. Finally, thank god we found Lan Kwai Fong. This funny place not only have a whole street of pubs but also tons of western people gathering here~ Its like a special scene in HongKong during night time.


Very crowded place~

Pheww~ what a tired day. We also found something funny when we went back to the hotel...what happened to our king size bed?!?


Yup~5 stars!

I had no idea what that is at the bottom...but i didnt dare to touch it because it might cost money. ^^; I kind of challenged that in Japan before so...rather not try again! Water was free tho...duh

March 18th, due to too much walk from the 1st day, our legs didnt belong to us anymore lol. So we changed the travel to a relaxing one. We slept until lunch time lol and went to a buffet for lunch~ But before that, we did a little window shopping at Nathan Road in Tsim Sha Tsui. It was like normal shopping streets with shops on each side of the roads. And we realized something...not only Taiwan has bad air, its the same in HongKong@_@ really! so poisonous... and there were so many busses...poeple of HongKong, can't you smell that??!

Nathan Road~

Another Nathan Road~

God so many busses...^^;


Some people say if you dont ride this train in HongKong, its like you never been to HongKong. So...i think our trip didnt count lol

After our nice buffet, we took a nap in the hotel and then headed to the world's longest covered escalator. It was very long and the scary thing was, there was no escalator if someone wanted to go back, yup its only one way~ We didnt want to lose our legs before going back to the hotel so we only tried a little while and left~


World's longest covered escalator~

Around sunset, we headed to Star Ferry Piers and found these buildings on the way~



Special Scene in HongKong~ during weekends, there will be lots of these Philippine and Thai gathering here, there were so many of them when we saw. I heard they dont have to stay at the working places during weekends so they will gather here and chat or something




Ferry's outfit...Damn man use 92 or 95 please, its so stinky.

I would like to try this...

Here we were Star Ferry Piers

We had our dinner at Star Ferry Piers and were waiting the lazer show around 20:00. But it was a little disappointed. The lazer show between HongKong island and Kowloon was kind of boring and there was no music too. Anyway, we headed to Avenue of Stars after that. There were so many visitors when we got there but it was too dark to see those hand prints on the ground. But not bad tho~ We went back to hotel after Avenue of Stars to relax our feet for tomorrow~



A KongFu man like you shouldnt have small hands like these!

March 19th, our last day. In order to goto the airport on time, we didnt went to any place thats too far from our hotel. We ate some Cantonese style breakfast and headed to the Ladies Market in Kowloon. ( was planning to eat their Dimsum but those restaurants seemed opened pretty late on Sunday ; ; )

I really wanted to know whats #A...( it's written "good morning everyone" what meal is that??! )

Ladies Market. We were too early i think. Many store were just opening when we got there~

Oh, there 2 were very tasty. I forget the name of the store but their sweets are really good~ left one is mango with rice ball, and the right one is water melon with honey. Those 4 red balls were water melons! really tasty ^_^

Why did i have to be so tired ^^; I wanted a relax trip!

Finally time to go home~ We headed back to hotel and picked up our luggages. When we were waiting the shuttles, we found these 2 funny food~ right hand one is curry fish eggs and the left hand one is some cake~ unlike the one in taiwan, its crunchy and is empty inside. Very tasty too!! ^^

Wooohaa~finally the conclusion lol. HongKong and Taiwan have many similar cultures; Bad air, dirty street... lol I think its the last time for me to travel there =P And I really hate this leg breaking kind of trip~ In the future I will try more relaxing trips like going to howaii or something~