barcelona presentation

.gitattributes

@@ -8,3 +8,4 @@
 *.jpg binary
 *.png binary
 *.hdr binary
+*.ktx2 filter=lfs diff=lfs merge=lfs -text

.gitmodules

@@ -3,4 +3,4 @@
 	url = https://github.com/KhronosGroup/glTF-Sample-Models.git
 [submodule "assets/environments"]
 	path = assets/environments
-	url = https://github.com/ux3d/glTF-Sample-Environments.git
+	url = git@github.com:ux3d/glTF-Sample-Environments.git

src/environment.js

@@ -15,6 +15,9 @@ class gltfEnvironmentLoader
         let extension;
         switch (environment.type)
         {
+        case (ImageMimeType.KTX2):
+            extension = ".ktx2";
+            break;
         case (ImageMimeType.HDR):
             extension = ".hdr";
             break;
@@ -28,10 +31,12 @@ class gltfEnvironmentLoader
         }
 
         const imagesFolder = this.basePath + "assets/environments/" + environment.folder + "/";
-        const diffusePrefix = imagesFolder + "diffuse/diffuse_";
+        const diffusePrefix = imagesFolder + "lambertian/diffuse_";
         const diffuseSuffix = "_0" + extension;
-        const specularPrefix = imagesFolder + "specular/specular_";
+        const specularPrefix = imagesFolder + "ggx/specular_";
         const specularSuffix = "_";
