From 094d7edd439a2a455d8d24712c943ecb49ffa05e Mon Sep 17 00:00:00 2001 From: shrekshao Date: Sun, 17 Sep 2017 22:38:45 -0700 Subject: [PATCH] pbr shader compile pass --- build/app.js | 99 ++++++++++++--- src/index.js | 57 ++++++++- src/shaders/fs-pbr.glsl | 260 ++++++++++++++++++++++++++++++++++++++++ src/shaders/vs-pbr.glsl | 1 + textures/brdfLUT.png | Bin 0 -> 16623 bytes 5 files changed, 398 insertions(+), 19 deletions(-) create mode 100644 src/shaders/fs-pbr.glsl create mode 100644 textures/brdfLUT.png diff --git a/build/app.js b/build/app.js index 56aec50..70656cc 100644 --- a/build/app.js +++ b/build/app.js @@ -2766,6 +2766,27 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); gl.bindVertexArray(null); + var BRDF_LUT = { + texture: null, + + createTexture: function (img) { + this.texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D( + gl.TEXTURE_2D, // assumed + 0, // Level of details + // gl.RGB, // Format + // gl.RGB, + gl.RGBA, // Format + gl.RGBA, + gl.UNSIGNED_BYTE, // Size of each channel + img + ); + gl.bindTexture(gl.TEXTURE_2D, null); + } + } + + // Environment maps var CUBE_MAP = { @@ -2777,6 +2798,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); '../textures/environment/ny.jpg', '../textures/environment/pz.jpg', '../textures/environment/nz.jpg', + + // @tmp, ugly, load brdfLUT here + '../textures/brdfLUT.png' ], images: null, @@ -2810,6 +2834,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); + // @tmp + BRDF_LUT.createTexture(this.images[6]); + if (this.finishLoadingCallback) { this.finishLoadingCallback(); } @@ -2869,7 +2896,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); vertexBuffer: gl.createBuffer(), // program: createProgram(gl, require('./shaders/vs-bbox'), require('./shaders/fs-bbox')), - program: createProgram(gl, __webpack_require__(28), __webpack_require__(29)), + program: createProgram(gl, __webpack_require__(22), __webpack_require__(23)), positionLocation: 0, uniformMvpLocation: 0, uniformEnvironmentLocation: 0, @@ -2916,7 +2943,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // -- Initialize program - var program = createProgram(gl, __webpack_require__(22), __webpack_require__(1)); + var program = createProgram(gl, __webpack_require__(24), __webpack_require__(1)); var programBaseColor = { program: program, uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), @@ -2934,7 +2961,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); }; // @temp test - program = createProgram(gl, __webpack_require__(7), __webpack_require__(23)); + program = createProgram(gl, __webpack_require__(7), __webpack_require__(25)); var programBaseTextureNormalMap = { program: program, uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), @@ -2945,7 +2972,33 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); uniformNormalTextureLocation: gl.getUniformLocation(program, "u_normalTexture") }; - program = createProgram(gl, __webpack_require__(24), __webpack_require__(1)); + // @temp PBR + program = createProgram(gl, __webpack_require__(30), __webpack_require__(31)); + var programPBR = { + program: program, + + uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), + uniformMvNormalLocation: gl.getUniformLocation(program, "u_MVNormal"), + uniformBaseColorFactorLocation: gl.getUniformLocation(program, "u_baseColorFactor"), + uniformBaseColorTextureLocation: gl.getUniformLocation(program, "u_baseColorTexture"), + + uniformNormalTextureScaleLocation: gl.getUniformLocation(program, "u_normalTextureScale"), + uniformNormalTextureLocation: gl.getUniformLocation(program, "u_normalTexture"), + + uniformDiffuseEnvSamplerLocation: gl.getUniformLocation(program, "u_DiffuseEnvSampler"), + uniformSpecularEnvSamplerLocation: gl.getUniformLocation(program, "u_SpecularEnvSampler"), + uniformBrdfLUTLocation: gl.getUniformLocation(program, "u_brdfLUT"), + + + uniformMetallicRoughnessTextureLocation: gl.getUniformLocation(program, "u_metallicRoughnessTexture"), + uniformMetallicFactorLocation: gl.getUniformLocation(program, "u_metallicFactor"), + uniformRoughnessFactorLocation: gl.getUniformLocation(program, "u_roughnessFactor"), + + uniformOcclusionTextureLocation: gl.getUniformLocation(program, "u_occlusionTexture"), + uniformOcclusionStrengthLocation: gl.getUniformLocation(program, "u_occlusionStrength") + }; + + program = createProgram(gl, __webpack_require__(26), __webpack_require__(1)); var programSkinBaseColor = { program: program, uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), @@ -2954,7 +3007,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); uniformBlockIndexJointMatrix: gl.getUniformBlockIndex(program, "JointMatrix") }; - program = createProgram(gl, __webpack_require__(25), __webpack_require__(1)); + program = createProgram(gl, __webpack_require__(27), __webpack_require__(1)); var programSkinBaseColorVec8 = { program: program, uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), @@ -2964,7 +3017,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); }; // temp - program = createProgram(gl, __webpack_require__(26), __webpack_require__(2)); + program = createProgram(gl, __webpack_require__(28), __webpack_require__(2)); var programSkinBaseTexture = { program: program, uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), @@ -2974,7 +3027,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); uniformBlockIndexJointMatrix: gl.getUniformBlockIndex(program, "JointMatrix") }; - program = createProgram(gl, __webpack_require__(27), __webpack_require__(2)); + program = createProgram(gl, __webpack_require__(29), __webpack_require__(2)); var programSkinBaseTextureVec8 = { program: program, uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), @@ -3061,7 +3114,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // var gltfUrl = '../glTFs/glTF_version_2/2CylinderEngine/glTF/2CylinderEngine.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/GearboxAssy/glTF/GearboxAssy.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/Buggy/glTF/Buggy.gltf'; - // var gltfUrl = '../glTFs/glTF_version_2/DamagedHelmet/glTF/DamagedHelmet.gltf'; + var gltfUrl = '../glTFs/glTF_version_2/DamagedHelmet/glTF/DamagedHelmet.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/Avocado/glTF/Avocado.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/BoomBox/glTF/BoomBox.gltf'; @@ -3070,7 +3123,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // var gltfUrl = '../glTFs/glTF_version_2/RiggedSimple/glTF/RiggedSimple.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/RiggedFigure/glTF/RiggedFigure.gltf'; - var gltfUrl = '../glTFs/glTF_version_2/BrainStem/glTF/BrainStem.gltf'; + // var gltfUrl = '../glTFs/glTF_version_2/BrainStem/glTF/BrainStem.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/CesiumMan/glTF/CesiumMan.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Monster/glTF/Monster.gltf'; @@ -9765,49 +9818,61 @@ module.exports = "#version 300 es\r\n#define FRAG_COLOR_LOCATION 0\r\n\r\nprecis /* 22 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\n\r\nout vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n v_normal = normalize((u_MVNormal * vec4(normal, 0)).xyz);\r\n gl_Position = u_MVP * vec4(position, 1.0) ;\r\n}" +module.exports = "#version 300 es\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\n\r\nlayout(location = 0) in vec3 position;\r\n\r\nout vec3 texcoord;\r\n\r\nvoid main()\r\n{\r\n vec4 pos = u_MVP * vec4(position, 1.0);\r\n gl_Position = pos.xyww;\r\n texcoord = position;\r\n}" /***/ }), /* 23 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define FRAG_COLOR_LOCATION 0\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform vec4 u_baseColorFactor;\r\nuniform sampler2D u_baseColorTexture;\r\nuniform sampler2D u_normalTexture;\r\n\r\nin vec3 v_normal;\r\nin vec2 v_uv;\r\n\r\nlayout(location = FRAG_COLOR_LOCATION) out vec4 color;\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\nvoid main()\r\n{\r\n vec3 normal = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );\r\n normal = gl_FrontFacing ? normal : -normal;\r\n\r\n float intensity = dot(normal, vec3(0.0, 0.0, 1.0));\r\n color = u_baseColorFactor * texture(u_baseColorTexture, v_uv) * intensity;\r\n color.a = 1.0;\r\n}" +module.exports = "#version 300 es\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform samplerCube u_environment;\r\n\r\nin vec3 texcoord;\r\n\r\nout vec4 color;\r\n\r\nvoid main()\r\n{\r\n color = texture(u_environment, texcoord);\r\n}" /***/ }), /* 24 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define WEIGHTS_0_LOCATION 4\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight;\r\n\r\nout vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight.x * u_jointMatrix.matrix[int(joint.x)] +\r\n weight.y * u_jointMatrix.matrix[int(joint.y)] +\r\n weight.z * u_jointMatrix.matrix[int(joint.z)] +\r\n weight.w * u_jointMatrix.matrix[int(joint.w)];\r\n\r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" +module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\n\r\nout vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n v_normal = normalize((u_MVNormal * vec4(normal, 0)).xyz);\r\n gl_Position = u_MVP * vec4(position, 1.0) ;\r\n}" /***/ }), /* 25 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define JOINTS_1_LOCATION 5\r\n#define WEIGHTS_0_LOCATION 4\r\n#define WEIGHTS_1_LOCATION 6\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint0;\r\nlayout(location = JOINTS_1_LOCATION) in vec4 joint1;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight0;\r\nlayout(location = WEIGHTS_1_LOCATION) in vec4 weight1;\r\n\r\nout vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight0.x * u_jointMatrix.matrix[int(joint0.x)] +\r\n weight0.y * u_jointMatrix.matrix[int(joint0.y)] +\r\n weight0.z * u_jointMatrix.matrix[int(joint0.z)] +\r\n weight0.w * u_jointMatrix.matrix[int(joint0.w)] +\r\n weight1.x * u_jointMatrix.matrix[int(joint1.x)] +\r\n weight1.y * u_jointMatrix.matrix[int(joint1.y)] +\r\n weight1.z * u_jointMatrix.matrix[int(joint1.z)] +\r\n weight1.w * u_jointMatrix.matrix[int(joint1.w)];\r\n\r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" +module.exports = "#version 300 es\r\n#define FRAG_COLOR_LOCATION 0\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform vec4 u_baseColorFactor;\r\nuniform sampler2D u_baseColorTexture;\r\nuniform sampler2D u_normalTexture;\r\n\r\nin vec3 v_normal;\r\nin vec2 v_uv;\r\n\r\nlayout(location = FRAG_COLOR_LOCATION) out vec4 color;\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\nvoid main()\r\n{\r\n vec3 normal = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );\r\n normal = gl_FrontFacing ? normal : -normal;\r\n\r\n float intensity = dot(normal, vec3(0.0, 0.0, 1.0));\r\n color = u_baseColorFactor * texture(u_baseColorTexture, v_uv) * intensity;\r\n color.a = 1.0;\r\n}" /***/ }), /* 26 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define WEIGHTS_0_LOCATION 4\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = TEXCOORD_0_LOCATION) in vec2 uv;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight;\r\n\r\nout vec3 v_normal;\r\nout vec2 v_uv;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight.x * u_jointMatrix.matrix[int(joint.x)] +\r\n weight.y * u_jointMatrix.matrix[int(joint.y)] +\r\n weight.z * u_jointMatrix.matrix[int(joint.z)] +\r\n weight.w * u_jointMatrix.matrix[int(joint.w)];\r\n\r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n v_uv = uv;\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" +module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define WEIGHTS_0_LOCATION 4\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight;\r\n\r\nout vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight.x * u_jointMatrix.matrix[int(joint.x)] +\r\n weight.y * u_jointMatrix.matrix[int(joint.y)] +\r\n weight.z * u_jointMatrix.matrix[int(joint.z)] +\r\n weight.w * u_jointMatrix.matrix[int(joint.w)];\r\n\r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" /***/ }), /* 27 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define JOINTS_1_LOCATION 5\r\n#define WEIGHTS_0_LOCATION 4\r\n#define WEIGHTS_1_LOCATION 6\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = TEXCOORD_0_LOCATION) in vec2 uv;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint0;\r\nlayout(location = JOINTS_1_LOCATION) in vec4 joint1;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight0;\r\nlayout(location = WEIGHTS_1_LOCATION) in vec4 weight1;\r\n\r\nout vec3 v_normal;\r\nout vec2 v_uv;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight0.x * u_jointMatrix.matrix[int(joint0.x)] +\r\n weight0.y * u_jointMatrix.matrix[int(joint0.y)] +\r\n weight0.z * u_jointMatrix.matrix[int(joint0.z)] +\r\n weight0.w * u_jointMatrix.matrix[int(joint0.w)] +\r\n weight1.x * u_jointMatrix.matrix[int(joint1.x)] +\r\n weight1.y * u_jointMatrix.matrix[int(joint1.y)] +\r\n weight1.z * u_jointMatrix.matrix[int(joint1.z)] +\r\n weight1.w * u_jointMatrix.matrix[int(joint1.w)];\r\n \r\n \r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n v_uv = uv;\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" +module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define JOINTS_1_LOCATION 5\r\n#define WEIGHTS_0_LOCATION 4\r\n#define WEIGHTS_1_LOCATION 6\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint0;\r\nlayout(location = JOINTS_1_LOCATION) in vec4 joint1;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight0;\r\nlayout(location = WEIGHTS_1_LOCATION) in vec4 weight1;\r\n\r\nout vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight0.x * u_jointMatrix.matrix[int(joint0.x)] +\r\n weight0.y * u_jointMatrix.matrix[int(joint0.y)] +\r\n weight0.z * u_jointMatrix.matrix[int(joint0.z)] +\r\n weight0.w * u_jointMatrix.matrix[int(joint0.w)] +\r\n weight1.x * u_jointMatrix.matrix[int(joint1.x)] +\r\n weight1.y * u_jointMatrix.matrix[int(joint1.y)] +\r\n weight1.z * u_jointMatrix.matrix[int(joint1.z)] +\r\n weight1.w * u_jointMatrix.matrix[int(joint1.w)];\r\n\r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" /***/ }), /* 28 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\n\r\nlayout(location = 0) in vec3 position;\r\n\r\nout vec3 texcoord;\r\n\r\nvoid main()\r\n{\r\n vec4 pos = u_MVP * vec4(position, 1.0);\r\n gl_Position = pos.xyww;\r\n texcoord = position;\r\n}" +module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define WEIGHTS_0_LOCATION 4\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = TEXCOORD_0_LOCATION) in vec2 uv;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight;\r\n\r\nout vec3 v_normal;\r\nout vec2 v_uv;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight.x * u_jointMatrix.matrix[int(joint.x)] +\r\n weight.y * u_jointMatrix.matrix[int(joint.y)] +\r\n weight.z * u_jointMatrix.matrix[int(joint.z)] +\r\n weight.w * u_jointMatrix.matrix[int(joint.w)];\r\n\r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n v_uv = uv;\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" /***/ }), /* 29 */ /***/ (function(module, exports) { -module.exports = "#version 300 es\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform samplerCube u_environment;\r\n\r\nin vec3 texcoord;\r\n\r\nout vec4 color;\r\n\r\nvoid main()\r\n{\r\n color = texture(u_environment, texcoord);\r\n}" +module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n#define JOINTS_0_LOCATION 3\r\n#define JOINTS_1_LOCATION 5\r\n#define WEIGHTS_0_LOCATION 4\r\n#define WEIGHTS_1_LOCATION 6\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nuniform JointMatrix\r\n{\r\n mat4 matrix[32];\r\n} u_jointMatrix;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = TEXCOORD_0_LOCATION) in vec2 uv;\r\nlayout(location = JOINTS_0_LOCATION) in vec4 joint0;\r\nlayout(location = JOINTS_1_LOCATION) in vec4 joint1;\r\nlayout(location = WEIGHTS_0_LOCATION) in vec4 weight0;\r\nlayout(location = WEIGHTS_1_LOCATION) in vec4 weight1;\r\n\r\nout vec3 v_normal;\r\nout vec2 v_uv;\r\n\r\nvoid main()\r\n{\r\n mat4 skinMatrix = \r\n weight0.x * u_jointMatrix.matrix[int(joint0.x)] +\r\n weight0.y * u_jointMatrix.matrix[int(joint0.y)] +\r\n weight0.z * u_jointMatrix.matrix[int(joint0.z)] +\r\n weight0.w * u_jointMatrix.matrix[int(joint0.w)] +\r\n weight1.x * u_jointMatrix.matrix[int(joint1.x)] +\r\n weight1.y * u_jointMatrix.matrix[int(joint1.y)] +\r\n weight1.z * u_jointMatrix.matrix[int(joint1.z)] +\r\n weight1.w * u_jointMatrix.matrix[int(joint1.w)];\r\n \r\n \r\n v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);\r\n v_uv = uv;\r\n gl_Position = u_MVP * skinMatrix * vec4(position, 1.0) ;\r\n}" + +/***/ }), +/* 30 */ +/***/ (function(module, exports) { + +module.exports = "#version 300 es\r\n#define POSITION_LOCATION 0\r\n#define NORMAL_LOCATION 1\r\n#define TEXCOORD_0_LOCATION 2\r\n\r\nprecision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 u_MVP;\r\nuniform mat4 u_MVNormal;\r\n\r\nlayout(location = POSITION_LOCATION) in vec3 position;\r\nlayout(location = NORMAL_LOCATION) in vec3 normal;\r\nlayout(location = TEXCOORD_0_LOCATION) in vec2 uv;\r\n// TODO: tangents\r\n\r\nout vec3 v_normal;\r\nout vec2 v_uv;\r\n\r\nvoid main()\r\n{\r\n v_normal = normalize((u_MVNormal * vec4(normal, 0)).xyz);\r\n v_uv = uv;\r\n gl_Position = u_MVP * vec4(position, 1.0) ;\r\n}" + +/***/ }), +/* 31 */ +/***/ (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}" /***/ }) /******/ ]); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 2994237..8b81abc 100644 --- a/src/index.js +++ b/src/index.js @@ -224,6 +224,27 @@ import '../css/style.css'; gl.bindVertexArray(null); + var BRDF_LUT = { + texture: null, + + createTexture: function (img) { + this.texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D( + gl.TEXTURE_2D, // assumed + 0, // Level of details + // gl.RGB, // Format + // gl.RGB, + gl.RGBA, // Format + gl.RGBA, + gl.UNSIGNED_BYTE, // Size of each channel + img + ); + gl.bindTexture(gl.TEXTURE_2D, null); + } + } + + // Environment maps var CUBE_MAP = { @@ -235,6 +256,9 @@ import '../css/style.css'; '../textures/environment/ny.jpg', '../textures/environment/pz.jpg', '../textures/environment/nz.jpg', + + // @tmp, ugly, load brdfLUT here + '../textures/brdfLUT.png' ], images: null, @@ -268,6 +292,9 @@ import '../css/style.css'; gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); + // @tmp + BRDF_LUT.createTexture(this.images[6]); + if (this.finishLoadingCallback) { this.finishLoadingCallback(); } @@ -403,6 +430,32 @@ import '../css/style.css'; uniformNormalTextureLocation: gl.getUniformLocation(program, "u_normalTexture") }; + // @temp PBR + program = createProgram(gl, require('./shaders/vs-pbr.glsl'), require('./shaders/fs-pbr.glsl')); + var programPBR = { + program: program, + + uniformMvpLocation: gl.getUniformLocation(program, "u_MVP"), + uniformMvNormalLocation: gl.getUniformLocation(program, "u_MVNormal"), + uniformBaseColorFactorLocation: gl.getUniformLocation(program, "u_baseColorFactor"), + uniformBaseColorTextureLocation: gl.getUniformLocation(program, "u_baseColorTexture"), + + uniformNormalTextureScaleLocation: gl.getUniformLocation(program, "u_normalTextureScale"), + uniformNormalTextureLocation: gl.getUniformLocation(program, "u_normalTexture"), + + uniformDiffuseEnvSamplerLocation: gl.getUniformLocation(program, "u_DiffuseEnvSampler"), + uniformSpecularEnvSamplerLocation: gl.getUniformLocation(program, "u_SpecularEnvSampler"), + uniformBrdfLUTLocation: gl.getUniformLocation(program, "u_brdfLUT"), + + + uniformMetallicRoughnessTextureLocation: gl.getUniformLocation(program, "u_metallicRoughnessTexture"), + uniformMetallicFactorLocation: gl.getUniformLocation(program, "u_metallicFactor"), + uniformRoughnessFactorLocation: gl.getUniformLocation(program, "u_roughnessFactor"), + + uniformOcclusionTextureLocation: gl.getUniformLocation(program, "u_occlusionTexture"), + uniformOcclusionStrengthLocation: gl.getUniformLocation(program, "u_occlusionStrength") + }; + program = createProgram(gl, require('./shaders/vs-skin-normal.glsl'), require('./shaders/fs-base-color.glsl')); var programSkinBaseColor = { program: program, @@ -519,7 +572,7 @@ import '../css/style.css'; // var gltfUrl = '../glTFs/glTF_version_2/2CylinderEngine/glTF/2CylinderEngine.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/GearboxAssy/glTF/GearboxAssy.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/Buggy/glTF/Buggy.gltf'; - // var gltfUrl = '../glTFs/glTF_version_2/DamagedHelmet/glTF/DamagedHelmet.gltf'; + var gltfUrl = '../glTFs/glTF_version_2/DamagedHelmet/glTF/DamagedHelmet.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/Avocado/glTF/Avocado.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/BoomBox/glTF/BoomBox.gltf'; @@ -528,7 +581,7 @@ import '../css/style.css'; // var gltfUrl = '../glTFs/glTF_version_2/RiggedSimple/glTF/RiggedSimple.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/RiggedFigure/glTF/RiggedFigure.gltf'; - var gltfUrl = '../glTFs/glTF_version_2/BrainStem/glTF/BrainStem.gltf'; + // var gltfUrl = '../glTFs/glTF_version_2/BrainStem/glTF/BrainStem.gltf'; // var gltfUrl = '../glTFs/glTF_version_2/CesiumMan/glTF/CesiumMan.gltf'; // var gltfUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Monster/glTF/Monster.gltf'; diff --git a/src/shaders/fs-pbr.glsl b/src/shaders/fs-pbr.glsl new file mode 100644 index 0000000..135fd70 --- /dev/null +++ b/src/shaders/fs-pbr.glsl @@ -0,0 +1,260 @@ +#version 300 es +#define FRAG_COLOR_LOCATION 0 + +// reference: https://github.com/KhronosGroup/glTF-WebGL-PBR/blob/master/shaders/pbr-frag.glsl + +precision highp float; +precision highp int; + +// IBL +uniform samplerCube u_DiffuseEnvSampler; +uniform samplerCube u_SpecularEnvSampler; +uniform sampler2D u_brdfLUT; + +// Metallic-roughness material + +// TODO: use #define string for a full and dynamic support renderer + +// base color +uniform vec4 u_baseColorFactor; +uniform sampler2D u_baseColorTexture; + +// normal map +uniform sampler2D u_normalTexture; +uniform float u_normalScale; + +// emmisve map +uniform sampler2D u_emissiveTexture; +uniform vec3 u_emissiveFactor; + +// metal roughness +uniform sampler2D u_metallicRoughnessTexture; + +uniform float u_metallicFactor; +uniform float u_roughnessFactor; + +// occlusion texture +uniform sampler2D u_occlusionTexture; +uniform float u_occlusionStrength; + +in vec3 v_normal; +in vec2 v_uv; + +layout(location = FRAG_COLOR_LOCATION) out vec4 frag_color; + +struct PBRInfo +{ + float NdotL; // cos angle between normal and light direction + float NdotV; // cos angle between normal and view direction + float NdotH; // cos angle between normal and half vector + float LdotH; // cos angle between light direction and half vector + float VdotH; // cos angle between view direction and half vector + float perceptualRoughness; // roughness value, as authored by the model creator (input to shader) + float metalness; // metallic value at the surface + vec3 reflectance0; // full reflectance color (normal incidence angle) + vec3 reflectance90; // reflectance color at grazing angle + float alphaRoughness; // roughness mapped to a more linear change in the roughness (proposed by [2]) + vec3 diffuseColor; // color contribution from diffuse lighting + vec3 specularColor; // color contribution from specular lighting +}; + + +vec3 applyNormalMap(vec3 geomnor, vec3 normap) { + normap = normap * 2.0 - 1.0; + vec3 up = normalize(vec3(0.001, 1, 0.001)); + vec3 surftan = normalize(cross(geomnor, up)); + vec3 surfbinor = cross(geomnor, surftan); + return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor; +} + +const float M_PI = 3.141592653589793; +const float c_MinRoughness = 0.04; + + +vec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection) +{ + float mipCount = 9.0; // resolution of 512x512 + 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; +// #else + vec3 specularLight = texture(u_SpecularEnvSampler, reflection).rgb; +// #endif + + vec3 diffuse = diffuseLight * pbrInputs.diffuseColor; + vec3 specular = specularLight * (pbrInputs.specularColor * brdf.x + brdf.y); + + // // For presentation, this allows us to disable IBL terms + // diffuse *= u_ScaleIBLAmbient.x; + // specular *= u_ScaleIBLAmbient.y; + + return diffuse + specular; +} + +// Basic Lambertian diffuse +// Implementation from Lambert's Photometria https://archive.org/details/lambertsphotome00lambgoog +// See also [1], Equation 1 +vec3 diffuse(PBRInfo pbrInputs) +{ + return pbrInputs.diffuseColor / M_PI; +} + + +// The following equation models the Fresnel reflectance term of the spec equation (aka F()) +// Implementation of fresnel from [4], Equation 15 +vec3 specularReflection(PBRInfo pbrInputs) +{ + return pbrInputs.reflectance0 + (pbrInputs.reflectance90 - pbrInputs.reflectance0) * pow(clamp(1.0 - pbrInputs.VdotH, 0.0, 1.0), 5.0); +} + + +// This calculates the specular geometric attenuation (aka G()), +// where rougher material will reflect less light back to the viewer. +// This implementation is based on [1] Equation 4, and we adopt their modifications to +// alphaRoughness as input as originally proposed in [2]. +float geometricOcclusion(PBRInfo pbrInputs) +{ + float NdotL = pbrInputs.NdotL; + float NdotV = pbrInputs.NdotV; + float r = pbrInputs.alphaRoughness; + + float attenuationL = 2.0 * NdotL / (NdotL + sqrt(r * r + (1.0 - r * r) * (NdotL * NdotL))); + float attenuationV = 2.0 * NdotV / (NdotV + sqrt(r * r + (1.0 - r * r) * (NdotV * NdotV))); + return attenuationL * attenuationV; +} + + +// The following equation(s) model the distribution of microfacet normals across the area being drawn (aka D()) +// Implementation from "Average Irregularity Representation of a Roughened Surface for Ray Reflection" by T. S. Trowbridge, and K. P. Reitz +// Follows the distribution function recommended in the SIGGRAPH 2013 course notes from EPIC Games [1], Equation 3. +float microfacetDistribution(PBRInfo pbrInputs) +{ + float roughnessSq = pbrInputs.alphaRoughness * pbrInputs.alphaRoughness; + float f = (pbrInputs.NdotH * roughnessSq - pbrInputs.NdotH) * pbrInputs.NdotH + 1.0; + return roughnessSq / (M_PI * f * f); +} + + + + + + +void main() +{ + float perceptualRoughness = u_roughnessFactor; + float metallic = u_metallicFactor; + +// #ifdef HAS_METALROUGHNESSMAP + // Roughness is stored in the 'g' channel, metallic is stored in the 'b' channel. + // This layout intentionally reserves the 'r' channel for (optional) occlusion map data + vec4 mrSample = texture(u_metallicRoughnessTexture, v_uv); + perceptualRoughness = mrSample.g * perceptualRoughness; + metallic = mrSample.b * metallic; +// #endif + perceptualRoughness = clamp(perceptualRoughness, c_MinRoughness, 1.0); + metallic = clamp(metallic, 0.0, 1.0); + // Roughness is authored as perceptual roughness; as is convention, + // convert to material roughness by squaring the perceptual roughness [2]. + float alphaRoughness = perceptualRoughness * perceptualRoughness; + + + // The albedo may be defined from a base texture or a flat color +// #ifdef HAS_BASECOLORMAP + vec4 baseColor = texture(u_baseColorTexture, v_uv) * u_baseColorFactor; +// #else + // vec4 baseColor = u_baseColorFactor; +// #endif + + + + vec3 f0 = vec3(0.04); + vec3 diffuseColor = baseColor.rgb * (vec3(1.0) - f0); + diffuseColor *= 1.0 - metallic; + vec3 specularColor = mix(f0, baseColor.rgb, metallic); + + // Compute reflectance. + float reflectance = max(max(specularColor.r, specularColor.g), specularColor.b); + + + // For typical incident reflectance range (between 4% to 100%) set the grazing reflectance to 100% for typical fresnel effect. + // For very low reflectance range on highly diffuse objects (below 4%), incrementally reduce grazing reflecance to 0%. + float reflectance90 = clamp(reflectance * 25.0, 0.0, 1.0); + vec3 specularEnvironmentR0 = specularColor.rgb; + vec3 specularEnvironmentR90 = vec3(1.0, 1.0, 1.0) * reflectance90; + + + // vec3 n = getNormal(); // normal at surface point + vec3 n = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb ); + vec3 v = vec3( 0.0, 0.0, 1.0 ); // Vector from surface point to camera + // vec3 l = normalize(u_LightDirection); // Vector from surface point to light + vec3 l = vec3( 0.6, 0.8, 0.0 ); // Vector from surface point to light + vec3 h = normalize(l+v); // Half vector between both l and v + vec3 reflection = -normalize(reflect(v, n)); + + float NdotL = clamp(dot(n, l), 0.001, 1.0); + float NdotV = abs(dot(n, v)) + 0.001; + float NdotH = clamp(dot(n, h), 0.0, 1.0); + float LdotH = clamp(dot(l, h), 0.0, 1.0); + float VdotH = clamp(dot(v, h), 0.0, 1.0); + + PBRInfo pbrInputs = PBRInfo( + NdotL, + NdotV, + NdotH, + LdotH, + VdotH, + perceptualRoughness, + metallic, + specularEnvironmentR0, + specularEnvironmentR90, + alphaRoughness, + diffuseColor, + specularColor + ); + + // Calculate the shading terms for the microfacet specular shading model + vec3 F = specularReflection(pbrInputs); + float G = geometricOcclusion(pbrInputs); + float D = microfacetDistribution(pbrInputs); + + // Calculation of analytical lighting contribution + vec3 diffuseContrib = (1.0 - F) * diffuse(pbrInputs); + vec3 specContrib = F * G * D / (4.0 * NdotL * NdotV); + // vec3 color = NdotL * u_LightColor * (diffuseContrib + specContrib); + vec3 color = NdotL * (diffuseContrib + specContrib); // assume light color vec3(1, 1, 1) + + // Calculate lighting contribution from image based lighting source (IBL) +// #ifdef USE_IBL + color += getIBLContribution(pbrInputs, n, reflection); +// #endif + + + // Apply optional PBR terms for additional (optional) shading +// #ifdef HAS_OCCLUSIONMAP + float ao = texture(u_occlusionTexture, v_uv).r; + color = mix(color, color * ao, u_occlusionStrength); +// #endif + +// #ifdef HAS_EMISSIVEMAP + vec3 emissive = texture(u_emissiveTexture, v_uv).rgb * u_emissiveFactor; + color += emissive; +// #endif + + // // This section uses mix to override final color for reference app visualization + // // of various parameters in the lighting equation. + // color = mix(color, F, u_ScaleFGDSpec.x); + // color = mix(color, vec3(G), u_ScaleFGDSpec.y); + // color = mix(color, vec3(D), u_ScaleFGDSpec.z); + // color = mix(color, specContrib, u_ScaleFGDSpec.w); + + // color = mix(color, diffuseContrib, u_ScaleDiffBaseMR.x); + // color = mix(color, baseColor.rgb, u_ScaleDiffBaseMR.y); + // color = mix(color, vec3(metallic), u_ScaleDiffBaseMR.z); + // color = mix(color, vec3(perceptualRoughness), u_ScaleDiffBaseMR.w); + + frag_color = vec4(color, baseColor.a); +} \ No newline at end of file diff --git a/src/shaders/vs-pbr.glsl b/src/shaders/vs-pbr.glsl index 9915146..cdd96c8 100644 --- a/src/shaders/vs-pbr.glsl +++ b/src/shaders/vs-pbr.glsl @@ -12,6 +12,7 @@ uniform mat4 u_MVNormal; layout(location = POSITION_LOCATION) in vec3 position; layout(location = NORMAL_LOCATION) in vec3 normal; layout(location = TEXCOORD_0_LOCATION) in vec2 uv; +// TODO: tangents out vec3 v_normal; out vec2 v_uv; diff --git a/textures/brdfLUT.png b/textures/brdfLUT.png new file mode 100644 index 0000000000000000000000000000000000000000..5f6541b326edd0cb1f971cbf45a4ca2aaa926dfa GIT binary patch literal 16623 zcmV*IKxe;+P)hD9Rt7}7KB+T+n&sI$h z77eybX5<4Npvflz&mhMEEg znerh+m_1E$K7Ir^JA{5c$pNfXPu6XKJ_TYjxM)Id1Z|d)^GYovVfIMV&FY4MF5Ae? z3}qHK0>D!4aRA}SMwN^}TcL!!=N5x|HsThhnb{?lchFCAHZh>?ve9(2s>>s;JyRYe z3A_jZTIGv@RSqB+IjC}&<{_Q}ae6&qj-ZvRa@M%Lj6c!Yi?YXuXR&VfH6j3b^$rL0 zP)JvyR^d~uXPo*a6u`-aR^4_o2p}B9mD6z`8132WCk!4h`SE200I%+G;3`%Zq^p3v zF9aX!O9H}N=+i;KlMRUH;(+YsSl+B|80caeY`g!PTsq*VD|;M3*afR(@b`rt5DHM) z#5{Ym6)Q6BI~`p1-Hij!RyPbxjV_-K2thdt+;nA+0|>jox1?3@5n$~LZ3s}~g9jPc z?6%{_?l?%tfsa-<43ZkNe2o&<8UXnWXJ(183vv+vd<0lwYD0k8N(dI2wYO|32zY(- z@)(N80b%*ks;QZlXR&UY-RH?cad3wNVoqKcYJeOWuBwx=ulak=%o^MrL@Q$%R^NPg z50rYed^H|fSGP5~Bzt|${X;H-cR7G`7bIQ2X;y$Rk_Z8OwAc*R-l*Bd?!E%|plQ;j zfCejVIj!Ee|ET7XvNWvP2HoO-9K`Q}*;C$_8zxMX0;a7TUXKTXr6xBHv|weo&Z=0k ze^8SzpL72mPPAAL!qz!}jPZH<*;C#*8NwqyQ^!AP&E-OY0W6z4O$I>Q3;1X#*w&ck zCajmbn?U!9a};8c1NI=+6&TNnA@q4NC|5mo{CRgy529rdKgG1hHxj+3O+i)k)zuAy zq{dU~a;NWxu~)Lkp<@mpeP9l!pf+ByNCt2gLD_hMX)l$EV7gZ@0xTP|DQ_vkO1zwI zg|-JPUq=5UNY%yj^ug_Pm&tMHBnOZ_G}`A!SF~BsTag5oo8NK#T!~pOq({&)oTj)M zH;pklOU=IKXjtr$)OgD87mpZbiH<{mf&(B`B%TkL`eD#mq??2QJ|L7l_3NK={9Z@z zzN6!8K@5MiJDR2P+XF>h!U*tT4ghP<2Vfd(ea!_4xuH zJkY(S14(>8$^j?@n_hex0ibS*wBygxfXvMsM9XlR%+{rovi_*GA{!wvFL-*o)i z(lho-U>r1U`|`LW{k(KJ#3(5aByG4?_9B1;Xh8vR=L-O3bO&h#TxC{n_sBc`JhDB_ z)YA`5IuTk@Zs;E`Q*LY<9Cq7xIbaCk7XWk@VFPPTY+KG`Y7fXP%QaI?K{c;gGB9mC zrP=*iecW`vWH{=3;4(s*Rjy4`GsNT`oZk~K*(Dg zu-`8CM|+9`AfM*KQ3&^bH#h(#Xb@+9yTL{Iy0fq32!t# zvHMM*E*m~Rwq(BwG39{1n)ABJ0V$9!Q)6gl^N89YDZ5Q-+gI1M8K8pU`r+9uTtGWLFo10M*brgPY~uwuwtmX^s$d zNw#JTGGznSd3&gL9^RMYGZWn4fb2*(K*x>*1!9jgFy$f>gJ;})xG~x_QwJY-cdd`@ z`^0+x*zud=Q-d#{A8i^Nm|p5aJ08aU;&g~?O`3yFV+HtV8yrBmH;P!!tp~iSFb1EM zZguUIfl!*3u{}&6wzq5B@tZfwkFZf5aqY=+^!_HwV-7@a{!tDbbyDI9qKch|MgPPR>} zwgHJw!3d_tQ<`_o^g@W>DY%p9f870xvP}cpofa`v_#o^a2dE9!IRI{B2szrAGT^QU zys8+-HBjHvr3R)ZR%(5|bu&`xZd3w1j@bu;9sKwAI&C)lhEs4!p7_lg_R8MbuSQ~l7znJ z;R2{laS#4RnHb3oBJ8)(-*5C32gIe@_9FCJ63dIr(p>T_H|b3Q?u7V##3uEeu7z7i=W#pr=>bCdVAnLv=e z!~rOKsU#qtXFj?*d!P&cRxXnPtSs>%?y_yUist){UzZPsf_#zNpqM5+>DFEXj%iC! zls67ArD@sv7w*Vor!K3l!!!bbLm?uAwHSaxQUKW{G-oW)JjD{4KY{)}9sE8T$S1)A z$6zT9D-LZvhDZar+oNLm0()7EfDitI-c;2}++%0&=?iH#7X#EjaQOl37C^r;tl8y5 z=W6X?;Hz5NCUgaL$X#SK70({u3RPy_g9zext=GPYg*9_Zz; z>C9t;EjPNB$utTviO zN#cIh)4O+^ap3#V|1G7ZKpZg)j=?+SH(d;Y|9F99ESh+RymFXXa0WgNJOeLp@qn1( zgY|Yjg?s%uY-9I-2=vcF4#V+Ho?a%-etP(M`UtGZ#m1Bak&OaekOfUNDi<=%gkHCb zH~>X>U6Q!pPKW4Z^nm|h=>^7vE_S_ynMO?b>{nduNSaMFFjJva}) z#Pss}{j>`#FikTY^MNjWGU!&%>{-xz5qdIC5ZixK`2r#PE#%LlV1{)po*rcibuVFa zhXY820$6)Hk^AR;4ZUR#$A+2lw;;)%?BIW9`NaIEV;*LH(kt%q9tY^u)4S=uT4O*6 zc@7{-hoGzcmBInB4J@8|LA|+-yReIR4>#bR?3F6NI|w}WLN>-}yFld8FGTJR zKKgs#g8?7MuKA$)vBAIC zH*a71VYps5Qxw|6UKR&G7UUd=7}fCi-fDY6!HJ3fn!WSPu0~PXV*Td@pi??dp z9`KpM-@pe){dC8qrI7-`$=ACS=lybQD-?J`F}^vzMi*=_CZ1kBu(W+J4&?H&%rH+Gf5>_N#-_tqacYO{yL{8%yBKuvX9pkNss}K0 zeW@3t5i^%3YQoESUgSW88-J(`K0K1dZ@chM`0x8&j;lpy&^iuaVkY#4&km5myBL`m zY?649q`z8^pK%r>X0=@I#Q~FtS^Fm}gEVXdd2#FNfKLrIQlPV@y?*MUm_>{T>(2jf zq*u&rG$KV)2tTkOy%BHFJo;sdAMrLude-t2xypAO`3A&ey<7w%ToUl+tkQGm_T=K< zzzUNkgh7V6{1Ddijl1X0lO>r5Wgz~D&1w+%j>EoV?59A&B$Ey$mjqEhu7*{WfCFAB z%^*f>H|u4B@I4M}XHW?e-tpoYgH_;u&X<1(`Yi?0`#A~3+vnl@w8!28%AK53!(1H^ z=I-LR&ONgQ&w7IcL1Sisc&Ke0$F0GAKjfiJ{mo&gX7Wq%-DJKIWS)of{Q8U=hKZl; z%v;HD;w{MTS%qWf%~yLp>y>YI{HW{A=`b#1N)^LXWxbbeGs~$y1@y%HA6I^w4=n|vDv{WjtiUcY9OV^)^svqyO%A{tAQ)Lq zY!A(WRkGLgzC~1KY1^vaYx;EhvD9~a{8)3y4<_UI*MkGgh2Ub{{kDMjoi#onePPR6 znKyEwBy%!fx_v4kS=E1s03SvFp2m6*_8ATcy^VE~GgdurMa}`s*mi>hW_#Rg&GA!x zGPU#dJIdM2e=m+VG&}_oh%}R*3@0Nm3YShdLn7Tc0EnAn|m`~tYYna2Ds^ouI{ zKfz?1{vo8>uH zbj=){Y5m{;8<#7lE_Njsie0Ioc=0pCUU?24G3}$gaZ}6Mg zbq74v&d(5;U5a7k6yG2@NE`&_;GVHGMFSPhKI=QJEa;+U@{qNl*q?Vg9)+pGAkF~3EF%=!T61U{^qUE>cSczpZwTg8(86hq1)qt-&!(# z9hk~Ntb5HPK&xxotbu;rE8hX-&B624JNM1^bW5TMpJ z;5I=V@Yv!;fY4?E0ahsc6imaU>p|2$#hiFb>iYoIkVWF|tr?630JZ0X*f;g{9@fW@ z2@bf}jayHXIFhK*%qCkCvg<+T{oBF!1IIbE?+=y)na!f$I9-%P!Gc$g8)E=(9N#xj zTZQw>W;k)o(Vs+UpJIhGw?{zs1>pWJ7F`j5AzOHEAN020UDr&~p&SR`fG_T~jPKyS z>q>F=rTv`8v9-|T)AbQ_KF+A1dVu8dweog<7$m_kBKmuFKvC(_Z{ED8;(DEQS#!9$yl~%IOygVtr9fuJguh zbH)Lyd8367=^h7eLNGg2Vv?W0>*J%TC&3m6y6^Wqz1%6H#$qUQ1XH6%?#fjTxJTcn z520rMJL}*bvVFv-`axjhj-Qs3P0vOQT0KUsr9d_ZT2o&!_byj11Vw{jg#Z;v#58zE zS#liE&R(0(z4+ACEjswPN(u850Qy77@F16jY^6XH+zRM%I;68B=HsCl1x_1%3sVE2 zpupDe-1(}=M_nAnV^KyoM4#J#ofy}|;oB20eRESz*m&N{y= z_Ba54rl6X+K1Fs*ct$!DtN{vu zFi<#}TX1&>BY;kA`%oJYUqHhWXe{DoVY(g!o{a`~(7BD~jaxe@P(|gwzh^8uM4WQ4 z1`shs=Q(cX153G^_7qFM;OwW^od${x$9abXi^ks}fQQK66&4PLUCIG88Yqum2_-~2 z6t4mFF`>!taM39R8c*5u#nQX`KVcj&H&~_ycjSF#E(koxkZt4NC?7I4=YHKwftU>( zGcyiAX*Lj_4h|))&-!v7Ra5?K@?^?7OZjQ6n=kfRl7C1R)v*Y!E&H#0NnnDT{vZks z1%NsQZF&0W%Ld}6TvIGF`O0RNMd?l0xi}7bacV^$@FH|J;htgR7iqI?{2>`*5p22t zYci#p!0L%B=jvuTe4HRR&c0M#^6{)|F!D$epeDa0k8NRDda@qt0 ztc|p%0I(j)Dl87!N_gf?Q-(M;u6<^-En%beW|t*{kIKjJ--SV+3LW|osXvh+QXoPP zF%-LnSH&_bl4gbL1!3a-mH?NtmCDEkI|cuU7(f{RtMZ@T{3u{01z2Y zA;2Xc8fV=DKm zfx(i^@5TM^B*5jrJLWocxKN3w*Uy6igCzY{BOOvrQ4-(oQv9lXK|wa9yATa~PkBc{ zj47ljH>ORZdwj3eDFt1YdVK-+zmoupieolRoyUnPOyyB6*ZWEWJB z^qT2P#Mea8|>8>`G*4nfC?H$SX&c0qaCnquDj!gLJZGQOF0>I1V5_B}t@w;($g* zm|$1EpUJ`Zly{7^y&VC}ZBViQ!#DsHDB4hG5n-WtHegNk=s!IHT7690Rjw)h)muE7 zAk4$`LmV(Clc7gezqJfl6*gM;l=o#j0zj>X?L~0wg24UzSicZMWN@G(PI#sq00%TT zF!61|R01)#NR6*|%qG*DF(GfTEo`)I8)S@wCL;ojbuirzO)P?8x_@FRk0Zwo!%dy75KK&qYT?~o*qJW>DGr3FO&Y9Kzmf&TsQntgr}BsZ z)W?r32#gF+D*+~eWldUHr~w9xhF;|QO}>(TNJg<2lwKAGxsXi>VvtuR0UdJ#@j5|` z;M#=Mj|zLrB?BR6`u6J4k2iO)R+r{S1Fvv9rX`xys#_wyFj+)HiM z!mG4Zz*N398hJ}DUtI$zXRfPFdsS0Nnr*Y<5ra%$QzpL+3bGhb9OyX`T`p7T>%*iB z?gc=@ijVsa*=mK0ZWb&F3OGZ2$IqxpW}?Bp1owWU1rW#FNN<=v4*gHS{iZUIGiKWU zU=Cj7KYkVjf_N=3$QFiOoer_opKSZoh9o2JZwwq&pAv!Nmq^{?fC+a;xf%qrX6sKC zruuDRqjjqMkPLPhuAK(0K^BBz1D+0o7S0YYjliK!pJM=xo9Gyg_&Rsr%0Wn-ij`CSwy@DURo;}nrh}byFyjDN zf&^zBtV01{@S($6xO~t33#{8q;dK79nHqrwqT(A!v?aEQ=6Y4Nui^S6S)J-*A+P)z z?gI{-)$xCXiIo6I1YpYpvHVrrKJ+PX$C;h^v_ZN&+`sboMmltZ0~&Cw$piF>e$T+~ zVqTMGnZfgSNmi$NPx%xXGIA2=F$WHv>d-jQy|vDQ&;>8=C&ZwE!hpVZ{{^Kla|NTO zGQB&IDUy1VcKo6`aFAL4CRs5H0!GuyHKR;clfp*pRGE?UK=-QGe~>Y}I{?^g0QMNT zk%5vVUI5TUUqV0U{yljb7R(LM!p-s=2*77I%@(*p(>C1iGa=9i#!IbB1~+A|%KoQ# z2KxRdk|JEf*^4fJNAhDqzqfYi-`9P>MBizg5hEIVFU_Dl38@ zFx@E z4g~1e&%!z`2hO;lp?~4H3_+{}+$?_zcgvvAnZW3q;($nXti=GUwmW8Ey@2M$V-bOY zSKTn6!c@6r5Xf;gKf3blg^Y)vQq6rZ32Gb=s?~ z0W|b6{s4)7b{?*y&=NY(abmg)7{nL}kK)5MQ~eCM3sWVRV-9recKn&3@7*VPQHXex zC+3w^cfU;^+f4O=LEP&@@=`Sz zPZ{R-RHht=K6q|lf|y{jg(2RdL<;(8gGZ`UJr(k;8}dh+D&$*}@}AjhHB5oL2tc!cx)in?KN`NfP^?fefNnk&_E9dE1RTL|a8KppECAeO z33iTTSIK0HgKQ04@0wAX%<-z*dQ;d_3VE+7MtNY+{)d=w8Gyb8M5@%~_iE`?3=P}z zSD^sTlGhNLeVa!_j3o|$b3n@!*#-i5lf?85#M{^0!Ox}EygnAD%A0b&NmosSV=Mqn z4v;fKauG~WPIDECMRTzWxS`;3=Zz{6zG$5$jbgp z$N}2gv94tSUn)nSSLaM6;;n1Ygq5bL{)a<95AMJ+qbcJwC^!u&-WCVO6^rN>yPOpL zdS6H(o-UC+_kYfzaHZw|jS_{}U-%>P`23XPr?SllC1k1_*JO2D9}63;NjcxNS{0gu z7kp%@pyO$7j+!!2aEezJA!Ay#hi-f@I7cz~ZY~86+ zn*p-=o1tIB)^+HA2lu_I2;eOP__t(?M_^X9aDQ({04@0bzRrBSr_sHbhTo+)i4ZuN z1EnDddMLBCYcY`bQN+jK-h+D*>wCyfRxJVmZ}BjgF96^#f-jFw&@atkuYh~@Lj65^ z8jx84_#C*v7ie(#>_S`VrxiMWD#v^n)!f1$xW?6+K;P!TRJkGR>eOJ`{Zx`gFz^Q4 zj0gb80^lq@`g?2XE7J_pf7E}zS{$y_MoGmrv4$;OK4E6q`$u}MZ8nWnAzM60votr2@A=pDR}aoE*tXA z>Z-v}%jNq;=JV!p00cR13e=Q6)#aJVqfHCOfa}&ZidCe%3LSA_X;*Zc^!@$%yi(r)kL9K)16iBZJ*aD!D!9aPlrz_(q z+tCp30m0&cM!cB_X*XX~N7_2fETtzvD=kXcSI5$;YQ35NOwpNF26Db>TD_?`=mJ2; z0b>PRt--v_pYu-op;#FMo_dP%5efp(Q@vwGAzrBeR@|79q4z7~mC;tl5bz)%PEeC~ z-y_4cNnB&)RG(2kVl3o*)1HB;5z6CDo&>-7M$nr;zn=)YiWvk*(@6u(ioWwh^Zs)X zdUiUG^3|%OM4_+hG88}`$`1ECK_GrWcJG?3#)79bY^tMQk#AO$8gHnP0(B;wYu`5s z0ub)s$Gt>qM_^BZ&Kq-Q-#If)tM))2RXMmBB{*B?yT+i;gMbEiAb@v)ZxiH2v2v<6 z1y31Nzku}(CQL2W7h(tpXd(pZC|j8Y0jTw^SQw<>4u$@Z5;W&w;O5owX80LVQDlf$ z0zupv)dSE0NC{UtKA zZBViq`tDbf|I{`>j{_BQ@k$y<3Z#%7JVt;zXKE~kIh0G`)5x)fy$4n`4gylsx_0_a z&@XISRhT8Ov2v<6g{e}=x;izu**&S5Dq9M~H$z1nfE5JLpK6^&;2s0Y17khcx4LAN z?OOD*fx^8(t*DF$Dq0+(sB6w+_xIw}q(^RW?nlo^pd5+d~QEQD3NUk^=ElK(!}7 zm}9XtGh@fI=l8gVWBWft?SPnH#loP_(KsI%E9e{0%{b_#rJ{uF#cgO4w35i+edma8 zea+TnH7QJ$LY`JlP0}pcF*65KdDMbh+AdJ#p`ZXwMw7)r1H)$4E^behHW{p(M`)M_ zvb_G34;1wCWrOt)VDzQjFj+xlA(+)b39Tfo@GPf#Px%P+A7sKO`r=#zybJnX(CPB! zQ!tF{C3)kKXaLyfCNyLd+)>RI`gImm96q2yhyAIwvOx?E5f|~ZEGSbAt{LThLCCCX z?Gxmyre?|VDdiOb`qKb&9gL0y5(?}+P;ORe)ej@4<2O<6$s&wUEYjC3mH~RTFibT) zNNfCzxG(y(B1}d1e_P za-KdQCx$TSX6(<*k?3epA%c%Xt3nZ0U))8Yznl2D2RCMa z<_@VgfK3T-1N~$`2$^bdjg?b96{bod=bLmjsqvJ7esvt$I*$Ml{*mVEW-&7#(znNi zCAbgw4~hO_DPg5X9nFG867HN8^!1BYp#%}AtdD#e=wCSl7b{Z&U&Wd<5Y=raY-?iu zUKi1N)PnlL8+gB+2+(acvcrV|y_u2j)BHz_#IqWz?8GY;F+~1z$zW9|XD_*@k|M?j z4RP}jghdHm&0syr0k0Yh8!{mGg%Mc7C`ssV;C`d&s67IdR0QaNE*!NKGxScC_Yxz> z61ab>%2ov!;HIu!M8Tk z50HJQ^?3I+Kp7_>>y3wg~QBEG85%=Jl!>76c`jleX5uat&bldnkrb zB^@7CDu)?m1-Fc^8D&!Nl%7o>>*|A=SRXfK3`&mx{jc_e&}~f&q*9&W_Qo3btct@w z=Dk$s;(;Cm{ntv@PlWVJck)7

?(cXE=Dj8eC(g)(1BCWnFzxv!~A+bep5+KjUct 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