Weekly 2 : More Progress on Voxels, Projection and Other Stuff

For this week’s progress I had done the following:

• Finished the early prototype for 3D cubes in the HTML Canvas for wireframes
• I have been continuing to work on the 3D voxel rendering thing and made some optimizations
• I started a Sprint for new game project in Godot inspired by my freshman project.
• I also created a simple Snake clone in a few hours in Pygame on National Day.

Beyond that, one of the major biggest updates is that I have finally enabled comments on every single post, including this one.

I disabled them initially because I wasn’t sure if I wanted to moderate them to be professional, since my target demographic are employers and recruiters, while still keeping valuable and constructive feedback visible. I was afraid that if commentors presented themselves in an unprofessional way, it might be taken as a reflection of my own views.

After reading the post Blogging about Blogging by Jeff Atwood I decided to just try it out first now, though. I don’t really expect to get any comments for the first few months or even year of this post, but I still think having the option to comment would help me work in a vacuum less, especially since I reduced distractions such as social media from my life.

Wireframe Cubes using HTML Canvas. No hardware acceleration

As I had written last week. I was working on seeing how far I can render 3D projections using just HTML Canvas’s lineTo function. I experimented with this project with the following goals in mind and learned a few things.

• Revision on the mathematics and implementation of perspective projection from first principles. I felt I always relied on glm::perspective when working with OpenGL and so software rendering is a good step into it. Not only that but it also gave a revision on certain concepts such why we have winding orders for triangles in graphics rendering (as I had to solve that issue with just wires)

• The project made me more comfortable with both JavaScript and HTML. When I realized that the Canvas had line drawing functions I definitely wanted to see if I could render simple cubes with them. I am new to the web at this point of writing the post and what better way to learn than to have projects

• It gave me an incentive to explore further ways to profile and benchmark code in JavaScript and the web environment. It also got me to ask questions to myself over how JavaScript memory is allocated, which I need to further learn

I think this is a decent limit of what can be accomplished before we step into doing software rasterization using ImageData to place pixels as I’d need control of individual pixels in order to do backface culling and texture interpolation.

In order to develop my understanding, I didn’t follow any tutorials with code explanations. Instead I cross-referenced the following textbooks to derive the mathematics. One thing I noticed is that there is an assumption that you’d need to project to an NDC cube and have clipping in the same matrix for projection in these references.

• Mathematics for 3D Game Programming and Interactive Applications (Eric Lengyel)
• Mathematics for Game Developers (Christopher Tremblay)

After I had finished the first prototype, I also used Gabriel Gambetta’s Computer Graphics from Scratch to cross reference my implementation and compare the code, especially in order to investigate if I had distortions.

I also taught myself how to deploy the project as a standalone executable using Electron.

Some More Voxel Stuff

Performance with Instancing

I worked a bit more rendering voxels in the 3D Albuquerque renderer. I improved performance significantly by using instancing rather than having a drawcall per voxel.

Instancing was an obvious next step and it was nice seeing the increase in load times and runtime be so visible that I didn’t have to profile to see the difference.

In addition to the improvement, I also kept the old branch with one drawcall per voxel ready too so I can eventually use that data for a case study to compare the merits in improvement.

Working on mousepicking, raycasting and line rendering

The next step for this project is to implement mousepicking and collision with rays/points with voxels. I have been putting the priority of this project a bit lower in favor of the next one I am about to share though. I worked on batch rendering lines to prepare for it. I have some ideas on how that can be decoupled to support different renderers but for now I keep the specifications towards Fwog.

One interesting thing about implementing mousepicking and ray collisions is that I already had them coded in Plane Game in the same engine, so porting them over to a more generalized form to a different part of the codebase is like a mixture of refactoring and rewriting it. I initially coded them in a ‘dirty’ way, just using lambdas and some hardcoding. Still it was valuable to prototype them that way for fast iteration, and now I get to practice and improve through a refactor. Much better than abstracting them out too much too early though as it lets you see your actual specifications

Rocket Game

I have been spending my time on Rocket Game, which has a lot of roots from my previous project Pixel Perfect. I chose to focus on this project as a priority for August as my partner said that they’d love to play a multiplayer take on the concept. Since there is a ‘demand’ and a ‘target demographic’ for this project, it made sense to focus on it more than other stuff.

This is a project where I have been following this idea of applying a Daily Scrum for a solo driven project. I have been exposed a bit to project management concepts such as Waterfall and Agile (with Scrum through Kanban or Sprint boards) from my time at university, but applying it for own projects have been helpful.

I am using Godot to prototype it in the meantime as I enjoy the fast iteration of that engine. I like that it uses an imperative scripting language with GDScript, which meant I could prototype and type a ton of scripts fast without having to wait for compilation. This is different from Unity’s C# scripting that has to compile to a .dll file on Windows. I originally did the first hour or two of prototyping for this project on Unity before switching to Godot as a result of not wanting to wait ten seconds everytime I changed my scripting code.

I will comment more on this game’s premise, game feel and design in a future update once the prototype and playtesting is done at the end of this month of August.

Snake Pygame

I made Snake in Pygame on National Day in about three or four hours. I wanted to get it out of the way as I was going on a walk and realize I have not done a snake clone before. I was bothered trying to figure out how to do the ‘tail following the head’ thing and while I had an idea of how to code it, I wanted to try it for myself. The approach I took was a weird ‘linked list swapping’ scripting and I was happy about being able to prototype it on paper. This is a screenshot for the code from Visual Code rather than a snippet, as well as my own comments. I still have to get more milage in order to get proper Pythonic coding habits as I currently write a bit too ‘C-style’.

So that was fun to get out of the way. I used the same grid class I made for my Conway project too. I also experimented with a Snake having a ‘has a’ relationship with a grid reference. This means if I wanted, I could have both Conway and Snake on the same grid and have cross interaction. That’d be pretty fun and original.

After I had completed this script I took a look at Coding Train’s version of Snake to compare my approach. I don’t really know why his version of simply iterating through the head to the tail and setting the values in-place works (when I tried it everything broke for me) but since I had met my specifications I moved on for now. I don’t want to spend too much time working on a beginner’s project.

Plans for August

My partner is coming over and I have to show them around Singapore. Quite excited about that. As such I will just be continuing to focus on Rocket Game first and foremost. I usually prefer to write about what I have done rather than what I plan to do.

Still, while I am drafting and doing research for some new full articles on the blog, I also am porting over new pages for my past projects. I specifically have to write about the project I worked on during my polytechnic Internship and my other two undergraduate semester projects.

I do enjoy writing these weekly updates, and keeping that up as a commitment.