Website Outline

The first thing I do is always to think and create an outline. The outline doesn't have to be the final outcome, just a rough draft so you now what you want.

My outline looks like this:

-Website
--Name
---Unknown (will think of later)
--Content
---Home
----Welcome message with blog below that
---Java
----Games
----Applications
---Contact
----Contact formula not showing my e-mail address (due to security reasons)
---About? (maybe...)
--Style of Website
---Either
----Dark background with light text (cool)
-----black background with almost white text
----Very Light background with dark text (clean)
-----Blue tones and white and maybe mix in some purple

those colors just randomly came to my mind because i think they fit nicely together:
dark theme (cool): lllllllllllllllllllllllllllllllllllllllllllllllllllllll
light theme (clean): lllllllllllllllllllllllllllllllllllllllllllllllllllllll

Color picking can be a very big deal but for my purpose I don't need to know what every color represents and stuff like that's since it will be a rather small website at the beginning. When the hit-count picked up some speed I might post about picking correct colors for correct occasions but that's going to take some (long) while unfortunately.

Well, the outline is finished and now I have to think about how I will accomplish my goals...

---

Im Back

I'm back from the holidays. It took me quite a while (eight weeks) to meet all my friends again in Germany and Switzerland (I'm currently living in japan). I went to a sea in the middle of the woods in Germany, it's very beautiful out there. I saw my grand-parents (all four are still living). I ate tons of pudding and Swiss chocolate. I saw a gigantic digital billboard at a train station displaying a blue screen. I took the airplane twice and ate really bad food. Unfortunately I didn't have Internet access during that time so I couldn't post (that really sucked). Did I mention that the airplane food sucks?

Anyhow, I've decided to pause my development from my 3D engine and create myself a website. I really need one to post my Java apps/games and I'll add this blog to my website too (if I can). The website will also contain a contact formula (not showing my e-mail address). Later on, when there are more visitor I'm hoping to add a forum and an account-system which saves your game high scores and the like.

That's it for today...

---

Going on Holidays

Yeah, I'm going to switzerland for about 6-8 weeks or so I'm not gonna post anything during that time. I'm in a rush right now, have to pack this and that....

btw: I hate Flying

---

Fog and Field of Vision

I've implemented some simple fog and field of vision.

Here's a picture:
The red line represents the end of the map. Now the map could go on almost infinitely so it's important that we stop drawing at some distance. This distance is the field of vision and is represented in the following image as a blue line.

To implement field of vision simply do a check:

Blogger is messing up my code, Trying to fix it soon

