diff --git a/build/app.js b/build/app.js index a5f0dff..34faccd 100644 --- a/build/app.js +++ b/build/app.js @@ -2775,7 +2775,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); var BRDF_LUT = { texture: null, - textureIndex: 14, + textureIndex: 13, createTexture: function (img) { this.texture = gl.createTexture(); @@ -2801,6 +2801,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // Environment maps var CUBE_MAP = { textureIndex: 15, + texture: null, + + // IBL + textureIBLDiffuseIndex: 14, + textureIBLDiffuse: null, // loading asset -------------------- uris: [ @@ -2811,6 +2816,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); '../textures/environment/pz.jpg', '../textures/environment/nz.jpg', + // ibl diffuse + '../textures/environment/diffuse/bakedDiffuse_01.jpg', + '../textures/environment/diffuse/bakedDiffuse_02.jpg', + '../textures/environment/diffuse/bakedDiffuse_03.jpg', + '../textures/environment/diffuse/bakedDiffuse_04.jpg', + '../textures/environment/diffuse/bakedDiffuse_05.jpg', + '../textures/environment/diffuse/bakedDiffuse_06.jpg', + // @tmp, ugly, load brdfLUT here '../textures/brdfLUT.png' ], @@ -2826,7 +2839,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); console.log('all cube maps loaded'); this.texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.texture); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -2843,21 +2855,48 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); this.images[i] ); } + gl.generateMipmap(gl.TEXTURE_CUBE_MAP); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); + + + + this.textureIBLDiffuse = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.textureIBLDiffuse); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_COMPARE_MODE, gl.NONE); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_COMPARE_FUNC, gl.LEQUAL); + + for (var i = 0; i < 6; i++) { + gl.texImage2D( + gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, + 0, + gl.RGBA, + gl.RGBA, + gl.UNSIGNED_BYTE, + this.images[i + 6] + ); + } gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); + + // @tmp - BRDF_LUT.createTexture(this.images[6]); + BRDF_LUT.createTexture(this.images[this.images.length - 1]); // @hack gl.useProgram(programPBR.program); gl.activeTexture(gl.TEXTURE0 + BRDF_LUT.textureIndex); gl.bindTexture(gl.TEXTURE_2D, BRDF_LUT.texture); gl.uniform1i(programPBR.uniformBrdfLUTLocation, BRDF_LUT.textureIndex); - gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIndex); gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.texture); - gl.uniform1i(programPBR.uniformDiffuseEnvSamplerLocation, CUBE_MAP.textureIndex); gl.uniform1i(programPBR.uniformSpecularEnvSamplerLocation, CUBE_MAP.textureIndex); + + + gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIBLDiffuseIndex); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.textureIBLDiffuse); + gl.uniform1i(programPBR.uniformDiffuseEnvSamplerLocation, CUBE_MAP.textureIBLDiffuseIndex); gl.useProgram(null); if (this.finishLoadingCallback) { @@ -2913,7 +2952,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 1.0, -1.0, 1.0 ]), - texture: null, + vertexArray: gl.createVertexArray(), vertexBuffer: gl.createBuffer(), @@ -3159,6 +3198,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Monster/glTF/Monster.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/mrdoob/rome-gltf/master/files/models/black_soup/quadruped_wolf.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/glTF/VC.gltf'; + // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF/WaterBottle.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Buggy/glTF/Buggy.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf'; @@ -3567,6 +3607,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIndex); gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.texture); + gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIBLDiffuseIndex); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.textureIBLDiffuse); if (pbrMetallicRoughness.baseColorFactor) { baseColor = pbrMetallicRoughness.baseColorFactor; @@ -9944,7 +9986,7 @@ module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORM /* 27 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define FRAG_COLOR_LOCATION 0\r\n\r\n// reference: https://github.com/KhronosGroup/glTF-WebGL-PBR/blob/master/shaders/pbr-frag.glsl\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\n// IBL\r\nuniform samplerCube u_DiffuseEnvSampler;\r\nuniform samplerCube u_SpecularEnvSampler;\r\nuniform sampler2D u_brdfLUT;\r\n\r\n// Metallic-roughness material\r\n\r\n// TODO: use #define string for a full and dynamic support renderer\r\n\r\n// base color\r\nuniform vec4 u_baseColorFactor;\r\nuniform sampler2D u_baseColorTexture;\r\n\r\n// normal map\r\nuniform sampler2D u_normalTexture;\r\nuniform float u_normalScale;\r\n\r\n// emmisve map\r\nuniform sampler2D u_emissiveTexture;\r\nuniform vec3 u_emissiveFactor;\r\n\r\n// metal roughness\r\nuniform sampler2D u_metallicRoughnessTexture;\r\n\r\nuniform float u_metallicFactor;\r\nuniform float u_roughnessFactor;\r\n\r\n// occlusion texture\r\nuniform sampler2D u_occlusionTexture;\r\nuniform float u_occlusionStrength;\r\n\r\nin vec3 v_normal;\r\nin vec2 v_uv;\r\n\r\nlayout(location = FRAG_COLOR_LOCATION) out vec4 frag_color;\r\n\r\nstruct PBRInfo\r\n{\r\n float NdotL; // cos angle between normal and light direction\r\n float NdotV; // cos angle between normal and view direction\r\n float NdotH; // cos angle between normal and half vector\r\n float LdotH; // cos angle between light direction and half vector\r\n float VdotH; // cos angle between view direction and half vector\r\n float perceptualRoughness; // roughness value, as authored by the model creator (input to shader)\r\n float metalness; // metallic value at the surface\r\n vec3 reflectance0; // full reflectance color (normal incidence angle)\r\n vec3 reflectance90; // reflectance color at grazing angle\r\n float alphaRoughness; // roughness mapped to a more linear change in the roughness (proposed by [2])\r\n vec3 diffuseColor; // color contribution from diffuse lighting\r\n vec3 specularColor; // color contribution from specular lighting\r\n};\r\n\r\n\r\nvec3 applyNormalMap(vec3 geomnor, vec3 normap) {\r\n normap = normap * 2.0 - 1.0;\r\n vec3 up = normalize(vec3(0.001, 1, 0.001));\r\n vec3 surftan = normalize(cross(geomnor, up));\r\n vec3 surfbinor = cross(geomnor, surftan);\r\n return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor;\r\n}\r\n\r\nconst float M_PI = 3.141592653589793;\r\nconst float c_MinRoughness = 0.04;\r\n\r\n\r\nvec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection)\r\n{\r\n float mipCount = 9.0; // resolution of 512x512\r\n float lod = (pbrInputs.perceptualRoughness * mipCount);\r\n // retrieve a scale and bias to F0. See [1], Figure 3\r\n vec3 brdf = texture(u_brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness)).rgb;\r\n vec3 diffuseLight = texture(u_DiffuseEnvSampler, n).rgb;\r\n\r\n// #ifdef USE_TEX_LOD\r\n// vec3 specularLight = textureCubeLodEXT(u_SpecularEnvSampler, reflection, lod).rgb;\r\n// #else\r\n vec3 specularLight = texture(u_SpecularEnvSampler, reflection).rgb;\r\n// #endif\r\n\r\n vec3 diffuse = diffuseLight * pbrInputs.diffuseColor;\r\n vec3 specular = specularLight * (pbrInputs.specularColor * brdf.x + brdf.y);\r\n\r\n // // For presentation, this allows us to disable IBL terms\r\n // diffuse *= u_ScaleIBLAmbient.x;\r\n // specular *= u_ScaleIBLAmbient.y;\r\n\r\n return diffuse + specular;\r\n}\r\n\r\n// Basic Lambertian diffuse\r\n// Implementation from Lambert's Photometria https://archive.org/details/lambertsphotome00lambgoog\r\n// See also [1], Equation 1\r\nvec3 diffuse(PBRInfo pbrInputs)\r\n{\r\n return pbrInputs.diffuseColor / M_PI;\r\n}\r\n\r\n\r\n// The following equation models the Fresnel reflectance term of the spec equation (aka F())\r\n// Implementation of fresnel from [4], Equation 15\r\nvec3 specularReflection(PBRInfo pbrInputs)\r\n{\r\n return pbrInputs.reflectance0 + (pbrInputs.reflectance90 - pbrInputs.reflectance0) * pow(clamp(1.0 - pbrInputs.VdotH, 0.0, 1.0), 5.0);\r\n}\r\n\r\n\r\n// This calculates the specular geometric attenuation (aka G()),\r\n// where rougher material will reflect less light back to the viewer.\r\n// This implementation is based on [1] Equation 4, and we adopt their modifications to\r\n// alphaRoughness as input as originally proposed in [2].\r\nfloat geometricOcclusion(PBRInfo pbrInputs)\r\n{\r\n float NdotL = pbrInputs.NdotL;\r\n float NdotV = pbrInputs.NdotV;\r\n float r = pbrInputs.alphaRoughness;\r\n\r\n float attenuationL = 2.0 * NdotL / (NdotL + sqrt(r * r + (1.0 - r * r) * (NdotL * NdotL)));\r\n float attenuationV = 2.0 * NdotV / (NdotV + sqrt(r * r + (1.0 - r * r) * (NdotV * NdotV)));\r\n return attenuationL * attenuationV;\r\n}\r\n\r\n\r\n// The following equation(s) model the distribution of microfacet normals across the area being drawn (aka D())\r\n// Implementation from \"Average Irregularity Representation of a Roughened Surface for Ray Reflection\" by T. S. Trowbridge, and K. P. Reitz\r\n// Follows the distribution function recommended in the SIGGRAPH 2013 course notes from EPIC Games [1], Equation 3.\r\nfloat microfacetDistribution(PBRInfo pbrInputs)\r\n{\r\n float roughnessSq = pbrInputs.alphaRoughness * pbrInputs.alphaRoughness;\r\n float f = (pbrInputs.NdotH * roughnessSq - pbrInputs.NdotH) * pbrInputs.NdotH + 1.0;\r\n return roughnessSq / (M_PI * f * f);\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\nvoid main()\r\n{\r\n float perceptualRoughness = u_roughnessFactor;\r\n float metallic = u_metallicFactor;\r\n\r\n// #ifdef HAS_METALROUGHNESSMAP\r\n // Roughness is stored in the 'g' channel, metallic is stored in the 'b' channel.\r\n // This layout intentionally reserves the 'r' channel for (optional) occlusion map data\r\n vec4 mrSample = texture(u_metallicRoughnessTexture, v_uv);\r\n perceptualRoughness = mrSample.g * perceptualRoughness;\r\n metallic = mrSample.b * metallic;\r\n// #endif\r\n perceptualRoughness = clamp(perceptualRoughness, c_MinRoughness, 1.0);\r\n metallic = clamp(metallic, 0.0, 1.0);\r\n // Roughness is authored as perceptual roughness; as is convention,\r\n // convert to material roughness by squaring the perceptual roughness [2].\r\n float alphaRoughness = perceptualRoughness * perceptualRoughness;\r\n\r\n\r\n // The albedo may be defined from a base texture or a flat color\r\n// #ifdef HAS_BASECOLORMAP\r\n vec4 baseColor = texture(u_baseColorTexture, v_uv) * u_baseColorFactor;\r\n// #else\r\n // vec4 baseColor = u_baseColorFactor;\r\n// #endif\r\n\r\n\r\n\r\n vec3 f0 = vec3(0.04);\r\n vec3 diffuseColor = baseColor.rgb * (vec3(1.0) - f0);\r\n diffuseColor *= 1.0 - metallic;\r\n vec3 specularColor = mix(f0, baseColor.rgb, metallic);\r\n\r\n // Compute reflectance.\r\n float reflectance = max(max(specularColor.r, specularColor.g), specularColor.b);\r\n\r\n\r\n // For typical incident reflectance range (between 4% to 100%) set the grazing reflectance to 100% for typical fresnel effect.\r\n // For very low reflectance range on highly diffuse objects (below 4%), incrementally reduce grazing reflecance to 0%.\r\n float reflectance90 = clamp(reflectance * 25.0, 0.0, 1.0);\r\n vec3 specularEnvironmentR0 = specularColor.rgb;\r\n vec3 specularEnvironmentR90 = vec3(1.0, 1.0, 1.0) * reflectance90;\r\n\r\n\r\n // vec3 n = getNormal(); // normal at surface point\r\n vec3 n = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );\r\n vec3 v = vec3( 0.0, 0.0, 1.0 ); // Vector from surface point to camera\r\n // vec3 l = normalize(u_LightDirection); // Vector from surface point to light\r\n vec3 l = vec3( 0.6, 0.8, 0.0 ); // Vector from surface point to light\r\n vec3 h = normalize(l+v); // Half vector between both l and v\r\n vec3 reflection = -normalize(reflect(v, n));\r\n\r\n float NdotL = clamp(dot(n, l), 0.001, 1.0);\r\n float NdotV = abs(dot(n, v)) + 0.001;\r\n float NdotH = clamp(dot(n, h), 0.0, 1.0);\r\n float LdotH = clamp(dot(l, h), 0.0, 1.0);\r\n float VdotH = clamp(dot(v, h), 0.0, 1.0);\r\n\r\n PBRInfo pbrInputs = PBRInfo(\r\n NdotL,\r\n NdotV,\r\n NdotH,\r\n LdotH,\r\n VdotH,\r\n perceptualRoughness,\r\n metallic,\r\n specularEnvironmentR0,\r\n specularEnvironmentR90,\r\n alphaRoughness,\r\n diffuseColor,\r\n specularColor\r\n );\r\n\r\n // Calculate the shading terms for the microfacet specular shading model\r\n vec3 F = specularReflection(pbrInputs);\r\n float G = geometricOcclusion(pbrInputs);\r\n float D = microfacetDistribution(pbrInputs);\r\n\r\n // Calculation of analytical lighting contribution\r\n vec3 diffuseContrib = (1.0 - F) * diffuse(pbrInputs);\r\n vec3 specContrib = F * G * D / (4.0 * NdotL * NdotV);\r\n // vec3 color = NdotL * u_LightColor * (diffuseContrib + specContrib);\r\n vec3 color = NdotL * (diffuseContrib + specContrib); // assume light color vec3(1, 1, 1)\r\n\r\n // Calculate lighting contribution from image based lighting source (IBL)\r\n// #ifdef USE_IBL\r\n color += getIBLContribution(pbrInputs, n, reflection);\r\n// #endif\r\n\r\n\r\n // Apply optional PBR terms for additional (optional) shading\r\n// #ifdef HAS_OCCLUSIONMAP\r\n float ao = texture(u_occlusionTexture, v_uv).r;\r\n color = mix(color, color * ao, u_occlusionStrength);\r\n// #endif\r\n\r\n// #ifdef HAS_EMISSIVEMAP\r\n vec3 emissive = texture(u_emissiveTexture, v_uv).rgb * u_emissiveFactor;\r\n color += emissive;\r\n// #endif\r\n\r\n // // This section uses mix to override final color for reference app visualization\r\n // // of various parameters in the lighting equation.\r\n // color = mix(color, F, u_ScaleFGDSpec.x);\r\n // color = mix(color, vec3(G), u_ScaleFGDSpec.y);\r\n // color = mix(color, vec3(D), u_ScaleFGDSpec.z);\r\n // color = mix(color, specContrib, u_ScaleFGDSpec.w);\r\n\r\n // color = mix(color, diffuseContrib, u_ScaleDiffBaseMR.x);\r\n // color = mix(color, baseColor.rgb, u_ScaleDiffBaseMR.y);\r\n // color = mix(color, vec3(metallic), u_ScaleDiffBaseMR.z);\r\n // color = mix(color, vec3(perceptualRoughness), u_ScaleDiffBaseMR.w);\r\n\r\n frag_color = vec4(color, baseColor.a);\r\n}" +module.exports = "#version 300 es\r\n#define FRAG_COLOR_LOCATION 0\r\n\r\n// reference: https://github.com/KhronosGroup/glTF-WebGL-PBR/blob/master/shaders/pbr-frag.glsl\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\n// IBL\r\nuniform samplerCube u_DiffuseEnvSampler;\r\nuniform samplerCube u_SpecularEnvSampler;\r\nuniform sampler2D u_brdfLUT;\r\n\r\n// Metallic-roughness material\r\n\r\n// TODO: use #define string for a full and dynamic support renderer\r\n\r\n// base color\r\nuniform vec4 u_baseColorFactor;\r\nuniform sampler2D u_baseColorTexture;\r\n\r\n// normal map\r\nuniform sampler2D u_normalTexture;\r\nuniform float u_normalScale;\r\n\r\n// emmisve map\r\nuniform sampler2D u_emissiveTexture;\r\nuniform vec3 u_emissiveFactor;\r\n\r\n// metal roughness\r\nuniform sampler2D u_metallicRoughnessTexture;\r\n\r\nuniform float u_metallicFactor;\r\nuniform float u_roughnessFactor;\r\n\r\n// occlusion texture\r\nuniform sampler2D u_occlusionTexture;\r\nuniform float u_occlusionStrength;\r\n\r\nin vec3 v_normal;\r\nin vec2 v_uv;\r\n\r\nlayout(location = FRAG_COLOR_LOCATION) out vec4 frag_color;\r\n\r\nstruct PBRInfo\r\n{\r\n float NdotL; // cos angle between normal and light direction\r\n float NdotV; // cos angle between normal and view direction\r\n float NdotH; // cos angle between normal and half vector\r\n float LdotH; // cos angle between light direction and half vector\r\n float VdotH; // cos angle between view direction and half vector\r\n float perceptualRoughness; // roughness value, as authored by the model creator (input to shader)\r\n float metalness; // metallic value at the surface\r\n vec3 reflectance0; // full reflectance color (normal incidence angle)\r\n vec3 reflectance90; // reflectance color at grazing angle\r\n float alphaRoughness; // roughness mapped to a more linear change in the roughness (proposed by [2])\r\n vec3 diffuseColor; // color contribution from diffuse lighting\r\n vec3 specularColor; // color contribution from specular lighting\r\n};\r\n\r\n\r\nvec3 applyNormalMap(vec3 geomnor, vec3 normap) {\r\n normap = normap * 2.0 - 1.0;\r\n vec3 up = normalize(vec3(0.001, 1, 0.001));\r\n vec3 surftan = normalize(cross(geomnor, up));\r\n vec3 surfbinor = cross(geomnor, surftan);\r\n return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor;\r\n}\r\n\r\nconst float M_PI = 3.141592653589793;\r\nconst float c_MinRoughness = 0.04;\r\n\r\n\r\nvec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection)\r\n{\r\n // float mipCount = 9.0; // resolution of 512x512\r\n float mipCount = 10.0; // resolution of 1024x1024\r\n float lod = (pbrInputs.perceptualRoughness * mipCount);\r\n // retrieve a scale and bias to F0. See [1], Figure 3\r\n vec3 brdf = texture(u_brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness)).rgb;\r\n vec3 diffuseLight = texture(u_DiffuseEnvSampler, n).rgb;\r\n\r\n// #ifdef USE_TEX_LOD\r\n vec3 specularLight = texture(u_SpecularEnvSampler, reflection, lod).rgb;\r\n// #else\r\n // vec3 specularLight = texture(u_SpecularEnvSampler, reflection).rgb;\r\n// #endif\r\n\r\n vec3 diffuse = diffuseLight * pbrInputs.diffuseColor;\r\n vec3 specular = specularLight * (pbrInputs.specularColor * brdf.x + brdf.y);\r\n\r\n // // For presentation, this allows us to disable IBL terms\r\n // diffuse *= u_ScaleIBLAmbient.x;\r\n // specular *= u_ScaleIBLAmbient.y;\r\n\r\n return diffuse + specular;\r\n}\r\n\r\n// Basic Lambertian diffuse\r\n// Implementation from Lambert's Photometria https://archive.org/details/lambertsphotome00lambgoog\r\n// See also [1], Equation 1\r\nvec3 diffuse(PBRInfo pbrInputs)\r\n{\r\n return pbrInputs.diffuseColor / M_PI;\r\n}\r\n\r\n\r\n// The following equation models the Fresnel reflectance term of the spec equation (aka F())\r\n// Implementation of fresnel from [4], Equation 15\r\nvec3 specularReflection(PBRInfo pbrInputs)\r\n{\r\n return pbrInputs.reflectance0 + (pbrInputs.reflectance90 - pbrInputs.reflectance0) * pow(clamp(1.0 - pbrInputs.VdotH, 0.0, 1.0), 5.0);\r\n}\r\n\r\n\r\n// This calculates the specular geometric attenuation (aka G()),\r\n// where rougher material will reflect less light back to the viewer.\r\n// This implementation is based on [1] Equation 4, and we adopt their modifications to\r\n// alphaRoughness as input as originally proposed in [2].\r\nfloat geometricOcclusion(PBRInfo pbrInputs)\r\n{\r\n float NdotL = pbrInputs.NdotL;\r\n float NdotV = pbrInputs.NdotV;\r\n float r = pbrInputs.alphaRoughness;\r\n\r\n float attenuationL = 2.0 * NdotL / (NdotL + sqrt(r * r + (1.0 - r * r) * (NdotL * NdotL)));\r\n float attenuationV = 2.0 * NdotV / (NdotV + sqrt(r * r + (1.0 - r * r) * (NdotV * NdotV)));\r\n return attenuationL * attenuationV;\r\n}\r\n\r\n\r\n// The following equation(s) model the distribution of microfacet normals across the area being drawn (aka D())\r\n// Implementation from \"Average Irregularity Representation of a Roughened Surface for Ray Reflection\" by T. S. Trowbridge, and K. P. Reitz\r\n// Follows the distribution function recommended in the SIGGRAPH 2013 course notes from EPIC Games [1], Equation 3.\r\nfloat microfacetDistribution(PBRInfo pbrInputs)\r\n{\r\n float roughnessSq = pbrInputs.alphaRoughness * pbrInputs.alphaRoughness;\r\n float f = (pbrInputs.NdotH * roughnessSq - pbrInputs.NdotH) * pbrInputs.NdotH + 1.0;\r\n return roughnessSq / (M_PI * f * f);\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\nvoid main()\r\n{\r\n float perceptualRoughness = u_roughnessFactor;\r\n float metallic = u_metallicFactor;\r\n\r\n// #ifdef HAS_METALROUGHNESSMAP\r\n // Roughness is stored in the 'g' channel, metallic is stored in the 'b' channel.\r\n // This layout intentionally reserves the 'r' channel for (optional) occlusion map data\r\n vec4 mrSample = texture(u_metallicRoughnessTexture, v_uv);\r\n perceptualRoughness = mrSample.g * perceptualRoughness;\r\n metallic = mrSample.b * metallic;\r\n// #endif\r\n perceptualRoughness = clamp(perceptualRoughness, c_MinRoughness, 1.0);\r\n metallic = clamp(metallic, 0.0, 1.0);\r\n // Roughness is authored as perceptual roughness; as is convention,\r\n // convert to material roughness by squaring the perceptual roughness [2].\r\n float alphaRoughness = perceptualRoughness * perceptualRoughness;\r\n\r\n\r\n // The albedo may be defined from a base texture or a flat color\r\n// #ifdef HAS_BASECOLORMAP\r\n vec4 baseColor = texture(u_baseColorTexture, v_uv) * u_baseColorFactor;\r\n// #else\r\n // vec4 baseColor = u_baseColorFactor;\r\n// #endif\r\n\r\n\r\n\r\n vec3 f0 = vec3(0.04);\r\n vec3 diffuseColor = baseColor.rgb * (vec3(1.0) - f0);\r\n diffuseColor *= 1.0 - metallic;\r\n vec3 specularColor = mix(f0, baseColor.rgb, metallic);\r\n\r\n // Compute reflectance.\r\n float reflectance = max(max(specularColor.r, specularColor.g), specularColor.b);\r\n\r\n\r\n // For typical incident reflectance range (between 4% to 100%) set the grazing reflectance to 100% for typical fresnel effect.\r\n // For very low reflectance range on highly diffuse objects (below 4%), incrementally reduce grazing reflecance to 0%.\r\n float reflectance90 = clamp(reflectance * 25.0, 0.0, 1.0);\r\n vec3 specularEnvironmentR0 = specularColor.rgb;\r\n vec3 specularEnvironmentR90 = vec3(1.0, 1.0, 1.0) * reflectance90;\r\n\r\n\r\n // vec3 n = getNormal(); // normal at surface point\r\n vec3 n = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );\r\n vec3 v = vec3( 0.0, 0.0, 1.0 ); // Vector from surface point to camera\r\n // vec3 l = normalize(u_LightDirection); // Vector from surface point to light\r\n vec3 l = vec3( 0.6, 0.8, 0.0 ); // Vector from surface point to light\r\n vec3 h = normalize(l+v); // Half vector between both l and v\r\n vec3 reflection = -normalize(reflect(v, n));\r\n\r\n float NdotL = clamp(dot(n, l), 0.001, 1.0);\r\n float NdotV = abs(dot(n, v)) + 0.001;\r\n float NdotH = clamp(dot(n, h), 0.0, 1.0);\r\n float LdotH = clamp(dot(l, h), 0.0, 1.0);\r\n float VdotH = clamp(dot(v, h), 0.0, 1.0);\r\n\r\n PBRInfo pbrInputs = PBRInfo(\r\n NdotL,\r\n NdotV,\r\n NdotH,\r\n LdotH,\r\n VdotH,\r\n perceptualRoughness,\r\n metallic,\r\n specularEnvironmentR0,\r\n specularEnvironmentR90,\r\n alphaRoughness,\r\n diffuseColor,\r\n specularColor\r\n );\r\n\r\n // Calculate the shading terms for the microfacet specular shading model\r\n vec3 F = specularReflection(pbrInputs);\r\n float G = geometricOcclusion(pbrInputs);\r\n float D = microfacetDistribution(pbrInputs);\r\n\r\n // Calculation of analytical lighting contribution\r\n vec3 diffuseContrib = (1.0 - F) * diffuse(pbrInputs);\r\n vec3 specContrib = F * G * D / (4.0 * NdotL * NdotV);\r\n // vec3 color = NdotL * u_LightColor * (diffuseContrib + specContrib);\r\n vec3 color = NdotL * (diffuseContrib + specContrib); // assume light color vec3(1, 1, 1)\r\n\r\n // Calculate lighting contribution from image based lighting source (IBL)\r\n// #ifdef USE_IBL\r\n color += getIBLContribution(pbrInputs, n, reflection);\r\n// #endif\r\n\r\n\r\n // Apply optional PBR terms for additional (optional) shading\r\n// #ifdef HAS_OCCLUSIONMAP\r\n float ao = texture(u_occlusionTexture, v_uv).r;\r\n color = mix(color, color * ao, u_occlusionStrength);\r\n// #endif\r\n\r\n// #ifdef HAS_EMISSIVEMAP\r\n vec3 emissive = texture(u_emissiveTexture, v_uv).rgb * u_emissiveFactor;\r\n color += emissive;\r\n// #endif\r\n\r\n // // This section uses mix to override final color for reference app visualization\r\n // // of various parameters in the lighting equation.\r\n // color = mix(color, F, u_ScaleFGDSpec.x);\r\n // color = mix(color, vec3(G), u_ScaleFGDSpec.y);\r\n // color = mix(color, vec3(D), u_ScaleFGDSpec.z);\r\n // color = mix(color, specContrib, u_ScaleFGDSpec.w);\r\n\r\n // color = mix(color, diffuseContrib, u_ScaleDiffBaseMR.x);\r\n // color = mix(color, baseColor.rgb, u_ScaleDiffBaseMR.y);\r\n // color = mix(color, vec3(metallic), u_ScaleDiffBaseMR.z);\r\n // color = mix(color, vec3(perceptualRoughness), u_ScaleDiffBaseMR.w);\r\n\r\n frag_color = vec4(color, baseColor.a);\r\n}" /***/ }), /* 28 */ diff --git a/img/helmet-pbr.png b/img/helmet-pbr.png index effcb68..4e023cb 100644 Binary files a/img/helmet-pbr.png and b/img/helmet-pbr.png differ diff --git a/src/index.js b/src/index.js index ff367c8..e8569cb 100644 --- a/src/index.js +++ b/src/index.js @@ -233,7 +233,7 @@ import '../css/style.css'; var BRDF_LUT = { texture: null, - textureIndex: 14, + textureIndex: 13, createTexture: function (img) { this.texture = gl.createTexture(); @@ -259,6 +259,11 @@ import '../css/style.css'; // Environment maps var CUBE_MAP = { textureIndex: 15, + texture: null, + + // IBL + textureIBLDiffuseIndex: 14, + textureIBLDiffuse: null, // loading asset -------------------- uris: [ @@ -269,6 +274,14 @@ import '../css/style.css'; '../textures/environment/pz.jpg', '../textures/environment/nz.jpg', + // ibl diffuse + '../textures/environment/diffuse/bakedDiffuse_01.jpg', + '../textures/environment/diffuse/bakedDiffuse_02.jpg', + '../textures/environment/diffuse/bakedDiffuse_03.jpg', + '../textures/environment/diffuse/bakedDiffuse_04.jpg', + '../textures/environment/diffuse/bakedDiffuse_05.jpg', + '../textures/environment/diffuse/bakedDiffuse_06.jpg', + // @tmp, ugly, load brdfLUT here '../textures/brdfLUT.png' ], @@ -284,7 +297,6 @@ import '../css/style.css'; console.log('all cube maps loaded'); this.texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.texture); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -301,21 +313,48 @@ import '../css/style.css'; this.images[i] ); } + gl.generateMipmap(gl.TEXTURE_CUBE_MAP); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); + + + + this.textureIBLDiffuse = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.textureIBLDiffuse); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_COMPARE_MODE, gl.NONE); + gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_COMPARE_FUNC, gl.LEQUAL); + + for (var i = 0; i < 6; i++) { + gl.texImage2D( + gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, + 0, + gl.RGBA, + gl.RGBA, + gl.UNSIGNED_BYTE, + this.images[i + 6] + ); + } gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); + + // @tmp - BRDF_LUT.createTexture(this.images[6]); + BRDF_LUT.createTexture(this.images[this.images.length - 1]); // @hack gl.useProgram(programPBR.program); gl.activeTexture(gl.TEXTURE0 + BRDF_LUT.textureIndex); gl.bindTexture(gl.TEXTURE_2D, BRDF_LUT.texture); gl.uniform1i(programPBR.uniformBrdfLUTLocation, BRDF_LUT.textureIndex); - gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIndex); gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.texture); - gl.uniform1i(programPBR.uniformDiffuseEnvSamplerLocation, CUBE_MAP.textureIndex); gl.uniform1i(programPBR.uniformSpecularEnvSamplerLocation, CUBE_MAP.textureIndex); + + + gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIBLDiffuseIndex); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.textureIBLDiffuse); + gl.uniform1i(programPBR.uniformDiffuseEnvSamplerLocation, CUBE_MAP.textureIBLDiffuseIndex); gl.useProgram(null); if (this.finishLoadingCallback) { @@ -371,7 +410,7 @@ import '../css/style.css'; 1.0, -1.0, 1.0 ]), - texture: null, + vertexArray: gl.createVertexArray(), vertexBuffer: gl.createBuffer(), @@ -617,6 +656,7 @@ import '../css/style.css'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Monster/glTF/Monster.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/mrdoob/rome-gltf/master/files/models/black_soup/quadruped_wolf.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/glTF/VC.gltf'; + // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF/WaterBottle.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Buggy/glTF/Buggy.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf'; @@ -1025,6 +1065,8 @@ import '../css/style.css'; gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIndex); gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.texture); + gl.activeTexture(gl.TEXTURE0 + CUBE_MAP.textureIBLDiffuseIndex); + gl.bindTexture(gl.TEXTURE_CUBE_MAP, CUBE_MAP.textureIBLDiffuse); if (pbrMetallicRoughness.baseColorFactor) { baseColor = pbrMetallicRoughness.baseColorFactor; diff --git a/src/shaders/fs-pbr.glsl b/src/shaders/fs-pbr.glsl index 135fd70..a1bb575 100644 --- a/src/shaders/fs-pbr.glsl +++ b/src/shaders/fs-pbr.glsl @@ -73,16 +73,17 @@ const float c_MinRoughness = 0.04; vec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection) { - float mipCount = 9.0; // resolution of 512x512 + // float mipCount = 9.0; // resolution of 512x512 + float mipCount = 10.0; // resolution of 1024x1024 float lod = (pbrInputs.perceptualRoughness * mipCount); // retrieve a scale and bias to F0. See [1], Figure 3 vec3 brdf = texture(u_brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness)).rgb; vec3 diffuseLight = texture(u_DiffuseEnvSampler, n).rgb; // #ifdef USE_TEX_LOD -// vec3 specularLight = textureCubeLodEXT(u_SpecularEnvSampler, reflection, lod).rgb; + vec3 specularLight = texture(u_SpecularEnvSampler, reflection, lod).rgb; // #else - vec3 specularLight = texture(u_SpecularEnvSampler, reflection).rgb; + // vec3 specularLight = texture(u_SpecularEnvSampler, reflection).rgb; // #endif vec3 diffuse = diffuseLight * pbrInputs.diffuseColor; diff --git a/textures/environment/diffuse/bakedDiffuse_01.jpg b/textures/environment/diffuse/bakedDiffuse_01.jpg new file mode 100644 index 0000000..00943c4 Binary files /dev/null and b/textures/environment/diffuse/bakedDiffuse_01.jpg differ diff --git a/textures/environment/diffuse/bakedDiffuse_02.jpg b/textures/environment/diffuse/bakedDiffuse_02.jpg new file mode 100644 index 0000000..5b6d4d1 Binary files /dev/null and b/textures/environment/diffuse/bakedDiffuse_02.jpg differ diff --git a/textures/environment/diffuse/bakedDiffuse_03.jpg b/textures/environment/diffuse/bakedDiffuse_03.jpg new file mode 100644 index 0000000..58decf5 Binary files /dev/null and b/textures/environment/diffuse/bakedDiffuse_03.jpg differ diff --git a/textures/environment/diffuse/bakedDiffuse_04.jpg b/textures/environment/diffuse/bakedDiffuse_04.jpg new file mode 100644 index 0000000..54fd2fc Binary files /dev/null and b/textures/environment/diffuse/bakedDiffuse_04.jpg differ diff --git a/textures/environment/diffuse/bakedDiffuse_05.jpg b/textures/environment/diffuse/bakedDiffuse_05.jpg new file mode 100644 index 0000000..d79bb25 Binary files /dev/null and b/textures/environment/diffuse/bakedDiffuse_05.jpg differ diff --git a/textures/environment/diffuse/bakedDiffuse_06.jpg b/textures/environment/diffuse/bakedDiffuse_06.jpg new file mode 100644 index 0000000..ea7bdbc Binary files /dev/null and b/textures/environment/diffuse/bakedDiffuse_06.jpg differ