[website] Docs rename uses of WebGL to WebGL2 (visgl#8510)

mpearson · Feb 28, 2024 · b87ca11 · b87ca11
1 parent 759a664
commit b87ca11
Show file tree

Hide file tree

Showing 46 changed files with 130 additions and 133 deletions.
diff --git a/README.md b/README.md
@@ -15,12 +15,12 @@
 
 <h1 align="center">deck.gl | <a href="https://deck.gl">Website</a></h1>
 
-<h5 align="center"> WebGL2-powered, highly performant large-scale data visualization</h5>
+<h5 align="center"> GPU-powered, highly performant large-scale data visualization</h5>
 
 [![docs](http://i.imgur.com/mvfvgf0.jpg)](https://visgl.github.io/deck.gl)
 
 
-deck.gl is designed to simplify high-performance, WebGL-based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage deck.gl's extensible architecture to address custom needs.
+deck.gl is designed to simplify high-performance, WebGL2/WebGPU based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage deck.gl's extensible architecture to address custom needs.
 
 deck.gl maps **data** (usually an array of JSON objects) into a stack of visual **layers** - e.g. icons, polygons, texts; and look at them with **views**: e.g. map, first-person, orthographic.
 

diff --git a/docs/README.md b/docs/README.md
@@ -39,7 +39,7 @@
 </p>
 
 
-deck.gl is designed to simplify high-performance, WebGL-based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage deck.gl's extensible architecture to address custom needs.
+deck.gl is designed to simplify high-performance, WebGL2/WebGPU based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage deck.gl's extensible architecture to address custom needs.
 
 deck.gl maps **data** (usually an array of JSON objects) into a stack of visual **layers** - e.g. icons, polygons, texts; and look at them with **views**: e.g. map, first-person, orthographic.
 
@@ -102,7 +102,7 @@ deck.gl is one of the main frameworks in the [vis.gl](http://vis.gl) framework s
 
 deck.gl is developed in parallel with a number of companion modules, including:
 
-* [luma.gl](https://luma.gl/) - A general purpose WebGL library designed to be interoperable both with the raw WebGL API and (as far as possible) with other WebGL libraries. In particular, luma.gl does not claim ownership of the WebGL context, and can work with any supplied context, including contexts created by the application or other WebGL libraries.
+* [luma.gl](https://luma.gl/) - A general purpose WebGL2/WebGPU library designed to be interoperable both with the raw browser APIs and (as far as possible) with other WebGL2/WebGPU libraries. In particular, luma.gl does not claim ownership of the WebGL2/WebGPU context, and can work with any supplied context, including contexts created by the application or other libraries.
 * [loaders.gl](https://loaders.gl) - a suite of framework-independent loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
 * [react-map-gl](https://visgl.github.io/react-map-gl/) - A React wrapper around Mapbox GL which works seamlessly with deck.gl.
 * [nebula.gl](https://nebula.gl/) - A high-performance feature editing framework for deck.gl.
@@ -130,8 +130,8 @@ deck.gl is designed according to functional UI programming principles, populariz
 There is an impressive amount of information (documentation, blog posts, educational videos, etc.) on the reactive programming paradigm in relation to modern web frameworks such as React, Flux and Redux. Where to start depends mostly on your application architecture choices. Exploring such information will take you beyond what we can cover in the basic deck.gl developer guide article on Updates.
 
 
-### Understanding WebGL
+### Understanding WebGL2/WebGPU
 
-Knowledge of WebGL is only needed if you want to create custom layers in deck.gl. Note that while trying out a new ambitious rendering approach for a new layer will likely require deeper knowledge, it is often possible to modify or extend existing deck.gl layers (including modifying the shader code) with a surprisingly limited amount of WebGL knowledge.
+Knowledge of WebGL2 or WebGPU is only needed if you want to create custom layers in deck.gl. Note that while trying out a new ambitious rendering approach for a new layer will likely require deeper knowledge, it is often possible to modify or extend existing deck.gl layers (including modifying the shader code) with a surprisingly limited amount of WebGL2/WebGPU knowledge.
 
-There are many web resources for learning WebGL. [luma.gl](https://luma.gl/) can be a good start.
+There are many web resources for learning WebGL2/WebGPU. [luma.gl](https://luma.gl/) can be a good start.
diff --git a/docs/api-reference/aggregation-layers/contour-layer.md b/docs/api-reference/aggregation-layers/contour-layer.md
@@ -88,8 +88,6 @@ Size of each cell in meters
 
 When set to true and browser supports GPU aggregation, aggregation is performed on GPU. GPU aggregation can be 2 to 3 times faster depending upon number of points and number of cells.
 
-NOTE: GPU Aggregation requires WebGL2 support by the browser. When `gpuAggregation` is set to true and browser doesn't support WebGL2, aggregation falls back to CPU.
-
 ##### `aggregation` (String, optional) {#aggregation}
 
 * Default: 'SUM'

diff --git a/docs/api-reference/aggregation-layers/gpu-grid-layer.md b/docs/api-reference/aggregation-layers/gpu-grid-layer.md
@@ -1,12 +1,12 @@
-# GPUGridLayer (WebGL2)
+# GPUGridLayer
 
 import {GPUGridLayerDemo} from '@site/src/doc-demos/aggregation-layers';
 
 <GPUGridLayerDemo />
 
-The `GPUGridLayer` aggregates data into a grid-based heatmap. The color and height of a cell are determined based on the objects it contains. This layer performs aggregation on GPU hence not supported in non WebGL2 browsers.
+The `GPUGridLayer` aggregates data into a grid-based heatmap. The color and height of a cell are determined based on the objects it contains.
 
-`GPUGridLayer` is one of the sublayers for [GridLayer](./grid-layer.md) and is only supported when using `WebGL2` enabled browsers. It is provided to customize GPU Aggregation for advanced use cases. For any regular use case, [GridLayer](./grid-layer.md) is recommended.
+`GPUGridLayer` is one of the sublayers for [GridLayer](./grid-layer.md). It is provided to customize GPU Aggregation for advanced use cases. For any regular use case, [GridLayer](./grid-layer.md) is recommended.
 
 `GPUGridLayer` is a [CompositeLayer](../core/composite-layer.md).
 

diff --git a/docs/api-reference/aggregation-layers/grid-layer.md b/docs/api-reference/aggregation-layers/grid-layer.md
@@ -407,7 +407,7 @@ The following table compares the performance between CPU and GPU aggregations us
 
 ### Fallback Cases
 
-This layer performs aggregation on GPU when the browser is using `WebGL2` and the `gpuAggregation` prop is set to `true`, but will fallback to CPU in the following cases:
+This layer performs aggregation on GPU when the `gpuAggregation` prop is set to `true`, but will fallback to CPU in the following cases:
 
 #### Percentile Props
 

diff --git a/docs/api-reference/aggregation-layers/screen-grid-layer.md b/docs/api-reference/aggregation-layers/screen-grid-layer.md
@@ -132,8 +132,6 @@ NOTE: `minColor` and `maxColor` take precedence over `colorDomain` and `colorRan
 
 When set to true and browser supports GPU aggregation, aggregation is performed on GPU. GPU aggregation can be 10 to 20 times faster depending upon number of points and number of cells.
 
-NOTE: GPU Aggregation requires WebGL2 support by the browser. When `gpuAggregation` is set to true and browser doesn't support WebGL2, aggregation falls back to CPU.
-
 ##### `aggregation` (String, optional) {#aggregation}
 
 * Default: 'SUM'

diff --git a/docs/api-reference/core/attribute.md b/docs/api-reference/core/attribute.md
@@ -53,7 +53,7 @@ The constructor for the Attribute class. Use this to create a new Attribute.
 
 ### delete
 
-Free WebGL resources associated with this attribute.
+Free GPU resources associated with this attribute.
 
 
 ### update

diff --git a/docs/api-reference/core/composite-layer.md b/docs/api-reference/core/composite-layer.md
@@ -100,7 +100,7 @@ A `Layer` instance if this layer is rendered by a [CompositeLayer](./composite-l
 
 ##### `draw` {#draw}
 
-A composite layer does not render directly into the WebGL context. The `draw` method inherited from the base class is therefore never called.
+A composite layer does not render directly into the WebGL2/WebGPU context. The `draw` method inherited from the base class is therefore never called.
 
 ##### `renderLayers` {#renderlayers}
 

diff --git a/docs/api-reference/core/deck.md b/docs/api-reference/core/deck.md
@@ -72,7 +72,7 @@ The container to append the auto-created canvas to.
 
 * Default: `false`
 
-Flag to enable WebGL debug mode. Also requires an extra luma.gl import:
+Flag to enable GPU debug mode. Also requires an extra luma.gl import:
 
 ```js
 import '@luma.gl/debug';
@@ -141,7 +141,7 @@ Note:
 
 ##### `parameters` (Object) {#parameters}
 
-Expects an object with WebGL settings. Before each frame is rendered, this object will be passed to luma.gl's `setParameters` function to reset the WebGL context parameters, e.g. to disable depth testing, change blending modes etc. The default parameters set by `Deck` on initialization are the following:
+Expects an object with GPU parameters. Before each frame is rendered, this object will be passed to luma.gl's `setParameters` function to reset the GPU context parameters, e.g. to disable depth testing, change blending modes etc. The default parameters set by `Deck` on initialization are the following:
 
 ```js
 {
@@ -168,7 +168,7 @@ new Deck({
 
 Notes:
 
-- Any WebGL `parameters` prop supplied to individual layers will still override the global `parameters` when that layer is rendered.
+- Any GPU `parameters` prop supplied to individual layers will still override the global `parameters` when that layer is rendered.
 - An alternative way to set `parameters`  is to instead define the `onWebGLInitialized` callback (it receives the `gl` context as parameter) and call the luma.gl `setParameters` method inside it.
 
 ##### `layers` (Array) {#layers}

diff --git a/docs/api-reference/core/viewport.md b/docs/api-reference/core/viewport.md
@@ -4,7 +4,7 @@
 
 A deck.gl `Viewport` is essentially a geospatially enabled camera, and combines a number of responsibilities, which can project and unproject 3D coordinates to the screen.
 
-`Viewport` classes are focused on mathematical operations such as coordinate projection/unprojection, and calculation of `view` and `projection` matrices and other uniforms needed by the WebGL vertex shaders. The basic `Viewport` class is a generic geospatially enabled version of the typical 3D "camera" class you would find in most 3D/WebGL/OpenGL library.
+`Viewport` classes are focused on mathematical operations such as coordinate projection/unprojection, and calculation of `view` and `projection` matrices and other uniforms needed by the WebGL2/WebGPU vertex shaders. The basic `Viewport` class is a generic geospatially enabled version of the typical 3D "camera" class you would find in most 3D/WebGL2/OpenGL libraries.
 
 While the `Viewport` class can certainly be used directly if you need and are able to calculate your own projection matrices, you typically do not directly create `Viewport` instances. Instead, `Viewport` classes are created using the [View](./view.md) class descriptors and the current `viewState`.
 
@@ -184,7 +184,7 @@ if (outDir) {
 
 * The `Viewport` class and its subclasses are perhaps best thought of as geospatially enabled counterparts of the typical `Camera` classes found in most 3D libraries.
 * The `Viewport` class works together with the `project` shader module and generates the uniforms that module needs to project correctly in GLSL code.
-* Accordingly, a main function of viewports is to generate WebGL compatible view and projection matrices (column-major format).
+* Accordingly, a main function of viewports is to generate WebGL2/WebGPU compatible view and projection matrices (column-major format).
 * Functions (including projection and unprojection of coordinates) are available both in JavaScript and in GLSL, so that layers can do consistent projection calculations in both GLSL and JavaScript.
 * To support pixel project/unproject functions (in addition to the clipspace projection that Camera classes typically manage), the `Viewport` is also aware of the viewport extents.
 * In geospatial setups, Viewports can contain geospatial anchors.

diff --git a/docs/api-reference/extensions/path-style-extension.md b/docs/api-reference/extensions/path-style-extension.md
@@ -110,7 +110,7 @@ Only effective if `getDashArray` is specified. If `true`, gaps between solid str
 
 ### Limitations
 
-WebGL has guaranteed support for up to 16 attributes per shader. The current implementation of `PathLayer` uses 13 attributes. Each one of the options of this extension adds one more attribute. In other words, if all options are enabled, the layer will not be able to use other extensions.
+WebGL2 has guaranteed support for up to 16 attributes per shader. The current implementation of `PathLayer` uses 13 attributes. Each one of the options of this extension adds one more attribute. In other words, if all options are enabled, the layer will not be able to use other extensions.
 
 ### Tips on Rendering Dash Lines
 

diff --git a/docs/api-reference/google-maps/google-maps-overlay.md b/docs/api-reference/google-maps/google-maps-overlay.md
@@ -59,7 +59,7 @@ const overlay = new GoogleMapsOverlay(props)
 overlay.setMap(map);
 ```
 
-Add/remove the overlay from a map. An overlay can be temporarily hidden from a map by calling `setMap(null)`. Removing an overlay does not destroy the WebGL context; use `finalize()` if the overlay should be permanently removed.
+Add/remove the overlay from a map. An overlay can be temporarily hidden from a map by calling `setMap(null)`. Removing an overlay does not destroy the WebGL2 context; use `finalize()` if the overlay should be permanently removed.
 
 ##### `setProps` {#setprops}
 

diff --git a/docs/api-reference/google-maps/overview.md b/docs/api-reference/google-maps/overview.md
@@ -37,7 +37,7 @@ From v8.6, the `GoogleMapsOverlay` class automatically detects at runtime which
 
 - Shared 3D space: objects drawn by the `GoogleMapsOverlay` class appear inside the Google Maps scene, correctly intersecting with 3D buildings and behind the contextual labels drawn by Google Maps
 - Tilting and rotating the view is supported
-- Rendering uses the same WebGL context as Google Maps, improving performance
+- Rendering uses the same WebGL2 context as Google Maps, improving performance
 
 ## Supported Features and Limitations
 

diff --git a/docs/api-reference/layers/bitmap-layer.md b/docs/api-reference/layers/bitmap-layer.md
@@ -55,19 +55,19 @@ new deck.BitmapLayer({});
 
 ### Data
 
-##### `image` (String|Texture2D|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Promise|Object) {#image}
+##### `image` (String|Texture|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Promise|Object) {#image}
 
 - Default `null`.
 
 The image to display.
 
 - If a string is supplied, it is interpreted as a URL or a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
 - One of the following, or a Promise that resolves to one of the following:
-  + One of the valid [pixel sources for WebGL texture](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D)
-  + A luma.gl [Texture2D](https://github.com/visgl/luma.gl/blob/8.5-release/modules/webgl/docs/api-reference/texture-2d.md) instance
-  + A plain object that can be passed to the `Texture2D` constructor, e.g. `{width: <number>, height: <number>, data: <Uint8Array>}`. Note that whenever this object shallowly changes, a new texture will be created.
+  + One of the valid [pixel sources for WebGL2 texture](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D)
+  + A luma.gl [Texture](https://felixpalmer.github.io/luma.gl/docs/api-reference/core/resources/texture) instance
+  + A plain object that can be passed to the `Texture` constructor, e.g. `{width: <number>, height: <number>, data: <Uint8Array>}`. Note that whenever this object shallowly changes, a new texture will be created.
 
-The image data will be converted to a [Texture2D](https://github.com/visgl/luma.gl/blob/8.5-release/modules/webgl/docs/api-reference/texture-2d.md) object. See `textureParameters` prop for advanced customization.
+The image data will be converted to a [Texture](https://felixpalmer.github.io/luma.gl/docs/api-reference/core/resources/texture) object. See `textureParameters` prop for advanced customization.
 
 ##### `bounds` (Array) {#bounds}
 
@@ -87,16 +87,17 @@ On top of the [default options](../core/layer.md#loadoptions), also accepts opti
 
 ##### `textureParameters` (Object) {#textureparameters}
 
-Customize the [texture parameters](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texParameter).
+Customize the [texture parameters](https://felixpalmer.github.io/luma.gl/docs/api-reference/core/resources/sampler#samplerprops).
 
 If not specified, the layer uses the following defaults to create a linearly smoothed texture from `image`:
 
 ```js
 {
-  [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
-  [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-  [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-  [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+  minFilter: 'linear',
+  magFilter: 'linear',
+  mipmapFilter: 'linear',
+  addressModeU: 'clamp-to-edge',
+  addressModeV: 'clamp-to-edge'
 }
 ```
 
@@ -108,8 +109,8 @@ import GL from '@luma.gl/constants';
 new BitmapLayer({
   ...
   textureParameters: {
-    [GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
-    [GL.TEXTURE_MAG_FILTER]: GL.NEAREST
+    minFilter: 'nearest',
+    magFilter: 'nearest'
   }
 })
 ```

diff --git a/docs/api-reference/layers/icon-layer.md b/docs/api-reference/layers/icon-layer.md
@@ -141,17 +141,17 @@ new deck.IconLayer({});
 
 Inherits from all [Base Layer](../core/layer.md) properties.
 
-##### `iconAtlas` (String|Texture2D|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Promise|Object, optional) {#iconatlas}
+##### `iconAtlas` (String|Texture|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Promise|Object, optional) {#iconatlas}
 
 A pre-packed image that contains all icons.
 
 - If a string is supplied, it is interpreted as a URL or a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
 - One of the following, or a Promise that resolves to one of the following:
-  + One of the valid [pixel sources for WebGL texture](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D)
-  + A luma.gl [Texture2D](https://github.com/visgl/luma.gl/blob/8.5-release/modules/webgl/docs/api-reference/texture-2d.md) instance
-  + A plain object that can be passed to the `Texture2D` constructor, e.g. `{width: <number>, height: <number>, data: <Uint8Array>}`. Note that whenever this object shallowly changes, a new texture will be created.
+  + One of the valid [pixel sources for WebGL2 texture](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D)
+  + A luma.gl [Texture](https://felixpalmer.github.io/luma.gl/docs/api-reference/core/resources/texture) instance
+  + A plain object that can be passed to the `Texture` constructor, e.g. `{width: <number>, height: <number>, data: <Uint8Array>}`. Note that whenever this object shallowly changes, a new texture will be created.
 
-The image data will be converted to a [Texture2D](https://github.com/visgl/luma.gl/blob/8.5-release/modules/webgl/docs/api-reference/texture-2d.md) object. See `textureParameters` prop for advanced customization.
+The image data will be converted to a [Texture](https://felixpalmer.github.io/luma.gl/docs/api-reference/core/resources/texture) object. See `textureParameters` prop for advanced customization.
 
 If you go with pre-packed strategy, this prop is required.
 
@@ -222,16 +222,17 @@ On top of the [default options](../core/layer.md#loadoptions), also accepts opti
 
 ##### `textureParameters` (Object) {#textureparameters}
 
-Customize the [texture parameters](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texParameter).
+Customize the [texture parameters](https://felixpalmer.github.io/luma.gl/docs/api-reference/core/resources/sampler#samplerprops).
 
 If not specified, the layer uses the following defaults to create a linearly smoothed texture from `iconAtlas`:
 
 ```js
 {
-  [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
-  [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-  [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-  [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+  minFilter: 'linear',
+  magFilter: 'linear',
+  mipmapFilter: 'linear',
+  addressModeU: 'clamp-to-edge',
+  addressModeV: 'clamp-to-edge'
 }
 ```