現(xiàn)代 OpenGL（以及名為WebGL的擴(kuò)展）與我過(guò)去學(xué)習(xí)的傳統(tǒng) OpenGL 有很大不同。我了解柵格化的工作原理，所以對(duì)這些概念很滿意。但是我所閱讀的每篇教程都介紹了抽象和輔助函數(shù)跛十，這使我很難理解哪些部分是 OpenGL API 的真正核心。

明確地說(shuō)秕硝，在實(shí)際的應(yīng)用程序中芥映，把位置數(shù)據(jù)和渲染功能分離到單獨(dú)的類(lèi)這樣的抽象很重要。但是远豺，這些抽象把代碼分布到了多個(gè)區(qū)域奈偏，并且由于模板的重復(fù)以及邏輯單元之間的數(shù)據(jù)傳遞而導(dǎo)致大量的開(kāi)銷(xiāo)。而我的最佳學(xué)習(xí)方式是線性代碼流躯护，其中每一行都是手頭主題的核心惊来。

初始化

要使用 WebGL，需要用?canvas?進(jìn)行繪制棺滞。你肯定會(huì)想包括一些常用的 HTML 骨架裁蚁、某些樣式等，但是 canvas 才是最關(guān)鍵的继准。加載 DOM 后枉证，我們將能夠用 Javascript 訪問(wèn)畫(huà)布。