+        const sheenPrefix = imagesFolder + "charlie/specular_";
+        const sheenSuffix = "_";
 
         const CubeMapSides =
         [
@@ -49,43 +54,79 @@ class gltfEnvironmentLoader
         gltf.samplers.push(new gltfSampler(WebGl.context.LINEAR, WebGl.context.LINEAR_MIPMAP_LINEAR, WebGl.context.CLAMP_TO_EDGE, WebGl.context.CLAMP_TO_EDGE, "SpecularCubeMapSampler"));
         const specularCubeSamplerIdx = gltf.samplers.length - 1;
 
+        gltf.samplers.push(new gltfSampler(WebGl.context.LINEAR, WebGl.context.LINEAR_MIPMAP_LINEAR, WebGl.context.CLAMP_TO_EDGE, WebGl.context.CLAMP_TO_EDGE, "SheenCubeMapSampler"));
+        const sheenCubeSamplerIdx = gltf.samplers.length - 1;
+
         gltf.samplers.push(new gltfSampler(WebGl.context.LINEAR, WebGl.context.LINEAR, WebGl.context.CLAMP_TO_EDGE, WebGl.context.CLAMP_TO_EDGE, "LUTSampler"));
         const lutSamplerIdx = gltf.samplers.length - 1;
 
         let imageIdx = gltf.images.length;
 
-        // u_DiffuseEnvSampler faces
-        for (const side of CubeMapSides)
-        {
-            const imagePath = diffusePrefix + side.name + diffuseSuffix;
-            const image = new gltfImage(imagePath, side.type);
-            image.mimeType = environment.type;
-            gltf.images.push(image);
-        }
-
-        // u_DiffuseEnvSampler tex
-        gltf.textures.push(new gltfTexture(diffuseCubeSamplerIdx, [imageIdx, ++imageIdx, ++imageIdx, ++imageIdx, ++imageIdx, ++imageIdx], WebGl.context.TEXTURE_CUBE_MAP));
-
-        const indices = [];
-        function addSide(basePath, side, mipLevel)
-        {
-            for (let i = 0; i < mipLevel; i++)
-            {
-                const imagePath = basePath + i + extension;
-                const image = new gltfImage(imagePath, side, i);
-                image.mimeType = environment.type;
-                gltf.images.push(image);
-                indices.push(++imageIdx);
-            }
-        }
-
-        // u_SpecularEnvSampler tex
-        for (const side of CubeMapSides)
-        {
-            addSide(specularPrefix + side.name + specularSuffix, side.type, environment.mipLevel);
-        }
-
-        gltf.textures.push(new gltfTexture(specularCubeSamplerIdx, indices, WebGl.context.TEXTURE_CUBE_MAP));
+		if (environment.type != ImageMimeType.KTX2)
+		{
+			// u_DiffuseEnvSampler faces
+			for (const side of CubeMapSides)
+			{
+				const imagePath = diffusePrefix + side.name + diffuseSuffix;
+				const image = new gltfImage(imagePath, side.type);
+				image.mimeType = environment.type;
+				gltf.images.push(image);
+			}
+
+			// u_DiffuseEnvSampler tex
+			gltf.textures.push(new gltfTexture(diffuseCubeSamplerIdx, [imageIdx, ++imageIdx, ++imageIdx, ++imageIdx, ++imageIdx, ++imageIdx], WebGl.context.TEXTURE_CUBE_MAP));
+
+			const indices = [];
+			function addSide(basePath, side, mipLevel)
+			{
+				for (let i = 0; i < mipLevel; i++)
+				{
+					const imagePath = basePath + i + extension;
+					const image = new gltfImage(imagePath, side, i);
+					image.mimeType = environment.type;
+					gltf.images.push(image);
+					indices.push(++imageIdx);
+				}
+			}
+
+			// u_SpecularEnvSampler tex
+			for (const side of CubeMapSides)
+			{
+				addSide(specularPrefix + side.name + specularSuffix, side.type, environment.mipLevel);
+			}
+
+			gltf.textures.push(new gltfTexture(specularCubeSamplerIdx, indices, WebGl.context.TEXTURE_CUBE_MAP));
+
+			// u_SheenEnvSampler tex
+
+			// Sheen and specualr need to have same mip level.
+
+			gltf.textures.push(new gltfTexture(sheenCubeSamplerIdx, indices, WebGl.context.TEXTURE_CUBE_MAP));
+		}
+		else
+		{
+			const lambertian = new gltfImage(this.basePath + imagesFolder + "lambertian/diffuse" + extension, WebGl.context.TEXTURE_CUBE_MAP);
+			lambertian.mimeType = ImageMimeType.KTX2;
+			gltf.images.push(lambertian);
+
+			gltf.textures.push(new gltfTexture(diffuseCubeSamplerIdx, [imageIdx], WebGl.context.TEXTURE_CUBE_MAP));			
+
+			//
+
+			const specular = new gltfImage(this.basePath + imagesFolder + "ggx/specular" + extension, WebGl.context.TEXTURE_CUBE_MAP);
+			specular.mimeType = ImageMimeType.KTX2;
+			gltf.images.push(specular);
+
+			gltf.textures.push(new gltfTexture(specularCubeSamplerIdx, [++imageIdx], WebGl.context.TEXTURE_CUBE_MAP));			
+
+			//
+
+			const sheen = new gltfImage(this.basePath + imagesFolder + "charlie/sheen" + extension, WebGl.context.TEXTURE_CUBE_MAP);
+			sheen.mimeType = ImageMimeType.KTX2;
+			gltf.images.push(sheen);
+
+			gltf.textures.push(new gltfTexture(sheenCubeSamplerIdx, [++imageIdx], WebGl.context.TEXTURE_CUBE_MAP));
+		}
 
         gltf.images.push(new gltfImage(this.basePath + "assets/images/lut_ggx.png", WebGl.context.TEXTURE_2D));
         gltf.images.push(new gltfImage(this.basePath + "assets/images/lut_charlie.png", WebGl.context.TEXTURE_2D));

src/image_based_light.js

@@ -34,7 +34,7 @@ class ImageBasedLight extends GltfObject
     {
         if (extensions.KHR_materials_sheen !== undefined)
         {
-            this.sheenEnvironmentTexture = extensions.KHR_materials_sheen.specularEnvironmentTexture;
+            this.sheenEnvironmentTexture = extensions.KHR_materials_sheen.sheenEnvironmentTexture;
         }
     }
 

src/material.js

@@ -308,30 +308,26 @@ class gltfMaterial extends GltfObject
             // https://github.com/sebavan/glTF/tree/KHR_materials_sheen/extensions/2.0/Khronos/KHR_materials_sheen
             let sheenFactor = 0.0;
             let sheenColor =  vec3.fromValues(1.0, 1.0, 1.0);
-            let sheenRoughness = 0.3;
+            let sheenRoughness = this.properties.get("u_RoughnessFactor");
             if(this.extensions.KHR_materials_sheen !== undefined)
             {
                 this.defines.push("MATERIAL_SHEEN 1");
 
-                if(this.extensions.KHR_materials_sheen.sheenFactor !== undefined)
+                if(this.extensions.KHR_materials_sheen.intensityFactor !== undefined)
                 {
-                    sheenFactor = this.extensions.KHR_materials_sheen.sheenFactor;
+                    sheenFactor = this.extensions.KHR_materials_sheen.intensityFactor;
                 }
-                if(this.extensions.KHR_materials_sheen.sheenColor !== undefined)
+                if(this.extensions.KHR_materials_sheen.colorFactor !== undefined)
                 {
-                    sheenColor = jsToGl(this.extensions.KHR_materials_sheen.sheenColor);
+                    sheenColor = jsToGl(this.extensions.KHR_materials_sheen.colorFactor);
                 }
-                if(this.extensions.KHR_materials_sheen.sheenRoughness !== undefined)
+                if (this.colorIntensityTexture !== undefined)
                 {
-                    sheenRoughness = this.extensions.KHR_materials_sheen.sheenRoughness;
-                }
-                if (this.sheenColorIntensityTexture !== undefined)
-                {
-                    this.sheenColorIntensityTexture.samplerName = "u_sheenColorIntensitySampler";
-                    this.parseTextureInfoExtensions(this.sheenColorIntensityTexture, "SheenColorIntensity");
-                    this.textures.push(this.sheenColorIntensityTexture);
+                    this.colorIntensityTexture.samplerName = "u_sheenColorIntensitySampler";
+                    this.parseTextureInfoExtensions(this.colorIntensityTexture, "SheenColorIntensity");
+                    this.textures.push(this.colorIntensityTexture);
                     this.defines.push("HAS_SHEEN_COLOR_INTENSITY_MAP 1");
-                    this.properties.set("u_sheenColorIntensityUVSet", this.sheenColorIntensityTexture.texCoord);
+                    this.properties.set("u_sheenColorIntensityUVSet", this.colorIntensityTexture.texCoord);
                 }
                 this.properties.set("u_SheenIntensityFactor", sheenFactor);
                 this.properties.set("u_SheenColorFactor", sheenColor);
@@ -426,6 +422,11 @@ class gltfMaterial extends GltfObject
             this.fromJsonClearcoat(jsonExtensions.KHR_materials_clearcoat);
         }
 
+        if(jsonExtensions.KHR_materials_sheen !== undefined)
+        {
+            this.fromJsonSheen(jsonExtensions.KHR_materials_sheen);
+        }
+
         if(jsonExtensions.KHR_materials_specular !== undefined)
         {
             this.fromJsonMetallicRoughnessSpecular(jsonExtensions.KHR_materials_specular);
@@ -490,6 +491,16 @@ class gltfMaterial extends GltfObject
         }
     }
 
