GKREND is a static website that serves as a demo for an extremely simple WebGL 3D Engine; also, it ATTEMPTS to look like a Game Boy Advance.
Try it out! , the site is responsive so you can use it in your phone as well.
While very basic, the site allows the user to tinker with the rendered geometry in a variety of ways:
- Select between 4 types of geometries to render.
- Apply textures to the geometry.
- Change the rendering style of the engine:
- Flat Coloring
- Normal Coloring
- Wireframe Mode
- Use a simple GUI (powered by dat.gui bless up to the homies over there) to mess around with:
- Geometry Color.
- Geometry Size.
- Apply Animations (Only 2 available because I'm Lazy)
- Orbital Camera that allows the user to "move" the object around. (Touch Screens Supported as well!)
- Scrollwheel used to zoom in/out.
All of those in real-time! (craaazy right?)
- There is a sound toggle if the button presses annoy you (it might get old really quick, my bad y'all)
- psst, yes you!, there's a surprise (a nostalgic one at that too) if you click the logo :D
DISCLAIMER: apologies in advance for the (most likely) poorly/incorrectly implemented graphics code, there might be some slight jankyness but hey the important thing is I had fun right.....?!?!?!
In early 2023, I entered a Computer Graphics course at my college. It was a subject that really intrigued me given my interest in gaming, and the prospect of getting to know how it all kinda worked beneath the surface was really exciting. I have now come to learn that Graphics Programming is REALLY hard, but still, the assignments I completed and material that I learned were fun and interesting, but sadly I wasn't able to finish the course due to poor time management on my part (skill issue).
Fast-forward to 2024, armed with plenty of free time and a desire to start building cool stuff and take up coding as a hobby instead of only doing it at work/college, I wanted to start with a simple yet cool (imo) project. So, I grabbed the messy spaghetti code of an engine I had to build for said college course and decided to make a static website that displayed some demos of what it could do.
HTML, CSS, and Responsive Website Design (Again...)
As a back-end developer, the thought of touching anything that had to do with the front-end made me shiver. What little experience I had with it came from those "Become a Full-Stack Developer in 2 WEEKS!!!11! " boot camps that I did when I started coding, and frankly, I hardly remembered anything.
So I decided to use this as an excuse to properly make something I'm happy with and that looks decent. After struggling with CSS for a bit, I quickly hit the ball running and realized I kinda enjoyed seeing my vision for the website come to life. I added the bonus challenge on myself to make it responsive and it surprisingly worked.
Also, as I move forward into other projects, relearning the fundamentals of HTML and CSS allows me to use frameworks for both of them more effectively.
Typescript (Refresher)
Not my first rodeo with the language, but certainly not one I use often; I write mostly enterprise code (Java), so it was a nice change of pace, and the opportunity to practice another tool in my repertoire is always welcome. (I'm still kinda scared of the stuff this language and even more so Javascript lets you do)
REALLY basic WebGL
Learning the fundamentals of graphics programming was challenging but fulfilling. I'm not sure if I'll ever do something with it again, but now that I know the basics, I'm looking forward to using more streamlined tools such as ThreeJS if I ever want to render 3D objects into a website.
Pixel Art?!
Making the buttons match the aesthetic kinda forced me to dabble into some pixelart, so using Aseprite I tried to make some decent buttons!