<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="webgl" width="500" height="500" style="background-color: aquamarine;"></canvas>
</body>
<!-- 頂點(diǎn)著色器代碼 -->
<script id="vertexShader" type="x-shader/x-vertex">
void main(){
//給內(nèi)置變量gl_PointSize賦值像素大小
gl_PointSize = 20.0;
//頂點(diǎn)位置臂聋，位于坐標(biāo)原點(diǎn)
gl_Position = vec4(0.0,0.0,0.0,1.0);
}
</script>
<!-- 片元著色器代碼 -->
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
</script>
<script>
//獲取canvas畫(huà)布
var canvas = document.getElementById('webgl')
var gl = canvas.getContext('webgl')
//頂點(diǎn)著色器代碼
var vertexShaderSource = document.getElementById('vertexShader').innerText
//片元著色器代碼
var fragmentShaderSource = document.getElementById('fragmentShader').innerText
// 初始化著色器
var program = initShader(gl,vertexShaderSource,fragmentShaderSource)
// 開(kāi)始繪制 顯示器顯示結(jié)果
gl.drawArrays(gl.POINTS,0,1)
// 聲明初始化著色器函數(shù)
function initShader(gl,vertexShaderSource,fragmentShaderSource){
// 創(chuàng)建頂點(diǎn)著色器對(duì)象
var vertexShader = gl.createShader(gl.VERTEX_SHADER)
//創(chuàng)建片元著色器對(duì)象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
// 引入頂點(diǎn)铸敏、片元著色器源代碼
gl.shaderSource(vertexShader,vertexShaderSource)
gl.shaderSource(fragmentShader,fragmentShaderSource)
//編譯頂點(diǎn)段审、片元著色器
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)
// 創(chuàng)建程序?qū)ο髉rogram
var program = gl.createProgram()
// 附著頂點(diǎn)著色器和片元著色器到program
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)
// 鏈接program
gl.linkProgram(program)
// 使用program
gl.useProgram(program)
return program
}
</script>
</html>
第一個(gè)webgl程序 --- 繪制一個(gè)點(diǎn)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門(mén)吏砂，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)撵儿，“玉大人，你說(shuō)我怎么就攤上這事狐血〉硇” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵匈织，是天一觀的道長(zhǎng)浪默。 經(jīng)常有香客問(wèn)我牡直，道長(zhǎng)，這世上最難降的妖魔是什么纳决？ 我笑而不...
- 正文 為了忘掉前任碰逸，我火速辦了婚禮，結(jié)果婚禮上阔加，老公的妹妹穿的比我還像新娘饵史。我一直安慰自己，他們只是感情好胜榔，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布胳喷。 她就那樣靜靜地躺著，像睡著了一般苗分。 火紅的嫁衣襯著肌膚如雪厌蔽。 梳的紋絲不亂的頭發(fā)上牵辣，一...
- 那天摔癣，我揣著相機(jī)與錄音，去河邊找鬼纬向。 笑死择浊，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的逾条。 我是一名探鬼主播琢岩，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼师脂！你這毒婦竟也來(lái)了担孔？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤吃警，失蹤者是張志新（化名）和其女友劉穎糕篇，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體酌心，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡拌消，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了安券。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片墩崩。...
- 正文 年R本政府宣布铐拐，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏余舶。R本人自食惡果不足惜啊鸭，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望匿值。 院中可真熱鬧赠制，春花似錦、人聲如沸挟憔。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)绊谭。三九已至政恍，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間达传，已是汗流浹背篙耗。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長(zhǎng)得像搂妻，于是被迫代替她去往敵國(guó)和親蒙保。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 本系列所有文章目錄 這是學(xué)習(xí)WebGL系列的第一篇文章欲主，我們將了解什么是WebGL以及使用WebGL的一個(gè)簡(jiǎn)單例子...
- 學(xué)前工作準(zhǔn)備 JDK下載及環(huán)境搭建 下載地址： Oracle官網(wǎng) 安裝教程及環(huán)境配置： 教程鏈接 文本編輯器推...
- classPath（無(wú)論在哪都能執(zhí)行.class文件如果沒(méi)有配置classPath邓厕，會(huì)自動(dòng)到當(dāng)前目錄下去尋找指定名...
- 第一名：格子衫（當(dāng)之無(wú)愧的第一涤妒，不接受反駁） 讓我們來(lái)看看程序員近十年來(lái)買(mǎi)格子衫的款式變化 真維斯黑白條紋 森馬黑...
- Title: 第一個(gè)arduino程序她紫，控制8x8點(diǎn)陣屏[2020-01-17] 想用芯片控制屏幕輸出點(diǎn)內(nèi)容硅堆，查了...
