Advertise here via BSA
Now that we have built the core of our 3D engine thanks to the previous tutorial Tutorial series- learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript, we can work on enhancing the rendering. The next step is then to connect the dots to draw some lines in order to render what you probably know as a “wireframe” rendering.
1 – Writing the core logic for camera, mesh & device object
2 – Drawing lines and triangles to obtain a wireframe rendering (this article)
3 – Loading meshes exported from Blender in a JSON format
4 – Filling the triangle with rasterization and using a Z-Buffer
4b – Bonus: using tips & parallelism to boost the performance
5 – Handling light with Flat Shading & Gouraud Shading
6 – Applying textures, back-face culling and WebGL
In this tutorial, you will learn how to draw lines, what a face is and how cool is the Bresenham algorithm to draw some triangles.
Thanks to that, at the end, you will know how to code something as cool as that:
Yes! Our 3D rotating cube starts to really live on our screens!
First basic algorithm to draw a line between two points
Let’s start by coding a simple algorithm. To draw a line between 2 vertices, we’re going to use the following logic:
- if the distance between the 2 points (point0 & point1) is less than 2 pixels, there’s nothing to do
- otherwise, we’re finding the middle point between both points (point0 coordinates + (point1 coordinates – point0 coordinates) / 2)
- we’re drawing that point on screen
- we’re launching this algorithm recursively between point0 & middle point and between middle point & point1
Here is the code to do that:
C#
TypeScript
JavaScript
You need to update the rendering loop to use this new piece of code:
C#
TypeScript
JavaScript
And you should now obtain something like that:
I know this looks weird but this was the expected behavior. It should help you starting to understand what you need to do to display a 3D mesh. But to have a better rendering, we need to discover a new concept.
Displaying faces with triangles
Now that we know how to draw lines, we need a better way to render the mesh with them. The simplest geometric 2D shape is a triangle. The idea in 3D is then to draw all our meshes by using those triangles. We then need to split each side of our cube into 2 triangles. We’re going to do this “manually” but we’ll see in the next tutorial that 3D modelers are doing this step automatically for us now.
To draw triangles, you need to have 3 points/vertices. A face is then simply a structure containing 3 values which are indexes pointing to the proper vertices array of the mesh to be rendered.
To be understand this concept, let’s take our previous figure with a Cube displayed by Blender:
We have 4 vertices displayed on this figure with the following indices: 0, 1, 2, 3. To draw the upper side of the cube, we need to draw 2 triangles. The first one, Face 0, will be drawn with 3 lines from vertex 0 (-1, 1, 1) to vertex 1 (1, 1, 1), from vertex 1 (1, 1, 1) to vertex 2 (-1, –1, 1) and finally from vertex 2 (-1, –1, 1) to vertex 0 (-1, 1, 1). The second triangle, Face 1, will be drawn with the lines from vertex 1 to vertex 2, vertex 2 to vertex 3 and vertex 3 to vertex 1.
The equivalent code would be something like that:
If you want to draw to whole cube, you need to find the 10 remaining faces as we’ve got 12 faces for the 6 sides of our cube to draw.
Let’s now define the code for a Face object. It’s a very simple object as this is just a set of 3 indexes. Here’s the code of Face and the new Mesh definition which also now use it:
C#
TypeScript
JavaScript
We now need to update our Render() function/method of our Device object to iterate through all the faces defined and to draw the triangles associated.
C#
TypeScript
JavaScript
We finally need to declare the mesh associated with our Cube properly with its 12 faces to make this new code working as expected.
Here is the new declaration:
C#
TypeScript
JavaScript
You should now have this beautiful rotating cube:
Congrats! :)
Enhancing the line drawing algorithm with Bresenham
There is an optimized way to draw our lines using the Bresenham’s line algorithm. It’s faster & sharper than our current simple recursive version. The story of this algorithm is fascinating. Please read the Wikipedia definition of this algorithm to discover how Bresenham build it and for which reasons.
Here are the versions of this algorithm in C#, TypeScript and JavaScript:
C#
TypeScript
JavaScript
In the render function, replace the call do DrawLine by DrawBline and you should notice that this is a bit more fluid & a bit more sharp:
If you’re observing it with attention, you should see that this version using Bresenham is less choppy than our first algorithm.
Again, you can download the solutions containing the source code:
– C# : SoftEngineCSharpPart2.zip
- TypeScript : SoftEngineTSPart2.zip
- JavaScript : SoftEngineJSPart2.zip or simply right-click –> view source on the embedded iframe
In next tutorial, you will learn how to export some Meshes from Blender, a free 3D modeler tool, into a JSON format. We will then load this JSON file to display it with our wireframe engine. Indeed, we already have everything setup to display much more complex meshes like these one:
See you in the third part: learning how to write a 3D soft engine in C#, TS or JS – loading meshes exported from Blender
Sponsors
Professional Web Icons for Your Websites and Applications