mdn · teoli2003 · Dec 7, 2022 · Dec 6, 2022
@@ -13,7 +13,7 @@ tags:
   - WebGL API
 ---
 
-{{WebGLSidebar}}
+{{DefaultAPISidebar("WebGL")}}
 
 In this WebGL example, we create a canvas and within it render a rotating square using WebGL. The coordinate system we use to represent our scene is the same as the canvas's coordinate system. That is, (0, 0) is at the top-left corner and the bottom-right corner is at (600, 460).
 
@@ -131,31 +131,30 @@ function startup() {
   const shaderSet = [
     {
       type: gl.VERTEX_SHADER,
-      id: "vertex-shader"
+      id: "vertex-shader",
     },
     {
       type: gl.FRAGMENT_SHADER,
-      id: "fragment-shader"
-    }
+      id: "fragment-shader",
+    },
   ];
 
   shaderProgram = buildShaderProgram(shaderSet);
 
-  aspectRatio = glCanvas.width/glCanvas.height;
+  aspectRatio = glCanvas.width / glCanvas.height;
   currentRotation = [0, 1];
   currentScale = [1.0, aspectRatio];
 
   vertexArray = new Float32Array([
-    -0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
-    -0.5, 0.5, 0.5, -0.5, -0.5, -0.5
+    -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
   ]);
 
   vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
 
   vertexNumComponents = 2;
-  vertexCount = vertexArray.length/vertexNumComponents;
+  vertexCount = vertexArray.length / vertexNumComponents;
 
   currentAngle = 0.0;
 
@@ -197,7 +196,7 @@ function buildShaderProgram(shaderInfo) {
     }
   });
 
-  gl.linkProgram(program)
+  gl.linkProgram(program);
 
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     console.log("Error linking shader program:");
@@ -233,7 +232,11 @@ function compileShader(id, type) {
   gl.compileShader(shader);
 
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.log(`Error compiling ${type === gl.VERTEX_SHADER ? "vertex" : "fragment"} shader:`);
+    console.log(
+      `Error compiling ${
+        type === gl.VERTEX_SHADER ? "vertex" : "fragment"
+      } shader:`
+    );
     console.log(gl.getShaderInfoLog(shader));
   }
   return shader;
