programs in folder learnOpenGL2_p5B

version 'D3Q: 0.50'; author: 'Drikus Kleefsman'; date: may 2020.

This project has the translation of a number of C++ programs found in Part 5 (chapters 34 - 42) of the offline book that can be down loaded from www.learnOpenGL.com.

Chapter 34

intro.ts

We use this program to see the effect of gamma correction on a SRGB encoded picture wood.png (most pictures are SRGB encoded). We can use the keys 1-4 to see differences between the following options:

1. PNG-image in sRGB is read into a RGBA texture. In the pixel shader there is no gamma correction. The physical display converts to the intended colors (compare colors with the texture as seen in a program like PaintDotNet).
2. PNG-image in sRGB is read into a RGBA texture. In the pixel shader there is gamma correction with color = pow(abs(color), vec3(1.0/2.2));, which makes the intensities twice corrected. The physical display will cancel only one correction factor, leaving the image displayed in too bright colors.
3. Now the PNG-image in sRGB is read into a SRGBA texture. In the pixelshader we have as input the image in linear space. In the pixelshader there is no correction. The physical device converts the linear space leaving an image that is too dark.
4. Now the PNG-image in sRGB is read into a SRGBA texture. In the pixelshader we correct the color from linear to SRGB using color = pow(abs(color), vec3(1.0/2.2));. The result is now again as intended.

Not that there is harldly any difference to see between the result in option 1 and option 4.

gamma_correction.ts

The code in this program is almost the same as in the into.ts. Now with lighting. Use the spacebar to switch between two options. 1. (start-option, with gammaEnabled=false). Floor texture (wood.png) read into RGBA format and value of "gamma" in pixelshader is set false, meaning there is no correction of the intensity in the shader and the attenuation of light is taken to be \(1/distance\). 2. Floor texture read into SRGBA format and value of "gamma" in pixelshader is set to true, meaning there is gamma-correction in the shader and the attenuation of light is the physically correct \(1/distance^2\).

limitations texture formats

There exists limitations on the formats for textures that can be used in WebGL.

We use the table of the khronos webgl specs 2.0 to find good combinations of the DOM Image and the values for internal format, format and type (format and internal format do not need to be the same in webGL 2.0). There are four source Image Formats: Grayscale (1 channel), Grayscale+Alpha (2 channels), Color (3 channels) and Color+Alpha (4 channels). In the Image interface there is no field that tells us how many channels there are in the image.

There seems to exist only two internal formats for gamma corrected textures, SRGB8 and SRGB8-ALPHA8, there exists no SR8 or SRG8 format.

For mipmapping and for renderbuffers the formats are restricted, they must be both "color-renderable" and "texture-filtarable", see table 3.13 of the khronos OpenGL ES3.0.6 spec.

Chapter 37

normalMapping.ts

another technique

In the fragment shader program of chapter 44 a technique using Fxdx and Fxdy is used to create a matrix for texture space.

Chapter 39

hdr.ts

There is no support for rendering to RGB16F textures in WebGL. We make use of the extension EXT_color_buffer_float. The EXT_color_buffer_float extension is part of WebGL and adds the ability to render a variety of floating point formats.

Chapter 40

bloom.ts

To implement Bloom we render a lighted scene as usual and extract both the scene's HDR colorbuffer and an image of the scene with only its bright regions visible. The extracted brightness image is then blurred and the result added on top of the original HDR scene image.

An example for post-processing. We use also a technique MRT (Multiple render targets that is part of WebGL2 (in webGL1 use extension WEBGL_draw_buffers). To create a Gaussian blur the "pingpong" technique (using two passes) is used.