Merge pull request mdn#120 from mdn/119-chore-move-webgl-examples-in-…

…dom-examples fix: move webgl examples into dom-examples
atsunny · Jun 28, 2022 · 11156ba · 11156ba
2 parents 5426801 + af32bd6
commit 11156ba
Show file tree

Hide file tree

Showing 30 changed files with 3,654 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -54,3 +54,5 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 * The "web-share" directory contains a simple demo to show usage of the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).
 
 * The "web-workers" directory contains a simple web worker to demonstrate how [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).
+
+* The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.
diff --git a/webgl-examples/README.md b/webgl-examples/README.md
@@ -0,0 +1,33 @@
+# MDN WebGL examples
+
+This repository is home to examples for the MDN Web Docs content about
+the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API),
+which is used for 2D and 3D graphics on the web.
+
+Specifically, each of these examples pairs with an article in the MDN
+[WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial).
+
+## The examples
+
+- [Sample 1](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample1/)
+- [Sample 2](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample2/)
+- [Sample 3](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample3/)
+- [Sample 4](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample4/)
+- [Sample 5](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/)
+- [Sample 6](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/)
+- [Sample 7](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample7/)
+- [Sample 8](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample8/)
+
+### Additional example
+
+- [Tetrahedron](https://mdn.github.io/dom-examples/webgl-examples/tutorial/tetrahedron/)
+
+## Installing and testing
+
+If you choose to fork or clone these examples to experiment with them,
+be aware that WebGL requires that any textures or other binary data
+be loaded from a secure context, which means you can't just use most
+of these samples from a `file:///` URL. Instead, you need to run a
+local web server, or post them to a secure server online.
+
+See our article [How do you set up a local testing server?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server) if you need help getting one set up. Alternatively, if you have [Nodejs](https://github.com/nvm-sh/nvm) installed, you can also look at [`https-localhost`](https://www.npmjs.com/package/https-localhost).
diff --git a/webgl-examples/tutorial/sample1/index.html b/webgl-examples/tutorial/sample1/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>WebGL Demo</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="./webgl.css" type="text/css">
+</head>
+
+<body>
+  <canvas id="glcanvas" width="640" height="480"></canvas>
+</body>
+
+<script>
+  //
+  // Start here
+  //
+  function main() {
+    const canvas = document.querySelector('#glcanvas');
+    // Initialize the GL context
+    const gl = canvas.getContext('webgl');
+
+    // If we don't have a GL context, give up now
+    // Only continue if WebGL is available and working
+
+    if (!gl) {
+      alert('Unable to initialize WebGL. Your browser or machine may not support it.');
+      return;
+    }
+
+    // Set clear color to black, fully opaque
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);
+    // Clear the color buffer with specified clear color
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+
+  window.onload = main;
+</script>
+
+</html>
diff --git a/webgl-examples/tutorial/sample1/webgl.css b/webgl-examples/tutorial/sample1/webgl.css
@@ -0,0 +1,7 @@
+canvas {
+  border: 2px solid black;
+  background-color: black;
+}
+video {
+  display: none;
+}
diff --git a/webgl-examples/tutorial/sample2/index.html b/webgl-examples/tutorial/sample2/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>WebGL Demo</title>
+  <link rel="stylesheet" href="./webgl.css" type="text/css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
+    integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
+    crossorigin="anonymous" defer>
+    </script>
+  <script src="webgl-demo.js" defer></script>
+</head>
+
+<body>
+  <canvas id="glcanvas" width="640" height="480"></canvas>
+</body>
+
+</html>
diff --git a/webgl-examples/tutorial/sample2/webgl-demo.js b/webgl-examples/tutorial/sample2/webgl-demo.js
@@ -0,0 +1,239 @@
+main();
+
+//
+// Start here
+//
+function main() {
+  const canvas = document.querySelector('#glcanvas');
+  const gl = canvas.getContext('webgl');
+
+  // If we don't have a GL context, give up now
+
+  if (!gl) {
+    alert('Unable to initialize WebGL. Your browser or machine may not support it.');
+    return;
+  }
+
+  // Vertex shader program
+
+  const vsSource = `
+    attribute vec4 aVertexPosition;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+    }
+  `;
+
+  // Fragment shader program
+
+  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+
+  // Initialize a shader program; this is where all the lighting
+  // for the vertices and so forth is established.
+  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+  // Collect all the info needed to use the shader program.
+  // Look up which attribute our shader program is using
+  // for aVertexPosition and look up uniform locations.
+  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };
+
+  // Here's where we call the routine that builds all the
+  // objects we'll be drawing.
+  const buffers = initBuffers(gl);
+
+  // Draw the scene
+  drawScene(gl, programInfo, buffers);
+}
+
+//
+// initBuffers
+//
+// Initialize the buffers we'll need. For this demo, we just
+// have one object -- a simple two-dimensional square.
+//
+function initBuffers(gl) {
+
+  // Create a buffer for the square's positions.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Now create an array of positions for the square.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}
+
+//
+// Draw the scene.
+//
+function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
+  gl.clearDepth(1.0);                 // Clear everything
+  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a perspective matrix, a special matrix that is
+  // used to simulate the distortion of perspective in a camera.
+  // Our field of view is 45 degrees, with a width/height
+  // ratio that matches the display size of the canvas
+  // and we only want to see objects between 0.1 units
+  // and 100 units away from the camera.
+
+  const fieldOfView = 45 * Math.PI / 180;   // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js always has the first argument
+  // as the destination to receive the result.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Set the drawing position to the "identity" point, which is
+  // the center of the scene.
+  const modelViewMatrix = mat4.create();
+
+  // Now move the drawing position a bit to where we want to
+  // start drawing the square.
+
+  mat4.translate(modelViewMatrix,     // destination matrix
+                 modelViewMatrix,     // matrix to translate
+                 [-0.0, 0.0, -6.0]);  // amount to translate
+
+  // Tell WebGL how to pull out the positions from the position
+  // buffer into the vertexPosition attribute.
+  {
+    const numComponents = 2;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Tell WebGL to use our program when drawing
+
+  gl.useProgram(programInfo.program);
+
+  // Set the shader uniforms
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+
+//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
diff --git a/webgl-examples/tutorial/sample2/webgl.css b/webgl-examples/tutorial/sample2/webgl.css
@@ -0,0 +1,7 @@
+canvas {
+  border: 2px solid black;
+  background-color: black;
+}
+video {
+  display: none;
+}
diff --git a/webgl-examples/tutorial/sample3/index.html b/webgl-examples/tutorial/sample3/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>WebGL Demo</title>
+  <link rel="stylesheet" href="./webgl.css" type="text/css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
+    integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
+    crossorigin="anonymous" defer>
+    </script>
+  <script src="webgl-demo.js" defer></script>
+</head>
+
+<body>
+  <canvas id="glcanvas" width="640" height="480"></canvas>
+</body>
+
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -54,3 +54,5 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
		* The "web-share" directory contains a simple demo to show usage of the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).

		* The "web-workers" directory contains a simple web worker to demonstrate how [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).

		* The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.