@@ -258,36 +261,39 @@ function animateScene() {
   gl.clearColor(0.8, 0.9, 1.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
 
-  const radians = currentAngle * Math.PI / 180.0;
+  const radians = (currentAngle * Math.PI) / 180.0;
   currentRotation[0] = Math.sin(radians);
   currentRotation[1] = Math.cos(radians);
 
   gl.useProgram(shaderProgram);
 
-  uScalingFactor =
-      gl.getUniformLocation(shaderProgram, "uScalingFactor");
-  uGlobalColor =
-      gl.getUniformLocation(shaderProgram, "uGlobalColor");
-  uRotationVector =
-      gl.getUniformLocation(shaderProgram, "uRotationVector");
+  uScalingFactor = gl.getUniformLocation(shaderProgram, "uScalingFactor");
+  uGlobalColor = gl.getUniformLocation(shaderProgram, "uGlobalColor");
+  uRotationVector = gl.getUniformLocation(shaderProgram, "uRotationVector");
 
   gl.uniform2fv(uScalingFactor, currentScale);
   gl.uniform2fv(uRotationVector, currentRotation);
   gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
 
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 
-  aVertexPosition =
-      gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
 
   gl.enableVertexAttribArray(aVertexPosition);
-  gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
-        gl.FLOAT, false, 0, 0);
+  gl.vertexAttribPointer(
+    aVertexPosition,
+    vertexNumComponents,
+    gl.FLOAT,
+    false,
+    0,
+    0
+  );
 
   gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
 
   requestAnimationFrame((currentTime) => {
-    const deltaAngle = ((currentTime - previousTime) / 1000.0) * degreesPerSecond;
+    const deltaAngle =
+      ((currentTime - previousTime) / 1000.0) * degreesPerSecond;
 
     currentAngle = (currentAngle + deltaAngle) % 360;
 

@@ -4,6 +4,8 @@ slug: Web/API/WebGL_API/Compressed_texture_formats
 page-type: guide
 ---
 
+{{DefaultAPISidebar("WebGL")}}
+
 The WebGL API provides methods to use compressed texture formats. These are useful to increase texture detail while limiting the additional video memory necessary. By default, no compressed formats are available: a corresponding compressed texture format extension must first be enabled.
 
 ## Usage
@@ -35,17 +37,21 @@ All formats support 2D textures. Which formats support `TEXTURE_2D_ARRAY` and `T
 async function getCompressedTextureIfAvailable(gl) {
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture); // create texture object on GPU
-  const ext = gl.getExtension('WEBGL_compressed_texture_s3tc'); // will be null if not supported
+  const ext = gl.getExtension("WEBGL_compressed_texture_s3tc"); // will be null if not supported
   if (ext) {
     // the file is already in the correct compressed format
-    const dataArrayBuffer = await fetch('/textures/foobar512x512.RGBA_S3TC_DXT1')
-      .then((response) => response.arrayBuffer());
-    gl.compressedTexImage2D(gl.TEXTURE_2D,
+    const dataArrayBuffer = await fetch(
+      "/textures/foobar512x512.RGBA_S3TC_DXT1"
+    ).then((response) => response.arrayBuffer());
+    gl.compressedTexImage2D(
+      gl.TEXTURE_2D,
       0, // set the base image level
       ext.COMPRESSED_RGBA_S3TC_DXT1_EXT, // the compressed format we are using
-      512, 512, // width, height of the image
+      512,
+      512, // width, height of the image
       0, // border, always 0
-      new DataView(dataArrayBuffer));
+      new DataView(dataArrayBuffer)
+    );
     gl.generateMipMap(); // create mipmap levels, like we would for a standard image
     return texture;
   }

@@ -12,23 +12,23 @@ spec-urls:
   - https://www.khronos.org/registry/webgl/specs/latest/2.0/#3.7
 ---
 
-{{WebGLSidebar}}
+{{DefaultAPISidebar("WebGL")}}
 
 The [WebGL API](/en-US/docs/Web/API/WebGL_API) provides several constants that are passed into or returned by functions. All constants are of type {{domxref("WebGL_API/Types", "GLenum")}}.
 
 Standard WebGL constants are installed on the {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} objects, so that you use them as `gl.CONSTANT_NAME`:
 
 ```js
-const canvas = document.getElementById('myCanvas');
-const gl = canvas.getContext('webgl');
+const canvas = document.getElementById("myCanvas");
+const gl = canvas.getContext("webgl");
 
 gl.getParameter(gl.LINE_WIDTH);
 ```
 
 Some constants are also provided by [WebGL extensions](/en-US/docs/Web/API/WebGL_API/Using_Extensions). A [list](#constants_defined_in_webgl_extensions) is provided below.
 
 ```js
-const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
 const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
 ```
 

@@ -18,7 +18,7 @@ tags:
   - WebGL API
 ---
 
-{{WebGLSidebar}}
+{{DefaultAPISidebar("WebGL")}}
 
 Shader programs have access to three kinds of data storage, each of which has a specific use case. Each kind of variable is accessible by one or both types of shader program (depending on the data store type) and possibly by the site's JavaScript code, depending on the specific type of variable.
 
@@ -37,14 +37,14 @@ There are three kinds of "variable" or data storage available in GLSL, each of w
 ```js
 // init colors
 const vertexColors = [
-  vec4(0.0, 0.0, 0.0, 1.0),  // black
-  vec4(1.0, 0.0, 0.0, 1.0),  // red
-  vec4(1.0, 1.0, 0.0, 1.0),  // yellow
-  vec4(0.0, 1.0, 0.0, 1.0),  // green
-  vec4(0.0, 0.0, 0.0, 1.0),  // black
-  vec4(1.0, 0.0, 0.0, 1.0),  // red
-  vec4(1.0, 1.0, 0.0, 1.0),  // yellow
-  vec4(0.0, 1.0, 0.0, 1.0),  // green
+  vec4(0.0, 0.0, 0.0, 1.0), // black
+  vec4(1.0, 0.0, 0.0, 1.0), // red
+  vec4(1.0, 1.0, 0.0, 1.0), // yellow
+  vec4(0.0, 1.0, 0.0, 1.0), // green
+  vec4(0.0, 0.0, 0.0, 1.0), // black
+  vec4(1.0, 0.0, 0.0, 1.0), // red
+  vec4(1.0, 1.0, 0.0, 1.0), // yellow
+  vec4(0.0, 1.0, 0.0, 1.0), // green
 ];
 const cBuffer = gl.createBuffer();
 ```

@@ -1,5 +1,5 @@
 ---
-title: 'WebGL: 2D and 3D graphics for the web'
+title: "WebGL: 2D and 3D graphics for the web"
 slug: Web/API/WebGL_API
 page-type: web-api-overview
 tags:
@@ -19,7 +19,7 @@ browser-compat:
   - api.WebGL2RenderingContext
 ---
 
-{{WebGLSidebar}}
+{{DefaultAPISidebar("WebGL")}}
 
 **WebGL** (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML {{HTMLElement("canvas")}} elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.