https://github.com/michalzalobny/webgl-3d-engine
WebGL2 3D Engine built from scratch.
https://github.com/michalzalobny/webgl-3d-engine
webgl-programming webgl2
Last synced: about 1 year ago
JSON representation
WebGL2 3D Engine built from scratch.
- Host: GitHub
- URL: https://github.com/michalzalobny/webgl-3d-engine
- Owner: michalzalobny
- Created: 2024-01-21T21:22:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T11:55:27.000Z (over 2 years ago)
- Last Synced: 2025-03-03T23:49:40.796Z (about 1 year ago)
- Topics: webgl-programming, webgl2
- Language: TypeScript
- Homepage: https://tranquil-pixie-7ecd9c.netlify.app/
- Size: 1.01 MB
- Stars: 216
- Watchers: 5
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WebGL2 3D Engine built from scratch
The goal is to build a custom 3D engine without any libraries - just using WebGL2 API and what I have learnt while creating a [3D renderer in C](https://github.com/michalzalobny/3d-renderer-in-c). Guided by [WebGL2 Fundamentals](https://webgl2fundamentals.org/).
I'm using here Right-Handed Coordinate System (positive Z axis points out of the screen). I'm also using column-major matrices layout - so I will be using post-multiplication -> `M * v` to transform a vector `v` by a matrix `M`.
## Lighthouse Performance
- Application without any WebGL2 context scores 4x 100% on lighthouse, with 0ms of Total Blocking Time, 0.8s First and Largest Contentful Paint. Speed index is 0.8s.
- After adding the WebGL2 context, the Total Blocking Time increases to 40ms.
- After adding 4 textures to load into GPU and a model to parse, the Total Blocking Time increases to 60ms. The rest of the metrics are the same.