Remove texture flip (#3939)

docs/upgrade-guide.md

@@ -41,6 +41,15 @@ The pre-bundled version, a.k.a. the [scripting API](/docs/get-started/using-stan
 - Top-level view state props such as `longitude`, `latitude`, `zoom` are no longer supported. To specify the default view state, use `initialViewState`.
 - `controller` is no longer on by default, use `controller: true`.
 
+
+##### Textures
+
+In older versions of deck, we used to set `UNPACK_FLIP_Y_WEBGL` by default when creating textures from images. This is removed in v8.0 to better align with [WebGL best practice](https://github.com/KhronosGroup/WebGL/issues/2577). As a result, the texCoords in the shaders of `BitmapLayer`, `IconLayer` and `TextLayer` are y-flipped. This only affects users who extend these layers.
+
+Users of `SimpleMeshLayer` with texture will need to flip their texture image vertically.
+
+The change has allowed us to support loading textures from `ImageBitmap`, in use cases such as rendering to `OffscreenCanvas` on a web worker. 
+
 ##### projection system
 
 - The [common space](/docs/shader-module/project.md) is no longer scaled to the current zoom level. This is part of an effort to make the geometry calculation more consistent and predictable. While one old common unit is equivalent to 1 screen pixel at the viewport center, one new common unit is equivalent to `viewport.scale` pixels at the viewport center.

modules/core/src/lib/init.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {registerLoaders} from '@loaders.gl/core';
-import {HTMLImageLoader} from '@loaders.gl/images';
+import {ImageLoader} from '@loaders.gl/images';
 
 import {global} from '../utils/globals';
 import log from '../utils/log';
@@ -46,7 +46,7 @@ if (!global.deck) {
     log
   };
 
-  registerLoaders([jsonLoader, HTMLImageLoader]);
+  registerLoaders([jsonLoader, ImageLoader]);
 }
 
 export default global.deck;

modules/layers/src/bitmap-layer/bitmap-layer.js

@@ -33,10 +33,6 @@ const DEFAULT_TEXTURE_PARAMETERS = {
   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
 };
 
-const DEFAULT_PIXEL_PARAMETERS = {
-  [GL.UNPACK_FLIP_Y_WEBGL]: true
-};
-
 const defaultProps = {
   image: {type: 'object', value: null, async: true},
   bounds: {type: 'array', value: [1, 0, 0, 1], compare: true},
@@ -154,9 +150,9 @@ export default class BitmapLayer extends Layer {
     }
 
     /*
-      0,1 --- 1,1
-       |       |
       0,0 --- 1,0
+       |       |
+      0,1 --- 1,1
     */
     return new Model(
       gl,
@@ -166,7 +162,7 @@ export default class BitmapLayer extends Layer {
           drawMode: GL.TRIANGLE_FAN,
           vertexCount: 4,
           attributes: {
-            texCoords: new Float32Array([0, 0, 0, 1, 1, 1, 1, 0])
+            texCoords: new Float32Array([0, 1, 0, 0, 1, 0, 1, 1])
           }
         }),
         isInstanced: false
@@ -235,7 +231,6 @@ export default class BitmapLayer extends Layer {
           width: 1,
           height: 1,
           parameters: DEFAULT_TEXTURE_PARAMETERS,
-          pixelStore: DEFAULT_PIXEL_PARAMETERS,
           mipmaps: false
         })
       });
@@ -244,8 +239,7 @@ export default class BitmapLayer extends Layer {
       this.setState({
         bitmapTexture: new Texture2D(gl, {
           data: image,
-          parameters: DEFAULT_TEXTURE_PARAMETERS,
-          pixelStore: DEFAULT_PIXEL_PARAMETERS
+          parameters: DEFAULT_TEXTURE_PARAMETERS
         })
       });
     }

modules/layers/src/icon-layer/icon-layer-vertex.glsl.js

@@ -94,8 +94,6 @@ void main(void) {
     (positions.xy + 1.0) / 2.0
   ) / iconsTextureDim;
 
