Skip to content

Commit

Permalink
chore(webgl): query and cache each WebGL limit only when requested (#…
Browse files Browse the repository at this point in the history 
…1965)
  • Loading branch information
@ibgreen
ibgreen committed Feb 25, 2024
1 parent d385f3e commit abfa5a2
Show file tree
Hide file tree
Showing 19 changed files with 360 additions and 517 deletions.
161 changes: 52 additions & 109 deletions docs/api-reference/core/device-features.mdx
View file

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions docs/api-reference/core/device-info.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {DeviceTabs, Info} from '@site/src/react-luma';

### Device.info

Holds a `DeviceInfo` object that describes the device, providing information about the driver, GPU, shading language etc.

<DeviceTabs />

| Field | This Browser | Description |
| ------------------------ | ----------------------------------- | ---------------------------------------------------------- |
| `type` | <Info f="type" /> | Device type `webgpu`, `webgl2` or `webgl` |
| `vendor` | <Info f="vendor" /> | GPU vendor |
| `renderer` | <Info f="renderer" /> | GPU Driver |
| `version` | <Info f="version" /> | Driver version |
| `gpu` | <Info f="gpu" /> | `apple`, `intel`, `nvidia`, `amd`, `software` or `unknown` |
| `gpuType` | <Info f="gpuType" /> | `discrete`, `integrated`, `cpu` or `unknown` |
| `gpuBackend` | <Info f="gpuBackend" /> | `metal`, `opengl`, `vulkan`, `d3d12`, ... or `unknown` |
| `gpuArchitecture` | <Info f="gpuArchitecture" /> | `common-3` on Apple |
| `shadingLanguage` | <Info f="shadingLanguage" /> | Shanding language `wgsl`, `glsl` |
| `shadingLanguageVersion` | <Info f="shadingLanguageVersion" /> | Shading language version GLSL 3.00 = 300, GLSL 1.00 = 100) |

- Note that the Chrome browser only exposes limited device information by default. Set the [chrome://flags/#enable-webgpu-developer-features](chrome://flags/#enable-webgpu-developer-features) flag to see more WebGPU info.
81 changes: 3 additions & 78 deletions docs/api-reference/core/device-limits.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
DeviceTabs,
Feature as F,
Limit as L,
WebGLLimit as WL,
} from '@site/src/react-luma';
import {DeviceTabs, Feature as F, Limit as L, WebGLLimit as WL} from '@site/src/react-luma';

# DeviceLimits

