摘要：我們現(xiàn)在可以向她許愿，描述我們心中的猩福世界了的許愿池上的許愿樹(shù)小姐姐有多個(gè)許愿池，我們這里使用。

初次接觸WebGL，如有錯(cuò)誤之處歡迎留言，共同學(xué)習(xí)進(jìn)步. v

我，WebGL，全名Web Graphics Library，是為了讓死宅程序猿們(攤手)能在瀏覽器上為所欲為的畫(huà)女朋友，并還能動(dòng)手動(dòng)腳，而屈尊降臨于猿類(lèi)的世界內(nèi)。哇哈哈哈哈，快來(lái)臣服于我吧，哇嘎嘎嘎嗝~

WebGL小姐姐神通廣大，法力無(wú)邊。那我們?cè)趺从盟齺?lái)創(chuàng)造一個(gè)猿猿幸（有）福（女）美（朋）滿(mǎn)（友）的世界呢？

首先，我們需要一個(gè)名為canvas的祭壇，舉行一個(gè)召喚WebGL小姐姐的小儀式。

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");

那么，WebGL小姐姐Get到手了，接下來(lái)我們需要先將兩樣"祭品"交給她的兩名侍女。

準(zhǔn)備用于創(chuàng)建軀體的原材料和賦予靈魂的色彩兩樣祭品

gl_Position是每次繪制的點(diǎn)，是vec4類(lèi)型，分別空間點(diǎn)(x, y, z)和最后一個(gè)w。對(duì)于w可以參考文章Explaining Homogeneous Coordinates & Projective Geometry，可以理解為投影儀與空間點(diǎn)的距離，距離不同會(huì)導(dǎo)致縮放效應(yīng)，距離遠(yuǎn)則投放的物體越大。我們這里使用沒(méi)有縮放效果的值1.0，并使用了position這個(gè)定義的變量值。每次繪制gpu buffer會(huì)更新position的值.

const vertexShaderSource = `
precision mediump float;
attribute vec2 position;

void main(void) {
    gl_Position = vec4(position.x, position.y, 0.0, 1.0);
}
`;

每次繪制都會(huì)使用glFragColor定義的顏色值，同樣是vec4類(lèi)型，分別代表(r, g, b, a)

const fragmentShaderSource = `
precision mediump float;

void main(void) {
    gl_FragColor = vec4(0.7, 0.5, 0.38, 0.0);
}
`

關(guān)于precision：由于openGL沒(méi)有聲明float類(lèi)型的默認(rèn)精度，所以其姐妹WebGL也就需要為shader聲明精度。又由于高精度openGL沒(méi)有支持，低精度在手機(jī)上可以有兼容問(wèn)題，所以默認(rèn)推薦mediump。參考https://stackoverflow.com/a/28540641/2326199 和 Use mediump precision in WebGL when possible

喚醒侍女并讓她們把祭品處理好

const vertexShader = gl.createShader(gl.VERTEX_SHADER); // 喚醒
gl.shaderSource(vertexShader, vertexShaderSource); // 上交祭品
gl.compileShader(vertexShader); // 處理祭品
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    // 由于祭品偶爾不新鮮或者侍女偷懶，我們要好好確認(rèn)祭品是否處理完畢
    throw new Error(`Error in compileing vertexShader: ${gl.getShaderInfoLog(vertexShader)}`);
}


const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    throw new Error(`Error in compileing vertexShader: ${gl.getShaderInfoLog(vertexShader)}`);
}

祭品已準(zhǔn)備妥當(dāng)，接下來(lái)就是要請(qǐng)出WebGL小姐姐御用創(chuàng)世神器program并使用祭品開(kāi)光，然后交與小姐姐手中。

const program = gl.createProgram(); // 神器現(xiàn)世
gl.attachShader(program, vertexShader); // 開(kāi)第一封印：原料
gl.attachShader(program, fragmentShader); // 開(kāi)第二封印：色開(kāi)
gl.linkProgram(program); // 交與小姐姐

if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    // 咳咳，由于神器與祭品偶爾無(wú)法契合，導(dǎo)致神器失效，需要檢查一下 ~_~
    throw new Error(`invalid program: ${gl.getProgramInfoLog(program)}`);
}

注意了注意了，WebGL小姐姐起手式完畢，開(kāi)天辟地，萬(wàn)物復(fù)蘇。我們現(xiàn)在可以向她許愿，描述我們心中的猩福世界了~v;v~

WebGL小姐姐有多個(gè)許愿池，我們這里使用gl.ARRAY_BUFFER。然后告訴神器program怎么收取愿望。

const buffer = gl.createBuffer(); // 創(chuàng)建許愿樹(shù)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 將許愿樹(shù)種到`ARRAY_BUFFER`這個(gè)許愿池內(nèi)

// 獲取神器`program`的`position`之力
const position = gl.getAttribLocation(program, "position");
// position之力為2個(gè)float類(lèi)型的數(shù)一組，不轉(zhuǎn)化`buffer`類(lèi)型，
// 從頭開(kāi)始，不跳過(guò)任何一個(gè)愿望
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(position);

小姐姐迎著絲毫都沒(méi)有的狂風(fēng)，望著漫無(wú)編輯器的虛無(wú)黑暗，眼角迸發(fā)出一絲絲精光，大筆一揮, 左一劃右一揮。

gl.viewport(0, 0, 400, 400);
gl.useProgram(program);

gl.clearColor(255 / 255, 192 / 255, 203 / 255, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.lineWidth(1.5);

const points = new Float32Array([
    -0.9, 0.9,
    0.0, 0.0,
    0.9, -0.9,
]);

gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -0.9, -0.9,
    0.0, 0.0,
    0.9, 0.9
]), gl.STATIC_DRAW);
gl.drawArrays(gl.LINE_LOOP, 0, 3);

創(chuàng)世之作在漫天閃電，山崩海嘯之下莊嚴(yán)出世!! 登登登，piapia(背景樂(lè))

最后來(lái)一張WebGL繪制整個(gè)過(guò)程的流程圖：

未完待續(xù)

本文章首發(fā)于本人公眾號(hào)：楓之葉

若您能喜歡本文，并欲轉(zhuǎn)發(fā)本文請(qǐng)保留公眾號(hào)聲明與公眾號(hào)二維碼。謝謝 ^v^