-  vTextureCoords.y = 1.0 - vTextureCoords.y;
-
   vColor = instanceColors;
   DECKGL_FILTER_COLOR(vColor, geometry);
 

modules/layers/src/icon-layer/icon-manager.js

@@ -15,10 +15,6 @@ const DEFAULT_TEXTURE_PARAMETERS = {
   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR
 };
 
-const DEFAULT_PIXEL_PARAMETERS = {
-  [GL.UNPACK_FLIP_Y_WEBGL]: true
-};
-
 function nextPowOfTwo(number) {
   return Math.pow(2, Math.ceil(Math.log2(number)));
 }
@@ -256,8 +252,7 @@ export default class IconManager {
       // Browser object: Image, ImageData, HTMLCanvasElement, ImageBitmap
       this._texture = new Texture2D(this.gl, {
         data: iconAtlas,
-        parameters: DEFAULT_TEXTURE_PARAMETERS,
-        pixelStore: DEFAULT_PIXEL_PARAMETERS
+        parameters: DEFAULT_TEXTURE_PARAMETERS
       });
       this.onUpdate();
     }
@@ -311,7 +306,6 @@ export default class IconManager {
 
   _loadIcons(icons) {
     const ctx = this._canvas.getContext('2d');
-    const canvasHeight = this._texture.height;
 
     for (const icon of icons) {
       loadImage(icon.url).then(imageData => {
@@ -323,10 +317,9 @@ export default class IconManager {
         this._texture.setSubImageData({
           data,
           x,
-          y: canvasHeight - y - height, // flip Y as texture stored as reversed Y
+          y,
           width,
-          height,
-          parameters: DEFAULT_PIXEL_PARAMETERS
+          height
         });
 
         // Call to regenerate mipmaps after modifying texture(s)

modules/layers/src/text-layer/font-atlas-manager.js

@@ -2,7 +2,6 @@
 
 import {Texture2D} from '@luma.gl/core';
 import TinySDF from '@mapbox/tiny-sdf';
-import GL from '@luma.gl/constants';
 
 import {buildMapping} from './utils';
 import LRUCache from './lru-cache';
@@ -188,8 +187,7 @@ export default class FontAtlasManager {
       height,
       parameters: {
         [GL_TEXTURE_WRAP_S]: GL_CLAMP_TO_EDGE,
-        [GL_TEXTURE_WRAP_T]: GL_CLAMP_TO_EDGE,
-        [GL.UNPACK_FLIP_Y_WEBGL]: true
+        [GL_TEXTURE_WRAP_T]: GL_CLAMP_TO_EDGE
       }
     });
 

modules/layers/src/text-layer/multi-icon-layer/multi-icon-layer-vertex.glsl.js

@@ -100,8 +100,6 @@ void main(void) {
     (positions.xy + 1.0) / 2.0
   ) / iconsTextureDim;
 
-  vTextureCoords.y = 1.0 - vTextureCoords.y;
-
   vColor = vec4(instanceColors.rgb, instanceColors.a * opacity);
   DECKGL_FILTER_COLOR(vColor, geometry);
 

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer.js

@@ -267,7 +267,7 @@ export default class ScenegraphLayer extends Layer {
           enableOffsetModelMatrix: _composeModelMatrix,
           sceneModelMatrix: worldMatrix,
           // Needed for PBR (TODO: find better way to get it)
-          u_Camera: model.model.program.uniforms.project_uCameraPosition
+          u_Camera: model.model.getUniforms().project_uCameraPosition
         }
       });
     });

modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer.js

@@ -84,7 +84,7 @@ const DEFAULT_COLOR = [0, 0, 0, 255];
 
 const defaultProps = {
   mesh: {value: null, type: 'object', async: true},
-  texture: null,
+  texture: {type: 'object', value: null, async: true},
   sizeScale: {type: 'number', value: 1, min: 0},
   // TODO - parameters should be merged, not completely overridden
   parameters: {