Expand All @@ -26,7 +21,7 @@ if (limits.maxTextureDimension2D > 2048) {

<DeviceTabs />

| Limit | Value | WebGL comments |
| Limit | Value | WebGL parameter |
| ------------------------------------------- | --------------------------------------------------- | -------------------------------------- |
| `maxTextureDimension1D` | <L f="maxTextureDimension1D" /> | WebGL does not support 1D textures |
| `maxTextureDimension2D` | <L f="maxTextureDimension2D" /> | `GL.MAX_TEXTURE_SIZE` |
Expand Down Expand Up @@ -55,76 +50,6 @@ if (limits.maxTextureDimension2D > 2048) {
| `maxComputeWorkgroupSizeZ` | <L f="maxComputeWorkgroupSizeZ" /> | WebGL does not support compute shaders |
| `maxComputeWorkgroupsPerDimension` | <L f="maxComputeWorkgroupsPerDimension" /> | WebGL does not support compute shaders |

## WebGL

If you know that you are running on WebGL, you don't need to go through
the luma.gl Device APIs. You can access "raw" WebGL extensions and limits directly.

### Device.webglLimits

A luma.gl `WebGLDevice` extracts an object that contains all "raw" WebGL limits.

```typescript
import {GL} from '@luma.gl/constants';
import {WebGLDevice} from '@luma.gl/webgl';

const webglDevice = device instanceof WebGLDevice ? device as WebGLDevice: null;
console.log(webglDevice ? webglDevice.webglLimits[GL.MAX_VERTEX_ATTRIBS]);
```
<DeviceTabs />
| Limits | This <br/> Browser | Description |
| -------------------------------------------------- | -------------------------------------------------------- | ------------------------------------ |
| `GL.ALIASED_LINE_WIDTH_RANGE` | <WL f="ALIASED_LINE_WIDTH_RANGE" /> | Width !== 1 are no longer supported. |
| `GL.ALIASED_POINT_SIZE_RANGE` | <WL f="ALIASED_POINT_SIZE_RANGE" /> | `topology`: `'point'` |
| `GL.MAX_TEXTURE_SIZE` | <WL f="MAX_TEXTURE_SIZE" /> | Max width/height of texture |
| `GL.MAX_CUBE_MAP_TEXTURE_SIZE` | <WL f="MAX_CUBE_MAP_TEXTURE_SIZE" /> | Max width/height of cube texture |
| `GL.MAX_TEXTURE_IMAGE_UNITS` | <WL f="MAX_TEXTURE_IMAGE_UNITS" /> | |
| `GL.MAX_COMBINED_TEXTURE_IMAGE_UNITS` | <WL f="MAX_COMBINED_TEXTURE_IMAGE_UNITS" /> | |
| `GL.MAX_VERTEX_TEXTURE_IMAGE_UNITS` | <WL f="MAX_VERTEX_TEXTURE_IMAGE_UNITS" /> | |
| `GL.MAX_RENDERBUFFER_SIZE` | <WL f="MAX_RENDERBUFFER_SIZE" /> | |
| `GL.MAX_VARYING_VECTORS` | <WL f="MAX_VARYING_VECTORS" /> | |
| `GL.MAX_VERTEX_ATTRIBS` | <WL f="MAX_VERTEX_ATTRIBS" /> | |
| `GL.MAX_VERTEX_UNIFORM_VECTORS` | <WL f="MAX_VERTEX_UNIFORM_VECTORS" /> | |
| `GL.MAX_FRAGMENT_UNIFORM_VECTORS` | <WL f="MAX_FRAGMENT_UNIFORM_VECTORS" /> | |
| `GL.MAX_VIEWPORT_DIMS` | <WL f="MAX_VIEWPORT_DIMS" /> | |
| `GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT` | <WL f="MAX_TEXTURE_MAX_ANISOTROPY_EXT" /> | |
| `GL.MAX_3D_TEXTURE_SIZE` | <WL f="MAX_3D_TEXTURE_SIZE" /> | |
| `GL.MAX_ARRAY_TEXTURE_LAYERS` | <WL f="MAX_ARRAY_TEXTURE_LAYERS" /> | |
| `GL.MAX_CLIENT_WAIT_TIMEOUT_WEBGL` | <WL f="MAX_CLIENT_WAIT_TIMEOUT_WEBGL" /> | |
| `GL.MAX_COLOR_ATTACHMENTS` | <WL f="MAX_COLOR_ATTACHMENTS" /> | |
| `GL.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS` | <WL f="MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS" /> | |
| `GL.MAX_COMBINED_UNIFORM_BLOCKS` | <WL f="MAX_COMBINED_UNIFORM_BLOCKS" /> | |
| `GL.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS` | <WL f="MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS" /> | |
| `GL.MAX_DRAW_BUFFERS` | <WL f="MAX_DRAW_BUFFERS" /> | |
| `GL.MAX_ELEMENT_INDEX` | <WL f="MAX_ELEMENT_INDEX" /> | |
| `GL.MAX_ELEMENTS_INDICES` | <WL f="MAX_ELEMENTS_INDICES" /> | |
| `GL.MAX_ELEMENTS_VERTICES` | <WL f="MAX_ELEMENTS_VERTICES" /> | |
| `GL.MAX_FRAGMENT_INPUT_COMPONENTS` | <WL f="MAX_FRAGMENT_INPUT_COMPONENTS" /> | |
| `GL.MAX_FRAGMENT_UNIFORM_BLOCKS` | <WL f="MAX_FRAGMENT_UNIFORM_BLOCKS" /> | |
| `GL.MAX_FRAGMENT_UNIFORM_COMPONENTS` | <WL f="MAX_FRAGMENT_UNIFORM_COMPONENTS" /> | |
| `GL.MAX_PROGRAM_TEXEL_OFFSET` | <WL f="MAX_PROGRAM_TEXEL_OFFSET" /> | |
| `GL.MAX_SAMPLES` | <WL f="MAX_SAMPLES" /> | |
| `GL.MAX_SERVER_WAIT_TIMEOUT` | <WL f="MAX_SERVER_WAIT_TIMEOUT" /> | |
| `GL.MAX_TEXTURE_LOD_BIAS` | <WL f="MAX_TEXTURE_LOD_BIAS" /> | |
| `GL.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS` | <WL f="MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS" /> | |
| `GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS` | <WL f="MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS" /> | |
| `GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS` | <WL f="MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS" /> | |
| `GL.MAX_UNIFORM_BLOCK_SIZE` | <WL f="MAX_UNIFORM_BLOCK_SIZE" /> | |
| `GL.MAX_UNIFORM_BUFFER_BINDINGS` | <WL f="MAX_UNIFORM_BUFFER_BINDINGS" /> | |
| `GL.MAX_VARYING_COMPONENTS` | <WL f="MAX_VARYING_COMPONENTS" /> | |
| `GL.MAX_VERTEX_OUTPUT_COMPONENTS` | <WL f="MAX_VERTEX_OUTPUT_COMPONENTS" /> | |
| `GL.MAX_VERTEX_UNIFORM_BLOCKS` | <WL f="MAX_VERTEX_UNIFORM_BLOCKS" /> | |
| `GL.MAX_VERTEX_UNIFORM_COMPONENTS` | <WL f="MAX_VERTEX_UNIFORM_COMPONENTS" /> | |
| `GL.MIN_PROGRAM_TEXEL_OFFSET` | <WL f="MIN_PROGRAM_TEXEL_OFFSET" /> | |
| `GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT` | <WL f="UNIFORM_BUFFER_OFFSET_ALIGNMENT" /> | |
## Remarks
- Some extensions will not be enabled until they have been queried. luma always queries on startup to enable extensions, app only needs to query again it wants to test platform.
- The capability detection system works regardless of whether the app is running in a browser or in headless mode under Node.js.
- Naturally, given that queries to driver and GPU are typically expensive in WebGL, the capabilities system will cache any queries.
['ext_texture_filter_anisotropic']: https://developer.mozilla.org/en-US/docs/Web/API/EXT_texture_filter_anisotropic

- Given that queries to driver and GPU are typically expensive in WebGL, the Device will cache any queried limits.
1 change: 1 addition & 0 deletions docs/sidebar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
"items": [
"api-reference/core/README",
"api-reference/core/device",
"api-reference/core/device-info",
"api-reference/core/device-features",
"api-reference/core/device-limits",
"api-reference/core/canvas-context",
Expand Down
1 change: 1 addition & 0 deletions modules/constants/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,6 @@ export type {
GLValueParameters,
GLFunctionParameters,
GLParameters,
GLLimits,
GLExtensions
} from './webgl-types';
60 changes: 60 additions & 0 deletions modules/constants/src/webgl-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,66 @@ export type GLFunctionParameters = {
/** WebGL style parameters object (with both GL constants and function style fields) */
export type GLParameters = GLValueParameters & GLFunctionParameters;

/** WebGL context limits */
export type GLLimits = {
[GL.ALIASED_LINE_WIDTH_RANGE]: [number, number];
[GL.ALIASED_POINT_SIZE_RANGE]: [number, number];
[GL.MAX_TEXTURE_SIZE]: number;
[GL.MAX_CUBE_MAP_TEXTURE_SIZE]: number;
[GL.MAX_TEXTURE_IMAGE_UNITS]: number;
[GL.MAX_COMBINED_TEXTURE_IMAGE_UNITS]: number;
[GL.MAX_VERTEX_TEXTURE_IMAGE_UNITS]: number;
[GL.MAX_RENDERBUFFER_SIZE]: number;
[GL.MAX_VARYING_VECTORS]: number;
[GL.MAX_VERTEX_ATTRIBS]: number;
[GL.MAX_VERTEX_UNIFORM_VECTORS]: number;
[GL.MAX_FRAGMENT_UNIFORM_VECTORS]: number;
[GL.MAX_VIEWPORT_DIMS]: [number, number];

// Extensions
[GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT]: number;

// WebGL2 Limits
[GL.MAX_3D_TEXTURE_SIZE]: number;
[GL.MAX_ARRAY_TEXTURE_LAYERS]: number;
// [GL.MAX_CLIENT_WAIT_TIMEOUT_WEBGL]: number;
[GL.MAX_COLOR_ATTACHMENTS]: number;
[GL.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS]: number;
[GL.MAX_COMBINED_UNIFORM_BLOCKS]: number;
[GL.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS]: number;
[GL.MAX_DRAW_BUFFERS]: number;
[GL.MAX_ELEMENT_INDEX]: number;
[GL.MAX_ELEMENTS_INDICES]: number;
[GL.MAX_ELEMENTS_VERTICES]: number;
[GL.MAX_FRAGMENT_INPUT_COMPONENTS]: number;
[GL.MAX_FRAGMENT_UNIFORM_BLOCKS]: number;
[GL.MAX_FRAGMENT_UNIFORM_COMPONENTS]: number;
[GL.MAX_SAMPLES]: number;
// [GL.MAX_SERVER_WAIT_TIMEOUT]: number;
[GL.MAX_TEXTURE_LOD_BIAS]: number;
[GL.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS]: number;
[GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS]: number;
[GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS]: number;
[GL.MAX_UNIFORM_BLOCK_SIZE]: number;
[GL.MAX_UNIFORM_BUFFER_BINDINGS]: number;
[GL.MAX_VARYING_COMPONENTS]: number;
[GL.MAX_VERTEX_OUTPUT_COMPONENTS]: number;
[GL.MAX_VERTEX_UNIFORM_BLOCKS]: number;
[GL.MAX_VERTEX_UNIFORM_COMPONENTS]: number;
[GL.MIN_PROGRAM_TEXEL_OFFSET]: number;
[GL.MAX_PROGRAM_TEXEL_OFFSET]: number;
[GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT]: number;

// EXTENSIONS
/** Max clip distances */
MAX_CLIP_DISTANCES_WEBGL: number;
/** Max cull distances */
MAX_CULL_DISTANCES_WEBGL: number;
/** Max clip and cull distances */
MAX_COMBINED_CLIP_AND_CULL_DISTANCES_WEBGL: number;
MAX_DUAL_SOURCE_DRAW_BUFFERS_WEBGL: number;
};

/** WebGL2 Extensions */
export type GLExtensions = {
/** https://registry.khronos.org/webgl/extensions/EXT_color_buffer_float */
Expand Down
19 changes: 1 addition & 18 deletions modules/core-tests/test/adapter/device-helpers/device-limits.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import test from 'tape-promise/tape';
import {GL} from '@luma.gl/constants';
import {getTestDevices, getWebGLTestDevices} from '@luma.gl/test-utils';
import {getTestDevices} from '@luma.gl/test-utils';

const DEVICE_LIMITS = {
maxTextureDimension1D: true,
Expand Down Expand Up @@ -95,20 +95,3 @@ test('WebGLDevice#limits (WebGPU style limits)', async (t) => {
}
t.end();
});

test('WebGLDevice#webglLimits (WebGL style limits)', async (t) => {
for (const testDevice of getWebGLTestDevices()) {
for (const [limit, numeric] of Object.entries(WEBGL_LIMITS)) {
const actual = testDevice.webglLimits[limit];
if (numeric) {
t.ok(
Number.isFinite(actual),
`device.limits[${testDevice.getGLKey(limit)}] returns a number: ${actual}`
);
} else {
t.ok(actual !== undefined, `device.limits.${limit} returns a value: ${actual}`);
}
}
}
t.end();
});
Loading

0 comments on commit abfa5a2

Please sign in to comment.