?? 前端開發(fā)工程師、技術(shù)日更博主、已過(guò)CET6
?? 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領(lǐng)域TOP1
?? 牛客高級(jí)專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》
?? 藍(lán)橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發(fā)企業(yè)級(jí)健康管理項(xiàng)目》、《帶你從入門到實(shí)戰(zhàn)全面掌握 uni-app》
一、引言
介紹 WebGL 的背景和意義
一、背景
WebGL 是一種 JavaScript API，用于在網(wǎng)頁(yè)上呈現(xiàn)三維圖形。
它是在 2009 年由 Khronos Group 提出的，并于 2011 年成為 W3C 的標(biāo)準(zhǔn)。
在 WebGL 出現(xiàn)之前，網(wǎng)頁(yè)上的三維圖形主要是通過(guò)插件（如 Flash）或使用專用的應(yīng)用程序來(lái)實(shí)現(xiàn)的。這些方法通常需要用戶下載和安裝額外的軟件，并且在不同的瀏覽器和操作系統(tǒng)上可能存在兼容性問(wèn)題。
WebGL 的出現(xiàn)解決了這些問(wèn)題，它允許開發(fā)人員使用 JavaScript 在網(wǎng)頁(yè)上直接繪制三維圖形，而無(wú)需任何插件。WebGL 基于 OpenGL ES 2.0 規(guī)范，并且可以利用 GPU 來(lái)加速圖形渲染。
二、意義
WebGL 的出現(xiàn)使得在網(wǎng)頁(yè)上創(chuàng)建復(fù)雜的三維圖形變得更加容易和普及。它為開發(fā)人員提供了一個(gè)跨平臺(tái)的、標(biāo)準(zhǔn)化的 API，使得他們可以創(chuàng)建各種類型的三維應(yīng)用程序，如游戲、數(shù)據(jù)可視化、虛擬現(xiàn)實(shí)等。
WebGL 還為 Web 應(yīng)用程序帶來(lái)了更好的性能和用戶體驗(yàn)。通過(guò)利用 GPU 加速，WebGL 可以實(shí)現(xiàn)更加流暢的動(dòng)畫和交互，并且可以減少 CPU 的負(fù)載。
此外，WebGL 還為 Web 開發(fā)人員提供了更多的創(chuàng)作可能性。它允許開發(fā)人員創(chuàng)建更加生動(dòng)、引人入勝的用戶界面，從而吸引更多的用戶。
簡(jiǎn)述 WebGL 的優(yōu)勢(shì)和應(yīng)用場(chǎng)景
一、優(yōu)勢(shì)
- 跨平臺(tái)：WebGL 可以在各種現(xiàn)代瀏覽器上運(yùn)行，無(wú)需安裝額外的插件或軟件。
-
性能：WebGL 利用
GPU進(jìn)行圖形渲染，提供了出色的性能和流暢的動(dòng)畫效果。 - 可視化：WebGL 可以用于創(chuàng)建各種類型的可視化應(yīng)用程序，如數(shù)據(jù)可視化、科學(xué)可視化等。
- 互動(dòng)性：WebGL 支持交互性，用戶可以通過(guò)鼠標(biāo)、觸摸等方式與三維場(chǎng)景進(jìn)行互動(dòng)。
- 易于學(xué)習(xí)：WebGL 基于 JavaScript 編程語(yǔ)言，對(duì)于有 JavaScript 基礎(chǔ)的開發(fā)人員來(lái)說(shuō)，學(xué)習(xí)曲線相對(duì)較低。
二、應(yīng)用場(chǎng)景
- 游戲開發(fā)：
WebGL可用于創(chuàng)建各種類型的網(wǎng)頁(yè)游戲，提供豐富的圖形效果和交互體驗(yàn)。 - 數(shù)據(jù)可視化：
WebGL可以將復(fù)雜的數(shù)據(jù)以三維圖形的形式展示出來(lái)，幫助用戶更好地理解和分析數(shù)據(jù)。 - 虛擬現(xiàn)實(shí)：
WebGL可以用于創(chuàng)建虛擬現(xiàn)實(shí)應(yīng)用程序，讓用戶在網(wǎng)頁(yè)上體驗(yàn)沉浸式的虛擬環(huán)境。 - 增強(qiáng)現(xiàn)實(shí)：
WebGL可以與增強(qiáng)現(xiàn)實(shí)技術(shù)結(jié)合，為用戶提供更加豐富的增強(qiáng)現(xiàn)實(shí)體驗(yàn)。 - 教育：
WebGL可以用于教育領(lǐng)域，創(chuàng)建可視化的教學(xué)內(nèi)容，幫助學(xué)生更好地理解抽象的概念。
二、WebGL 的基礎(chǔ)知識(shí)
圖形渲染管道
圖形渲染管道是 WebGL 中用于將三維模型渲染到屏幕上的一系列步驟。它包括頂點(diǎn)著色器、片段著色器、光柵化等階段。
WebGL是一種在瀏覽器中進(jìn)行3D渲染的API,它通過(guò)WebGL API將圖形渲染的任務(wù)交給GPU處理,從而提高渲染速度。
WebGL的圖形渲染管道主要包括以下幾個(gè)部分:
-
(1)
Vertex Shader(頂點(diǎn)著色器):頂點(diǎn)著色器負(fù)責(zé)對(duì)頂點(diǎn)進(jìn)行變換和著色,它將頂點(diǎn)數(shù)據(jù)傳遞給片段著色器。 -
(2)
Fragment Shader(片段著色器):片段著色器負(fù)責(zé)對(duì)像素進(jìn)行著色,它接收頂點(diǎn)著色器傳遞的頂點(diǎn)數(shù)據(jù),計(jì)算出像素的顏色值,并將其輸出到屏幕上。 -
(3)
Shader Program(著色器程序):著色器程序是將頂點(diǎn)著色器和片段著色器組合在一起的一個(gè)程序,它負(fù)責(zé)將頂點(diǎn)數(shù)據(jù)傳遞給著色器進(jìn)行處理,并將處理后的結(jié)果輸出到屏幕上。 -
(4)
Vertex Buffer Object(頂點(diǎn)緩沖對(duì)象):頂點(diǎn)緩沖對(duì)象是將頂點(diǎn)數(shù)據(jù)存儲(chǔ)在GPU的內(nèi)存中,它將頂點(diǎn)數(shù)據(jù)傳遞給頂點(diǎn)著色器進(jìn)行處理。 -
(5)
Index Buffer Object(索引緩沖對(duì)象):索引緩沖對(duì)象是將索引數(shù)據(jù)存儲(chǔ)在GPU的內(nèi)存中,它負(fù)責(zé)將頂點(diǎn)數(shù)據(jù)傳遞給片段著色器進(jìn)行處理。 -
(6)
Texture(紋理):紋理是將圖像或其他紋理映射到三維模型上的一個(gè)過(guò)程,它可以在三維模型上形成光學(xué)效果,使三維模型更加逼真。
坐標(biāo)系統(tǒng)和變換
WebGL 使用三維坐標(biāo)系統(tǒng)來(lái)表示物體的位置和方向。
開發(fā)人員可以使用平移、旋轉(zhuǎn)、縮放等變換操作來(lái)改變物體的坐標(biāo)。
WebGL中的坐標(biāo)系統(tǒng)主要包括世界坐標(biāo)系、視口坐標(biāo)系和像素坐標(biāo)系。
-
(1)世界坐標(biāo)系:世界坐標(biāo)系是三維空間中的坐標(biāo)系,它包含了三維空間中的所有點(diǎn)。
-
(2)視口坐標(biāo)系:視口坐標(biāo)系是將世界坐標(biāo)系中的點(diǎn)映射到屏幕上的坐標(biāo)系,它包含了屏幕上可見(jiàn)的坐標(biāo)范圍。
-
(3)像素坐標(biāo)系:像素坐標(biāo)系是將視口坐標(biāo)系中的點(diǎn)映射到屏幕上的坐標(biāo)系,它包含了屏幕上可見(jiàn)的像素位置。
坐標(biāo)變換是將世界坐標(biāo)系中的點(diǎn)映射到其他坐標(biāo)系的過(guò)程,它包括縮放、旋轉(zhuǎn)和平移等操作。
三維模型和紋理
WebGL支持多種三維模型格式,如OBJ、GLTF、FBX等。
三維模型由頂點(diǎn)和紋理組成,它包含了三維空間中的所有點(diǎn),以及這些點(diǎn)上的紋理信息。
三維模型是 WebGL 中用于表示物體形狀的基本單位。開發(fā)人員可以使用三角形網(wǎng)格來(lái)構(gòu)建三維模型，并使用紋理來(lái)為模型添加細(xì)節(jié)。
光照和材質(zhì)
WebGL支持多種光照和材質(zhì)效果,如漫反射、鏡面反射、高光等。光照和材質(zhì)可以將三維模型上的點(diǎn)映射到不同的顏色和光照效果上,使三維模型更加逼真和立體。
光照和材質(zhì)是 WebGL 中用于模擬物體表面外觀的重要概念。開發(fā)人員可以使用各種類型的光源來(lái)照亮物體，并使用材質(zhì)來(lái)定義物體的反射率、透明度等屬性。
以上是 WebGL 的一些基礎(chǔ)知識(shí)，對(duì)于深入了解 WebGL 的開發(fā)人員來(lái)說(shuō)，還需要進(jìn)一步學(xué)習(xí)高級(jí)特性和最佳實(shí)踐。
三、使用 WebGL 進(jìn)行開發(fā)
JavaScript 與 WebGL 的交互
在 WebGL 中，JavaScript 是主要的編程語(yǔ)言。通過(guò) JavaScript，開發(fā)人員可以與 WebGL 上下文進(jìn)行交互，繪制圖形、設(shè)置屬性等。
WebGL 是一個(gè) JavaScript API,它允許開發(fā)者使用 HTML5 canvas 元素在瀏覽器中渲染 3D 圖形。為了在瀏覽器中使用 WebGL,需要先創(chuàng)建一個(gè) canvas 元素,然后使用 JavaScript 獲取它的上下文,最后使用上下文調(diào)用 WebGL API 進(jìn)行 3D 渲染。
以下是使用 JavaScript 獲取 WebGL 上下文的示例代碼:
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
其中,canvas 元素是要使用的畫布,getContext 方法用于獲取 WebGL 上下文。如果 canvas 元素不存在,getContext 方法將返回 null。
獲取 WebGL 上下文后,可以使用上下文調(diào)用 WebGL API 函數(shù)進(jìn)行 3D 渲染。例如,可以使用 clearColor 函數(shù)設(shè)置畫布的背景色,然后使用 clear 函數(shù)清除畫布上的內(nèi)容,最后使用 drawArrays 函數(shù)繪制一個(gè)三角形。
gl.clearColor(1.0, 0.0, 0.0, 1.0); // 設(shè)置背景色為紅色
gl.clear(gl.COLOR_BUFFER_BIT); // 清除畫布上的內(nèi)容
// 繪制一個(gè)三角形
gl.begin(gl.TRIANGLES);
gl.vertex3f(-0.5, -0.5, 0.0);
gl.vertex3f(0.5, -0.5, 0.0);
gl.vertex3f(0.0, 0.5, 0.0);
gl.end();
創(chuàng)建基本的 WebGL 應(yīng)用程序
創(chuàng)建基本的 WebGL 應(yīng)用程序需要設(shè)置 WebGL 上下文、創(chuàng)建渲染器、繪制圖形等步驟。
- 獲取 WebGL 上下文
要使用 WebGL 進(jìn)行開發(fā),首先需要獲取 WebGL 上下文?？梢酝ㄟ^(guò)以下方式獲取 WebGL 上下文:
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
其中,canvas 是 HTML 元素,用于繪制 3D 圖形。getContext 方法將返回一個(gè) WebGL 上下文對(duì)象,如果上下文對(duì)象不存在,則返回 null。
- 設(shè)置畫布大小
獲取 WebGL 上下文后,需要設(shè)置畫布的大小?？梢酝ㄟ^(guò)以下方式設(shè)置畫布大小:
canvas.width = 500;
canvas.height = 500;
- 設(shè)置 WebGL 視口和投影矩陣
設(shè)置畫布大小后,需要設(shè)置 WebGL 視口和投影矩陣。視口決定了在畫布上可見(jiàn)的像素范圍,而投影矩陣決定了 3D 空間中點(diǎn)如何轉(zhuǎn)換為像素坐標(biāo)。可以通過(guò)以下方式設(shè)置視口和投影矩陣:
gl.viewport(0, 0, canvas.width, canvas.height);
gl.matrixMode(gl.PROJECTION);
gl.loadIdentity();
gl.ortho(0, canvas.width, canvas.height, 0, -1, 1); // 創(chuàng)建透視投影矩陣
gl.matrixMode(gl.MODELVIEW);
其中,viewport 方法設(shè)置了畫布上可見(jiàn)的像素范圍,matrixMode 方法設(shè)置了當(dāng)前使用的矩陣模式,loadIdentity 方法將當(dāng)前矩陣設(shè)置為單位矩陣,ortho 方法創(chuàng)建了一個(gè)透視投影矩陣。
- 繪制 WebGL 圖形
獲取 WebGL 上下文、設(shè)置畫布大小和視口后,就可以繪制 WebGL 圖形了。可以通過(guò)以下方式繪制一個(gè)簡(jiǎn)單的三角形:
var vertexData = new Float32Array([
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
]);
var indexData = new Uint16Array([
0, 1, 2
]);
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
var ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.drawElements(gl.TRIANGLES, indexData.length, gl.UNSIGNED_SHORT, 0);
其中,vertexData 是頂點(diǎn)數(shù)據(jù),indexData 是索引數(shù)據(jù),vbo 和 ibo 是頂點(diǎn)和索引緩沖對(duì)象,gl.vertexAttribPointer 方法設(shè)置了頂點(diǎn)數(shù)據(jù)的位置,gl.drawElements 方法繪制了三角形。
這是一個(gè)簡(jiǎn)單的 WebGL 應(yīng)用程序,它創(chuàng)建了一個(gè) WebGL 上下文、設(shè)置了畫布大小和視口,然后繪制了一個(gè)三角形。在實(shí)際開發(fā)中,可能需要?jiǎng)?chuàng)建更多的 WebGL 對(duì)象和繪制更多的圖形。
繪制幾何圖形
WebGL 提供了多種方法來(lái)繪制幾何圖形，如點(diǎn)、線、三角形等。開發(fā)人員可以使用這些方法來(lái)創(chuàng)建各種形狀的圖形。
使用 WebGL 進(jìn)行開發(fā)時(shí),通常需要繪制幾何圖形。以下是一個(gè)使用 WebGL 繪制簡(jiǎn)單幾何圖形的示例代碼:
// 獲取畫布元素
var canvas = document.getElementById("myCanvas");
// 獲取 WebGL 上下文
var gl = canvas.getContext("webgl");
// 設(shè)置畫布大小
canvas.width = 500;
canvas.height = 500;
// 設(shè)置 WebGL 視口和投影矩陣
gl.viewport(0, 0, canvas.width, canvas.height);
gl.matrixMode(gl.PROJECTION);
gl.loadIdentity();
gl.ortho(0, canvas.width, canvas.height, 0, -1, 1); // 創(chuàng)建透視投影矩陣
gl.matrixMode(gl.MODELVIEW);
// 定義頂點(diǎn)數(shù)據(jù)
var vertices = new Float32Array([
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
]);
// 定義頂點(diǎn)著色器代碼
var vertexShader = `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
`;
// 定義片段著色器代碼
var fragmentShader = `
uniform vec4 color;
void main() {
gl_FragColor = color;
}
`;
// 創(chuàng)建著色器程序
var shaderProgram = gl.createShaderProgram();
gl.attachShader(shaderProgram, gl.createShader(gl.VERTEX_SHADER, vertexShader));
gl.attachShader(shaderProgram, gl.createShader(gl.FRAGMENT_SHADER, fragmentShader));
gl.linkProgram(shaderProgram);
// 設(shè)置頂點(diǎn)數(shù)據(jù)
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 設(shè)置頂點(diǎn)屬性
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
// 繪制圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
在這個(gè)示例中,我們首先獲取了畫布元素和 WebGL 上下文,然后設(shè)置了畫布大小和視口。接著,我們定義了頂點(diǎn)數(shù)據(jù)、頂點(diǎn)著色器代碼、片段著色器代碼,并創(chuàng)建了著色器程序。然后,我們創(chuàng)建了頂點(diǎn)緩沖對(duì)象并將頂點(diǎn)數(shù)據(jù)綁定到頂點(diǎn)緩沖對(duì)象上。最后,我們?cè)O(shè)置了頂點(diǎn)屬性并將頂點(diǎn)數(shù)據(jù)傳遞給著色器程序,最后使用 drawArrays 方法繪制了三角形。
這個(gè)示例僅僅是一個(gè)簡(jiǎn)單的示例,實(shí)際開發(fā)中可能需要繪制更多的幾何圖形和處理更復(fù)雜的頂點(diǎn)數(shù)據(jù)。
紋理映射和材質(zhì)設(shè)置
紋理映射和材質(zhì)設(shè)置是 WebGL 中用于提高圖形真實(shí)感的重要技術(shù)。開發(fā)人員可以使用紋理來(lái)為圖形添加細(xì)節(jié)，并通過(guò)材質(zhì)設(shè)置來(lái)控制圖形的外觀。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-831657.html
以上是使用 WebGL 進(jìn)行開發(fā)的一些基本步驟，對(duì)于深入了解 WebGL 的開發(fā)人員來(lái)說(shuō)，還需要進(jìn)一步學(xué)習(xí)高級(jí)特性和最佳實(shí)踐。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-831657.html
到了這里，關(guān)于WebGL 入門：開啟三維網(wǎng)頁(yè)圖形的新篇章(上)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
