Merge pull request #230 from p-otto/env-mapping-pass

Environment rendering pass

Author: cgcostume

examples/data/cube-map-nx.jpg

@@ -71,10 +71,7 @@ void main(void)
     normal = normalize(TBN * normal);
 
     float roughness = texture(u_roughnessTexture, v_uv).r;
-    roughness = pow(roughness, GAMMA);
-
     float metallic = texture(u_metallicTexture, v_uv).r;
-    metallic = pow(metallic, GAMMA);
 
     const vec3 f0 = vec3(0.04);
     vec3 diffuseColor = albedoColor * (vec3(1.0) - f0) * (1.0 - metallic);

examples/data/cube-map-ny.jpg

@@ -8,14 +8,13 @@ import {
     Canvas,
     Context,
     DefaultFramebuffer,
+    EnvironmentRenderingPass,
+    EnvironmentTextureType,
     EventProvider,
     Framebuffer,
     Invalidate,
     Navigation,
-    NdcFillingTriangle,
-    Program,
     Renderer,
-    Shader,
     Texture2D,
     TextureCube,
     Wizard,
@@ -29,8 +28,7 @@ class EnvironmentProjectionRenderer extends Renderer {
 
     protected _defaultFBO: Framebuffer;
 
-    protected _ndcTriangle: NdcFillingTriangle;
-    protected _program: Program;
+    protected _environmentRenderingPass: EnvironmentRenderingPass;
 
     protected _cubeMap: TextureCube;
     protected _equiRectangularMap: Texture2D;
@@ -40,12 +38,6 @@ class EnvironmentProjectionRenderer extends Renderer {
     protected _camera: Camera;
     protected _navigation: Navigation;
 
-    protected _uViewProjection: WebGLUniformLocation;
-    protected _uViewProjectionInverse: WebGLUniformLocation;
-
-    protected _uViewport: WebGLUniformLocation;
-    protected _uTime: WebGLUniformLocation;
-    protected _uMode: WebGLUniformLocation;
 
     protected onInitialize(context: Context,
         callback: Invalidate,
@@ -60,38 +52,8 @@ class EnvironmentProjectionRenderer extends Renderer {
         this._defaultFBO.initialize();
         this._defaultFBO.bind();
 
-        const gl = this._context.gl;
-
-        this._ndcTriangle = new NdcFillingTriangle(this._context, 'NdcFillingTriangle');
-        this._ndcTriangle.initialize();
-
         this.fetchTextures();
 
-        // Initialize program and uniforms
-        const vert = new Shader(this._context, gl.VERTEX_SHADER, 'ndcvertices');
-        vert.initialize(require('./data/env-projections.vert'));
-
-        const frag = new Shader(this._context, gl.FRAGMENT_SHADER, 'env-projections');
-        frag.initialize(require('./data/env-projections.frag'));
-
-        this._program = new Program(this._context, 'EnvProjectionsProgram');
-        this._program.initialize([vert, frag], false);
-
-        this._program.attribute('a_vertex', this._ndcTriangle.vertexLocation);
-        this._program.link();
-
-        this._program.bind();
-        gl.uniform1i(this._program.uniform('u_cubemap'), 0);
-        gl.uniform1i(this._program.uniform('u_equirectmap'), 1);
-        gl.uniform1i(this._program.uniform('u_spheremap'), 2);
-        gl.uniform1iv(this._program.uniform('u_polarmap'), [3, 4]);
-
-        this._uViewProjection = this._program.uniform('u_viewProjection');
-        this._uViewProjectionInverse = this._program.uniform('u_viewProjectionInverse');
-        this._uViewport = this._program.uniform('u_viewport');
-        this._uTime = this._program.uniform('u_time');
-        this._uMode = this._program.uniform('u_mode');
-
         // Initialize camera
         this._camera = new Camera();
         this._camera.eye = vec3.fromValues(0.0, 0.5, -1.0);
@@ -103,7 +65,9 @@ class EnvironmentProjectionRenderer extends Renderer {
         this._navigation = new Navigation(callback, eventProvider.mouseEventProvider!);
         this._navigation.camera = this._camera;
 
-        gl.uniform2iv(this._uViewport, this._canvasSize);
+        this._environmentRenderingPass = new EnvironmentRenderingPass(this._context);
+        this._environmentRenderingPass.initialize();
+        this._environmentRenderingPass.camera = this._camera;
 
         return true;
     }
@@ -142,63 +106,48 @@ class EnvironmentProjectionRenderer extends Renderer {
 
         this._defaultFBO.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT, false, false);
 
-        this._cubeMap.bind(gl.TEXTURE0);
-        this._equiRectangularMap.bind(gl.TEXTURE1);
-        this._sphereMap.bind(gl.TEXTURE2);
-        this._polarMaps[0].bind(gl.TEXTURE3);
-        this._polarMaps[1].bind(gl.TEXTURE4);
-        this._program.bind();
-
-        gl.uniform2iv(this._uViewport, this._canvasSize);
-        gl.uniformMatrix4fv(this._uViewProjection, false, this._camera.viewProjection);
-        gl.uniformMatrix4fv(this._uViewProjectionInverse, false, this._camera.viewProjectionInverse);
-
-        const t = ((new Date()).getTime() % 10000000) * 0.001;
-        gl.uniform1f(this._uTime, t);
-
-        this._ndcTriangle.bind();
-
         const b = 1.0;
         const w = (this._frameSize[0] - (4.0 - 1.0) * b) / 4.0;
         const h = this._frameSize[1];
 
         gl.enable(gl.SCISSOR_TEST);
 
+        // Sphere Map
         gl.scissor((w + b) * 0.0, 0, w, h);
-        gl.uniform1i(this._uMode, 2); // sphere map
-        this._ndcTriangle.draw();
+        this._environmentRenderingPass.environmentTexture = this._sphereMap;
+        this._environmentRenderingPass.environmentTextureType = EnvironmentTextureType.SphereMap;
+        this._environmentRenderingPass.frame();
 
+        // Equirectangular Map
         gl.scissor((w + b) * 1.0, 0, w, h);
-        gl.uniform1i(this._uMode, 1); // equirectangular map
-        this._ndcTriangle.draw();
+        this._environmentRenderingPass.environmentTexture = this._equiRectangularMap;
+        this._environmentRenderingPass.environmentTextureType = EnvironmentTextureType.EquirectangularMap;
+        this._environmentRenderingPass.frame();
 
+        // Cube map
         gl.scissor((w + b) * 2.0, 0, w, h);
-        gl.uniform1i(this._uMode, 0); // cube map
-        this._ndcTriangle.draw();
+        this._environmentRenderingPass.environmentTexture = this._cubeMap;
+        this._environmentRenderingPass.environmentTextureType = EnvironmentTextureType.CubeMap;
+        this._environmentRenderingPass.frame();
 
         gl.scissor((w + b) * 3.0, 0, w, h);
-        gl.uniform1i(this._uMode, 3); // dual paraboloid map
-        this._ndcTriangle.draw();
+        this._environmentRenderingPass.environmentTexture = this._polarMaps[0];
+        this._environmentRenderingPass.environmentTexture2 = this._polarMaps[1];
+        this._environmentRenderingPass.environmentTextureType = EnvironmentTextureType.PolarMap;
+        this._environmentRenderingPass.frame();
 
         gl.disable(gl.SCISSOR_TEST);
-
-        this._ndcTriangle.unbind();
-
-        this._program.unbind();
     }
 
     protected onSwap(): void {
         this.invalidate();
     }
 
-    protected setupTexture2D(texture: Texture2D, unit: number): void {
+    protected setupTexture2D(texture: Texture2D): void {
         const gl = this._context.gl;
 
-        texture.bind(unit);
-        // gl.generateMipmap(gl.TEXTURE_2D);
-
-        texture.wrap(gl.REPEAT, gl.REPEAT, false, false);
-        texture.filter(gl.NEAREST, gl.NEAREST, false, false);
+        texture.wrap(gl.REPEAT, gl.REPEAT, true, false);
+        texture.filter(gl.NEAREST, gl.NEAREST, false, true);
 
         this.invalidate(true);
     }
@@ -231,7 +180,7 @@ class EnvironmentProjectionRenderer extends Renderer {
 
         promises.push(
             this._equiRectangularMap.fetch('data/equirectangular-map.jpg').then(() => {
-                this.setupTexture2D(this._equiRectangularMap, gl.TEXTURE1);
+                this.setupTexture2D(this._equiRectangularMap);
             }));
 
 
@@ -240,7 +189,7 @@ class EnvironmentProjectionRenderer extends Renderer {
 
         promises.push(
             this._sphereMap.fetch('data/sphere-map-ny.jpg').then(() => {
-                this.setupTexture2D(this._sphereMap, gl.TEXTURE2);
+                this.setupTexture2D(this._sphereMap);
             }));
 
 
@@ -250,7 +199,7 @@ class EnvironmentProjectionRenderer extends Renderer {
 
         promises.push(
             this._polarMaps[0].fetch('data/paraboloid-map-py.jpg').then(() => {
-                this.setupTexture2D(this._polarMaps[0], gl.TEXTURE3);
+                this.setupTexture2D(this._polarMaps[0]);
             }));
 
 
@@ -259,7 +208,7 @@ class EnvironmentProjectionRenderer extends Renderer {
 
         promises.push(
             this._polarMaps[1].fetch('data/paraboloid-map-ny.jpg').then(() => {
-                this.setupTexture2D(this._polarMaps[1], gl.TEXTURE4);
+                this.setupTexture2D(this._polarMaps[1]);
             }));
 
         Promise.all(promises).then(() => {

examples/data/cube-map-nz.jpg

@@ -8,6 +8,8 @@ import {
     Canvas,
     Context,
     DefaultFramebuffer,
+    EnvironmentRenderingPass,
+    EnvironmentTextureType,
     EventProvider,
     GeosphereGeometry,
     Invalidate,
@@ -31,6 +33,7 @@ export class ImageBasedLightingRenderer extends Renderer {
 
     protected _camera: Camera;
     protected _navigation: Navigation;
+    protected _environmentRenderingPass: EnvironmentRenderingPass;
 
     protected _sphere: GeosphereGeometry;
     protected _albedoTexture: Texture2D;
@@ -149,17 +152,7 @@ export class ImageBasedLightingRenderer extends Renderer {
         this._cubemap.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
         this._cubemap.levels(0, MIPMAP_LEVELS - 1);
 
-        for (let mipLevel = 0; mipLevel < MIPMAP_LEVELS; ++mipLevel) {
-            this._promises.push(
-                this._cubemap.fetch({
-                    positiveX: `./data/imagebasedlighting/preprocessed-map-px-${mipLevel}.png`,
-                    negativeX: `./data/imagebasedlighting/preprocessed-map-nx-${mipLevel}.png`,
-                    positiveY: `./data/imagebasedlighting/preprocessed-map-py-${mipLevel}.png`,
-                    negativeY: `./data/imagebasedlighting/preprocessed-map-ny-${mipLevel}.png`,
-                    positiveZ: `./data/imagebasedlighting/preprocessed-map-pz-${mipLevel}.png`,
-                    negativeZ: `./data/imagebasedlighting/preprocessed-map-nz-${mipLevel}.png`,
-                }, mipLevel));
-        }
+        this._promises.push(this._cubemap.fetchMipmapAtlas('./data/imagebasedlighting/ibl-map.png'))
 
         Promise.all(this._promises).then(() => {
             this.finishLoading();
@@ -177,6 +170,12 @@ export class ImageBasedLightingRenderer extends Renderer {
         this._navigation = new Navigation(callback, eventProvider.mouseEventProvider);
         this._navigation.camera = this._camera;
 
+        this._environmentRenderingPass = new EnvironmentRenderingPass(context);
+        this._environmentRenderingPass.initialize();
+        this._environmentRenderingPass.environmentTextureType = EnvironmentTextureType.CubeMap;
+        this._environmentRenderingPass.environmentTexture = this._cubemap;
+        this._environmentRenderingPass.camera = this._camera;
+
         return true;
     }
 
@@ -235,6 +234,8 @@ export class ImageBasedLightingRenderer extends Renderer {
 
         gl.viewport(0, 0, this._frameSize[0], this._frameSize[1]);
 
+        this._environmentRenderingPass.frame();
+
         gl.enable(gl.CULL_FACE);
         gl.cullFace(gl.BACK);
         gl.enable(gl.DEPTH_TEST);