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

初次接觸WebGL，如有錯誤之處歡迎留言，共同學習進步. v

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

WebGL小姐姐神通廣大，法力無邊。那我們怎么用她來創(chuàng)造一個猿猿幸（有）福（女）美（朋）滿（友）的世界呢？

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

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

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

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

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

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

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

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

const fragmentShaderSource = `
precision mediump float;

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

關于precision：由于openGL沒有聲明float類型的默認精度，所以其姐妹WebGL也就需要為shader聲明精度。又由于高精度openGL沒有支持，低精度在手機上可以有兼容問題，所以默認推薦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)) {
    // 由于祭品偶爾不新鮮或者侍女偷懶，我們要好好確認祭品是否處理完畢
    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)}`);
}

祭品已準備妥當，接下來就是要請出WebGL小姐姐御用創(chuàng)世神器program并使用祭品開光，然后交與小姐姐手中。

const program = gl.createProgram(); // 神器現(xiàn)世
gl.attachShader(program, vertexShader); // 開第一封印：原料
gl.attachShader(program, fragmentShader); // 開第二封?。荷_
gl.linkProgram(program); // 交與小姐姐

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

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

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

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

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

小姐姐迎著絲毫都沒有的狂風，望著漫無編輯器的虛無黑暗，眼角迸發(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)世之作在漫天閃電，山崩海嘯之下莊嚴出世!! 登登登，piapia(背景樂)

最后來一張WebGL繪制整個過程的流程圖：

未完待續(xù)

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

若您能喜歡本文，并欲轉發(fā)本文請保留公眾號聲明與公眾號二維碼。謝謝 ^v^