George's Blog

Grand Opening~

2006-02-20T08:41:00.000-08:00

wow~ It only took me less than 5min to make this website-like thingy. All I can say is "blog...You are the Man!" But why is my 'g' (from george's blog) not capitalized!! (T_T)

I soon found out I am really not the type of person who can write dairy or essay; I had alot of ideas in my mind before i started wrting and now my brain is blank and blank. I dont even know what to write lol. What do people usually write in their first post? Ah~dump brain, you are so dump. (*'3')

Anyway, "George's Blog" is opened~Ya. What will be posted here? mmm...so far I will post my game experience and share some demos I programmed. Maybe you will find something useful here...eh, I hope.

Hope you will like it ^^
George

P.S. Oh!Oh!Let me advertise my chinese version blog here also. Interested in Chinese? Come!Come! XD
http://www.gpower-ch.blogspot.com/

Taiwan's Air...What the Hell!!!

2006-02-22T07:02:00.000-08:00

In my opinion, riding scooter to work every morning is the most painful thing to me in Taiwan. Within that 25mins, I can absorb plentiful Dioxin and CO2...nice isnt it?....NO!!!Think about it, during summer time, if you are riding a scooter under the scary temperature ( hot enough to melt a tire!) and there is an old scooter blowing shity smoke on you on your left hand side; and some coughing old man keeps smoking on your ride hand side, and there are also trucks and bus in front of you sending you all the fresh dust and dioxin, how will you feel? Its...its hell! But thats not scary, the scary thing is that people on the street seem pretty comfortable under that situation...I remember last time I saw a couple riding a scooter, they could chat and laugh happily inside the dark smoke the bus blew on them. I guess their lungs are probably made of iron or something@_@ Wake up people, that shitty smoke is poisonous!!

Oh, by the way, I posted last time I was going to share my demos here but it seemed not so easy. Why? Because I can't upload data files using blog@_@. So i still have to find a free space to put my files...stupid blog...I think I over-estimated you (*'3')

George

George's Demo Review1~

2006-02-26T05:04:00.000-08:00

Huuu~finally found this old dusty demo(in a folder named"very very old shit" lol). I made this when I first started to learn game programming when I was studying in UCDavis(2001?forget=P). I remember i was reading this book called "Tricks of the Game Programming Gurus"(written by Andre' LaMothe, and really a good book actually) and I started making this demo after the first 2 chapters(too excited hehe...). And because of that, this demo uses all predefined window functions; there is no DirectX or OpenGL at all(that's why it can still run without version errors...lol). Of course all the pictures in this demo are made from predefined functions also. Although there isnt anything good about this demo, I learned lots of things when i was writing it. Mmm~ memories. Oh, one thing I really regret is that there is no pause button in this demo, so it gave me a tough time trying to take the pictures below@_@; Try it out when you feel really bored^_^

very shitty graphic..btw there is a boss, becareful hehe

Click here to download TheBees.rar

George's Demo Review2~

2006-03-07T08:16:00.000-08:00

GDemoEX. This is the demo I spent alot of time in after I graduated. Although I studied many game programming books, I never really made something using those techniques. I did learn many graphic related courses in school but I was still not satisfied. So I promised myself I had to make something using what I learned. Where did the idea of this demo come from? I remember there was a game called "Dinasty worrior3"published by Koei. It was kind of famous in eastern area. During that time, there were not many games that could let you kill thousands of people in a battle ground and I was very depressed at that time also(RL problems), so I always liked to play it to relax myself(especially when there were too many bugs...kill!kill!!) Thats the idea of this demo.

I met alot of troubles when I was writing this demo. Yeah, reading books and writing codes are 2 totally different things. There were many situations the books couldnt taught me. I had a enough problems already when I first started to write the 3DMax model exporter.(*'3')

Oh, by the way, the earliest verion of this demo was using OpenGL. Later on I wanted to put Shaders in my demo so I rewrote it to DirectX version. Shader was another hell to me during that time;silhouette, shadow volume were all pretty hard techniques to me when I tried to put them in my demo. Finally I finished it without giving up XD. Thanks to those experienced programers for giving me advices and supports. And thank my brother Louis for helping me with the models.

This demo is not very good actually=P and the techniques I used in this demo can be found everywhere now. But I still want to introduce the techniques I used=P
-All models are exported from 3DSMAX using my owned expoter. I named it Gexporter...<=)
-Terrain is generated using Octree terrain rendering.
-Toon effect and silhouette using shaders.
-Shadow volume using shaders.
-Model animation blending using shaders.
-Basic AI(stupid AI) and collision detection

Below are some pics from the OpenGL version. Bad isnt it XD

Yea, if there is enough time, I really really want to do demos like this again ^_^

George's Demo Review3~

2006-03-08T09:22:00.000-08:00

GEditor.This demo should be count as "not-finished"=P. I thought about this demo in a short period of time after I finished GDemoEx. When I was writing GDemoEx, I met some problems like; where should I put these enemies? What do I put here in this map? or something like how my enemies should do to interact with my main character...etc(finally became all random =P ) At the same time, I was playing this famous game called "WarCraft3". It has a tool called map editor. You not only can decide which thing goes where, you can also write a script to make the scene become a complete game stage so other players can play it. Yeah, this editor is hell strong. So I decided right away that I was gonna make a similar one without thinking how hard it could be.XD
Although I had the experience from GDemoEx, this project still gave me a headache. A lot of new problems came. For instance; how do I match the point on my screen to the actually position in my 3D world? Or how do I move multiple objects at once?...etc. After the research and my friends' help( thank you again guys XD ), I conquered most of the problems. My demo could now load a field map, add objects, and you can select them to move or delete and some other actions.

