Rey Web Engine
Introduction
I'm always excited about making things for the web owing to the ease of sharing these and letting anyone try out cool applications directly in their browser, so I recreated my game engine in JavaScript. The engine uses a WebGL rendering pipeline and supports VR using WebXR. This is architected almost identical to my C++ game engine with differences to account for language differences between C++ and JavaScript.
Duration: Nov 2024 - Present
Technologies: JavaScript | WebGL2 | WebXR
Role: Sole Developer
Check it out open_in_new
Key Features
- Architecture almost identical to my C++ game engine with reusable engine systems for rendering, model loading, debug rendering, event system and dev console.
- WebGL rendering pipeline with support for custom shaders in GLSL.
- Support for 2D and 3D rendering and virtual reality integration using WebXR.
- Accounts for language differences between C++ and JavaScript including function and operator overloading, asynchronous disk interactions.
- Support for OBJ model loading with a parser written from scratch.
Handling Differences between JavaScript and C++
- JavaScript inherently does some operations asynchronously, the most important one being file loading. To load textures, shaders and data files, my web engine uses Promises and the absence of textures and shaders must be handled during rendering.
- While my C++ engine uses XML as the primary format for data-driven code, my web engine replaces this with JSON since the notation and parsing of JSON files is simpler in JavaScript.
- Since JavaScript passes all objects by reference and primitive data types by value, any objects being passed had to be handled carefully.
- JavaScript does not offer method or operator overloading, so operations like arithmetic on vectors is handled using methods with special names such as Add, Scale, GetSum, GetScaled, etc.
SpectorJS: Debugging WebGL
- Developing graphics features in my C++ engine involved extensive use of RenderDoc to help debug issues with DirectX.
- SpectorJS is a JavaScript framework for troubleshooting WebGL issues and I use this for my web engine.
