image3D使用 WebGL 繪制三維圖片
image3D是一個基于WebGL開發(fā)的web端3D繪圖庫，包括常用的三維接口和輔助方法，幫助你快速繪制自己的三維圖形。
如何使用？
首先，我們不得不說明一下繪圖的基本流程： 編輯著色器 → 創(chuàng)建3D對象 → 準(zhǔn)備好數(shù)據(jù) → 繪制
我們接下來準(zhǔn)備繪制一個點(diǎn)，點(diǎn)的顏色、大小和位置不停改變。
著色器
繪圖的時候，本質(zhì)上我們都是需要通過著色器來和GPU進(jìn)行數(shù)據(jù)交互，因此，需要傳遞的數(shù)據(jù)都需要在這里提前定義好，看看本例子的著色器：
<!-- 頂點(diǎn)著色器 -->
<script type='x-shader/x-vertex' id='vs'>
attribute vec4 a_position;
attribute float a_size;
attribute vec4 a_color;
varying vec4 v_color;
void main(){
gl_Position=a_position;
gl_PointSize=a_size;
v_color=a_color;
}
<script>
<!-- 片段著色器 -->
<script type='x-shader/x-fragment' id='fs'>
precision mediump float;
varying vec4 v_color;
void main(){
gl_FragColor=v_color;
}
<script>
著色器分二類：頂點(diǎn)著色器和片段著色器，前者用于傳遞點(diǎn)的位置和大小，后者用于傳遞點(diǎn)的顏色。
本質(zhì)上來講，著色器其實(shí)就是二個字符串，用script標(biāo)簽包裹是為了在html文本中方便編輯，在后面的過程就可以看出來了。
著色器的代碼有點(diǎn)像C語言，我們目前需要了解這三點(diǎn)：
- gl開頭的有三個，分別對應(yīng)點(diǎn)的位置、大小和顏色（從上到下），這是著色器內(nèi)置的變量，分別隸屬于二個著色器，我們所謂的傳值，從這個層次看，就是最終給這三個變量賦值。
- 然后再看看attribute修飾的三個變量，被這個修飾符修飾的變量等于暴露了一個入口，image3D提供了傳值的方法，所謂的傳值，也就是通過這個入口實(shí)現(xiàn)的（第二個修飾符，vec4和float是變量的數(shù)據(jù)類型，類似別的語言）。
- 前一條說的入口由attribute修飾實(shí)現(xiàn)，是針對每個點(diǎn)提供的，片段著色器是針對全部的點(diǎn)，因此attribute不可以直接出現(xiàn)在第二類著色器中，我們需要使用varying修飾符來標(biāo)記一個橋梁，實(shí)現(xiàn)二個著色器之間的數(shù)據(jù)傳遞。
3D對象
著色器準(zhǔn)備好了以后，我們就可以使用這二個著色器創(chuàng)建3D對象了，同樣的，看看本例中的代碼：
var image3d = new image3D(document.getElementsByTagName('canvas')[0], {
// 傳遞著色器
"vertex-shader": document.getElementById("vs").innerText,
"fragment-shader": document.getElementById("fs").innerText
});
從這里是不是可以看出來，著色器只不過是二段字符串。
傳遞數(shù)據(jù)
實(shí)際的例子是不停的改變，我們?yōu)榱朔奖阏f明，這里假設(shè)某個瞬間的操作：
image3d
// 設(shè)置點(diǎn)的位置
.setAttributeFloat("a_position", 0.5, 0.5, 0.0)
// 設(shè)置點(diǎn)的大小
.setAttributeFloat("a_size", 50.0)
// 設(shè)置點(diǎn)的顏色
.setAttributeFloat("a_color", 1.0, 0.0, 0.0);
比如點(diǎn)的位置，“a_position”是和著色器中attribute修飾的變量對應(yīng)的。大部分根據(jù)感覺應(yīng)該就可以看出來，下面稍微提二點(diǎn)：
- image3D選擇的是右手坐標(biāo)系，記作uvz（對應(yīng)數(shù)學(xué)中的坐標(biāo)系就是xyz）,每個軸的有效可視范圍是-1.0~1.0，因此這里的坐標(biāo)(0.5, 0.5, 0.0)頁面上看上去就是位于第一象限中心（右上角），請注意和瀏覽器的坐標(biāo)區(qū)分。
- 點(diǎn)的顏色需要傳遞三個值，范圍是0.0~1.0，分別對應(yīng)RGB（當(dāng)然還可以有一個alpha透明度，這里沒有傳遞）。
繪制
一切準(zhǔn)備完畢，獲取畫筆繪制即可：
image3d.Painter().drawPoint(0, 1);
這里縮減版的例子最終會繪制一個大小是50px，位于第一象限中心的紅色正方形。完整的例子請 點(diǎn)擊此處 查看運(yùn)行效果。
當(dāng)然，上面的例子可能過于簡單，你也可以試試 旋轉(zhuǎn)的二十四邊形 這個稍微復(fù)雜點(diǎn)的例子，下面是某個瞬間的截圖（本身是運(yùn)動的，不停旋轉(zhuǎn)）：