著色器渲染的整個過程如下圖：
圖形裝配過程：這一步的任務是，將孤立的頂點座標裝配成幾何圖形，幾何圖形的類別由gl.drawarrays()函式的第一引數決定的，也就是你要繪製線還是三角形；
光柵化：就是把組裝好的圖形，轉化成片元；
如圖：
gl_position
實際上是幾何圖形裝配階段的輸入資料。幾何圖形裝配過程又被稱為圖元裝配過程，因為被裝配出的基本圖形（點，線，面）又被稱為圖元。
頂點著色器和片元著色器之間的圖形裝配與光柵化的過程，如下圖：
：表示片元在canvas座標系統中的座標值；每個畫素都有位置（座標）資訊
我們用它的座標資訊處於canvas的寬高
**如下：
html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>
光柵化title>
<scriptid="vs"type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec4 a_color;
void main(void)
script>
<scriptid="fs"type="x-shader/x-fragment">
precision mediump float;
uniform float u_width;
uniform float u_height;
void main(void)
script>
head>
<body>
<canvasid="canvas"style="background-color:black">canvas>
<script>
onload
=function()
//將緩衝區繫結到目標物件
gl.bindbuffer(
gl.array_buffer,
vertexcolorbuffer
);//
向緩衝區寫入資料
gl.bufferdata(
gl.array_buffer,
verticescolors
, gl
.static_draw);
varfsize
= verticescolors
.bytes_per_element;
//得到陣列中每個元素的大小（位元組數）
//將緩衝區物件分配給a_position; 引數一：傳入資料；引數二：指定每個頂點傳入多少個數（2表示只取兩個數傳入，剩下的兩個數0.0和1.0補上；1.0是透明度，跟vertexattrib2f()類似）
//引數五：相鄰兩個點位元組數;傳入的相當於乙個點屬性的位元組大小，然後著色器根據這個獲取；引數六：偏移數，從哪個開始；
gl.vertexattribpointer(
a_position, 2
, gl
.float,false,
fsize * 5
, 0);//
連線a_position變數與分配給它的緩衝區物件
gl.enablevertexattribarray(
a_position
);/*------
點尺寸的資料傳入------*/
varu_width
= gl
.getuniformlocation(
program
,"u_width");
varu_height
= gl
.getuniformlocation(
program
,"u_height");
//獲取到的是繪製區域的寬高
gl.uniform1f(
u_width,gl
.drawingbufferwidth);
gl.uniform1f(
u_height,gl
.drawingbufferheight);gl.
clearcolor
(0.0
, 0.0
, 0.0
, 1.0
);gl
.clear(gl
.color_buffer_bit);
//開始繪製，顯示器顯示結果;引數二：從哪個點開始繪製；引數三：繪製幾個點
gl.drawarrays(
gl.********s, 0,
n);functioncreate_program
(v_shader, f_shader)
functioncreate_shader
(id)
// 判斷script標籤的type屬性
switch(
scriptelement
.type)
// 將標籤中的**分配給生成的著色器
gl.shadersource(
shader
, scriptelement
.text);
// 編譯著色器
gl.compileshader(
shader
);//
判斷一下著色器是否編譯成功
if(
gl.getshaderparameter(
shader
, gl
.compile_status))else
}functioncreate_program
(vs, fs)else}}
script>
body>
html>
我的學習之路
發信人 franky hoho 信區 cie 標 題 二 我的學習之路 發信站 荔園晨風bbs站 2005年12月27日18 30 07 星期二 站內信件 二 我的學習之路 1，暑假 為了能夠實現 dsp，學習c，這是今年七月份的事情，那時我的c基礎為0，我完 全不知道程式是什麼。那時什麼都想，我周...
我的MBD學習之路
mbd即為model based design 基於模型的設計。國內的汽車行業使用matlab simulink早已經不是什麼新鮮事兒了，我還在讀研的時候大家已經普遍的開始使用matlab simulink來做數學模型開發 資料處理分析以及演算法理論 在學校做專案的時候，那時候是用ti的dsp 24...
我的學習之路 bootstrap
bootstrap 內建了html,css,js外掛程式為一體的前端框架 響應式布局 設計一套頁面就可以使用於很多現實裝置 bootstrap 1.入門 響應式布局的容器 1.先進入jquery的js 2.再引入bootstrap的js 3.引入bootstrap的css檔案 4.設定視口 支援移動...