Improve voxel memory usage via Texture3D

Apps/Sandcastle/gallery/VolumeCloud.html

@@ -327,9 +327,6 @@ <h1>Loading...</h1>
       }`;
 
         const fragmentShader = /* glsl */ `
-      precision highp float;
-      precision highp sampler3D;
-
       in vec3 vOrigin;
       in vec3 vDirection;
 

CHANGES.md

@@ -6,6 +6,7 @@
 
 #### Fixes :wrench:
 
+- Improved voxel memory usage by reworking `Megatexture` to use `Texture3D`. [#12570](https://github.com/CesiumGS/cesium/issues/12570)
 - Fixes jitter artifacts on Intel Arc GPUs [#12879](https://github.com/CesiumGS/cesium/issues/12879)
 
 ## 1.137 - 2026-01-05

Specs/getWebGLStub.js

@@ -112,6 +112,9 @@ function getWebGLStub(canvas, options) {
   stub.texParameteri = noop;
   stub.texImage2D = noop;
   stub.texSubImage2D = noop;
+  stub.texStorage3D = noop;
+  stub.texImage3D = noop;
+  stub.texSubImage3D = noop;
   stub.uniform1f = noop;
   stub.uniform1fv = noop;
   stub.uniform1i = noop;
@@ -232,6 +235,7 @@ function getParameterStub(options) {
   parameterStubValues[WebGLConstants.MAX_TEXTURE_IMAGE_UNITS] = 16;
   parameterStubValues[WebGLConstants.MAX_RENDERBUFFER_SIZE] = 16384;
   parameterStubValues[WebGLConstants.MAX_TEXTURE_SIZE] = 16384;
+  parameterStubValues[WebGLConstants.MAX_3D_TEXTURE_SIZE] = 2048;
   parameterStubValues[WebGLConstants.MAX_VARYING_VECTORS] = 30;
   parameterStubValues[WebGLConstants.MAX_VERTEX_ATTRIBS] = 16;
   parameterStubValues[WebGLConstants.MAX_VERTEX_TEXTURE_IMAGE_UNITS] = 16;

packages/engine/Source/Renderer/Context.js

@@ -86,32 +86,33 @@ function Context(canvas, options) {
 
   ContextLimits._maximumCombinedTextureImageUnits = gl.getParameter(
     gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS,
-  ); // min: 8
+  );
   ContextLimits._maximumCubeMapSize = gl.getParameter(
     gl.MAX_CUBE_MAP_TEXTURE_SIZE,
-  ); // min: 16
+  );
   ContextLimits._maximumFragmentUniformVectors = gl.getParameter(
     gl.MAX_FRAGMENT_UNIFORM_VECTORS,
-  ); // min: 16
+  );
   ContextLimits._maximumTextureImageUnits = gl.getParameter(
     gl.MAX_TEXTURE_IMAGE_UNITS,
-  ); // min: 8
+  );
   ContextLimits._maximumRenderbufferSize = gl.getParameter(
     gl.MAX_RENDERBUFFER_SIZE,
-  ); // min: 1
-  ContextLimits._maximumTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); // min: 64
+  );
+  ContextLimits._maximumTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+  ContextLimits._maximum3DTextureSize = gl.getParameter(gl.MAX_3D_TEXTURE_SIZE);
   ContextLimits._maximumVaryingVectors = gl.getParameter(
     gl.MAX_VARYING_VECTORS,
-  ); // min: 8
+  );
   ContextLimits._maximumVertexAttributes = gl.getParameter(
     gl.MAX_VERTEX_ATTRIBS,
-  ); // min: 8
+  );
   ContextLimits._maximumVertexTextureImageUnits = gl.getParameter(
     gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS,
-  ); // min: 0
+  );
   ContextLimits._maximumVertexUniformVectors = gl.getParameter(
     gl.MAX_VERTEX_UNIFORM_VECTORS,
-  ); // min: 128
+  );
 
   ContextLimits._maximumSamples = this._webgl2
     ? gl.getParameter(gl.MAX_SAMPLES)

