OpenGL Web Guide banner

OpenGL Web Guide

5 devlogs
27h 16m 9s

An OpenGL guide website that helps you set up your project and then teaches you the basics of OpenGL. Build using Svelte/SvelteKit with tailwind CSS. kinda sad I have to explicitly state this but NO PART OF THE GUIDE WAS WRITTEN BY AI.

Part of …

An OpenGL guide website that helps you set up your project and then teaches you the basics of OpenGL. Build using Svelte/SvelteKit with tailwind CSS. kinda sad I have to explicitly state this but NO PART OF THE GUIDE WAS WRITTEN BY AI.

Part of this was done for the HackClub gap year program internship

This project uses AI

to debug issues with tailwind CSS and such

Demo Repository

Loading README...

Hat Dealer

Shipped this project!

Hours: 27.27
Cookies: 🍪 579
Multiplier: 21.24 cookies/hr

I build the entire website and wrote the text for the guides from scratch. It was my first time using SvelteKit and tailwind CSS but it was a fun journey. I think the guide is really informational for getting started with OpenGL for the first time and it should be easy to learn from it

Hat Dealer

Finishing up

This update I just mainly polished the guides and code that was already there and finished up the camera guide by adding a guide for combining camera matrices

Added

  • Images
  • A guide for combinig camera matricies

Reworked

  • Styling like border around notes etc
  • Updated some text in other parts of the guide
Attachment
0
Hat Dealer

Even more guides

Added

  • Guides:
    • Matrix transforms in practice
    • Delta time
    • Dear ImGui

Reworked

  • fixed some grammar
  • styling of buttons etc
Attachment
0
Hat Dealer

Expanding the guide

Added

  • guide for vectors and matrices
  • guide for input processing
  • guide on how to make an object rotate
  • parts on how to make a working camera

Making these guides takes a lot of time since I dont want to give out incorrect information and usually look at several sources as well as my own projects

Attachment
0
Hat Dealer

Mobile support, styling and a new page

Added

  • New guide page for rendering a first triangle
  • Phone support with a different UI

Reworked

  • Polished up styling like better text breaks with and much more
Attachment
0
Hat Dealer

First prototype

I made the first prototype using Svelte and SvelteKit to parse .md files with a basic UI. I also made WebGL rendering components that can dynamically render OpenGL code on a canvas to showcase how OpenGL works. I also made components for notes, warnings etc. There is also a dynamic sidebar that shows you where are you currently reading

3 of these hours were done for the gap year interview processes

Attachment
0