+    fromJsonSheen(jsonSheen)
+    {
+        if(jsonSheen.colorIntensityTexture !== undefined)
+        {
+            const colorIntensityTexture = new gltfTextureInfo();
+            colorIntensityTexture.fromJson(jsonSheen.colorIntensityTexture);
+            this.colorIntensityTexture = colorIntensityTexture;
+        }
+    }
+
     fromJsonMetallicRoughnessSpecular(jsonMRSpecular)
     {
         if(jsonMRSpecular.specularTexture !== undefined)

src/renderer.js

@@ -173,7 +173,6 @@ class gltfRenderer
 
         let fragDefines = material.getDefines().concat(vertDefines);
         this.pushFragParameterDefines(fragDefines);
-        this.pushAdditionalEnvironmentDefines(fragDefines,envData);
 
         const fragmentHash = this.shaderCache.selectShader(material.getShaderIdentifier(), fragDefines);
         const vertexHash  = this.shaderCache.selectShader(primitive.getShaderIdentifier(), vertDefines);
@@ -204,6 +203,15 @@ class gltfRenderer
 
         this.updateAnimationUniforms(gltf, node, primitive);
 
+		if  (mat4.determinant(node.worldTransform) < 0.0)
+		{
+			WebGl.context.frontFace(WebGl.context.CW);
+		}
+		else
+		{
+			WebGl.context.frontFace(WebGl.context.CCW);
+		}
+
         if (material.doubleSided)
         {
             WebGl.context.disable(WebGl.context.CULL_FACE);
@@ -216,7 +224,7 @@ class gltfRenderer
         if(material.alphaMode === 'BLEND')
         {
             WebGl.context.enable(WebGl.context.BLEND);
-            WebGl.context.blendFuncSeparate(WebGl.context.SRC_ALPHA, WebGl.context.ONE_MINUS_SRC_ALPHA, WebGl.context.ONE, WebGl.context.ONE_MINUS_SRC_ALPHA);
+            WebGl.context.blendFuncSeparate(WebGl.context.SRC_ALPHA, WebGl.context.ONE_MINUS_SRC_ALPHA, WebGl.context.SRC_ALPHA, WebGl.context.ONE_MINUS_SRC_ALPHA);
             WebGl.context.blendEquation(WebGl.context.FUNC_ADD);
         }
         else
@@ -271,7 +279,7 @@ class gltfRenderer
 
         if (this.parameters.useIBL)
         {
-            this.applyEnvironmentMap(gltf, envData, material.textures.length);
+            this.applyEnvironmentMap(gltf, envData, material.textures.length, material.defines.includes("MATERIAL_SHEEN 1"));
         }
 
         if (drawIndexed)
@@ -377,7 +385,7 @@ class gltfRenderer
             fragDefines.push("USE_IBL 1");
         }
 
-        if (Environments[this.parameters.environmentName].type === ImageMimeType.HDR)
+        if (Environments[this.parameters.environmentName].type === ImageMimeType.HDR || Environments[this.parameters.environmentName].type === ImageMimeType.KTX2)
         {
             fragDefines.push("USE_HDR 1");
         }
@@ -444,14 +452,6 @@ class gltfRenderer
         }
     }
 
