From 1b57a9bc7ccd87533630229d772d221b94ab2f98 Mon Sep 17 00:00:00 2001 From: Lukas Goll Date: Thu, 7 Nov 2019 17:49:58 +0100 Subject: [PATCH 1/6] Apply changes to port WebGl2.0 --- src/main.js | 3 +- src/renderer.js | 12 +++--- src/shader_cache.js | 2 +- src/shaders/animation.glsl | 40 +++++++++---------- src/shaders/functions.glsl | 12 +++--- src/shaders/metallic-roughness.frag | 61 +++++++++++++---------------- src/shaders/primitive.vert | 28 ++++++------- src/shaders/textures.glsl | 4 +- 8 files changed, 78 insertions(+), 84 deletions(-) diff --git a/src/main.js b/src/main.js index f088dae2..d4362062 100644 --- a/src/main.js +++ b/src/main.js @@ -37,7 +37,7 @@ function gltf_rv( function getWebGlContext(canvas) { const parameters = { alpha: false, antialias: true }; - const contextTypes = [ "webgl", "experimental-webgl" ]; + const contextTypes = [ "webgl2" ]; let context; @@ -49,6 +49,7 @@ function getWebGlContext(canvas) return context; } } + return context; } export { gltf_rv }; diff --git a/src/renderer.js b/src/renderer.js index f302ebb6..c49be6b1 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -36,17 +36,17 @@ class gltfRenderer this.shaderCache = new ShaderCache(shaderSources); let requiredWebglExtensions = [ - "EXT_shader_texture_lod", - "OES_standard_derivatives", - "OES_element_index_uint", + //"EXT_shader_texture_lod", + //"OES_standard_derivatives", + //"OES_element_index_uint", "EXT_texture_filter_anisotropic", - "OES_texture_float", + //"OES_texture_float", "OES_texture_float_linear" ]; WebGl.loadWebGlExtensions(requiredWebglExtensions); // use shader lod ext if requested and supported - this.parameters.useShaderLoD = this.parameters.useShaderLoD && WebGl.context.getExtension("EXT_shader_texture_lod") !== null; + //this.parameters.useShaderLoD = this.parameters.useShaderLoD && WebGl.context.getExtension("EXT_shader_texture_lod") !== null; this.visibleLights = []; @@ -463,7 +463,7 @@ class gltfRenderer { linear = false; } - + gltf.envData = {}; gltf.envData.diffuseEnvMap = new gltfTextureInfo(gltf.textures.length - 3, 0, linear); gltf.envData.specularEnvMap = new gltfTextureInfo(gltf.textures.length - 2, 0, linear); diff --git a/src/shader_cache.js b/src/shader_cache.js index debcda3e..df5416e6 100644 --- a/src/shader_cache.js +++ b/src/shader_cache.js @@ -81,7 +81,7 @@ class ShaderCache // console.log(shaderIdentifier); - let defines = ""; + let defines = "#version 300 es\n"; for(let define of permutationDefines) { // console.log(define); diff --git a/src/shaders/animation.glsl b/src/shaders/animation.glsl index 866d9203..43d96743 100644 --- a/src/shaders/animation.glsl +++ b/src/shaders/animation.glsl @@ -1,65 +1,65 @@ #ifdef HAS_TARGET_POSITION0 -attribute vec3 a_Target_Position0; +in vec3 a_Target_Position0; #endif #ifdef HAS_TARGET_POSITION1 -attribute vec3 a_Target_Position1; +in vec3 a_Target_Position1; #endif #ifdef HAS_TARGET_POSITION2 -attribute vec3 a_Target_Position2; +in vec3 a_Target_Position2; #endif #ifdef HAS_TARGET_POSITION3 -attribute vec3 a_Target_Position3; +in vec3 a_Target_Position3; #endif #ifdef HAS_TARGET_POSITION4 -attribute vec3 a_Target_Position4; +in vec3 a_Target_Position4; #endif #ifdef HAS_TARGET_POSITION5 -attribute vec3 a_Target_Position5; +in vec3 a_Target_Position5; #endif #ifdef HAS_TARGET_POSITION6 -attribute vec3 a_Target_Position6; +in vec3 a_Target_Position6; #endif #ifdef HAS_TARGET_POSITION7 -attribute vec3 a_Target_Position7; +in vec3 a_Target_Position7; #endif #ifdef HAS_TARGET_NORMAL0 -attribute vec3 a_Target_Normal0; +in vec3 a_Target_Normal0; #endif #ifdef HAS_TARGET_NORMAL1 -attribute vec3 a_Target_Normal1; +in vec3 a_Target_Normal1; #endif #ifdef HAS_TARGET_NORMAL2 -attribute vec3 a_Target_Normal2; +in vec3 a_Target_Normal2; #endif #ifdef HAS_TARGET_NORMAL3 -attribute vec3 a_Target_Normal3; +in vec3 a_Target_Normal3; #endif #ifdef HAS_TARGET_TANGENT0 -attribute vec3 a_Target_Tangent0; +in vec3 a_Target_Tangent0; #endif #ifdef HAS_TARGET_TANGENT1 -attribute vec3 a_Target_Tangent1; +in vec3 a_Target_Tangent1; #endif #ifdef HAS_TARGET_TANGENT2 -attribute vec3 a_Target_Tangent2; +in vec3 a_Target_Tangent2; #endif #ifdef HAS_TARGET_TANGENT3 -attribute vec3 a_Target_Tangent3; +in vec3 a_Target_Tangent3; #endif #ifdef USE_MORPHING @@ -67,19 +67,19 @@ uniform float u_morphWeights[WEIGHT_COUNT]; #endif #ifdef HAS_JOINT_SET1 -attribute vec4 a_Joint1; +in vec4 a_Joint1; #endif #ifdef HAS_JOINT_SET2 -attribute vec4 a_Joint2; +in vec4 a_Joint2; #endif #ifdef HAS_WEIGHT_SET1 -attribute vec4 a_Weight1; +in vec4 a_Weight1; #endif #ifdef HAS_WEIGHT_SET2 -attribute vec4 a_Weight2; +in vec4 a_Weight2; #endif #ifdef USE_SKINNING diff --git a/src/shaders/functions.glsl b/src/shaders/functions.glsl index 0fdf9778..46880480 100644 --- a/src/shaders/functions.glsl +++ b/src/shaders/functions.glsl @@ -3,21 +3,21 @@ const float M_PI = 3.141592653589793; const float c_MinReflectance = 0.04; -varying vec3 v_Position; +in vec3 v_Position; #ifdef HAS_NORMALS #ifdef HAS_TANGENTS -varying mat3 v_TBN; +in mat3 v_TBN; #else -varying vec3 v_Normal; +in vec3 v_Normal; #endif #endif #ifdef HAS_VERTEX_COLOR_VEC3 -varying vec3 v_Color; +in vec3 v_Color; #endif #ifdef HAS_VERTEX_COLOR_VEC4 -varying vec4 v_Color; +in vec4 v_Color; #endif struct AngularInfo @@ -74,7 +74,7 @@ vec3 getNormal() #endif #ifdef HAS_NORMAL_MAP - vec3 n = texture2D(u_NormalSampler, UV).rgb; + vec3 n = texture(u_NormalSampler, UV).rgb; n = normalize(tbn * ((2.0 * n - 1.0) * vec3(u_NormalScale, u_NormalScale, 1.0))); #else // The tbn matrix is linearly interpolated, so we need to re-normalize diff --git a/src/shaders/metallic-roughness.frag b/src/shaders/metallic-roughness.frag index ff8cc102..7d8ae566 100644 --- a/src/shaders/metallic-roughness.frag +++ b/src/shaders/metallic-roughness.frag @@ -1,3 +1,4 @@ + // // This fragment shader defines a reference implementation for Physically Based Shading of // a microfacet surface material defined by a glTF model. @@ -12,18 +13,11 @@ // [4] "An Inexpensive BRDF Model for Physically based Rendering" by Christophe Schlick // https://www.cs.virginia.edu/~jdl/bib/appearance/analytic%20models/schlick94b.pdf -#ifdef USE_TEX_LOD -#extension GL_EXT_shader_texture_lod: enable -#endif -#extension GL_OES_standard_derivatives : enable +precision highp float; -#ifdef USE_HDR -#extension GL_OES_texture_float : enable -#extension GL_OES_texture_float_linear : enable -#endif +out vec4 g_finalColor; -precision highp float; #include #include @@ -102,15 +96,11 @@ vec3 getIBLContribution(MaterialInfo materialInfo, vec3 n, vec3 v) vec2 brdfSamplePoint = clamp(vec2(NdotV, materialInfo.perceptualRoughness), vec2(0.0, 0.0), vec2(1.0, 1.0)); // retrieve a scale and bias to F0. See [1], Figure 3 - vec2 brdf = texture2D(u_brdfLUT, brdfSamplePoint).rg; + vec2 brdf = texture(u_brdfLUT, brdfSamplePoint).rg; - vec4 diffuseSample = textureCube(u_DiffuseEnvSampler, n); + vec4 diffuseSample = texture(u_DiffuseEnvSampler, n); -#ifdef USE_TEX_LOD - vec4 specularSample = textureCubeLodEXT(u_SpecularEnvSampler, reflection, lod); -#else - vec4 specularSample = textureCube(u_SpecularEnvSampler, reflection); -#endif + vec4 specularSample = texture(u_SpecularEnvSampler, reflection, lod); #ifdef USE_HDR // Already linear. @@ -259,11 +249,12 @@ void main() vec3 diffuseColor = vec3(0.0); vec3 specularColor= vec3(0.0); vec3 f0 = vec3(0.04); + vec4 output_color = baseColor; #ifdef MATERIAL_SPECULARGLOSSINESS #ifdef HAS_SPECULAR_GLOSSINESS_MAP - vec4 sgSample = SRGBtoLINEAR(texture2D(u_SpecularGlossinessSampler, getSpecularGlossinessUV())); + vec4 sgSample = SRGBtoLINEAR(texture(u_SpecularGlossinessSampler, getSpecularGlossinessUV())); perceptualRoughness = (1.0 - sgSample.a * u_GlossinessFactor); // glossiness to roughness f0 = sgSample.rgb * u_SpecularFactor; // specular #else @@ -272,7 +263,7 @@ void main() #endif // ! HAS_SPECULAR_GLOSSINESS_MAP #ifdef HAS_DIFFUSE_MAP - baseColor = SRGBtoLINEAR(texture2D(u_DiffuseSampler, getDiffuseUV())) * u_DiffuseFactor; + baseColor = SRGBtoLINEAR(texture(u_DiffuseSampler, getDiffuseUV())) * u_DiffuseFactor; #else baseColor = u_DiffuseFactor; #endif // !HAS_DIFFUSE_MAP @@ -296,7 +287,7 @@ void main() #ifdef HAS_METALLIC_ROUGHNESS_MAP // 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 = texture2D(u_MetallicRoughnessSampler, getMetallicRoughnessUV()); + vec4 mrSample = texture(u_MetallicRoughnessSampler, getMetallicRoughnessUV()); perceptualRoughness = mrSample.g * u_RoughnessFactor; metallic = mrSample.b * u_MetallicFactor; #else @@ -306,7 +297,7 @@ void main() // The albedo may be defined from a base texture or a flat color #ifdef HAS_BASE_COLOR_MAP - baseColor = SRGBtoLINEAR(texture2D(u_BaseColorSampler, getBaseColorUV())) * u_BaseColorFactor; + baseColor = SRGBtoLINEAR(texture(u_BaseColorSampler, getBaseColorUV())) * u_BaseColorFactor; #else baseColor = u_BaseColorFactor; #endif @@ -332,7 +323,7 @@ void main() #endif #ifdef MATERIAL_UNLIT - gl_FragColor = vec4(LINEARtoSRGB(baseColor.rgb), baseColor.a); + exportColor( vec4(LINEARtoSRGB(baseColor.rgb), baseColor.a)); return; #endif @@ -392,60 +383,62 @@ void main() float ao = 1.0; // Apply optional PBR terms for additional (optional) shading #ifdef HAS_OCCLUSION_MAP - ao = texture2D(u_OcclusionSampler, getOcclusionUV()).r; + ao = texture(u_OcclusionSampler, getOcclusionUV()).r; color = mix(color, color * ao, u_OcclusionStrength); #endif vec3 emissive = vec3(0); #ifdef HAS_EMISSIVE_MAP - emissive = SRGBtoLINEAR(texture2D(u_EmissiveSampler, getEmissiveUV())).rgb * u_EmissiveFactor; + emissive = SRGBtoLINEAR(texture(u_EmissiveSampler, getEmissiveUV())).rgb * u_EmissiveFactor; color += emissive; #endif #ifndef DEBUG_OUTPUT // no debug // regular shading - gl_FragColor = vec4(toneMap(color), baseColor.a); + output_color = vec4(toneMap(color), baseColor.a); #else // debug output #ifdef DEBUG_METALLIC - gl_FragColor.rgb = vec3(metallic); + output_color = vec3(metallic); #endif #ifdef DEBUG_ROUGHNESS - gl_FragColor.rgb = vec3(perceptualRoughness); + output_color = vec3(perceptualRoughness); #endif #ifdef DEBUG_NORMAL #ifdef HAS_NORMAL_MAP - gl_FragColor.rgb = texture2D(u_NormalSampler, getNormalUV()).rgb; + output_color = texture(u_NormalSampler, getNormalUV()).rgb; #else - gl_FragColor.rgb = vec3(0.5, 0.5, 1.0); + output_color = vec3(0.5, 0.5, 1.0); #endif #endif #ifdef DEBUG_BASECOLOR - gl_FragColor.rgb = LINEARtoSRGB(baseColor.rgb); + output_color = LINEARtoSRGB(baseColor.rgb); #endif #ifdef DEBUG_OCCLUSION - gl_FragColor.rgb = vec3(ao); + output_color = vec3(ao); #endif #ifdef DEBUG_EMISSIVE - gl_FragColor.rgb = LINEARtoSRGB(emissive); + output_color = LINEARtoSRGB(emissive); #endif #ifdef DEBUG_F0 - gl_FragColor.rgb = vec3(f0); + output_color = vec3(f0); #endif #ifdef DEBUG_ALPHA - gl_FragColor.rgb = vec3(baseColor.a); + output_color = vec3(baseColor.a); #endif - gl_FragColor.a = 1.0; + output_color.a = 1.0; #endif // !DEBUG_OUTPUT + + g_finalColor = output_color; } diff --git a/src/shaders/primitive.vert b/src/shaders/primitive.vert index c14e6f3a..d0b34139 100644 --- a/src/shaders/primitive.vert +++ b/src/shaders/primitive.vert @@ -1,43 +1,43 @@ #include -attribute vec4 a_Position; -varying vec3 v_Position; +in vec4 a_Position; +out vec3 v_Position; #ifdef HAS_NORMALS -attribute vec4 a_Normal; +in vec4 a_Normal; #endif #ifdef HAS_TANGENTS -attribute vec4 a_Tangent; +in vec4 a_Tangent; #endif #ifdef HAS_NORMALS #ifdef HAS_TANGENTS -varying mat3 v_TBN; +out mat3 v_TBN; #else -varying vec3 v_Normal; +out vec3 v_Normal; #endif #endif #ifdef HAS_UV_SET1 -attribute vec2 a_UV1; +in vec2 a_UV1; #endif #ifdef HAS_UV_SET2 -attribute vec2 a_UV2; +in vec2 a_UV2; #endif -varying vec2 v_UVCoord1; -varying vec2 v_UVCoord2; +out vec2 v_UVCoord1; +out vec2 v_UVCoord2; #ifdef HAS_VERTEX_COLOR_VEC3 -attribute vec3 a_Color; -varying vec3 v_Color; +in vec3 a_Color; +out vec3 v_Color; #endif #ifdef HAS_VERTEX_COLOR_VEC4 -attribute vec4 a_Color; -varying vec4 v_Color; +in vec4 a_Color; +out vec4 v_Color; #endif uniform mat4 u_ViewProjectionMatrix; diff --git a/src/shaders/textures.glsl b/src/shaders/textures.glsl index 0e233504..521da16b 100644 --- a/src/shaders/textures.glsl +++ b/src/shaders/textures.glsl @@ -1,5 +1,5 @@ -varying vec2 v_UVCoord1; -varying vec2 v_UVCoord2; +in vec2 v_UVCoord1; +in vec2 v_UVCoord2; // General Material #ifdef HAS_NORMAL_MAP From 5d173baba8b437d696aea1dcf6109d8f6dd7abaf Mon Sep 17 00:00:00 2001 From: Lukas Goll Date: Thu, 7 Nov 2019 18:06:59 +0100 Subject: [PATCH 2/6] fixed texture format (still wip) --- src/shaders/metallic-roughness.frag | 2 +- src/webgl.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shaders/metallic-roughness.frag b/src/shaders/metallic-roughness.frag index 7d8ae566..95bcc2ef 100644 --- a/src/shaders/metallic-roughness.frag +++ b/src/shaders/metallic-roughness.frag @@ -410,7 +410,7 @@ void main() #ifdef DEBUG_NORMAL #ifdef HAS_NORMAL_MAP - output_color = texture(u_NormalSampler, getNormalUV()).rgb; + output_color.rgb = texture(u_NormalSampler, getNormalUV()).rgb; #else output_color = vec3(0.5, 0.5, 1.0); #endif diff --git a/src/webgl.js b/src/webgl.js index def99096..e51864f0 100644 --- a/src/webgl.js +++ b/src/webgl.js @@ -93,7 +93,7 @@ class gltfWebGl if (image.image.dataRGBE !== undefined) { - WebGl.context.texImage2D(image.type, image.miplevel, WebGl.context.RGB, image.image.width, image.image.height, 0, WebGl.context.RGB, WebGl.context.FLOAT, image.image.dataFloat); + WebGl.context.texImage2D(image.type, image.miplevel, WebGl.context.RGB32F, image.image.width, image.image.height, 0, WebGl.context.RGB, WebGl.context.FLOAT, image.image.dataFloat); } else { From ea93bd5fb2f6f01d599e16a9332aa0a136bcac82 Mon Sep 17 00:00:00 2001 From: Lukas Goll Date: Fri, 8 Nov 2019 10:50:29 +0100 Subject: [PATCH 3/6] bugfixing Webgl2.0 port --- src/shaders/metallic-roughness.frag | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/shaders/metallic-roughness.frag b/src/shaders/metallic-roughness.frag index 95bcc2ef..2120bc54 100644 --- a/src/shaders/metallic-roughness.frag +++ b/src/shaders/metallic-roughness.frag @@ -100,7 +100,7 @@ vec3 getIBLContribution(MaterialInfo materialInfo, vec3 n, vec3 v) vec4 diffuseSample = texture(u_DiffuseEnvSampler, n); - vec4 specularSample = texture(u_SpecularEnvSampler, reflection, lod); + vec4 specularSample = textureLod(u_SpecularEnvSampler, reflection, lod); #ifdef USE_HDR // Already linear. @@ -401,11 +401,11 @@ void main() #else // debug output #ifdef DEBUG_METALLIC - output_color = vec3(metallic); + output_color.rgb = vec3(metallic); #endif #ifdef DEBUG_ROUGHNESS - output_color = vec3(perceptualRoughness); + output_color.rgb = vec3(perceptualRoughness); #endif #ifdef DEBUG_NORMAL @@ -417,23 +417,23 @@ void main() #endif #ifdef DEBUG_BASECOLOR - output_color = LINEARtoSRGB(baseColor.rgb); + output_color.rgb = LINEARtoSRGB(baseColor.rgb); #endif #ifdef DEBUG_OCCLUSION - output_color = vec3(ao); + output_color.rgb = vec3(ao); #endif #ifdef DEBUG_EMISSIVE - output_color = LINEARtoSRGB(emissive); + output_color.rgb = LINEARtoSRGB(emissive); #endif #ifdef DEBUG_F0 - output_color = vec3(f0); + output_color.rgb = vec3(f0); #endif #ifdef DEBUG_ALPHA - output_color = vec3(baseColor.a); + output_color.rgb = vec3(baseColor.a); #endif output_color.a = 1.0; From 3216b1150e26b59b8accac5f5de4a602f7331b2d Mon Sep 17 00:00:00 2001 From: Lukas Goll Date: Fri, 8 Nov 2019 11:02:34 +0100 Subject: [PATCH 4/6] remove comments --- src/renderer.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/renderer.js b/src/renderer.js index c49be6b1..961d7a47 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -36,17 +36,11 @@ class gltfRenderer this.shaderCache = new ShaderCache(shaderSources); let requiredWebglExtensions = [ - //"EXT_shader_texture_lod", - //"OES_standard_derivatives", - //"OES_element_index_uint", "EXT_texture_filter_anisotropic", - //"OES_texture_float", "OES_texture_float_linear" ]; WebGl.loadWebGlExtensions(requiredWebglExtensions); - // use shader lod ext if requested and supported - //this.parameters.useShaderLoD = this.parameters.useShaderLoD && WebGl.context.getExtension("EXT_shader_texture_lod") !== null; this.visibleLights = []; From 450c45fa308d5ef9beefb8b31a0e56287b27abb9 Mon Sep 17 00:00:00 2001 From: Lukas Goll Date: Fri, 8 Nov 2019 12:14:58 +0100 Subject: [PATCH 5/6] hotfix shader --- src/shaders/metallic-roughness.frag | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shaders/metallic-roughness.frag b/src/shaders/metallic-roughness.frag index 2120bc54..9adfc66f 100644 --- a/src/shaders/metallic-roughness.frag +++ b/src/shaders/metallic-roughness.frag @@ -412,7 +412,7 @@ void main() #ifdef HAS_NORMAL_MAP output_color.rgb = texture(u_NormalSampler, getNormalUV()).rgb; #else - output_color = vec3(0.5, 0.5, 1.0); + output_color.rgb = vec3(0.5, 0.5, 1.0); #endif #endif From ee1df0372bbe5c49f6fda76434cb53f1e5aa6b64 Mon Sep 17 00:00:00 2001 From: Lukas Goll Date: Fri, 8 Nov 2019 12:17:05 +0100 Subject: [PATCH 6/6] hotfix shader 2 --- src/shaders/metallic-roughness.frag | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shaders/metallic-roughness.frag b/src/shaders/metallic-roughness.frag index 9adfc66f..ec7ddb11 100644 --- a/src/shaders/metallic-roughness.frag +++ b/src/shaders/metallic-roughness.frag @@ -323,7 +323,7 @@ void main() #endif #ifdef MATERIAL_UNLIT - exportColor( vec4(LINEARtoSRGB(baseColor.rgb), baseColor.a)); + g_finalColor = ( vec4(LINEARtoSRGB(baseColor.rgb), baseColor.a)); return; #endif