WebGL小姐姐教我學畫畫之起手式

我，webgl，全名web graphics library，是為了讓死宅程式猿們(攤手)能在瀏覽器上為所欲為的畫女朋友，並還能動手動腳，而屈尊降臨於猿類的世界內。哇哈哈哈哈，快來臣服於我吧，哇嘎嘎嘎嗝~

webgl小姐姐神通廣大，法力無邊。那我們怎麼用她來創造乙個猿猿幸（有）福（女）美（朋）滿（友）的世界呢？

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

const canvas = document.createelement('canvas');

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

準備用於建立軀體的原材料和賦予靈魂的色彩兩樣祭品

const vertexshadersource = `

precision mediump float;
attribute vec2 position;
void main(void) 
`;

const fragmentshadersource = `

precision mediump float;
void main(void) 
`

關於precision：由於opengl沒有宣告float型別的預設精度，所以其姐妹webgl也就需要為shader宣告精度。又由於高精度opengl沒有支援，低精度在手機上可以有相容問題，所以預設推薦mediump。參考

和 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)) `);
}const fragmentshader = gl.createshader(gl.fragment_shader);
gl.shadersource(fragmentshader, fragmentshadersource);
gl.compileshader(fragmentshader);
if (!gl.getshaderparameter(vertexshader, gl.compile_status)) `);
}

const program = gl.createprogram(); // 神器現世

gl.attachshader(program, vertexshader); // 開第一封印：原料
gl.attachshader(program, fragmentshader); // 開第二封印：色開
gl.linkprogram(program); // 交與小姐姐
if(!gl.getprogramparameter(program, gl.link_status)) `);
}

webgl小姐姐有多個許願池，我們這裡使用gl.array_buffer。然後告訴神器program怎麼收取願望。

const buffer = gl.createbuffer(); // 建立許願樹

gl.bindbuffer(gl.array_buffer, buffer); // 將許願樹種到`array_buffer`這個許願池內
// 獲取神器`program`的`position`之力
const position = gl.getattriblocation(program, 'position');
// position之力為2個float型別的數一組，不轉化`buffer`型別，
// 從頭開始，不跳過任何乙個願望
gl.vertexattribpointer(position, 2, gl.float, false, 0, 0);
gl.enablevertexattribarray(position);

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);

最後來一張webgl繪製整個過程的流程圖：

未完待續

招聘小姐姐的分享

第一 問清楚公司位址大樓，關於公司的一些獎罰制度，薪資制度，部門架構，福利制度，分別多少人，盡可能詳細問，為的是可以直 出跟你聊天的是中介還是人事，中介是不太好現編的。第二 問清楚各種賠付事項，每一項什麼樣的賠付標準，正規公司不介意直接跟你講，哪怕也許有些項你不太好接受，但是坑公司要麼說的含糊要麼不...

小 I 的小姐姐

你發現 裡一共有 n 個小姐姐 序號從 0 到 n 1 每個小姐姐都有自己的風格，可以按特徵劃分出 3 個特徵值 w1 w2 w3 你知道小 i 特別喜歡 w1 特徵值高的小姐姐，不太看重 w3 於是你對於每個特徵都賦予乙個權重，分別對應為0.7 0.2 0.1，你能幫小 i 找出來他發來的這張 裡...

前端小姐姐的日常筆記

好記性不如爛筆頭，腦子記憶體又太小，日常前端知識點mark 本姑娘要開始使用此平台寫部落格啦，日常嘮嗑，只是想通過此途徑來記錄日常的對於前端的一些想法，若理解有誤，望指正，大家互相學習。多頁面應用的特點 優點 首屏時間快，也就是首頁開啟渲染會比較快，seo搜尋引擎效果好，因為我們訪問乙個頁面的時候，...