-    pushAdditionalEnvironmentDefines(fragDefines, envData)
-    {
-        if(envData.sheenEnvMap !== undefined)
-        {
-            fragDefines.push("USE_SHEEN_IBL 1");
-        }
-    }
-
     applyLights(gltf)
     {
         let uniformLights = [];
@@ -467,54 +467,59 @@ class gltfRenderer
     {
         scene.envData = {};
 
-        if (scene !== undefined &&
-            scene.imageBasedLight !== undefined)
+        if (scene !== undefined && scene.imageBasedLight !== undefined)
         {
             const diffuseTextureIndex = scene.imageBasedLight.diffuseEnvironmentTexture;
             const specularTextureIndex = scene.imageBasedLight.specularEnvironmentTexture;
+			const sheenCubeMapIndex = scene.imageBasedLight.sheenEnvironmentTexture;
 
             scene.envData.diffuseEnvMap = new gltfTextureInfo(diffuseTextureIndex);
             scene.envData.specularEnvMap = new gltfTextureInfo(specularTextureIndex);
+
             scene.envData.mipCount = scene.imageBasedLight.levelCount;
-            if(scene.imageBasedLight.sheenEnvironmentTexture !== undefined)
-            {
-                const sheenCubeMapIndex = scene.imageBasedLight.sheenEnvironmentTexture;
-                scene.envData.sheenEnvMap = new gltfTextureInfo(sheenCubeMapIndex);
-                scene.envData.sheenLUT = new gltfTextureInfo(gltf.textures.length - 1);
-            }
+
+			scene.envData.sheenEnvMap = new gltfTextureInfo(sheenCubeMapIndex);
+			scene.envData.sheenLUT = new gltfTextureInfo(gltf.textures.length - 1);
         }
         else
         {
             let linear = true;
 
-            if (Environments[this.parameters.environmentName].type !== ImageMimeType.HDR)
+            if (Environments[this.parameters.environmentName].type !== ImageMimeType.HDR && Environments[this.parameters.environmentName].type !== ImageMimeType.KTX2)
             {
                 linear = false;
             }
 
-            const diffuseTextureIndex = gltf.textures.length - 4;
-            const specularTextureIndex = gltf.textures.length - 3;
+            const diffuseTextureIndex = gltf.textures.length - 5;
+            const specularTextureIndex = gltf.textures.length - 4;
+            const sheenTextureIndex = gltf.textures.length - 3;
+
             scene.envData.diffuseEnvMap = new gltfTextureInfo(diffuseTextureIndex, 0, linear);
             scene.envData.specularEnvMap = new gltfTextureInfo(specularTextureIndex, 0, linear);
 
             scene.envData.mipCount = Environments[this.parameters.environmentName].mipLevel;
-        }
 
-        scene.envData.specularEnvMap.generateMips = false;
+            scene.envData.sheenEnvMap = new gltfTextureInfo(sheenTextureIndex, 0, linear);
+			scene.envData.sheenLUT = new gltfTextureInfo(gltf.textures.length - 1);
+		}
+
+        scene.envData.diffuseEnvMap.generateMips = false;
+		scene.envData.specularEnvMap.generateMips = false;
+        scene.envData.sheenEnvMap.generateMips = false;
         scene.envData.lut = new gltfTextureInfo(gltf.textures.length - 2);
         scene.envData.lut.generateMips = false;
     }
 
-    applyEnvironmentMap(gltf, envData, texSlotOffset)
-    {
+    applyEnvironmentMap(gltf, envData, texSlotOffset, hasSheen)
+    {	
         WebGl.setTexture(this.shader.getUniformLocation("u_LambertianEnvSampler"), gltf, envData.diffuseEnvMap, texSlotOffset);
         WebGl.setTexture(this.shader.getUniformLocation("u_GGXEnvSampler"), gltf, envData.specularEnvMap, texSlotOffset + 1);
         WebGl.setTexture(this.shader.getUniformLocation("u_GGXBRDFLUT"), gltf, envData.lut, texSlotOffset + 2);
-        if(envData.sheenEnvMap !== undefined)
-        {
-            WebGl.setTexture(this.shader.getUniformLocation("u_CharlieEnvSampler"), gltf, envData.sheenEnvMap, texSlotOffset + 3);
-            WebGl.setTexture(this.shader.getUniformLocation("u_CharlieLUT"), gltf, envData.sheenLUT, texSlotOffset + 4);
-        }
+		if (hasSheen)
+		{
+			WebGl.setTexture(this.shader.getUniformLocation("u_CharlieEnvSampler"), gltf, envData.sheenEnvMap, texSlotOffset + 3);
+			WebGl.setTexture(this.shader.getUniformLocation("u_CharlieLUT"), gltf, envData.sheenLUT, texSlotOffset + 4);
+		}
         this.shader.updateUniform("u_MipCount", envData.mipCount);
     }