image3D使用 WebGL 繪制三維圖片

image3D是一個基于WebGL開發(fā)的web端3D繪圖庫，包括常用的三維接口和輔助方法，幫助你快速繪制自己的三維圖形。

如何使用？

首先，我們不得不說明一下繪圖的基本流程： 編輯著色器 → 創(chuàng)建3D對象 → 準備好數(shù)據(jù) → 繪制

我們接下來準備繪制一個點，點的顏色、大小和位置不停改變。

著色器

繪圖的時候，本質(zhì)上我們都是需要通過著色器來和GPU進行數(shù)據(jù)交互，因此，需要傳遞的數(shù)據(jù)都需要在這里提前定義好，看看本例子的著色器：

    <!-- 頂點著色器 -->
    <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>
        

著色器分二類：頂點著色器和片段著色器，前者用于傳遞點的位置和大小，后者用于傳遞點的顏色。

本質(zhì)上來講，著色器其實就是二個字符串，用script標簽包裹是為了在html文本中方便編輯，在后面的過程就可以看出來了。

著色器的代碼有點像C語言，我們目前需要了解這三點：

• gl開頭的有三個，分別對應點的位置、大小和顏色（從上到下），這是著色器內(nèi)置的變量，分別隸屬于二個著色器，我們所謂的傳值，從這個層次看，就是最終給這三個變量賦值。
• 然后再看看attribute修飾的三個變量，被這個修飾符修飾的變量等于暴露了一個入口，image3D提供了傳值的方法，所謂的傳值，也就是通過這個入口實現(xiàn)的（第二個修飾符，vec4和float是變量的數(shù)據(jù)類型，類似別的語言）。
• 前一條說的入口由attribute修飾實現(xiàn)，是針對每個點提供的，片段著色器是針對全部的點，因此attribute不可以直接出現(xiàn)在第二類著色器中，我們需要使用varying修飾符來標記一個橋梁，實現(xiàn)二個著色器之間的數(shù)據(jù)傳遞。

3D對象

著色器準備好了以后，我們就可以使用這二個著色器創(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ù)

實際的例子是不停的改變，我們?yōu)榱朔奖阏f明，這里假設(shè)某個瞬間的操作：

    image3d
        // 設(shè)置點的位置
        .setAttributeFloat("a_position", 0.5, 0.5, 0.0)
        // 設(shè)置點的大小
        .setAttributeFloat("a_size", 50.0)
        // 設(shè)置點的顏色
        .setAttributeFloat("a_color", 1.0, 0.0, 0.0);
        

比如點的位置，“a_position”是和著色器中attribute修飾的變量對應的。大部分根據(jù)感覺應該就可以看出來，下面稍微提二點：

• image3D選擇的是右手坐標系，記作uvz（對應數(shù)學中的坐標系就是xyz）,每個軸的有效可視范圍是-1.0~1.0，因此這里的坐標(0.5, 0.5, 0.0)頁面上看上去就是位于第一象限中心（右上角），請注意和瀏覽器的坐標區(qū)分。
• 點的顏色需要傳遞三個值，范圍是0.0~1.0，分別對應RGB（當然還可以有一個alpha透明度，這里沒有傳遞）。

繪制

一切準備完畢，獲取畫筆繪制即可：

    image3d.Painter().drawPoint(0, 1);
        

這里縮減版的例子最終會繪制一個大小是50px，位于第一象限中心的紅色正方形。完整的例子請 點擊此處 查看運行效果。

當然，上面的例子可能過于簡單，你也可以試試 旋轉(zhuǎn)的二十四邊形 這個稍微復雜點的例子，下面是某個瞬間的截圖（本身是運動的，不停旋轉(zhuǎn)）：