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.

Z-Buffering

I'm going to attempt to solve Z-Buffering like this:

Add a grid of numbers the size of the applet, One number per pixel. Now each time i draw a pixel I'm going to put the depth of that pixel into the grid. If the depth of the new pixel is higher than the depth of the old pixel I'm not going to draw it, otherwise i will.

To find the depth of a pixel in a triangle I will interpolate between the three vertex depths of the triangle, I'm not sure how yet.

I just finished a school project so ill have a lot more spare time. I plan to have Z-Buffering finished by Saturday or Sunday.

The Applet

Here's the Applet*.

The cube rotates randomly in all three directions (x,y,z). Use your mouse to drag the cube around. While you are dragging it you can see the wire frame and vertices.

This applet should make it apparent why I'm going to work on z-buffering next.

* Remember you will need a java (not javascript) enabled browser. If it doesn't work, go here: java.com and download the latest java runtime environment

Z-Buffering & Z-Sorting

Sometimes a picture can be worth a 1000 words:

And sometimes it isn't... I'm going to try to upload an applet so you guys can drag the cube around and see it rotating =).

Right now I'm trying to fix some things like:

This is caused by the over simplistic algorithm called z-sorting where you sort the triangles which make up the object by the average depth of it's 3 vertices (points) and then draw them from farthest to nearest.

Ill try to fix this by implementing z-buffering, or testing the depth of each pixel I draw and checking if it's going to be drawn onto a deeper pixel, if it is, I'll draw it, otherwise, I won't.

So my current ToDo list looks like this:
1. Upload applet
2. Fix z-buffering/z-sorting issue

I'm currently working on...

Im currently working on a 3d (software-rendering) engine. I think it started by me fooloshly thinking that it would be something easy and fun to do. Well I still think its fun and very interesting but not easy.

It's still very simple, heres a list of things it does:
- load 3d models from simple triangle lists
- rotate models in any direction
- translate models...
- fill in triangles
- draw wireframe...
- shade triangles with normal shading (only grey scale)
- has object and world coordinates
- uses z-sorting

The rendering process goes something like this:
- get object
- add world coordinates to object
- add camera coordinates to object
- 3d -> 2d coordinates
- draw object, sort triangles with z-buffering and shade with triangle normals

Ill try to post pictures or even an applet tomorrow.

My very First Post

Hello,

I've finally decided to get a blog. I'm new to this thing so if I'm doing anything wrong (which I'm certain of) please leave a constructive comment to help me out.

I've been programming for about two to three years now. I first started out with Delphi, an object oriented programming language coming from pascal which is relatively old now. It's really easy, you just drag components onto a form and double click onto them to add source code. It was kind of a shock to me that you couldn't do that with java when I finally switched over to it two years late. I got over my shock quickly and have learned to love java. My current development environment is Eclipse and I mostly make applets since they are easy to share over the net.

If anyone DOES read this please comment. I will be very happy.

p.s. I'll be working on this template a lot so don't expect this site to stay like this
p.s.2 I'll try to post a lot (you've probably heard that often by now)

Delphi: http://www.codegear.com/products/delphi/win32