Introduction

There is a very nice introduction to OpenGL on the web, written by Joey de Vries. It has a number of tutorials, an offline course book (containing the online tutorials) and a site where the used code can be found. You find the course at LearnOpenGL.com.

It starts with the basics of OpenGL (Part 1 of the book) and ends with more advanced topics. Some of the final chapters are on PBR (Physics Based Rendering, Part 6 of the book). The code is written in C++. The main purpose of this project is to rewrite the code in javascript. This site is the documentation of the project.

The javascript interface of WebGL2 will be used for the OpenGL calls. WebGL2 is supported by the Chrome browser and all tests are done with Chrome only. On the mozilla site the availability of the WebGL2 interface on other browsers is documented. In many cases Internet Explorer and Safari browsers will have limited support. Also in many cases this problem can be circumvented by using WebGl1 and using extensions. An option is to use WebGL1.1, see https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js, one of the included extensions is OES_vertex_array_object and with that extension the programs of Part1 can stay the same (not sure).

Not all code will be translated, only the C++ code of Part 1 and Part 6 will be completely rewritten in javascript and only a selection of the other Parts After Part 1 the way to transform the code will be clear. The translation of Part 6 proves that also more complicated subjects can be treated in javascript and the version of GLSL we use.

  1. The tools
  2. The project structure
  3. The translation of code
  4. Part 1 programs (Ends with class Camera)
  5. Part 2 programs
  6. Part 3 programs (Assimp library is replaced with Gltf)
  7. Part 5 programs
  8. Part 6 programs (Physics Based Rendering and IBL)
  9. Part 7 programs (Treatment of Text)

After we have done all this a following project might be on subjects found in project Filament with anisotropy, cloth, transparency, camera model and post processing.


There is a checklist for good webgl programs, see best practices. And another book on OpenGL programming is found in these tutorials