Enables WebGL 2 by default

Apps/Sandcastle/gallery/Custom Per-Feature Post Process.html

@@ -59,15 +59,15 @@
         // Shade selected model with highlight.
         const fragmentShaderSource = `
           uniform sampler2D colorTexture;
-          varying vec2 v_textureCoordinates;
+          in vec2 v_textureCoordinates;
           uniform vec4 highlight;
           void main() {
-              vec4 color = texture2D(colorTexture, v_textureCoordinates);
+              vec4 color = texture(colorTexture, v_textureCoordinates);
               if (czm_selected()) {
                   vec3 highlighted = highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb;
-                  gl_FragColor = vec4(highlighted, 1.0);
+                  out_FragColor = vec4(highlighted, 1.0);
               } else { 
-                  gl_FragColor = color;
+                  out_FragColor = color;
               }
           }
           `;

Apps/Sandcastle/gallery/Custom Post Process.html

@@ -54,7 +54,7 @@
 
         const fragmentShaderSource = `
           uniform sampler2D colorTexture; 
-          varying vec2 v_textureCoordinates; 
+          in vec2 v_textureCoordinates; 
           const int KERNEL_WIDTH = 16; 
           void main(void) 
           { 
@@ -65,11 +65,11 @@
               { 
                   for (int j = 0; j < KERNEL_WIDTH; j++) 
                   { 
-                      averageValue += texture2D(colorTexture, integralPos + step * vec2(i, j)).rgb; 
+                      averageValue += texture(colorTexture, integralPos + step * vec2(i, j)).rgb; 
                   } 
               } 
               averageValue /= float(KERNEL_WIDTH * KERNEL_WIDTH); 
-              gl_FragColor = vec4(averageValue, 1.0); 
+              out_FragColor = vec4(averageValue, 1.0); 
           }
           `;
         viewer.scene.postProcessStages.add(

Apps/Sandcastle/gallery/Custom Shaders Models.html

@@ -105,7 +105,7 @@
             void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
             {
                 vec2 texCoord = fsInput.attributes.texCoord_0 + 0.1 * vec2(u_time, 0.0);
-                material.diffuse = texture2D(u_stripes, texCoord).rgb;
+                material.diffuse = texture(u_stripes, texCoord).rgb;
             }
             `,
         });
@@ -156,7 +156,7 @@
             void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
             {
                 vec2 texCoord = fsInput.attributes.texCoord_0;
-                vec4 checkerboard = texture2D(u_checkerboard, texCoord);
+                vec4 checkerboard = texture(u_checkerboard, texCoord);
                 material.diffuse = mix(material.diffuse, vec3(0.0), checkerboard.r);
             }
             `,
@@ -178,7 +178,7 @@
             void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
             {
                 vec2 texCoord = fsInput.attributes.texCoord_0;
-                vec4 checkerboard = texture2D(u_checkerboard, texCoord);
+                vec4 checkerboard = texture(u_checkerboard, texCoord);
                 material.diffuse = checkerboard.rgb;
                 material.alpha = checkerboard.a;
             }
@@ -197,7 +197,7 @@
             void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
             {
                 vec2 texCoord = fsInput.attributes.texCoord_0;
-                vec4 checkerboard = texture2D(u_checkerboard, texCoord);
+                vec4 checkerboard = texture(u_checkerboard, texCoord);
                 if (checkerboard.r > 0.0) {
                     discard;
                 }
@@ -245,7 +245,7 @@
           fragmentShaderText: `
             void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
             {
-                material.diffuse = texture2D(u_gradient, fsInput.attributes.texCoord_0).rgb;
+                material.diffuse = texture(u_gradient, fsInput.attributes.texCoord_0).rgb;
             }
             `,
         });

Apps/Sandcastle/gallery/Fog Post Process.html

@@ -61,7 +61,7 @@
         const fragmentShaderSource = `
           float getDistance(sampler2D depthTexture, vec2 texCoords) 
           { 
-              float depth = czm_unpackDepth(texture2D(depthTexture, texCoords)); 
+              float depth = czm_unpackDepth(texture(depthTexture, texCoords)); 
               if (depth == 0.0) { 
                   return czm_infinity; 
               } 
@@ -85,14 +85,14 @@
           uniform sampler2D depthTexture; 
           uniform vec4 fogByDistance; 
           uniform vec4 fogColor; 
-          varying vec2 v_textureCoordinates; 
+          in vec2 v_textureCoordinates; 
           void main(void) 
           { 
               float distance = getDistance(depthTexture, v_textureCoordinates); 
-              vec4 sceneColor = texture2D(colorTexture, v_textureCoordinates); 
+              vec4 sceneColor = texture(colorTexture, v_textureCoordinates); 
               float blendAmount = interpolateByDistance(fogByDistance, distance); 
               vec4 finalFogColor = vec4(fogColor.rgb, fogColor.a * blendAmount); 
-              gl_FragColor = alphaBlend(finalFogColor, sceneColor); 
+              out_FragColor = alphaBlend(finalFogColor, sceneColor); 
           }
           `;
 

