glTF texture encoding, colorSpaceConversion (x3dom#1297)

* test * colorSpaceConversion field * decodeGamma for gltf emissive * changelog
andreasplesch · Sep 21, 2023 · a224ef0 · a224ef0
1 parent fc93440
commit a224ef0
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+.github/workflows/static.yml
 .travis.yml
 .idea
 _site
@@ -27,3 +28,4 @@ src/.vscode
 # remove with new build system
 src/version.js
 src/x3dom.js
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Version 1.8.4-dev
 
 * Features
+  * ImageTexture colorSpaceConversion field
   * support for glTF punctual lights, emissive strength, webp, mesh quantization and meshopt compression extensions
   * field values from metadata for non-standard nodes
 

diff --git a/src/nodes/Texturing/ImageTexture.js b/src/nodes/Texturing/ImageTexture.js
@@ -27,6 +27,16 @@ x3dom.registerNodeType(
         function ( ctx )
         {
             x3dom.nodeTypes.ImageTexture.superClass.call( this, ctx );
+
+            /**
+             * Specifies whether embedded color profiles are used in conversion to rendering. true for X3D, false for glTF.
+             * @var {x3dom.fields.SFBool} colorSpaceConversion
+             * @memberof x3dom.nodeTypes.ImageTexture
+             * @initvalue true
+             * @field x3dom
+             * @instance
+             */
+            this.addField_SFBool( ctx, "colorSpaceConversion", true );
         }
     )
 );
diff --git a/src/shader/ShaderDynamic.js b/src/shader/ShaderDynamic.js
@@ -1069,16 +1069,30 @@ x3dom.shader.DynamicShader.prototype.generateFragmentShader = function ( gl, pro
                 shader += "_specularColor = texture2D(specularMap, vec2(texcoord.x, 1.0-texcoord.y)).rgb;\n";
             }
 
-            //Specularmap
+            //Emissivemap
             if ( properties.EMISSIVEMAP )
             {
                 if ( properties.EMISSIVEMAPCHANNEL )
                 {
-                    shader += "_emissiveColor = _emissiveColor * texture2D(emissiveMap, vec2(texcoord2.x, 1.0-texcoord2.y)).rgb;\n";
+                    if ( properties.PBR_MATERIAL )
+                    {
+                        shader += "_emissiveColor = _emissiveColor * " + x3dom.shader.decodeGamma( properties, "texture2D(emissiveMap, vec2(texcoord2.x, 1.0-texcoord2.y)).rgb" ) + ";\n";
+                    }
+                    else
+                    {
+                        shader += "_emissiveColor = _emissiveColor * texture2D(emissiveMap, vec2(texcoord2.x, 1.0-texcoord2.y)).rgb;\n";
+                    }
                 }
                 else
                 {
-                    shader += "_emissiveColor = _emissiveColor * texture2D(emissiveMap, vec2(texcoord.x, 1.0-texcoord.y)).rgb;\n";
+                    if ( properties.PBR_MATERIAL )
+                    {
+                        shader += "_emissiveColor = _emissiveColor * " + x3dom.shader.decodeGamma( properties, "texture2D(emissiveMap, vec2(texcoord.x, 1.0-texcoord.y)).rgb" ) + ";\n";
+                    }
+                    else
+                    {
+                        shader += "_emissiveColor = _emissiveColor * texture2D(emissiveMap, vec2(texcoord.x, 1.0-texcoord.y)).rgb;\n";
+                    }
                 }
             }
 

diff --git a/src/util/Utils.js b/src/util/Utils.js
@@ -166,6 +166,10 @@ x3dom.Utils.createTexture2D = function ( gl, doc, src, bgnd, crossOrigin, scale,
             gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true );
         }
         gl.bindTexture( gl.TEXTURE_2D, texture );
+        if ( tex && tex._vf.colorSpaceConversion == false )
+        {
+            gl.pixelStorei( gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE );
+        }
         //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
         gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image );
         if ( genMipMaps )

