Reflection equation

Specular reflection

Simplified partition summation approximation

To simplify the

  • Substitute F Fresnel equation simplified equation
  • And since f(p, omega I, omega O) already has f terms in it, they divide, they don’t count f terms here.

BRDF integral map

  • The 2D lookup texture store is the coefficient (R channel) and deviation value (G channel) of the Fresnel response
  • BRDF’s input N ⋅ω I (ranging from 0.0 to 1.0) is used as the abscissa and roughness as the ordinate
  • A lot of these calculations are a little bit too big

  • BRDF vertex shader
export var vs_brdf =
`#version 300 es precision mediump float; layout (location = 0) in vec3 aPos; //D3Q: location 1 introduced because of code in renderQuad() layout (location = 1) in vec3 aColor; layout (location = 2) in vec2 aTexCoords; out vec2 TexCoords; void main() { TexCoords = aTexCoords; Gl_Position = vec4 (aPos, 1.0); } `
Copy the code
  • BRDF chip shader
export var fs_brdf =
`#version 300 es precision mediump float; out vec2 FragColor; in vec2 TexCoords; Const float PI = 3.14159265359; // ---------------------------------------------------------------------------- // http://holger.dammertz.org/stuff/notes_HammersleyOnHemisphere.html // efficient VanDerCorpus calculation. float RadicalInverse_VdC(uint bits) { bits = (bits << 16u) | (bits >> 16u); bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u); bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u); bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u); bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u); Return a float (bits) * 2.3283064365386963 e-10; // / 0x100000000 } // ---------------------------------------------------------------------------- vec2 Hammersley(uint i, uint N) { return vec2(float(i)/float(N), RadicalInverse_VdC(i)); } // ---------------------------------------------------------------------------- vec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness) { float a = roughness*roughness; Float phi = 2.0 * PI * xi.x; float phi = 2.0 * PI * xi.x; Float cosTheta = SQRT ((1.0 - Xi. Y)/(1.0 + (a * a - 1.0) * Xi. Y)); Float sinTheta = SQRT (1.0 - cosTheta*cosTheta); float sinTheta = SQRT (1.0 - cosTheta*cosTheta); // from spherical coordinates to cartesian coordinates - halfway vector vec3 H; H.x = cos(phi) * sinTheta; H.y = sin(phi) * sinTheta; H.z = cosTheta; // From tangent-space H vector to world-space sample vector vec3 up = abs(N.z) < 0.999? Vec3 (0.0, 0.0, 1.0) : VEC3 (1.0, 0.0, 0.0); vec3 tangent = normalize(cross(up, N)); vec3 bitangent = cross(N, tangent); vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z; return normalize(sampleVec); } // ---------------------------------------------------------------------------- float GeometrySchlickGGX(float NdotV, float roughness) { // note that we use a different k for IBL float a = roughness; Float k = (a * a) / 2.0; float k = (a * a) / 2.0; float nom = NdotV; Float denom = NdotV * (1.0-k) + k; float denom = NdotV * (1.0-k) + k; return nom / denom; } // ---------------------------------------------------------------------------- float GeometrySmith(vec3 N, vec3 V, Vec3 L, float roughness) {float NdotV = Max (dot(N, V), 0.0); Float NdotL = Max (dot(N, L), 0.0); float NdotL = Max (dot(N, L), 0.0); float ggx2 = GeometrySchlickGGX(NdotV, roughness); float ggx1 = GeometrySchlickGGX(NdotL, roughness); return ggx1 * ggx2; } // ---------------------------------------------------------------------------- vec2 IntegrateBRDF(float NdotV, float roughness) { vec3 V; V.x = SQRT (1.0 - NdotV*NdotV); V.y = 0.0; V.z = NdotV; Float A = 0.0; Float B = 0.0; Vec3 N = vec3(0.0, 0.0, 1.0); const uint SAMPLE_COUNT = 1024u; for(uint i = 0u; i < SAMPLE_COUNT; ++i) { // generates a sample vector that's biased towards the // preferred alignment direction (importance sampling). vec2 Xi = Hammersley(i, SAMPLE_COUNT); vec3 H = ImportanceSampleGGX(Xi, N, roughness); Vec3 L = normalize(2.0 * dot(V, H) * h-v); vec3 L = normalize(2.0 * dot(V, H) * h-v); Float NdotL = Max (L.z, 0.0); Float NdotH = Max (H.z, 0.0); Float VdotH = Max (dot(V, H), 0.0); If (NdotL > 0.0) {float G = GeometrySmith(N, V, L, roughness); step 6. float G_Vis = (G * VdotH) / (NdotH * NdotV); Float Fc = pow(1.0-vdoth, 5.0); float Fc = pow(1.0-vdoth, 5.0); .// ^ 5 this is the formula A += (1.0-fc) * G_Vis; B += Fc * G_Vis; } } A /= float(SAMPLE_COUNT); B /= float(SAMPLE_COUNT); return vec2(A, B); } // ---------------------------------------------------------------------------- void main() { vec2 integratedBRDF = IntegrateBRDF(TexCoords.x, TexCoords.y); FragColor = integratedBRDF; } `
Copy the code
  • FBO generates map brdfLUTTexture
  • Note where whCube appears