Apps/Sandcastle/gallery/MSAA.html

@@ -34,9 +34,6 @@
         //Sandcastle_Begin
         const viewer = new Cesium.Viewer("cesiumContainer", {
           terrainProvider: Cesium.createWorldTerrain(),
-          contextOptions: {
-            requestWebgl1: false,
-          },
         });
 
         viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(

Apps/Sandcastle/gallery/Materials.html

@@ -120,9 +120,9 @@
                 czm_material czm_getMaterial(czm_materialInput materialInput) { 
                     czm_material material = czm_getDefaultMaterial(materialInput); 
                     vec4 color; 
-                    float heightValue = texture2D(heightField, materialInput.st).r; 
+                    float heightValue = texture(heightField, materialInput.st).r; 
                     color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue); 
-                    color.a = (1.0 - texture2D(image, materialInput.st).r) * 0.7; 
+                    color.a = (1.0 - texture(image, materialInput.st).r) * 0.7; 
                     color = czm_gammaCorrect(color); 
                     material.diffuse = color.rgb; 
                     material.alpha = color.a; 

Apps/Sandcastle/gallery/development/Custom Primitive.html

@@ -184,8 +184,8 @@
           // Inteference patterns made by two plane waves crossing each
           // other at an angle. The color is based on the height.
           const vertexShader = `
-            attribute vec3 a_position;
-            varying vec3 v_position;
+            in vec3 a_position;
+            out vec3 v_position;
             uniform float u_time;
             void main()
             {
@@ -200,7 +200,7 @@
             `;
 
           const fragmentShader = `
-            varying vec3 v_position;
+            in vec3 v_position;
             uniform float u_time;
             uniform sampler2D u_texture;
             void main()
@@ -214,7 +214,7 @@
                 z *= 0.5;
                 // signed -> unsigned
                 z = 0.5 + 0.5 * z;
-                gl_FragColor = texture2D(u_texture, vec2(z, 0.5));
+                out_FragColor = texture(u_texture, vec2(z, 0.5));
             }
             `;
 

Apps/Sandcastle/gallery/development/Ground Primitive Materials.html

@@ -133,9 +133,9 @@
               source:
                 "czm_material czm_getMaterial(czm_materialInput materialInput) {" +
                 "czm_material material = czm_getDefaultMaterial(materialInput);" +
-                "float heightValue = texture2D(heightField, materialInput.st).r;" +
+                "float heightValue = texture(heightField, materialInput.st).r;" +
                 "material.diffuse = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue);" +
-                "material.alpha = (1.0 - texture2D(image, materialInput.st).r) * 0.7;" +
+                "material.alpha = (1.0 - texture(image, materialInput.st).r) * 0.7;" +
                 "material.normal = bumpMap.normal;" +
                 "material.specular = step(0.1, heightValue);" + // Specular mountain tops
                 "material.shininess = 8.0;" + // Sharpen highlight

Documentation/Contributors/CodingGuide/README.md

@@ -994,10 +994,11 @@ fullscreenSubscription.dispose();
 - Files for vertex shaders have a `VS` suffix; fragment shaders have an `FS` suffix. For example: `BillboardCollectionVS.glsl` and `BillboardCollectionFS.glsl`.
 - Generally, identifiers, such as functions and variables, use `camelCase`.
 - Cesium built-in identifiers start with `czm_`, for example, [`czm_material`](https://github.com/CesiumGS/cesium/blob/main/Source/Shaders/Builtin/Structs/material.glsl). Files have the same name without the `czm_` prefix, e.g., `material.glsl`.
+- Use `czm_textureCube` when sampling a cube map instead of `texture`. This is to preserve backwards compatibility with WebGL 1.
 - Varyings start with `v_`, e.g.,
 
 ```javascript
-varying vec2 v_textureCoordinates;
+in vec2 v_textureCoordinates;
 ```
 
 - Uniforms start with `u_`, e.g.,

Documentation/Contributors/TestingGuide/README.md

@@ -494,7 +494,7 @@ Uniforms, the model matrix, and various depth options can be provided. In additi
 it("can declare automatic uniforms", function () {
   const fs =
     "void main() { " +
-    "  gl_FragColor = vec4((czm_viewport.x == 0.0) && (czm_viewport.y == 0.0) && (czm_viewport.z == 1.0) && (czm_viewport.w == 1.0)); " +
+    "  out_FragColor = vec4((czm_viewport.x == 0.0) && (czm_viewport.y == 0.0) && (czm_viewport.z == 1.0) && (czm_viewport.w == 1.0)); " +
     "}";
   expect({
     context: context,
@@ -573,7 +573,7 @@ it("has czm_transpose (2x2)", function () {
     "void main() { " +
     "  mat2 m = mat2(1.0, 2.0, 3.0, 4.0); " +
     "  mat2 mt = mat2(1.0, 3.0, 2.0, 4.0); " +
-    "  gl_FragColor = vec4(czm_transpose(m) == mt); " +
+    "  out_FragColor = vec4(czm_transpose(m) == mt); " +
     "}";
 
   context.verifyDrawForSpecs(fs);
@@ -586,7 +586,7 @@ it("has czm_transpose (2x2)", function () {
 expect(context.readPixels()).toEqual([255, 255, 255, 255]);
 ```
 
-In the test above, the expectation is implicit in the GLSL string for the fragment shader, `fs`, which assigns white to `gl_FragColor` if `czm_transpose` correctly transposes the matrix.
+In the test above, the expectation is implicit in the GLSL string for the fragment shader, `fs`, which assigns white to `out_FragColor` if `czm_transpose` correctly transposes the matrix.
 
 ### Spies
 

Documentation/CustomShaderGuide/README.md

@@ -133,8 +133,8 @@ const textureWithSampler = new Cesium.TextureUniform({
 ## Varyings
 
 Varyings are declared in the `CustomShader` constructor. This automatically
-adds a line such as `varying float v_userDefinedVarying;` to the top of the
-GLSL shader.
+adds lines such as `out float v_userDefinedVarying;` and `in float v_userDefinedVarying;` to the top of the
+GLSL vertex and fragment shaders respectively.
 
 The user is responsible for assigning a value to this varying in
 `vertexShaderText` and using it in `fragmentShaderText`. For example:

Documentation/FabricGuide/README.md

@@ -235,7 +235,7 @@ A slightly more complicated example adds a specular component so that the materi
 }
 ```
 
-The `components` property contains sub-properties that define the appearance of the material. The value of each sub-property is a GLSL code snippet, hence the `vec3(0.5)` above, which creates a 3D vector with each component set to `0.5`. These have access to all GLSL functions like `mix`, `cos`, `texture2D`, etc. There are five sub-properties.
+The `components` property contains sub-properties that define the appearance of the material. The value of each sub-property is a GLSL code snippet, hence the `vec3(0.5)` above, which creates a 3D vector with each component set to `0.5`. These have access to all GLSL functions like `mix`, `cos`, `texture`, etc. There are five sub-properties.
 
 | Name        | Default       | Description                                                                                                                                                                                                              |
 | :---------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -358,7 +358,7 @@ We can implement our own `DiffuseMap` material by using an image uniform:
     image : 'czm_defaultImage'
   },
   components : {
-    diffuse : 'texture2D(image, materialInput.st).rgb'
+    diffuse : 'texture(image, materialInput.st).rgb'
   }
 }
 ```

Documentation/Schemas/Fabric/Examples/MaterialHierarchy2.json

@@ -5,15 +5,15 @@
 				"hot": "hot.jpg"
 			},
 			"components" : {
-				"diffuse" : "texture2D(hot, materialInput.st).rgb"
+				"diffuse" : "texture(hot, materialInput.st).rgb"
 			}		
 		},
 		"cold" : {
 			"uniforms" : {
 				"cold": "cold.jpg"
 			},
 			"components" : {
-				"diffuse" : "texture2D(cold, materialInput.st).rgb"
+				"diffuse" : "texture(cold, materialInput.st).rgb"
 			}		
 		}
 	},

Documentation/Schemas/Fabric/Examples/TextureUniforms.json

@@ -12,8 +12,8 @@
 		}
 	},
     "components": {
-        "diffuse" : "textureCube(mycubemap, normalize(vec3(1.0))).rgb /* not an interesting reflection */",
-        "specular" : "texture2D(myothertexture2D, materialInput.st).r",
-        "emission" : "texture2D(mytexture2D, materialInput.st).rgb"
+        "diffuse" : "czm_textureCube(mycubemap, normalize(vec3(1.0))).rgb /* not an interesting reflection */",
+        "specular" : "texture(myothertexture2D, materialInput.st).r",
+        "emission" : "texture(mytexture2D, materialInput.st).rgb"
     }
 }

Specs/ShaderBuilderTester.js

@@ -66,11 +66,11 @@ ShaderBuilderTester.expectHasVaryings = function (
 ) {
   expectEqualUnordered(
     shaderBuilder._vertexShaderParts.varyingLines,
-    expectedVaryings
+    expectedVaryings.map((varying) => `out ${varying}`)
   );
   expectEqualUnordered(
     shaderBuilder._fragmentShaderParts.varyingLines,
-    expectedVaryings
+    expectedVaryings.map((varying) => `in ${varying}`)
   );
 };
 

Specs/addDefaultMatchers.js

@@ -806,7 +806,7 @@ function contextRenderAndReadPixels(options) {
   if (!defined(sp)) {
     if (!defined(vs)) {
       vs =
-        "attribute vec4 position; void main() { gl_PointSize = 1.0; gl_Position = position; }";
+        "in vec4 position; void main() { gl_PointSize = 1.0; gl_Position = position; }";
     }
     sp = ShaderProgram.fromCache({
       context: context,

packages/engine/Source/Core/PixelFormat.js

@@ -31,6 +31,22 @@ const PixelFormat = {
    */
   ALPHA: WebGLConstants.ALPHA,
 
+  /**
+   * A pixel format containing a red channel
+   *
+   * @type {Number}
+   * @constant
+   */
+  RED: WebGLConstants.RED,
+
+  /**
+   * A pixel format containing red and green channels.
+   *
+   * @type {Number}
+   * @constant
+   */
+  RG: WebGLConstants.RG,
+
   /**
    * A pixel format containing red, green, and blue channels.
    *
@@ -178,8 +194,10 @@ PixelFormat.componentsLength = function (pixelFormat) {
     case PixelFormat.RGBA:
       return 4;
     case PixelFormat.LUMINANCE_ALPHA:
+    case PixelFormat.RG:
       return 2;
     case PixelFormat.ALPHA:
+    case PixelFormat.RED:
     case PixelFormat.LUMINANCE:
       return 1;
     default:
@@ -195,6 +213,8 @@ PixelFormat.validate = function (pixelFormat) {
     pixelFormat === PixelFormat.DEPTH_COMPONENT ||
     pixelFormat === PixelFormat.DEPTH_STENCIL ||
     pixelFormat === PixelFormat.ALPHA ||
+    pixelFormat === PixelFormat.RED ||
+    pixelFormat === PixelFormat.RG ||
     pixelFormat === PixelFormat.RGB ||
     pixelFormat === PixelFormat.RGBA ||
     pixelFormat === PixelFormat.LUMINANCE ||
@@ -469,7 +489,7 @@ PixelFormat.toInternalFormat = function (pixelFormat, pixelDatatype, context) {
         return WebGLConstants.RGB32F;
       case PixelFormat.RG:
         return WebGLConstants.RG32F;
-      case PixelFormat.R:
+      case PixelFormat.RED:
         return WebGLConstants.R32F;
     }
   }
@@ -482,7 +502,7 @@ PixelFormat.toInternalFormat = function (pixelFormat, pixelDatatype, context) {
         return WebGLConstants.RGB16F;
       case PixelFormat.RG:
         return WebGLConstants.RG16F;
-      case PixelFormat.R:
+      case PixelFormat.RED:
         return WebGLConstants.R16F;
     }
   }

packages/engine/Source/Renderer/AutomaticUniforms.js

@@ -151,7 +151,7 @@ const AutomaticUniforms = {
    *
    * // Get the depth at the current fragment
    * vec2 coords = gl_FragCoord.xy / czm_viewport.zw;
-   * float depth = czm_unpackDepth(texture2D(czm_globeDepthTexture, coords));
+   * float depth = czm_unpackDepth(texture(czm_globeDepthTexture, coords));
    */
   czm_globeDepthTexture: new AutomaticUniform({
     size: 1,
@@ -1400,7 +1400,7 @@ const AutomaticUniforms = {
    * // Example: For a given roughness and NdotV value, find the material's BRDF information in the red and green channels
    * float roughness = 0.5;
    * float NdotV = dot(normal, view);
-   * vec2 brdfLut = texture2D(czm_brdfLut, vec2(NdotV, 1.0 - roughness)).rg;
+   * vec2 brdfLut = texture(czm_brdfLut, vec2(NdotV, 1.0 - roughness)).rg;
    */
   czm_brdfLut: new AutomaticUniform({
     size: 1,
@@ -1419,7 +1419,7 @@ const AutomaticUniforms = {
    *
    * // Example: Create a perfect reflection of the environment map on a  model
    * float reflected = reflect(view, normal);
-   * vec4 reflectedColor = textureCube(czm_environmentMap, reflected);
+   * vec4 reflectedColor = texture(czm_environmentMap, reflected);
    */
   czm_environmentMap: new AutomaticUniform({
     size: 1,