Roobiks - A 3d software rasterizer

I finally added the last bit of optimization with some binary color storing and magic tricking, i think this is the end of the line for my project as i see no further addition than some ui/ux which i dont wanna do for a project thats already this complex. i spent a LOT of time documenting everything, so that anyone reading the source code gets an idea of whats going on. Also added comic sans for a jolly effect with a HUD.

The first (incomplete) demo is now up and ready! headover to https://arkaive19.is-a.dev/roobiks to see the magic for yourself!

I finally implemented a better UX system, with customizable keybinds, actually usable buttons! (yay), a fps bar and also HUGE optimization change. (i just found out the bayecentric coordinates could be incremented instead of manual addition), the renderer is now comfortably rendering a complex penguin at ~60fps which has 323 vertices and 625 faces.

external assets can be loaded! (ive only tested it for this penguin asset for now, but i will test more in the near future)

I implemented a wireframe drawing method to my software rasterizer and also implemented front face culling (front face culling too a LOOONG time to implement due to the tedious maths) ive also documented how everything works so anyone can understand whats going on. With the drawWireframe theres this weird ghostly effect going on and thats what im hoping on solving next

I added some buttons for a better user experience, with keybinds and such. also i implemented a scrambling technique which generates a 20 move based random assortment. The ive also optimized frame waiting, with delay based Promises which wait check every frame before inputting the move to be displayed with solve or scramble. (i tested if user interruption changes anything and gladly it did not for scramble, but i have to fix the unsolvable problem if user interrupts when solving the cube)

Ive finally added some rubiks cube qol features like resetting the cube and solving it! (for now im just reversing the users steps as using an actual alogrithm would be out of scope of this project.), and im planning on documenting the remaining parts

Hello everyone, Ive upgraded my code to work with canvas to use the canvas method .putImageData, as ive now implemented triangle rasterization, and something very interesting called as z-indexing. Basically, every frame all pixels of the canvas are being controlled by the renderer to draw stuff instead of relying on the canvas methods like fillRect, etc! Ive also optimized the entire renderer to work well and fix any buggy areas too, but some more optimization is possible, and im thinking of continuing from there. I think im gonna add some UI/UX components later on but for right now im gonna optimize the renderer more! also, the live demo is up and running! check the current progress out at: ++++++++++++++++++++++++++++++++ https://arkaive19.is-a.dev/roobiks/ ++++++++++++++++++++++++++++++++ have a nice day and stay tuned for the next update!

I finally finished the rotation cycle and documented the entire process inside my scripts. The rubiks cube works and also animates now! also i fixed the backface culling issue, and the animations are fixed and crisp! I think im gonna add some qol features like enhance my current camera reframe to also reset the cube and make it a general reset, and also add some physical buttons or sum like that. With the current state of things i might wrap it as a electron app as its not designed to be mobile friendly.

I finally implemented PROPER mesh rendering. before i had to flatmap and insert each model vertices, edges and faces in 1 giant pile for computation but not anymore. it does that internally so all i need to do is

renderer.startFrame();
renderer.drawMesh(cat);
renderer.drawMesh(dog);
renderer.drawMesh(bug);
renderer.endFrame();

Bug fixing was really tough because of optimization errors and whatnot, but changing basically all my arrays to Float32Arrays gave me an extra 100 frames 💔🥀🥀

Ive made some changes to the 3d graphics changer where the painters alogorithm stopped working with multiple meshes. For now, ive flatmapped all points edges and faces of the multi meshes so its just 1 giant mesh that has to be rendered! (I think my system will break if i use another instance of drawMesh() somewhere else as theyre not flatmapped. I think thats the problem ill try to solve next)

I recently learnt and implemented about Depth Based Rendering. Basically, make faces closer to u render last so they can appear more lifelike than a static order or rendering which often breaks with freecam

Ive been wanting to learn how 3d renderers have worked for the longest time, and recently i thought of making an app for it. Roobiks is an freecam 3d space rubix cube sandbox like software, that is built ENTIRELY on a 2d canvas using nothing but pure mathematics, and HTML5 canvas properties.