diff --git a/src/util/glTF/glTF2Loader.js b/src/util/glTF/glTF2Loader.js
@@ -775,7 +775,7 @@ x3dom.glTF2Loader.prototype._generateX3DPhysicalMaterial = function ( material )
  */
 x3dom.glTF2Loader.prototype._generateX3DImageTexture = function ( texture, containerField, channel, transform )
 {
-    var image   = this._gltf.images[ texture.source ];
+    var image = this._gltf.images[ texture.source ];
 
     var webpImageUrl = "";
 
@@ -791,6 +791,7 @@ x3dom.glTF2Loader.prototype._generateX3DImageTexture = function ( texture, conta
 
     imagetexture.setAttribute( "origChannelCount", "2" );
     imagetexture.setAttribute( "flipY", "true" );
+    imagetexture.setAttribute( "colorSpaceConversion", "false" );
 
     if ( containerField )
     {

diff --git a/test/functional/inline-gltf.html b/test/functional/inline-gltf.html
@@ -1,10 +1,10 @@
 <html>
 <head>
-	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
     <meta name="theme-color" content="#86c540">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-	<title>X3DOM // GLTF 2.0</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>X3DOM // GLTF 2.0</title>
     <script type="text/javascript" src="../x3dom-include.js?full"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -370,7 +370,7 @@
     <section class="main-wrapper">
 
         <section class="sidebar">
-            
+
             <div class="sidebar-header">Basic Tests</div>
 
             <div class="sidebar-entry" onclick="load('Triangle',undefined,'negZ')">Triangle</div>
@@ -385,6 +385,7 @@
             <div class="sidebar-entry" onclick="load('TextureCoordinateTest',undefined,'negZ')">Texture Coordinate Test</div>
             <div class="sidebar-entry" onclick="load('TextureSettingsTest',undefined,'negZ')">Texture Settings Test</div>
             <div class="sidebar-entry" onclick="load('TextureTransformTest',undefined,'negZ')">Texture Transform Test</div>
+            <div class="sidebar-entry" onclick="load('TextureEncodingTest',undefined,'negZ')">Texture Encoding Test</div>
             <div class="sidebar-entry" onclick="load('AlphaBlendModeTest',undefined,'negZ')">Alpha Blend Mode Test</div>
             <div class="sidebar-entry" onclick="load('NormalTangentTest',undefined,'negZ')">Normal Tangent Test</div>
             <div class="sidebar-entry" onclick="load('NormalTangentMirrorTest',undefined,'negZ')">Normal Tangent Mirror Test</div>
@@ -450,19 +451,18 @@
             <div class="sidebar-entry" onclick="load('https://raw.githubusercontent.com/CesiumGS/cesium/bd8be76b7707ddb9c858ae39538c18064c218f98/Specs/Data/Models/Box-Textured-Webp/CesiumBoxWebp.gltf','direct','negZ')">Cesium, embedded, webp</div>
             <div class="sidebar-entry" onclick="load('https://raw.githubusercontent.com/zeux/meshoptimizer/master/demo/pirate.glb','direct','negZ')">Pirate, meshopt+quant., glb</div>
             <div class="sidebar-entry" onclick="load('https://assets.babylonjs.com/meshes/Buggy/glTF-MeshOpt/Buggy.gltf','direct','negZ')">BJS Buggy, meshopt+quant., gltf</div>
-
-			<div class="sidebar-header">VR Controller</div>
-
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/vive.glb')">Vive</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-go.glb')">Oculus Go</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-left.glb')">Oculus Left</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-right.glb')">Oculus Right</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/daydream.glb')">Daydream</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/gearvr.glb')">GearVR</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/microsoft-left.glb')">Microsoft Left</div>
-			<div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/microsoft-right.glb')">Microsoft Right</div>
-			<div class="sidebar-entry" onclick="updateInline('https://cdn.rawgit.com/KhronosGroup/glTF-Blender-Exporter/0e23c773bf27dad67d2c25f060370d6fa012d87d/polly/project_polly.gltf')">Polly</div>
-
+
+            <div class="sidebar-header">VR Controller</div>
+
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/vive.glb')">Vive</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-go.glb')">Oculus Go</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-left.glb')">Oculus Left</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-right.glb')">Oculus Right</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/daydream.glb')">Daydream</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/gearvr.glb')">GearVR</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/microsoft-left.glb')">Microsoft Left</div>
+            <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/microsoft-right.glb')">Microsoft Right</div>
+            <div class="sidebar-entry" onclick="updateInline('https://cdn.rawgit.com/KhronosGroup/glTF-Blender-Exporter/0e23c773bf27dad67d2c25f060370d6fa012d87d/polly/project_polly.gltf')">Polly</div>
 
         </section>