• Stars
    star
    208
  • Rank 189,015 (Top 4 %)
  • Language
    TypeScript
  • Created 10 months ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

WebGL2 3D Engine built from scratch.

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. Guided by WebGL2 Fundamentals.

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.

More Repositories

1

react-just-parallax

React library for scroll and mousemove parallax effect ✨ Open source, production-ready
TypeScript
449
star
2

creativeprojects

Personal website that features a range of interactive projects , that I've been working on 🌌 . Main technologies used are THREE.JS and 2D Context API.
TypeScript
299
star
3

creative-bay

WebGL and GLSL projects 2022 🌬
TypeScript
256
star
4

threejs-page-transition

Web application, that uses THREE.JS and NextJS for the transitions between pages 👾. I've created this project to test the possibility of merging SPA'a and awwwards-like page transitions.
TypeScript
184
star
5

3d-renderer-in-c

3D graphics renderer made from scratch using the C programming language.
C
81
star
6

book-of-shaders-playground

Web application that I've built while learning from "The Book Of Shaders" 🔮. It features most of the fragment shader concepts covered in the book and more.
GLSL
56
star
7

plain-page-transition

Transition between pages made from scratch with plain JavaScript and no external libraries
TypeScript
49
star
8

raymarching-engine-visualiser

Interactive visualiser 🌠 for a 3D raymarching engine written in GLSL and computed in a fragment shader on the 2D Plane.
TypeScript
29
star
9

next-sandbox

All custom components I have made and constantly trying to improve 🚀. I use them mostly in my React applications, but all of them might be easily transfered and used with pure css and js.
TypeScript
11
star
10

team-29

Interactive game and web application with custom Backend and Frontend setup. It was a team project from Newcastle University 🎓, aiming to combat United Nations sustainable development goal 15.
TypeScript
8
star
11

awwwards-3d-course

JavaScript
6
star
12

fastify-prisma-postgresql

REST app built with Fastify, Prisma & TypeScript
TypeScript
3
star
13

learning-c

C
2
star
14

opengl-learning

Repo used to learn from learnopengl.com
C
2
star
15

2d-physics-engine

2D Physics engine built from scratch in C++.
C++
2
star
16

expo-base

TypeScript
1
star
17

next-typescript-frontend

TypeScript
1
star
18

subdir-heroku-buildpack

Shell
1
star
19

express-typescript-backend

Express backend application with OAuth2 ✨ stategies provided with PassportJS and secure design patterns.
TypeScript
1
star
20

eleventy-esbuild-test

SCSS
1
star