if((a.z+b.z+c.z)/3 <>

where a, b and c are the 3 vertices of the triangle.
This doesn't look quite so good so we try to blend it out with fog:

The green line represents the FogDistance, this is so that the fog doesn't start right in front of our eyes. That could get annoying, but sometimes it is wanted so just set the distance to 1 when needed. We simply add a little bit more black each time the triangle gets farther away from FogDistance:

Blogger is messing up my code, Trying to fix it soon

int r,b,g; // Color values of triangle

if((a.z+b.z+c.z)/3 > FogDistance) // Check if greater than distance
{
// Make Darker by distance to fogdistance*fogintensity
r = r-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
b = b-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
g = g-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
}
// Very important check if color values are acceptable:
if(r > 255) r = 255;
if(r < r =" 0;"> 255) b = 255;
if(b < b =" 0;"> 255) g = 255;
if(g < g =" 0">

int r,b,g // Color values of triangle
if((a.z+b.z+c.z)/3 > FogDistance) // Check if greater than distance
{
// Make Darker by distance to fogdistance*fogintensity
r-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
b-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
g-(FogIntensity*a.z+b.z+c.z)/3-FogDistance);
}
// Very important check if color values are acceptable:
if(r > 255) r = 255;
if(r < r =" 0;"> if(b > 255) b = 255;
if(b < b =" 0;"> if(g > 255) g = 255;
if(g < g =" 0;">



FogIntensity should be very small, just try it out. Something like: 0.0001

That's it for today, I'll hopefully implement colors next.

---

Ubuntu

SummerHoliday = True;
if(SummerHoliday) System.out.println("Yay");

A friend of mine(my teacher, heh) got me interested in Ubuntu and I must admit it's rather god(intention++; spelling--;) compared to windows. I'm trying to install Ubuntu on my current computer so I will have dual boot(XP/Ubuntu). So far it's all working except the start-up takes 5min., that's the thing I'm working on right now of course.

Ubuntu is a great operating system if you enjoy do-it-yourself guides and want to know whats going on behind the scenes. It has shiny, quick, great, beautiful, work-enhancing, graphics which you can turn off if you have a different opinion. It's very clean since everything can be installed by packages from one place. No need to buy a CD or search the web for a cracked version, everything is completely free. (rambles on about how secure it is...) *dreams on*

After installing Eclipse and if needed JDK/JRE (Java Development Kit/Java Runtime Environment) I'll be back to my 3D engine. I thought about a simple implementation of colored triangles and field of vision fog.

---

Timeless

The end of the (school/university/whatever) year is quickly approaching and with it the terrible tests. I don't have a lot of time this and next week so I'll just do some simple speed optimizations on my 3D engine.

---

Halfway Finished

My engine finally has no more bugs (unless you count speed optimizations) and can show triangles in proper order with normal shading. Here's a picture of my marvelous self-replica rendered by my engine:


The applet is Here. Unfortunately inside the Applet there is only a cube as the above figure is loaded from a text file and an applet can not do that for security reasons.

Now how did I remove the hidden surfaces? Well you simply find the Z-normal of a triangle and see if it's positive or not. If it is, it's facing you, otherwise it isn't. To find the Z-normal use the following formula:

normal = (t.b.x-t.a.x)*(t.a.y-t.c.y)-(t.b.y-t.a.y)*(t.a.x-t.c.x)

Where t is your triangle, a,b, and c are the three vertices and x,y, and z are the vertices coordinates.

I'm not sure where to go next. Until now, bugs have guided me but now there are none left (Yaaaay! o.o). A few options which I can think of are:

- speed optimisations
- Shading with interpolation (smoother shading)
- Add colors and textures (textures are main problem)
- create a very simple game with my current engine
- take a break and do something else

I'll probably do speed optimisations first but as I said, I'm not sure yet.

---

Hidden Surface Removal

After a good nights sleep and looking over my problem I realized that I don't really have to solve the problem of z-fighting along the edges. The reason is this:

Do you see the green edges? well if z-fighting occurs along those edges it's not a big problem because you won't be able to see it since the wrong pixel will connect to all of the other pixels of the triangle it belongs to making it invisible. The points is, we can't see if pixels along the green edges z-fight so we don't have to fix that (lazy me =p).

Now how about the red edges? Well those are the problem, if a wrong pixel pops out from the other side of the cube it's totally out of place on the screen and doesn't connect to any other big body of same colored pixels which makes it really obvious that there is something wrong to the person looking at the applet.

Well we can get rid of the other half of the cube (the one which is not seen) by some type of hidden surface removal. This will speed up things and the red edges won't have anything to fight with therefore solving the problem. I'm not sure yet what the best way is to eliminate not seen triangles but I'll do some research and hopefully come up with an answer.

For those of you interested in solving the problem of z-fighting along the green edges for whatever strange reason ever it probably could be solved by adding a id number to each triangle and biasing the z-fight so that the triangle with the higher id would win even if it's pixel is deeper by 0.0001. I'll implement this when I'm terribly bored and have some spare time to waste. (probably never as it's not needed *.*)

---

Flimsy Edges or Z-Fighting

Sorry about not posting the past week but I had to do a lot of other things. We'll I hope this extra fat post will make you happy =).

First of all, here's the new Applet. (uses z-buffering)

My Z-buffering implementation is almost perfect but there are still some problems:

- Speed optimizations (I'll do this after finishing my 3d engine)
- Flimsy Edges / Z-Fighting

Here's a picture of what I mean by "flimsy edges":

This happens because of Z-fighting. Z-fighting is when two triangles fight for a place on the screen because they are both about the same depth. Here it is only edges which fight as only they have equal depth. The above edge (circled in red and magnified) has light gray shaded pixels from the triangle on the other side on it. In the applet it is a lot easier to see what I mean so take a look.

I'm not quite sure yet about how I should fix this, a few (bad) ideas which come to mind are:

- Don't make the edges equal, translate one edge by 0.000001. I really don't want to do this since it's annoying to do for big models and my engine should be able to fix this some other way. This would be the answer for when I'm desperate, which I'm not yet...

- Draw a line around each side of the triangle after I'm done drawing it eliminating pixels from other triangle around the edges no matter what depth they are. This would of course mean that the triangles would have to be drawn in the correct order which they are not.

- Do some research, which is what I'm going to pick for now.


Apart from fixing this Z-Fighting issue I plan to go over the previous and future posts with spell check. My posts don't have any labels/keywords so I'll add some. Also my title is all text and I think it would be nice to add a picture behind it, I'm just going to experiment a little with my blog layout and settings.

My geocities page which hosts the applets is all white except for the applet and doesn't have a proper menu. I'll try to make it look a little better. Also geocities is probably not the best choice so I'll look around for something without advertisements.

---

Triangle Interpolation

Triangle interpolation can be used for a lot of things like nice shading, color interpolation and of course, z-buffering. The way i did it (probably the quickest way) was like this:

First you interpolate to find the two edges of the line you're drawing right now:


So if you would be drawing the grey line, you would have to find the numbers 1 and 10 by interpolating the end points of the two red lines; 1-1 and 1-20.

Next you interpolate between these two points to find any pixels depth/color/shading:


Now just repeat this process for every line of your triangle and you will have a nicely shaded/colored triangle. Remember to switch to you second pair of lines once you have passed about half of your triangle:


My implementation of z-buffering is buggy (triangles are drawn smaller/bigger than necessary) so I cant show you guys the applet yet but i hope it will be fixed in two or three days.

---