From 58b9d612b674209b45ccd11aa68e4c637b9605cc Mon Sep 17 00:00:00 2001 From: "Nicholas \"Indy\" Ray" Date: Wed, 20 Jul 2016 00:59:38 -0700 Subject: [PATCH 1/4] Making the ground use mtlx, and the Disney Principled shader. --- data/Materials/ground.mtlx | 30 ++++++++++++++++++++++++++++++ shaders/surface_frag.glsl | 4 ++++ shaders/surface_vert.glsl | 8 +++++++- webgl/main.js | 17 +++++++++++------ 4 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 data/Materials/ground.mtlx diff --git a/data/Materials/ground.mtlx b/data/Materials/ground.mtlx new file mode 100644 index 0000000..c9dded4 --- /dev/null +++ b/data/Materials/ground.mtlx @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/shaders/surface_frag.glsl b/shaders/surface_frag.glsl index 4af593c..c36e936 100644 --- a/shaders/surface_frag.glsl +++ b/shaders/surface_frag.glsl @@ -27,9 +27,11 @@ struct DirectionalLight float shadowRadius; }; +#if NUM_DIR_LIGHTS > 0 uniform DirectionalLight directionalLights[NUM_DIR_LIGHTS]; uniform sampler2D directionalShadowMap[NUM_DIR_LIGHTS]; varying vec4 vDirectionalShadowCoord[NUM_DIR_LIGHTS]; +#endif //THREE.js const float PackUpscale = 256. / 255.;const float UnpackDownscale = 255. / 256.; @@ -117,6 +119,7 @@ void main() vec3 V = vec3(0.00, 0.00, 1.00); +#if NUM_DIR_LIGHTS > 0 for(int i = 0; i < NUM_DIR_LIGHTS; i++) { vec3 lightVector = normalize(directionalLights[i].direction); vec3 l = BRDF(lightVector, V, nz, nx, ny) * directionalLights[i].color * dot(lightVector, nz); @@ -125,6 +128,7 @@ void main() } color += l; } +#endif // IBL is done in world space. nz = normalize(vWorldNormal); diff --git a/shaders/surface_vert.glsl b/shaders/surface_vert.glsl index 10388a8..b2897ea 100644 --- a/shaders/surface_vert.glsl +++ b/shaders/surface_vert.glsl @@ -11,8 +11,10 @@ varying vec3 vWorldPos; varying vec4 vScreenPos; varying vec3 vReflect; +#if NUM_DIR_LIGHTS > 0 uniform mat4 directionalShadowMatrix[NUM_DIR_LIGHTS]; varying vec4 vDirectionalShadowCoord[NUM_DIR_LIGHTS]; +#endif void main() { @@ -29,5 +31,9 @@ void main() vReflect = reflect(cameraToVertex, vWorldNormal); gl_Position = vScreenPos = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - vDirectionalShadowCoord[0] = directionalShadowMatrix[0] * vec4(vWorldPos, 1.0); +#if NUM_DIR_LIGHTS > 0 + for(int i = 0; i < NUM_DIR_LIGHTS; i++) { + vDirectionalShadowCoord[i] = directionalShadowMatrix[i] * vec4(vWorldPos, 1.0); + } +#endif } diff --git a/webgl/main.js b/webgl/main.js index b17b3af..e33f2b1 100644 --- a/webgl/main.js +++ b/webgl/main.js @@ -292,11 +292,17 @@ function init() { updateRender(); }); - var ground = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshStandardMaterial({color: 0x999999, roughness: 1.0})); - ground.rotateX(-Math.PI / 2.0); - ground.receiveShadow = true; - scene.add(ground); - ground.material.envMap = IBL; + create_materialx_shadermaterial("/data/Materials/ground.mtlx", "default", null, function(mtl) { + updateMaterials.push(mtl); + //addGuiMaterial(mtl, "Ground"); + var groundGeo = new THREE.PlaneBufferGeometry(200, 200, 1, 1); + var ground = new THREE.Mesh(groundGeo, mtl); + ground.rotateX(-Math.PI / 2.0); + ground.receiveShadow = true; + THREE.BufferGeometryUtils.computeTangents(ground.geometry); + scene.add(ground); + //gui.add(ground, 'visible').onChange(uc); + }); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); @@ -390,7 +396,6 @@ function init() { { gui = new dat.GUI(); gui.add(window, 'maxAccum').onChange(continueRender); - gui.add(ground, 'visible').onChange(uc); gui.add(renderer, 'toneMappingExposure').min(0.0).step(0.01).onChange(uc); var ambGui = gui.addFolder('Ambient'); addColor(ambGui, ambient.color, 'color'); From 1acb1f06a1c4d396b858c3f9d44415e691d1f3fc Mon Sep 17 00:00:00 2001 From: "Nicholas \"Indy\" Ray" Date: Wed, 20 Jul 2016 01:19:43 -0700 Subject: [PATCH 2/4] Cleaning up debug GUI a bit. --- webgl/main.js | 36 +++++++++++++++++++++++++----------- webgl/materialx.js | 1 + 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/webgl/main.js b/webgl/main.js index e33f2b1..73254b5 100644 --- a/webgl/main.js +++ b/webgl/main.js @@ -17,6 +17,8 @@ var mouseX = 0; var mouseY = 0; var gui; +var lightGui; +var sceneGui; var maxAccum = 2048; var accum = 0; @@ -193,7 +195,6 @@ function LoadMesh(objPath, mtlxPath, cb) { } for(var mtl in mtls) { updateMaterials.push(mtls[mtl]); - addGuiMaterial(mtls[mtl], mtl); } object.traverse(function(child) { @@ -221,6 +222,7 @@ function LoadMesh(objPath, mtlxPath, cb) { child.receiveShadow = true; } }); + addGuiObject(object, objPath); cb(object); }); }); @@ -294,14 +296,13 @@ function init() { create_materialx_shadermaterial("/data/Materials/ground.mtlx", "default", null, function(mtl) { updateMaterials.push(mtl); - //addGuiMaterial(mtl, "Ground"); var groundGeo = new THREE.PlaneBufferGeometry(200, 200, 1, 1); var ground = new THREE.Mesh(groundGeo, mtl); ground.rotateX(-Math.PI / 2.0); ground.receiveShadow = true; THREE.BufferGeometryUtils.computeTangents(ground.geometry); scene.add(ground); - //gui.add(ground, 'visible').onChange(uc); + addGuiObject(ground, "Ground"); }); renderer = new THREE.WebGLRenderer({antialias: true}); @@ -359,9 +360,7 @@ function init() { var ambient = new THREE.AmbientLight(0x101030); scene.add(ambient); - function uc(e) { - updateRender(); - } + uc = updateRender; function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); @@ -377,12 +376,12 @@ function init() { var directionalLight = new THREE.DirectionalLight(0xffeedd); updateLights.push(directionalLight); directionalLight.position.set(-0.69, 0.48, 0.63); - directionalLight.castShadow = false; + directionalLight.castShadow = true; directionalLight.shadow.mapSize.x = 2048; directionalLight.shadow.mapSize.y = 2048; MatchLightToBounds(directionalLight, focusBounds); scene.add(directionalLight); - var dirGui = gui.addFolder(name); + var dirGui = lightGui.addFolder(name); addColor(dirGui, directionalLight.color, 'color'); dirGui.add(directionalLight, 'intensity').min(0.0).step(0.01).onChange(uc); dirGui.add(directionalLight, 'castShadow').onChange(uc); @@ -397,7 +396,8 @@ function init() { gui = new dat.GUI(); gui.add(window, 'maxAccum').onChange(continueRender); gui.add(renderer, 'toneMappingExposure').min(0.0).step(0.01).onChange(uc); - var ambGui = gui.addFolder('Ambient'); + lightGui = gui.addFolder('Lighting'); + var ambGui = lightGui.addFolder('Ambient'); addColor(ambGui, ambient.color, 'color'); ambGui.add(ambient, 'intensity').min(0.0).step(0.01).onChange(uc); //ambGui.add(material, 'envMapIntensity').min(0.0).step(0.01).onChange(uc); @@ -407,9 +407,10 @@ function init() { addLight('Directional ' + nextLight++); } }; - gui.add(guiParams, 'addLight'); + lightGui.add(guiParams, 'addLight'); guiParams.addLight(); + sceneGui = gui.addFolder('Scene'); } } @@ -440,7 +441,7 @@ function addFloat(gui, parent, path, name) { return controller; } -function addGuiMaterial(mat, name) { +function addGuiMaterial(gui, mat, name) { var matGui = gui.addFolder('Material ' + name); function addUniform(uniform, name) { switch(mat.uniforms[uniform].type) { @@ -467,6 +468,19 @@ function addGuiMaterial(mat, name) { addUniform('u_clearcoatGloss', 'clearcoatGloss'); } +function addGuiObject(obj, name) { + var objGui = sceneGui.addFolder(name); + objGui.add(obj, 'visible').onChange(updateRender); + objGui.add(obj.position, 'x').onChange(updateRender); + objGui.add(obj.position, 'y').onChange(updateRender); + objGui.add(obj.position, 'z').onChange(updateRender); + obj.traverse(function(child) { + if(!!child.material) { + addGuiMaterial(objGui, child.material, child.material.name); + } + }); +} + function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/webgl/materialx.js b/webgl/materialx.js index a38fee4..a761b5b 100644 --- a/webgl/materialx.js +++ b/webgl/materialx.js @@ -371,6 +371,7 @@ if(typeof THREE !== 'undefined') { { (function(mat) { create_shadermaterial(mtls[mat], function(material) { + material.name = mat; var udim0 = null; if(!!mtls[mat].udims && mtls[mat].udims.length) { udim0 = mtls[mat].udims[0]; From 5fd25133c0214d0b13541895e613c600671d344a Mon Sep 17 00:00:00 2001 From: "Nicholas \"Indy\" Ray" Date: Wed, 20 Jul 2016 01:33:49 -0700 Subject: [PATCH 3/4] Adding rotation as an object param in gui. --- webgl/main.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/webgl/main.js b/webgl/main.js index 73254b5..46e4d7f 100644 --- a/webgl/main.js +++ b/webgl/main.js @@ -471,9 +471,14 @@ function addGuiMaterial(gui, mat, name) { function addGuiObject(obj, name) { var objGui = sceneGui.addFolder(name); objGui.add(obj, 'visible').onChange(updateRender); - objGui.add(obj.position, 'x').onChange(updateRender); - objGui.add(obj.position, 'y').onChange(updateRender); - objGui.add(obj.position, 'z').onChange(updateRender); + var posGui = objGui.addFolder("Position"); + posGui.add(obj.position, 'x').onChange(updateRender); + posGui.add(obj.position, 'y').onChange(updateRender); + posGui.add(obj.position, 'z').onChange(updateRender); + var rotGui = objGui.addFolder("Rotation"); + rotGui.add(obj.rotation, 'x', -Math.PI, Math.PI).onChange(updateRender); + rotGui.add(obj.rotation, 'y', -Math.PI, Math.PI).onChange(updateRender); + rotGui.add(obj.rotation, 'z', -Math.PI, Math.PI).onChange(updateRender); obj.traverse(function(child) { if(!!child.material) { addGuiMaterial(objGui, child.material, child.material.name); From 07b3386c2f67262a23e9704bd667bef48c7ccb83 Mon Sep 17 00:00:00 2001 From: "Nicholas \"Indy\" Ray" Date: Wed, 20 Jul 2016 01:40:52 -0700 Subject: [PATCH 4/4] Upped per-frame IBL sample count to speed up convergance time. --- shaders/surface_frag.glsl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shaders/surface_frag.glsl b/shaders/surface_frag.glsl index c36e936..d905507 100644 --- a/shaders/surface_frag.glsl +++ b/shaders/surface_frag.glsl @@ -137,7 +137,7 @@ void main() V = normalize(cameraPosition - vWorldPos); - const int numSamples = 1; + const int numSamples = 32; for(int s = 0; s < numSamples; s++) { vec2 r = rand2(vScreenPos.xy + vec2(float(s) / 17.456, instRand)); r = hash2(float(accumCount));