Skip to content

Commit

Permalink
feat(webgl): Additional texture format extensions (snorm, rgb9e5ufloa…
Browse files Browse the repository at this point in the history 
…t) (#1972)
  • Loading branch information
@ibgreen
ibgreen committed Feb 27, 2024
1 parent 91605be commit 380d1a0
Show file tree
Hide file tree
Showing 9 changed files with 248 additions and 61 deletions.
52 changes: 30 additions & 22 deletions docs/api-reference/core/device-features.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,33 +26,37 @@ Each device has a `device.features` field that holds a `DeviceFeatures` object w

<DeviceTabs />

| Feature Name | This<br /> Browser | Description | WebGL counterpart |
| ------------------------------------------ | ------------------------------------------------- | -------------------------------------------- | --------------------------------------- |
| Feature Name | This<br /> Browser | Description | WebGL counterpart |
| ------------------------------------------ | ------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------ |
| **WebGPU Extensions** |
| `depth-clip-control` | <F f="depth-clip-control"/> | Disable depth clipping via `unclippedDepth` | `WEBGL_depth_texture` |
| `indirect-first-instance` | <F f="indirect-first-instance"/> | Specify instance index via GPU buffer | N/A |
| `timestamp-query` | <F f="timestamp-query"/> | GPU timer query support | N/A |
| `depth-clip-control` | <F f="depth-clip-control"/> | Disable depth clipping via `unclippedDepth` | `WEBGL_depth_texture` |
| `indirect-first-instance` | <F f="indirect-first-instance"/> | Specify instance index via GPU buffer | N/A |
| `timestamp-query` | <F f="timestamp-query"/> | GPU timer query support | N/A |
| **WebGL Extensions** |
| `timer-query-webgl` | <F f="timer-query-webgl"/> | GPU timer support | `EXT_disjoint_timer_query` |
| `compilation-status-async-webgl` | <F f="compilation-status-async-webgl"/> | Non-blocking compile/link status | `KHR_parallel_shader_compile` |
| `polygon-mode-webgl` | <F f="polygon-mode-webgl"/> | Wireframe rendering parameters (debug only) | `WEBGL_polygon_mode` |
| `provoking-vertex-webgl` | <F f="provoking-vertex-webgl"/> | Primitive vertex used for flat shading | `WEBGL_provoking_vertex` |
| `timer-query-webgl` | <F f="timer-query-webgl"/> | GPU timer support | `EXT_disjoint_timer_query` |
| `compilation-status-async-webgl` | <F f="compilation-status-async-webgl"/> | Non-blocking compile/link status | `KHR_parallel_shader_compile` |
| `polygon-mode-webgl` | <F f="polygon-mode-webgl"/> | Wireframe rendering parameters (debug only) | `WEBGL_polygon_mode` |
| `provoking-vertex-webgl` | <F f="provoking-vertex-webgl"/> | Primitive vertex used for flat shading | `WEBGL_provoking_vertex` |
| **Shader Extensions** |
| `shader-f16` | <F f="shader-f16"/> | WGSL supports `f16` | N/A |
| `shader-noperspective-interpolation-webgl` | <F f="shader-noperspective-interpolation-webgl"/> | GLSL `noperspective` interpolation qualifier | `NV_shader_noperspective_interpolation` |
| `shader-conservative-depth-webgl` | <F f="shader-conservative-depth-webgl"/> | GLSL enable early depth test optimizations | `EXT_conservative_depth` |
| `shader-clip-cull-distance-webgl` | <F f="shader-clip-cull-distance-webgl"/> | GLSL `gl_ClipDistance[]/gl_CullDistance[]` | `WEBGL_clip_cull_distance` |
| `shader-f16` | <F f="shader-f16"/> | WGSL supports `f16` | N/A |
| `shader-noperspective-interpolation-webgl` | <F f="shader-noperspective-interpolation-webgl"/> | GLSL `noperspective` interpolation qualifier | `NV_shader_noperspective_interpolation` |
| `shader-conservative-depth-webgl` | <F f="shader-conservative-depth-webgl"/> | GLSL enable early depth test optimizations | `EXT_conservative_depth` |
| `shader-clip-cull-distance-webgl` | <F f="shader-clip-cull-distance-webgl"/> | GLSL `gl_ClipDistance[]/gl_CullDistance[]` | `WEBGL_clip_cull_distance` |
| **Texture Extensions** |
| `depth24unorm-stencil8` | <F f="depth24unorm-stencil8"/> | | `GL.UNSIGNED_INT_24_8_WEBGL` |
| `depth32float-stencil8` | <F f="depth32float-stencil8"/> | | N/A |
| `rg11b10ufloat-renderable` | <F f="rg11b10ufloat-renderable"/> | rg11b10ufloat textures renderable | N/A |
| `float32-renderable-webgl` | <F f="float32-renderable-webgl"/> | float32 textures renderable | `EXT_color_buffer_float` |
| `float16-renderable-webgl` | <F f="float16-renderable-webgl"/> | float16 textures renderable | `EXT_color_buffer_half_float` |
| `float32-filterable` | <F f="float32-filterable"/> | float32 textures are filterable | `OES_texture_float_linear` |
| `float16-filterable-webgl` | <F f="float16-filterable-webgl`" /> | float16 `linear` filtering | `OES_texture_half_float_linear` |
| `texture-filterable-anisotropic-webgl` | <F f="texture-filterable-anisotropic-webgl"/> | anisotropic filtering, common | `EXT_texture_filter_anisotropic` |
| `depth24unorm-stencil8` | <F f="depth24unorm-stencil8"/> | | `GL.UNSIGNED_INT_24_8_WEBGL` |
| `depth32float-stencil8` | <F f="depth32float-stencil8"/> | | N/A |
| `rg11b10ufloat-renderable` | <F f="rg11b10ufloat-renderable"/> | rg11b10ufloat textures renderable | N/A |
| `float32-renderable-webgl` | <F f="float32-renderable-webgl"/> | float32 textures renderable | `EXT_color_buffer_float` |
| `float16-renderable-webgl` | <F f="float16-renderable-webgl"/> | float16 textures renderable | `EXT_color_buffer_half_float` |
| `rgb9e5ufloat-renderable-webgl` | <F f="rgb9e5ufloat-renderable-webgl"/> | `rgb9e5ufloat` renderable | ['WEBGL_render_shared_exponent'][WEBGL_render_shared_exponent] |
| `snorm8-renderable-webgl` | <F f="snorm8-renderable-webgl"/> | `r,rg,rgba8snorm` renderable | [EXT_render_snorm][EXT_render_snorm] |
| `norm16-renderable-webgl` | <F f="norm16-renderable-webgl"/> | `r,rg,rgba16norm` renderable | [EXT_texture_norm16][EXT_texture_norm16] |
| `snorm16-renderable-webgl` | <F f="snorm16-renderable-webgl"/> | `r,rg,rgba16snorm` renderable | [EXT_texture_norm16][EXT_texture_norm16], [EXT_render_snorm][EXT_render_snorm] |
| `float32-filterable` | <F f="float32-filterable"/> | float32 textures are filterable | `OES_texture_float_linear` |
| `float16-filterable-webgl` | <F f="float16-filterable-webgl`" /> | float16 textures are filterable | `OES_texture_half_float_linear` |
| `texture-filterable-anisotropic-webgl` | <F f="texture-filterable-anisotropic-webgl"/> | anisotropic filtering, common | `EXT_texture_filter_anisotropic` |
| `bgra8unorm-storage` | <F f="bgra8unorm-storage"/> | can be used as storage binding. |
| `texture-blend-float-webgl` | <F f="texture-blend-float-webgl"/> | float texture blending | `EXT_float_blend` |
| `texture-blend-float-webgl` | <F f="texture-blend-float-webgl"/> | float texture blending | `EXT_float_blend` |
| **Compressed Texture Support** |
| `texture-compression-bc` | <F f="texture-compression-bc"/> | DXT (BC1-BC7). Desktops. |
| `texture-compression-bc5-webgl` | <F f="texture-compression-bc5-webgl"/> | DXT (BC1-BC5). Desktops. |
Expand Down Expand Up @@ -92,6 +96,10 @@ if (webglDevice.gl.getExtension('EXT_disjoint_timer_query_webgl2')) {
- [WebGL Report](https://webglreport.com/?v=2)
- [WebGPU Report](https://webgpureport.org/)

[EXT_depth_clamp]: https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
[EXT_render_snorm]: https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
[EXT_depth_clamp]: https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
[WEBGL_render_shared_exponent]: https://www.khronos.org/registry/webgl/extensions/WEBGL_render_shared_exponent/
[timer_query_webgl2]: https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
[texture_compression_bptc]: https://developer.mozilla.org/en-US/docs/Web/API/EXT_texture_compression_bptc
[texture_compression_rgtc]: https://developer.mozilla.org/en-US/docs/Web/API/EXT_texture_compression_rgtc
Expand Down
2 changes: 1 addition & 1 deletion docs/api-reference/core/texture-formats.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ Note that even though a GPU supports creating and sampling textures of a certain
| `rgb9e5ufloat` | <Ft f="rgb9e5ufloat" /> | <L f="rgb9e5ufloat" /> | <R f="rgb9e5ufloat" /> | `GL.RGB9_E5` |
| `rg11b10ufloat` | <Ft f="rg11b10ufloat" /> | <L f="rg11b10ufloat" /> | <R f="rg11b10ufloat" /> | `GL.R11F_G11F_B10F` |
| `rgb10a2unorm` | <Ft f="rgb10a2unorm" /> | <L f="rgb10a2unorm" /> | <R f="rgb10a2unorm" /> | `GL.RGB10_A2` |
| `rgb10a2unorm-webgl` | <Ft f="rgb10a2unorm-webgl" /> | <L f="rgb10a2unorm-webgl" /> | <R f="rgb10a2unorm-webgl" /> | `GL.RGB10_A2UI` |
| `rgb10a2uint-webgl` | <Ft f="rgb10a2uint-webgl" /> | <L f="rgb10a2uint-webgl" /> | <R f="rgb10a2uint-webgl" /> | `GL.RGB10_A2UI` |
| **6 bytes per pixel formats** | | | |
| `rgb16unorm-webgl` | <Ft f="rgb16unorm-webgl" /> | <L f="rgb16unorm-webgl" /> | <R f="rgb16unorm-webgl" /> | |
| `rgb16snorm-webgl` | <Ft f="rgb16snorm-webgl" /> | <L f="rgb16snorm-webgl" /> | <R f="rgb16snorm-webgl" /> | |
Expand Down
30 changes: 21 additions & 9 deletions docs/whats-new.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,30 @@ To accelerate WebGPU development, luma.gl v9 drops support for legacy functional
**`@luma.gl/shadertools`**

- All shader modules now use uniform buffers.
- NEW: `ShaderAssember` class that provides a clean entry point to the shader module system.
- NEW: `ShaderAssembler` class that provides a clean entry point to the shader module system.
- New `CompilerMessage` type and `formatCompilerLog` function for portable shader log handling.

**`@luma.gl/webgl`**

- Asynchronous shader compilation and linking is now supported on systems that support the [KHR_parallel_shader_compile](https://registry.khronos.org/webgl/extensions/KHR_parallel_shader_compile/) WebGL extension. This should speed up initialization for applications that create a lot of `RenderPipelines`.
- `parameters.unclippedDepth` - depth clipping can now be disabled if the `depth-clip-control` feature is available. See [`EXT_depth_clamp`][EXT_depth_clamp].
- `parameters.provokingVertex: 'first'` controls which primitive vertex is used for flat shading. Check the `provoking-vertex-webgl` feature.
- `parameters.polygonMode: 'line'` enables wire frame rendering of polygons. Check the `polygon-mode-webgl` feature.
- `parameters.polygonOffsetLine: true` enables depth bias (polygon offset) for lines. Check the `polygon-mode-webgl` feature.
- `parameters.clipCullDistance0-7: true` enables `gl_ClipDistance[] / gl_CullDistance[]`. Check the `shader-clip-cull-distance-webgl` feature.
WebGL is not dead yet! Browsers (Chrome in particular) are still adding extensions to WebGL 2, and luma.gl
is adding support for many of the new features through the [`DeviceFeatures`](/docs/api-reference/core/device-features) API.

New `Device.features` that improve WebGL application performance:
- `compilation-status-async-webgl`: Asynchronous shader compilation and linking is used automatically when available and speeds up applications that create many `RenderPipelines`.

New `Device.features` that expose new WebGL GPU parameters:
- `depth-clip-control`: `parameters.unclippedDepth` - depth clipping can now be disabled if the feature is available.
- `provoking-vertex-webgl`: `parameters.provokingVertex` - controls which primitive vertex is used for flat shading.
- `polygon-mode-webgl`: `parameters.polygonMode` - enables wire frame rendering of polygons. Check the feature.
- `polygon-mode-webgl`: `parameters.polygonOffsetLine` - enables depth bias (polygon offset) for lines.
- `shader-clip-cull-distance-webgl`: `parameters.clipCullDistance0-7` - enables `gl_ClipDistance[] / gl_CullDistance[]`.

New `Device.features` that enable new GLSL syntax
- `shader-noperspective-interpolation-webgl`: GLSL vertex outputs and fragment inputs may be declared with a `noperspective` interpolation qualifier.
- `shader-conservative-depth-webgl`: New GLSL `gl_FragDepth` qualifiers `depth_any` `depth_greater` `depth_less` `depth_unchanged` can enable early depth test optimizations.
- `shader-conservative-depth-webgl`: GLSL `gl_FragDepth` qualifiers `depth_any` `depth_greater` `depth_less` `depth_unchanged` can enable early depth test optimizations.

[EXT_depth_clamp]: https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
New `Device.features` that enable additional WebGL color format support:
- `rgb9e5ufloat-renderable-webgl`: `rgb9e5ufloat` are renderable.
- `snorm8-renderable-webgl`: `r,rg,rgba8snorm` are renderable.
- `norm16-renderable-webgl`: `r,rg,rgba16norm` are renderable.
- `snorm16-renderable-webgl`: `r,rg,rgba16snorm` are renderable.
5 changes: 4 additions & 1 deletion modules/constants/src/webgl-constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1037,7 +1037,10 @@ enum GLEnum {
SRC1_ALPHA_WEBGL = 0x8589,
ONE_MINUS_SRC1_COLOR_WEBGL = 0x88fa,
ONE_MINUS_SRC1_ALPHA_WEBGL = 0x88fb,
MAX_DUAL_SOURCE_DRAW_BUFFERS_WEBGL = 0x88fc
MAX_DUAL_SOURCE_DRAW_BUFFERS_WEBGL = 0x88fc,

/** EXT_texture_mirror_clamp_to_edge https://registry.khronos.org/webgl/extensions/EXT_texture_mirror_clamp_to_edge/ */
MIRROR_CLAMP_TO_EDGE_EXT = 0x8743
}

export {GLEnum as GL};
Loading

0 comments on commit 380d1a0

Please sign in to comment.