packages/engine/Source/Renderer/ContextLimits.js

@@ -10,6 +10,7 @@ const ContextLimits = {
   _maximumTextureImageUnits: 0,
   _maximumRenderbufferSize: 0,
   _maximumTextureSize: 0,
+  _maximum3DTextureSize: 0,
   _maximumVaryingVectors: 0,
   _maximumVertexAttributes: 0,
   _maximumVertexTextureImageUnits: 0,
@@ -31,11 +32,13 @@ const ContextLimits = {
 Object.defineProperties(ContextLimits, {
   /**
    * The maximum number of texture units that can be used from the vertex and fragment
-   * shader with this WebGL implementation.  The minimum is eight.  If both shaders access the
-   * same texture unit, this counts as two texture units.
+   * shader with this WebGL implementation.
+   * If both shaders access the same texture unit, this counts as two texture units.
+   * The minimum in WebGL2 contexts is 32, or 8 in WebGL1 contexts.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumCombinedTextureImageUnits: {
     get: function () {
@@ -45,10 +48,12 @@ Object.defineProperties(ContextLimits, {
 
   /**
    * The approximate maximum cube map width and height supported by this WebGL implementation.
-   * The minimum is 16, but most desktop and laptop implementations will support much larger sizes like 8,192.
+   * The minimum in WebGL2 contexts is 2048, but most desktop and laptop implementations will support much larger sizes like 8192.
+   * The minimum in WebGL1 contexts is 16.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_CUBE_MAP_TEXTURE_SIZE</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_CUBE_MAP_TEXTURE_SIZE</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumCubeMapSize: {
     get: function () {
@@ -58,10 +63,12 @@ Object.defineProperties(ContextLimits, {
 
   /**
    * The maximum number of <code>vec4</code>, <code>ivec4</code>, and <code>bvec4</code>
-   * uniforms that can be used by a fragment shader with this WebGL implementation.  The minimum is 16.
+   * uniforms that can be used by a fragment shader with this WebGL implementation.
+   * The minimum in WebGL2 contexts is 224, or 16 in WebGL1 contexts.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_FRAGMENT_UNIFORM_VECTORS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_FRAGMENT_UNIFORM_VECTORS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumFragmentUniformVectors: {
     get: function () {
@@ -70,10 +77,12 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The maximum number of texture units that can be used from the fragment shader with this WebGL implementation.  The minimum is eight.
+   * The maximum number of texture units that can be used from the fragment shader with this WebGL implementation.
+   * The minimum in WebGL2 contexts is 16, or 8 in WebGL1 contexts.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_TEXTURE_IMAGE_UNITS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_TEXTURE_IMAGE_UNITS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumTextureImageUnits: {
     get: function () {
@@ -83,10 +92,12 @@ Object.defineProperties(ContextLimits, {
 
   /**
    * The maximum renderbuffer width and height supported by this WebGL implementation.
-   * The minimum is 16, but most desktop and laptop implementations will support much larger sizes like 8,192.
+   * The minimum in WebGL2 contexts is 2048, but most desktop and laptop implementations will support much larger sizes like 8192.
+   * The minimum in WebGL1 contexts is 1.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_RENDERBUFFER_SIZE</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_RENDERBUFFER_SIZE</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumRenderbufferSize: {
     get: function () {
@@ -96,23 +107,40 @@ Object.defineProperties(ContextLimits, {
 
   /**
    * The approximate maximum texture width and height supported by this WebGL implementation.
-   * The minimum is 64, but most desktop and laptop implementations will support much larger sizes like 8,192.
+   * The minimum in WebGL2 contexts is 2048, but most desktop and laptop implementations will support much larger sizes like 8192.
+   * The minimum in WebGL1 contexts is 64.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_TEXTURE_SIZE</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_TEXTURE_SIZE</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumTextureSize: {
     get: function () {
       return ContextLimits._maximumTextureSize;
     },
   },
 
+  /**
+   * The approximate maximum texture width, height, and depth supported by this WebGL2 implementation.
+   * The minimum is 256, but most desktop and laptop implementations will support much larger sizes like 2048.
+   * 3D textures are not supported in WebGL1 contexts.
+   * @memberof ContextLimits
+   * @type {number}
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_3D_TEXTURE_SIZE</code>.
+   */
+  maximum3DTextureSize: {
+    get: function () {
+      return ContextLimits._maximum3DTextureSize;
+    },
+  },
+
   /**
    * The maximum number of <code>vec4</code> varying variables supported by this WebGL implementation.
-   * The minimum is eight.  Matrices and arrays count as multiple <code>vec4</code>s.
+   * The minimum is 15 in WebGL2 contexts, or 8 in WebGL1 contexts. Matrices and arrays count as multiple <code>vec4</code>s.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_VARYING_VECTORS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_VARYING_VECTORS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumVaryingVectors: {
     get: function () {
@@ -121,10 +149,12 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The maximum number of <code>vec4</code> vertex attributes supported by this WebGL implementation.  The minimum is eight.
+   * The maximum number of <code>vec4</code> vertex attributes supported by this WebGL implementation.
+   * The minimum is 16 in WebGL2 contexts, or 8 in WebGL1 contexts.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_VERTEX_ATTRIBS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_VERTEX_ATTRIBS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumVertexAttributes: {
     get: function () {
@@ -134,10 +164,11 @@ Object.defineProperties(ContextLimits, {
 
   /**
    * The maximum number of texture units that can be used from the vertex shader with this WebGL implementation.
-   * The minimum is zero, which means the GL does not support vertex texture fetch.
+   * The minimum is 16 in WebGL2 contexts, or 0 in WebGL1 contexts.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_VERTEX_TEXTURE_IMAGE_UNITS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_VERTEX_TEXTURE_IMAGE_UNITS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumVertexTextureImageUnits: {
     get: function () {
@@ -147,10 +178,12 @@ Object.defineProperties(ContextLimits, {
 
   /**
    * The maximum number of <code>vec4</code>, <code>ivec4</code>, and <code>bvec4</code>
-   * uniforms that can be used by a vertex shader with this WebGL implementation.  The minimum is 16.
+   * uniforms that can be used by a vertex shader with this WebGL implementation.
+   * The minimum is 256 in WebGL2 contexts, or 128 in WebGL1 contexts.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_VERTEX_UNIFORM_VECTORS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_VERTEX_UNIFORM_VECTORS</code>.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es2.0/xhtml/glGet.xml|glGet in OpenGL ES 2.0} for WebGL1 contexts.
    */
   maximumVertexUniformVectors: {
     get: function () {
@@ -159,10 +192,10 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The minimum aliased line width, in pixels, supported by this WebGL implementation.  It will be at most one.
+   * The minimum aliased line width, in pixels, supported by this WebGL implementation. It will be at most one.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>ALIASED_LINE_WIDTH_RANGE</code>.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>ALIASED_LINE_WIDTH_RANGE</code>.
    */
   minimumAliasedLineWidth: {
     get: function () {
@@ -171,10 +204,10 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The maximum aliased line width, in pixels, supported by this WebGL implementation.  It will be at least one.
+   * The maximum aliased line width, in pixels, supported by this WebGL implementation. It will be at least one.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>ALIASED_LINE_WIDTH_RANGE</code>.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>ALIASED_LINE_WIDTH_RANGE</code>.
    */
   maximumAliasedLineWidth: {
     get: function () {
@@ -183,10 +216,10 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The minimum aliased point size, in pixels, supported by this WebGL implementation.  It will be at most one.
+   * The minimum aliased point size, in pixels, supported by this WebGL implementation. It will be at most one.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>ALIASED_POINT_SIZE_RANGE</code>.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>ALIASED_POINT_SIZE_RANGE</code>.
    */
   minimumAliasedPointSize: {
     get: function () {
@@ -195,10 +228,10 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The maximum aliased point size, in pixels, supported by this WebGL implementation.  It will be at least one.
+   * The maximum aliased point size, in pixels, supported by this WebGL implementation. It will be at least one.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>ALIASED_POINT_SIZE_RANGE</code>.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>ALIASED_POINT_SIZE_RANGE</code>.
    */
   maximumAliasedPointSize: {
     get: function () {
@@ -207,10 +240,10 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The maximum supported width of the viewport.  It will be at least as large as the visible width of the associated canvas.
+   * The maximum supported width of the viewport. It will be at least as large as the visible width of the associated canvas.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_VIEWPORT_DIMS</code>.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_VIEWPORT_DIMS</code>.
    */
   maximumViewportWidth: {
     get: function () {
@@ -219,10 +252,10 @@ Object.defineProperties(ContextLimits, {
   },
 
   /**
-   * The maximum supported height of the viewport.  It will be at least as large as the visible height of the associated canvas.
+   * The maximum supported height of the viewport. It will be at least as large as the visible height of the associated canvas.
+   * @see {@link https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml|glGet in OpenGL ES 3.0} with <code>MAX_VIEWPORT_DIMS</code>.
    * @memberof ContextLimits
    * @type {number}
-   * @see {@link https://www.khronos.org/opengles/sdk/docs/man/xhtml/glGet.xml|glGet} with <code>MAX_VIEWPORT_DIMS</code>.
    */
   maximumViewportHeight: {
     get: function () {

packages/engine/Source/Renderer/ShaderSource.js

@@ -153,14 +153,11 @@ function getBuiltinsAndAutomaticUniforms(shaderSource) {
 }
 
 function combineShader(shaderSource, isFragmentShader, context) {
-  let i;
-  let length;
-
   // Combine shader sources, generally for pseudo-polymorphism, e.g., czm_getMaterial.
   let combinedSources = "";
   const sources = shaderSource.sources;
   if (defined(sources)) {
-    for (i = 0, length = sources.length; i < length; ++i) {
+    for (let i = 0; i < sources.length; ++i) {
       // #line needs to be on its own line.
       combinedSources += `\n#line 0\n${sources[i]}`;
     }
@@ -225,30 +222,34 @@ function combineShader(shaderSource, isFragmentShader, context) {
   let result = "";
 
   const extensionsLength = extensions.length;
-  for (i = 0; i < extensionsLength; i++) {
+  for (let i = 0; i < extensionsLength; i++) {
     result += extensions[i];
   }
 
   if (isFragmentShader) {
-    // If high precision isn't support replace occurrences of highp with mediump
-    // The highp keyword is not always available on older mobile devices
+    // If high precision isn't supported, replace occurrences of highp with mediump.
+    // The highp keyword is not always available on older mobile devices.
     // See https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#In_WebGL_1_highp_float_support_is_optional_in_fragment_shaders
-    result +=
-      "\
-#ifdef GL_FRAGMENT_PRECISION_HIGH\n\
-    precision highp float;\n\
-    precision highp int;\n\
-#else\n\
-    precision mediump float;\n\
-    precision mediump int;\n\
-    #define highp mediump\n\
-#endif\n\n";
+    result += `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    precision highp int;
+#else
+    precision mediump float;
+    precision mediump int;
+    #define highp mediump
+#endif
+`;
+  }
+
+  if (context.webgl2) {
+    result += `precision highp sampler3D;\n\n`;
   }
 
   // Prepend #defines for uber-shaders
   const defines = shaderSource.defines;
   if (defined(defines)) {
-    for (i = 0, length = defines.length; i < length; ++i) {
+    for (let i = 0, length = defines.length; i < length; ++i) {
       const define = defines[i];
       if (define.length !== 0) {
         result += `#define ${define}\n`;