我,webgl,全名web graphics library
,是為了讓死宅程式猿們(攤手)能在瀏覽器上為所欲為的畫女朋友,並還能動手動腳,而屈尊降臨於猿類的世界內。哇哈哈哈哈,快來臣服於我吧,哇嘎嘎嘎嗝~
webgl小姐姐神通廣大,法力無邊。那我們怎麼用她來創造乙個猿猿幸(有)福(女)美(朋)滿(友)的世界呢?
首先,我們需要乙個名為canvas
的祭壇,舉行乙個召喚webgl
小姐姐的小儀式。
那麼,const canvas = document.createelement('canvas');
const gl = canvas.getcontext('webgl');
webgl
小姐姐get到手了,接下來我們需要先將兩樣'祭品'交給她的兩名侍女。
準備用於建立軀體的原材料和賦予靈魂的色彩兩樣祭品
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)) `);
}
webgl
小姐姐御用創世神器program
並使用祭品開光,然後交與小姐姐手中。
注意了注意了,const program = gl.createprogram(); // 神器現世
gl.attachshader(program, vertexshader); // 開第一封印:原料
gl.attachshader(program, fragmentshader); // 開第二封印:色開
gl.linkprogram(program); // 交與小姐姐
if(!gl.getprogramparameter(program, gl.link_status)) `);
}
webgl
小姐姐起手式完畢,開天闢地,萬物復甦。我們現在可以向她許願,描述我們心中的猩福世界
了~v;v~
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);
創世之作在漫天閃電,山崩海嘯之下莊嚴出世!! 登登登,piapia(背景樂)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搜尋引擎效果好,因為我們訪問乙個頁面的時候,...