WebGL 簡介：使用 JavaScript 建立 3D 圖形應用程式-js教程-PHP中文網

WebGL 简介：使用 JavaScript 构建 3D 图形应用程序

WebGL（Web 圖形庫）是一種 JavaScript API，允許開發人員在 Web 瀏覽器中建立和渲染互動式 3D 圖形。它在 JavaScript 程式語言和底層圖形硬體之間架起了一座橋樑，能夠創建身臨其境且視覺震撼的 Web 應用程式。在本文中，我們將探討 WebGL 的基礎知識並示範如何使用 JavaScript 建立簡單的 3D 圖形應用程式。

WebGL 基礎知識

WebGL 基於 OpenGL ES（嵌入式系統）標準，該標準廣泛應用於遊戲產業和其他圖形密集型應用程式。它利用電腦 GPU（圖形處理單元）的強大功能來執行複雜的渲染任務，從而可以在瀏覽器環境中創建高效能 3D 圖形。

要開始使用 WebGL，我們需要將 WebGL 上下文包含在 HTML 畫布元素中。 canvas 元素可作為渲染圖形的容器。以下是如何設定基本 WebGL 環境的範例。

範例

<!DOCTYPE html>
<html>
   <head>
      <title>WebGL Example</title>
      <style>
         body {
            margin: 0;
            overflow: hidden;
         }
         canvas {
            display: block;
         }
      </style>
   </head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const gl = canvas.getContext("webgl");
         if (!gl) {
            alert("Unable to initialise WebGL. Your browser may not support it.");
         }
      </script>
   </body>
</html>

登入後複製

說明

在上面的程式碼中，我們先建立一個id為「myCanvas」的canvas元素。然後，我們使用 JavaScript 取得 canvas 元素的引用，並透過使用參數「webgl」呼叫 getContext 方法來請求 WebGL 上下文。如果瀏覽器支援WebGL，則getContext方法將傳回WebGLRenderingContext對象，我們可以將其儲存在gl變數中。如果不支援 WebGL，則會顯示警告訊息。

渲染 3D 圖形

一旦我們獲得了 WebGL 上下文，我們就可以開始在畫布上渲染 3D 圖形。 WebGL 的工作原理是在 GPU 上執行一系列 OpenGL ES 著色器程序，這些程序執行必要的計算來轉換和渲染 3D 場景的頂點和像素。

著色器程式是一組在 GPU 上執行的指令。 WebGL中有兩種類型的著色器：頂點著色器和片段著色器。頂點著色器處理 3D 物件的每個頂點，轉換其位置、顏色和其他屬性。另一方面，片段著色器決定幾何形狀內每個像素的顏色。

要渲染一個簡單的 3D 對象，我們需要定義其幾何形狀並指定將使用的著色器程式。以下範例示範如何使用 WebGL 渲染旋轉立方體。

範例

<!DOCTYPE html>
<html>
   <head>
      <title>WebGL Example</title>
      <style>
         body {
            margin: 0;
            overflow: hidden;
         }
         canvas {
            display: block;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>
   </head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const gl = canvas.getContext("webgl");
         if (!gl) {
            alert("Unable to initialise WebGL. Your browser may not support it.");
         }

         // Define the vertex shader
         const vertexShaderSource = `
         attribute vec3 aPosition;
         uniform mat4 uModelViewMatrix;
         uniform mat4 uProjectionMatrix;

         void main() {
            gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
         }
         `;

         // Define the fragment shader
         const fragmentShaderSource = `
         precision mediump float;

         void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
         }
         `;

         // Create the vertex shader
         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertexShader, vertexShaderSource);
         gl.compileShader(vertexShader);

         // Create the fragment shader
         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragmentShader, fragmentShaderSource);
         gl.compileShader(fragmentShader);

         // Create the shader program
         const shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertexShader);
         gl.attachShader(shaderProgram, fragmentShader);
         gl.linkProgram(shaderProgram);
         gl.useProgram(shaderProgram);

         // Set up the geometry
         const positions = [
            -1.0, -1.0, -1.0,
            1.0, -1.0, -1.0,
            1.0, 1.0, -1.0,
            -1.0, 1.0, -1.0,
            -1.0, -1.0, 1.0,
            1.0, -1.0, 1.0,
            1.0, 1.0, 1.0,
            -1.0, 1.0, 1.0
         ];
         const vertexBuffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
         const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aPosition");
         gl.enableVertexAttribArray(positionAttributeLocation);
         gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

         // Set up the transformation matrices
         const modelViewMatrixLocation = gl.getUniformLocation(shaderProgram, "uModelViewMatrix");
         const projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "uProjectionMatrix");
         const modelViewMatrix = mat4.create();
         const projectionMatrix = mat4.create();
         mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
         mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100.0);
         gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
         gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

         // Render the cube
         gl.drawArrays(gl.LINE_LOOP, 0, 4);
         gl.drawArrays(gl.LINE_LOOP, 4, 4);
         gl.drawArrays(gl.LINES, 0, 2);
         gl.drawArrays(gl.LINES, 2, 2);
         gl.drawArrays(gl.LINES, 4, 2);
         gl.drawArrays(gl.LINES, 6, 2);
      </script>
   </body>
</html>

登入後複製