const sizeFloat = 4;
const whCube = 512;
const ext = gl.getExtension("EXT_color_buffer_float");
let brdfShader = null;
let textureShader = null;
let quadVAO = null;
let captureFBO = null;
let brdfLUTTexture = null;
let error;
let main = function () {
    brdfShader = new Shader(gl, vs_brdf, fs_brdf);
    brdfLUTTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, brdfLUTTexture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG16F, whCube, whCube, 0, gl.RG, gl.FLOAT, new Float32Array(whCube * whCube * 2), 0);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    let captureRBO = gl.createRenderbuffer();
    captureFBO = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, captureFBO);
    gl.bindRenderbuffer(gl.RENDERBUFFER, captureRBO);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT24, whCube, whCube);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, brdfLUTTexture, 0);
    gl.viewport(0.0, whCube, whCube);
    brdfShader.use(gl);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    renderQuad();
Copy the code
  • Display with texture
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    let vs_texture = `#version 300 es precision mediump float; layout (location = 0) in vec3 aPos; layout (location = 1) in vec3 aColor; layout (location = 2) in vec2 aTexCoord; out vec3 ourColor; out vec2 TexCoord; Void main() {gl_Position = vec4(aPos, 1.0); ourColor = aColor; TexCoord = aTexCoord; } `;
    let fs_texture = `#version 300 es precision mediump float; out vec4 FragColor; in vec3 ourColor; in vec2 TexCoord; uniform sampler2D ourTexture; Void main() {//D3Q: test. FragColor = vec4(ourColor, 1.0); //texture(ourTexture, TexCoord); FragColor = texture(ourTexture, TexCoord); } `;
    textureShader = new Shader(gl, vs_texture, fs_texture);
    textureShader.use(gl);
    textureShader.setInt(gl, "ourTexture".0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, brdfLUTTexture); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); renderQuad(); } ();Copy the code
  • Drawcall function
function renderQuad() {
    if(! quadVAO) {let vertices = new Float32Array([-1.0, -1.0.1.0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.1.0.0.0.0.0.1.0.1.0.1.0.1.0, -1.0.1.0.0.0.0.0.1.0.1.0.0.0.1.0.1.0.1.0.0.0.0.0.1.0.1.0.1.0,
            -1.0, -1.0.1.0.0.0.0.0.1.0.0.0.0.0,
            -1.0.1.0.1.0.0.0.0.0.1.0.0.0.1.0,]); quadVAO = gl.createVertexArray();let quadVBO = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, quadVBO);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        gl.bindVertexArray(quadVAO);
        gl.enableVertexAttribArray(0);
        gl.vertexAttribPointer(0.3, gl.FLOAT, false.8 * sizeFloat, 0);
        gl.enableVertexAttribArray(1);
        gl.vertexAttribPointer(1.3, gl.FLOAT, false.8 * sizeFloat, (3 * sizeFloat));
        gl.enableVertexAttribArray(2);
        gl.vertexAttribPointer(2.2, gl.FLOAT, false.8 * sizeFloat, (6 * sizeFloat));
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
        gl.bindVertexArray(null);
    }
    gl.bindVertexArray(quadVAO);
    gl.drawArrays(gl.TRIANGLES, 0.6);
    gl.bindVertexArray(null);
}
Copy the code