Skip to content

Commit

Permalink
Merge pull request #237 from KhronosGroup/presentation/barcelona
Browse files Browse the repository at this point in the history 
barcelona presentation
  • Loading branch information
Benjamin Schmithüsen authored Feb 17, 2020
2 parents 025b103 + b2eeff8 commit 9a8d3b9
Show file tree
Hide file tree
Showing 12 changed files with 164 additions and 102 deletions.
1 change: 1 addition & 0 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@
*.jpg binary
*.png binary
*.hdr binary
*.ktx2 binary
2 changes: 1 addition & 1 deletion assets/environments
Submodule environments updated from 4eace3 to 092fb9
Binary file modified assets/images/lut_charlie.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/models
Submodule models updated 101 files
109 changes: 75 additions & 34 deletions src/environment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ class gltfEnvironmentLoader
let extension;
switch (environment.type)
{
case (ImageMimeType.KTX2):
extension = ".ktx2";
break;
case (ImageMimeType.HDR):
extension = ".hdr";
break;
Expand All @@ -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 =
[
Expand All @@ -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));
Expand Down
2 changes: 1 addition & 1 deletion src/image_based_light.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
55 changes: 35 additions & 20 deletions src/material.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,11 +260,12 @@ class gltfMaterial extends GltfObject
this.properties.set("u_GlossinessFactor", glossinessFactor);
}

//Clearcoat in part of the default metallic-roughness shader
let clearcoatFactor = 0.0;
let clearcoatRoughnessFactor = 0.0;
//Clearcoat is part of the default metallic-roughness shader
if(this.extensions.KHR_materials_clearcoat !== undefined)
{
let clearcoatFactor = 0.0;
let clearcoatRoughnessFactor = 0.0;

this.defines.push("MATERIAL_CLEARCOAT 1");

if(this.extensions.KHR_materials_clearcoat.clearcoatFactor !== undefined)
Expand Down Expand Up @@ -306,33 +307,31 @@ class gltfMaterial extends GltfObject

//Sheen material extension
// 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;
if(this.extensions.KHR_materials_sheen !== undefined)
{
let sheenFactor = 0.0;
let sheenColor = vec3.fromValues(1.0, 1.0, 1.0);
let sheenRoughness = this.properties.get("u_RoughnessFactor");

this.defines.push("MATERIAL_SHEEN 1");

if(this.extensions.KHR_materials_sheen.sheenFactor !== undefined)
{
sheenFactor = this.extensions.KHR_materials_sheen.sheenFactor;
}
if(this.extensions.KHR_materials_sheen.sheenColor !== undefined)
if(this.extensions.KHR_materials_sheen.intensityFactor !== undefined)
{
sheenColor = jsToGl(this.extensions.KHR_materials_sheen.sheenColor);
sheenFactor = this.extensions.KHR_materials_sheen.intensityFactor;
}
if(this.extensions.KHR_materials_sheen.sheenRoughness !== undefined)
if(this.extensions.KHR_materials_sheen.colorFactor !== undefined)
{
sheenRoughness = this.extensions.KHR_materials_sheen.sheenRoughness;
sheenColor = jsToGl(this.extensions.KHR_materials_sheen.colorFactor);
}
if (this.sheenColorIntensityTexture !== undefined)
if (this.colorIntensityTexture !== 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);
this.properties.set("u_SheenRoughness", sheenRoughness);
Expand All @@ -341,9 +340,10 @@ class gltfMaterial extends GltfObject
//KHR Extension Specular
// See https://github.com/ux3d/glTF/tree/KHR_materials_pbrClearcoat/extensions/2.0/Khronos/KHR_materials_specular
// We call the specular extension and its members 'MetallicRoughnessSpecular' instead to avoid confusion with SpecularGlossiness
let specularFactor = 0.5;
if(this.extensions.KHR_materials_specular)
{
let specularFactor = 0.5;

this.defines.push("MATERIAL_METALLICROUGHNESS_SPECULAROVERRIDE 1");

if(this.extensions.KHR_materials_specular.specularFactor !== undefined)
Expand Down Expand Up @@ -426,6 +426,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);
Expand Down Expand Up @@ -490,6 +495,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)
Expand Down
56 changes: 31 additions & 25 deletions src/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -271,7 +279,8 @@ class gltfRenderer

if (this.parameters.useIBL)
{
this.applyEnvironmentMap(gltf, envData, material.textures.length);
const hasSheen = material.extensions != undefined && material.extensions.KHR_materials_sheen !== undefined;
this.applyEnvironmentMap(gltf, envData, material.textures.length, hasSheen);
}

if (drawIndexed)
Expand Down Expand Up @@ -377,7 +386,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");
}
Expand Down Expand Up @@ -444,14 +453,6 @@ class gltfRenderer
}
}

pushAdditionalEnvironmentDefines(fragDefines, envData)
{
if(envData.sheenEnvMap !== undefined)
{
fragDefines.push("USE_SHEEN_IBL 1");
}
}

applyLights(gltf)
{
let uniformLights = [];
Expand All @@ -467,50 +468,55 @@ 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.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)
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);
Expand Down
Loading

0 comments on commit 9a8d3b9

Please sign in to comment.