wordpress 推薦環(huán)境關鍵詞seo排名優(yōu)化
1. WebGL是什么？
WebGL（Web Graphics Library）是一種JavaScript API，它允許你在不需要安裝任何額外插件的情況下，直接在瀏覽器中渲染高性能的2D和3D圖形。WebGL利用了用戶的圖形處理單元（GPU）來加快渲染速度，這意味著你可以在網(wǎng)頁上創(chuàng)建類似桌面應用程序的視覺效果。
1.1 WebGL入門代碼實現(xiàn)如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>給畫布換個顏色</title>
</head>
<body><canvas id="canvas" width="400" height="400">此瀏覽器不支持canvas</canvas><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')gl.clearColor(1.0, 0.0, 0.0, 1.0)gl.clear(gl.COLOR_BUFFER_BIT)</script>
</body>
</html>1.2 方法詳解
（1）gl.clearColor(r,g,b,a) 指定清空<canvas>的顏色，接收四個參數(shù)取值區(qū)間為 0.0~1.0)
（2）gl.clear(buffer)?清空canvas參數(shù)分為三項
- gl.COLOR_BUFFER_BIT 清空顏色緩存
- gl.DEPTH_BUFFER_BIT 清空深度緩沖區(qū)
- gl.STENCIL_BUFFER_BIT 清空模板緩沖區(qū)
（3）gl.clear 需要和 gl.clearColor 提到的函數(shù)搭配使用
- gl.clear(gl.COLOR_BUFFER_BIT) 和 gl.clearColor(0.0,0.0,0.0,1.0)
- gl.clear(gl.DEPTH_BUFFER_BIT) 和 gl.clearDepth(1.0)
- gl.clear(gl.STENCIL_BUFFER_BIT) 和 gl.clearStencil(0)
2. WebGL的基本組件
2.1 什么是著色器
（1）著色器：就是讓開發(fā)者自己去編寫一段程序，用來代替固定渲染管線，來處理圖像的渲染。
- 頂點著色器：處理每個頂點的數(shù)據(jù)，如位置、顏色和紋理坐標。
- 片元著色器：處理每個像素（片元）的顏色和其他屬性，最終決定屏幕上顯示的顏色。
2.2 webgl 繪制一個點的流程
?2.2.1 創(chuàng)建著色器源碼
// 頂點著色器源碼
const vertexShaderSource = `
// 必須要存在 main 函數(shù)
void main() {// 要繪制的點的坐標gl_Position = vec4(0.0,0.0,0.0,1.0); // x, y, z, w齊次坐標(x/w，y/w， z/w)// 點的大小gl_PointSize = 10.0;
}`// 片源著色器源碼
const fragmentShaderSource = `
// 必須要存在 main 函數(shù)
void main() {gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a
}`2.2.2 創(chuàng)建著色器
// 創(chuàng)建頂點著色器對象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 創(chuàng)建片段著色器對象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);2.2.3 指定關聯(lián)著色器源碼
// 設置頂點著色器源代碼
gl.shaderSource(vertexShader, vertexShaderSource);
// 設置片段著色器源代碼
gl.shaderSource(fragmentShader, fragmentShaderSource);2.2.4 編譯著色器
// 編譯頂點著色器
gl.compileShader(vertexShader);
// 編譯片段著色器
gl.compileShader(fragmentShader);2.2.5 創(chuàng)建程序對象
const program = gl.createProgram();
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)2.2.6 執(zhí)行繪制
gl.drawArrays(gl.POINTS,0,1); // 繪制一個點，需要1個點