I thought I was doing ok but at the same time I found a deadly mistake I didnt consider(*_x); this demo did not have any data base or any data handlers. I couldnt save my scene or load it. And dont even think about restore. The UI was not convenient also. So this demo could only let you load some models and fields, let you put them around doing all the decoration. And thats all. ; ; Under this sad situation, I had to stop contiuing this demo until I was more experienced about datas.
But recently I was reading a book about data structures and I did found out some methods to handle data saving and restore and others. Yea, George, you need to learn more programming skills besides graphics~XD I hope one day I can unfreeze this demo and finish it as I planned before. ^_^

HLSL Image Processing Cartoon Effect

2006-03-12T00:14:00.000-08:00

A While ago( Jan 2005 I think =P ) I was playing Naruto on PS2. I found they had something more than just toon shading on their models. I could see slash lines easily on the shadow part of their toon shading; made the models look very similar to the ones in manga. I think the publisher called it "Naruto Shading" lol. And yea, not just Naruto Shading, there was also Dragon Ball Shading and others during that time to emphasis how special their toon shaing were. I thought that was some mysterious effect at the begining, but after some study and research and I realized it was not as hard as it sounded. All those fancy names were all from one effect called "Tone Shading" and its not hard to implement it too. All I had to do was combine the toon shading with a slashing line texture then I could make the slash lines only appear on the shadow part of the toon shading~.

During that time, DirectX9.0 + HLSL were released also, so I used tone shading as a chance to practice how to use HLSL. I used HLSL to write my shader codes and used Image Processing to re-do my cartoon effect. And wow, Image Processing was one very good technique!! With Sobel Silheouette filter, I can find perfect silheouette. Unlike those crappy lines I did before, this Silheouette is smooth and nice. And plus the tone shading, I can make the same effect as that Naruto game lol. Really, Image Processing can really make some nice effect and I think there are more and more games using this technique now like Glow, Blur...etc. I guess Image Processing will become a required technique in the future game industry. ^_^

HLSL Image Processing + Toon + Tone + Silheouette!!XD

Stylish Silheouette?!

2006-03-12T04:26:00.000-08:00

I brought Oogami demo disk back from Tokyo Game Show 2005. After I tried it, I had to say I really admired Japan's talent of game producing. Especially that chinese drawing-like rendering effect, how did they do that? I tried to look for such information but I couldnt find any useful one. Somehow I heard it used a way to change the texture of the silheouette depending on the camera's position. I didnt know its true or not, so I made a small demo to see how it worked. The result are the pictures above. I used several kinds of textures to replace the silheouette. The result seemed ok...But if i want to do the chinese drawing-like rendering, how do I change textures base on camera position?_?; Oogami's Chinese drawing-like rendering effect, if anyone knows how to do it, please let me know~~ @_@;

Normal Map + Specular Map

2006-03-27T06:38:00.000-08:00

Another old stuff from last year~^^ After i finished the HLSL cartoon effect, i found out i was not really familiar with using lights. So i desided to spend sometime to get to know more about the basic lighting effect, especially the difference bewteen Diffuse, Ambient, and Specular. In old games, people only calculated per vertex light and it was not graphically impressived, but in now days, per pixel lighting is almost a must and can greatly improve the lighting result. I wont lose a chance to try the shaders so i went for per pixel lighting. Talking about per-pixel lighting, normal map was the basic thing i had to know. And i think normal map wasnt as hard as i thought once i got to know the tangent calculation. Yea, if you know the meaning of tangent and know how to use it, then you pretty much know the whole thing~ ^_*

Pictures below were the result i made using a normal map plus a specular map to improve the specular effect. It seemed not bad XD This technique is used in many games i think and yea, it is graphically impressive =P~

P.S. Oh btw, this creature is made by my brother Louis too, hehe, so gonna advertise for him one more time~ thx Louis!

HLSL Soft-Edged Shadow Map

2006-04-02T00:34:00.000-08:00

Because of this demo, I found out my graphic card doesnt support float point texture @_@; ( Damn you GForceFX5900XT, I shouldnt have trusted you!!! ) In this demo, I rendered the depth value from the light's point of view as the shadow map into a floating point texture. ( used D3DFMT_R32F to keep the precision of the data...GForceFX5900XT doesnt support this format...damn it (\_/)q ) After the shadow map was done, used it as the texture and did the depth comparison with the pixel from the camera's point of view and rendered the shadowed portions into another texture. And finally blurred the texture from the depth comparison to get the soft-edged shadow map~

Shadow Map is easy to generate but it has some limitations. It doesnt work well with point light sources and may create some artifact due to the limited precision of depth values. But comparing to Shadow Volume, I still like Shadow Map better~ ^^

Hong Kong Trip

2006-04-02T09:18:00.000-07:00

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~

Ambient Occlusion

2006-04-16T00:38:00.000-07:00

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~ ^_^;

NPR Style[EX!]

2006-04-23T05:46:00.000-07:00

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?^^

HLSL Glow

2006-04-26T07:12:00.000-07:00

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~

Bad Day @_@;

2006-05-14T05:01:00.000-07:00

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~

Some Links~

2006-05-14T05:57:00.000-07:00

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~

Oogami O_O!?!?!

2006-05-14T07:10:00.000-07:00

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? ^^