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

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

HLSL Soft-Edged Shadow Map

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

Normal Map + Specular Map

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!

Stylish Silheouette?!

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

HLSL Image Processing Cartoon Effect

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

George's Demo Review3~

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. ^_^

George's Demo Review2~

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 Review1~

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