/opengl-playground

Small opengl renderer with an ECS architecture and WASM build support 🌎

Primary LanguageJavaScriptMIT LicenseMIT

Build Status License: MIT

OpenGL Playground

Small opengl renderer with an Entity Component System (ECS) architecture.

Supports WASM build so it can be played on any web-browser like Chrome, Firefox or Safari. Just run the content of the www folder on a web server.

Table of Contents

Getting Started

Prerequisites

You need to install Cmake to build the project, and Conan to download dependencies.

Then you can add the server which contains the dependencies of the project :

conan remote add bincrafters https://api.bintray.com/conan/bincrafters/public-conan

Build on desktop

You can handle the CMakeLists.txt in any way you like, it will download the dependecies by itself.

Here's some way to use it :

Option 1: CLI

cmake . -DCMAKE_BUILD_TYPE=Release
make

Option 2: Visual Studio (Windows only)

Open this folder with the CMake... option in file->open on Visual Studio, and run the project.

Option 3: VSCode

Use the CMakeTools plugin, build with f7 then run with f5 (But be carefull to be on the right platform, there is a launch file for windows and for linux).

Build for the Web as WASM (linux only)

This project support Web Assembly, so it can run in a browser like Google Chrome or Firefox !

The build steps are the same for any platform (however it seems broken for now on Windows). Do not forget to delete CMakeCache.txt if there is one on the folder.

conan install ./wasm.recipe.py --build missing --install-folder wasm -pr ./wasm.profile
conan build ./wasm.recipe.py --build-folder wasm

You can then copy the files inside wasm/bin into www and run this folder with a simple web-server. On this exemple, we are creating a simple one with python :

cp -a wasm/bin/. www
cd www
python3 -m http.server -b 127.0.0.1

Then open your local server to see the project.

Examples

Basics

Triangle exemple

A simple triangle.

Rotating cube exemple

A rotating colored cube. Each face is independant so that the colors can be applied without smearing.

Textured primitive exemple

Show some procedurally-generated primitives with their UV maps.

Model loading exemple

Loads a GLTF model with its texture.

[WIC] Skybox

Show an environment in the background using a cubemap.

Display a grid, some icons for the lights and a dynamic gizmo to always know the orientation of the camera.

Blinn-Phong shading

Setup a simple scene with a directional light and no material. A menu is available to edit ambient, diffuse and specular properties.

Uses multiple point, directional and spotlights.

[WIC] Materials

Uses different objects with different materials applied to them to compare how they react to lighting.

Non-Photorealistic Rendering (NPR)

Change pixel color value from "cool to warm" based on normal direction angle from the camera.

A rendering technique closer to traditional 2D animation.

Intermediate

Select objects on the scene with the mouse and raytracing.

Do not render objects outside of the camera view.

Do not render objects hidden by other ones.

Allows a rendered image to show more details when the scene contains both shadows and highlights.

Fix the gamma of the screen.

Show micro-geometry with lighting based on a texture.

Adds micro-geometry to a model based on a texture.

Physically based rendering (PBR)

Base exemple of PBR.

Test multiple light types with PBR.

[WIC] Materials

Uses PBR materials.

Local illumination technique based on the scene.

Shows hows lights can traverse some materials.

[WIC] Hair

Render hair and fur.

Shadows

Shadows created by a directional light.

Shadows created by point lights.

Adds more shadows to micro-geometry based on vertex density.

[WIC] Light map

Baked global illumination based on raytracing.

Animations

Basic translation and rotation loaded from gltf.

A basic character movement loaded from gltf.

Post-Processing

[WIC] Bloom

Show a light with bloom effect.

Blur the out of focus area of the image.

Blur based on movement of the camera.

Advanced

Shows emissive particles.

Render a forest.

Shows how an object contains more or less geometry based on camera distance.

Improve lighting performance with geometry buffer.

Improve lighting performance in a forward shading pipeline by dividing the screen on multiple areas.

Based on

Websites

Repos