document.addEventListener('DOMContentLoaded',() =>{// 所有的 Javascript 代碼將會(huì)出現(xiàn)在這里});document.addEventListener('DOMContentLoaded',() =>{// 所有的 Javascript 代碼將會(huì)出現(xiàn)在這里});<canvas id="container" width="500" height="500"></canvas>

<script>

? document.addEventListener('DOMContentLoaded', () => {

? ? // 所有的 Javascript 代碼將會(huì)出現(xiàn)在這里

? });

</script>

我們可以通過(guò)畫(huà)布的可訪問(wèn)性獲得 WebGL 的渲染上下文移必，并將其初始化為透明色刽严。 OpenGL 的世界中的顏色是RGBA，每個(gè)分量都在?0?和?1?之間避凝。透明色是用于在重新繪制場(chǎng)景的幀的開(kāi)始時(shí)繪制畫(huà)布的顏色。

const canvas = document.getElementById('container');

const gl = canvas.getContext('webgl');

gl.clearColor(1, 1, 1, 1);

在實(shí)際的程序中眨补，還可以進(jìn)行更多的初始化管削。需要特別注意的是啟用了“深度緩沖區(qū)（depth buffer）”，這將允許基于 Z 坐標(biāo)對(duì)幾何圖形進(jìn)行排序撑螺。對(duì)于只包含一個(gè)三角形的最簡(jiǎn)程序含思，我們將會(huì)忽略這種情況。

編譯著色器

OpenGL 的核心是柵格化框架甘晤，在這里我們可以決定如何實(shí)現(xiàn)除柵格化之外的所有內(nèi)容含潘。這需要在 GPU 上至少運(yùn)行兩段代碼：

為輸入所執(zhí)行的頂點(diǎn)著色器，每個(gè)輸入都會(huì)對(duì)應(yīng)輸出一個(gè)3D位置（實(shí)際上是齊次坐標(biāo)中的4D）线婚。

為屏幕上的每個(gè)像素所執(zhí)行的片段著色器遏弱，負(fù)責(zé)輸出這個(gè)像素應(yīng)該是哪種顏色。

在這兩個(gè)步驟之間塞弊，OpenGL 從頂點(diǎn)著色器獲取幾何圖形漱逸，并確定這個(gè)幾何圖形實(shí)際上覆蓋了屏幕上的哪些像素泪姨。這是柵格化部分。

兩種著色器通常都是用 GLSL（OpenGL 著色語(yǔ)言）編寫(xiě)的饰抒，然后將其編譯為 GPU 的機(jī)器代碼肮砾。機(jī)器代碼隨后被發(fā)送到 GPU，因此可以在渲染過(guò)程中運(yùn)行袋坑。我不會(huì)把太多時(shí)間花在 GLSL 上仗处，因?yàn)槲抑皇窃谡故净A(chǔ)知識(shí)，但是這種語(yǔ)言與 C 很接近枣宫，著足以讓大多數(shù)程序員感到熟悉婆誓。

首先，我們編譯頂點(diǎn)著色器并將其發(fā)送到GPU镶柱。此處著色器的源代碼被存儲(chǔ)在字符串中旷档，但是也可以從其他位置加載。最終歇拆，該字符串被發(fā)送到 WebGL API鞋屈。

const sourceV = `

? attribute vec3 position;

? varying vec4 color;

? void main() {

? ? gl_Position = vec4(position, 1);

? ? color = gl_Position * 0.5 + 0.5;

? };

? ? ? ?const shaderV = gl.createShader(gl.VERTEX_SHADER);

? ? ? gl.shaderSource(shaderV, sourceV);

? ? ? gl.compileShader(shaderV);

? ?if (!gl.getShaderParameter(shaderV, gl.COMPILE_STATUS)) {

? ? ? ? ? console.error(gl.getShaderInfoLog(shaderV));

? ? ? ? ? throw new Error('Failed to compile vertex shader');

}

在這里的 GLSL 代碼中有一些需要提到的變量：

一個(gè)名為?position?的屬性。屬性本質(zhì)上是一個(gè)輸入故觅，并且為每個(gè)這樣的輸入調(diào)用著色器厂庇。

一種稱(chēng)為?color?的?varying。這既是頂點(diǎn)著色器的輸出（每個(gè)頂點(diǎn)著色器都有一個(gè)）输吏，也是片段著色器的輸入权旷。值被傳遞到片段著色器時(shí)，將根據(jù)柵格化的屬性對(duì)值進(jìn)行插值計(jì)算贯溅。

gl_Position?值拄氯。本質(zhì)上是頂點(diǎn)著色器的輸出，如任何存在變化的值它浅。這很特別译柏，因?yàn)樗糜诖_定需要去繪制哪些像素。

還有一個(gè)稱(chēng)為?uniform?的變量類(lèi)型姐霍，該變量類(lèi)型在多次調(diào)用頂點(diǎn)著色器時(shí)將會(huì)保持不變鄙麦。這些 uniform 用于變換矩陣之類(lèi)的屬性，對(duì)于單個(gè)幾何圖形上的頂點(diǎn)來(lái)說(shuō)镊折，它們都是恒定的胯府。

接下來(lái)，我們用片段著色器執(zhí)行相同的操作恨胚，將其編譯并發(fā)送到 GPU骂因。注意，片段著色器現(xiàn)在可以讀取頂點(diǎn)著色器中的?color?變量赃泡。

? ? ? ?const sourceF = `

? precision mediump float;

? varying vec4 color;

? void main() {

? ? gl_FragColor = color;

? }

`;

const shaderF = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(shaderF, sourceF);

gl.compileShader(shaderF);

if (!gl.getShaderParameter(shaderF, gl.COMPILE_STATUS)) {

? console.error(gl.getShaderInfoLog(shaderF));

? throw new Error('Failed to compile fragment shader');

}

最后侣签，頂點(diǎn)著色器和片段著色器都被鏈接到單個(gè) OpenGL 程序中

const program = gl.createProgram();

gl.attachShader(program, shaderV);

gl.attachShader(program, shaderF);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

? console.error(gl.getProgramInfoLog(program));

? throw new Error('Failed to link program');

}

gl.useProgram(program);

我們告訴 GPU塘装，上面所定義的著色器就是我們要運(yùn)行的著色器。所以剩下事情的就是創(chuàng)建輸入影所，并讓 GPU 在這些輸入上進(jìn)行運(yùn)算蹦肴。

將輸入數(shù)據(jù)發(fā)送到 GPU

輸入的數(shù)據(jù)將會(huì)存儲(chǔ)在 GPU 的內(nèi)存中，并從那里進(jìn)行處理猴娩。與其對(duì)每個(gè)輸入進(jìn)行單獨(dú)的繪制調(diào)用（一次僅傳輸一個(gè)相關(guān)數(shù)據(jù)）阴幌，不如將整個(gè)輸入傳輸?shù)?GPU 并從那里讀取。 （傳統(tǒng) OpenGL 一次只能傳輸一份數(shù)據(jù)卷中，從而導(dǎo)致性能下降矛双。）

OpenGL 提供了一種被稱(chēng)為“頂點(diǎn)緩沖對(duì)象”（VBO）的抽象。我仍在試圖完全弄清楚它的工作原理蟆豫，但是最終议忽，我們將會(huì)使用抽象來(lái)進(jìn)行以下操作：

將一系列字節(jié)存儲(chǔ)在 CPU 的內(nèi)存中。

用通過(guò)?gl.createBuffe()?創(chuàng)建的唯一緩沖區(qū)和?gl.ARRAY_BUFFER?的綁定點(diǎn)（binding point）將字節(jié)傳輸?shù)?GPU 的內(nèi)存十减。

盡管在頂點(diǎn)著色器中每個(gè)輸入變量（屬性）都有一個(gè) VBO栈幸，但也可以把一個(gè) VBO 用于多個(gè)輸入。

? ?const positionsData = new Float32Array([

? ? ? -0.75, -0.65, -1,

? ? ?0.75, -0.65, -1,

? ? ?0? ,? 0.65, -1,

?]);

? ?const buffer = gl.createBuffer();

? ?gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

? ?gl.bufferData(gl.ARRAY_BUFFER, positionsData, gl.STATIC_DRAW);

通常你將會(huì)用對(duì)程序有意義的任何坐標(biāo)來(lái)指定幾何圖形帮辟，然后在頂點(diǎn)著色器中使用一系列轉(zhuǎn)換將它們轉(zhuǎn)換為 OpenGL 的“剪輯空間（clip space）”速址。我不會(huì)介紹剪輯空間的詳細(xì)信息（它們與同構(gòu)坐標(biāo)有關(guān)），但是現(xiàn)在由驹，X 和Y 在?-1?到?+1?之間變化芍锚。由于頂點(diǎn)著色器僅按原樣傳遞輸入數(shù)據(jù)，因此可以直接在剪輯空間中指定坐標(biāo)蔓榄。

接下來(lái)并炮，我們還會(huì)把緩沖區(qū)與頂點(diǎn)著色器中的變量之一相關(guān)聯(lián)：

從上面創(chuàng)建的程序中獲取?position?變量的句柄。

告訴 OpenGL 從?gl.ARRAY_BUFFER?綁定點(diǎn)讀取數(shù)據(jù)甥郑，每批 3 個(gè)渣触，其特殊參數(shù)如?offset?和?stride為零。

const attribute = gl.getAttribLocation(program, 'position');

gl.enableVertexAttribArray(attribute);

gl.vertexAttribPointer(attribute, 3, gl.FLOAT, false, 0, 0);

請(qǐng)注意壹若，我們可以創(chuàng)建 VBO 并將其與“頂點(diǎn)著色器”屬性相關(guān)聯(lián)，因?yàn)橐粋€(gè)接一個(gè)地做皂冰。如果我們將這兩個(gè)功能分開(kāi)（例如一次性創(chuàng)建所有 VBO店展，然后將它們與各個(gè)屬性相關(guān)聯(lián)），則需要在將每個(gè) VBO 與對(duì)應(yīng)的屬性相關(guān)聯(lián)之前調(diào)用?gl.bindBuffer(...)秃流。

繪制

最后赂蕴，按照我們想要的方式設(shè)置 GPU 內(nèi)存中的所有數(shù)據(jù)，我們可以告訴 OpenGL 清除屏幕并在設(shè)置的陣列上運(yùn)行程序舶胀。作為柵格化的一部分（確定哪些像素被頂點(diǎn)覆蓋）概说，我們告訴 OpenGL 將 3 個(gè)一組的頂點(diǎn)視為三角形碧注。

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES, 0, 3);

以線性方式進(jìn)行設(shè)置確實(shí)意味著可以一次就能使程序運(yùn)行。在任何實(shí)際的應(yīng)用中糖赔，我們都會(huì)以結(jié)構(gòu)化的方式存儲(chǔ)數(shù)據(jù)萍丐，在數(shù)據(jù)發(fā)生變化時(shí)將其發(fā)送到 GPU，并在每一幀進(jìn)行繪制放典。

將所有內(nèi)容放在一起逝变，下圖顯示了在屏幕上顯示第一個(gè)三角形的最小概念集。即使這樣奋构，該圖還是被大大簡(jiǎn)化了壳影，所以你最好配合本文所介紹的 75 行代碼放在一起進(jìn)行研究。

完整的處理流程：首先創(chuàng)建著色器弥臼，通過(guò) VBO 將數(shù)據(jù)傳輸?shù)?GPU宴咧，把兩者關(guān)聯(lián)在一起，然后 GPU 在再將所有內(nèi)容組裝成最終的圖像径缅。

最后的步驟掺栅，盡管經(jīng)過(guò)了簡(jiǎn)化，但完整描述了三角形所需的步驟順序

對(duì)我而言芥驳，學(xué)習(xí) OpenGL 的難點(diǎn)在于獲得屏幕上最基本圖像所需的大量模板柿冲。由于柵格化框架要求我們提供 3D 渲染功能，并且與 GPU 的通信非常冗長(zhǎng)兆旬，所以有很多概念需要預(yù)先學(xué)習(xí)假抄。我希望本文所展示的基礎(chǔ)知識(shí)比其他教程更簡(jiǎn)單