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. The emphasis will be on programs in Part6. This and the following pages form together 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. The latest version of the Microsoft Edge also supports WebGl2. 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, ( WebGl with extensions, 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 tested)).

Not all code will be translated, only the C++ code of most of Part 1 and Part 6 will be completely rewritten in javascript, but 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.

There are two extras: one, a loader of gltf meshes and materials is given (in Part 3 and Part 6) and second, a program for the creation of 3D text is presented in Part 7.

  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 4 programs
  8. Part 5 programs
  9. Part 6 programs (Physics Based Rendering and IBL)
  10. Part 7 programs (Treatment of Text)

Notes:

A next project might be on subjects found in project Filament with anisotropy, cloth, transparency, camera model and post processing.

And another book on OpenGL programming is found in these tutorials

There is a checklist for good webgl programs, see best practices.


date: 24 juli 2020. version: 0.95.
code found at: github.com/d3q3/LearnOpenGl
©Drikus Kleefsman