WebGL 簡介：使用 JavaScript 建立 3D 圖形應用程式
- 王林轉載
- 2023-08-30 18:29:131416瀏覽
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>
說明
上面顯示的程式碼示範了 WebGL 程式的基本結構。首先定義頂點著色器和片段著色器，它們分別控制每個頂點和像素的位置和顏色。然後著色器被編譯並附加到著色器程式。
接下來，透過建立立方體的頂點位置陣列來定義幾何形狀。建立頂點緩衝區物件 (VBO) 並用頂點資料填充。位置屬性已啟用並配置為從緩衝區讀取頂點資料。
設定變換矩陣（模型視圖和投影）來控制 3D 物件的位置和視角。這些矩陣使用統一變數傳遞給著色器。
最後，透過使用適當的參數呼叫 gl.drawArrays 函數來渲染立方體，以指定渲染模式（例如，線或線循環）和要繪製的頂點數。
結論
WebGL 是一個功能強大的 API，可將 3D 圖形引入網路。它允許開發人員創建視覺上令人驚嘆的互動式應用程序，並直接在瀏覽器中運行。在本文中，我們介紹了 WebGL 的基礎知識，並示範如何使用 JavaScript 建立簡單的 3D 圖形應用程式。
以上是WebGL 簡介：使用 JavaScript 建立 3D 圖形應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！