使用 WebGL 繪製三維圖片 image3D

做者：心葉
時間：2020-01-21 20:08

image3D是一個基於WebGL開發的web端3D繪圖庫，包括經常使用的三維接口和輔助方法，幫助你快速繪製本身的三維圖形。

如何使用？

首先，咱們不得不說明一下繪圖的基本流程： 編輯着色器 → 建立3D對象 → 準備好數據 → 繪製

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

着色器

繪圖的時候，本質上咱們都是須要經過着色器來和GPU進行數據交互，所以，須要傳遞的數據都須要在這裏提早定義好，看看本例子的着色器：

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

着色器分二類：頂點着色器和片斷着色器，前者用於傳遞點的位置和大小，後者用於傳遞點的顏色。

本質上來說，着色器其實就是二個字符串，用script標籤包裹是爲了在html文本中方便編輯，在後面的過程就能夠看出來了。

着色器的代碼有點像C語言，咱們目前須要瞭解這三點：

• gl開頭的有三個，分別對應點的位置、大小和顏色（從上到下），這是着色器內置的變量，分別隸屬於二個着色器，咱們所謂的傳值，從這個層次看，就是最終給這三個變量賦值。
• 而後再看看attribute修飾的三個變量，被這個修飾符修飾的變量等於暴露了一個入口，image3D提供了傳值的方法，所謂的傳值，也就是經過這個入口實現的（第二個修飾符，vec4和float是變量的數據類型，相似別的語言）。
• 前一條說的入口由attribute修飾實現，是針對每一個點提供的，片斷着色器是針對所有的點，所以attribute不能夠直接出如今第二類着色器中，咱們須要使用varying修飾符來標記一個橋樑，實現二個着色器之間的數據傳遞。

3D對象

着色器準備好了之後，咱們就可使用這二個着色器建立3D對象了，一樣的，看看本例中的代碼：

var image3d = new image3D(document.getElementsByTagName('canvas')\[0\], {

    // 傳遞着色器
    "vertex-shader": document.getElementById("vs").innerText,
    "fragment-shader": document.getElementById("fs").innerText

});

從這裏是否是能夠看出來，着色器只不過是二段字符串。

傳遞數據

實際的例子是不停的改變，咱們爲了方便說明，這裏假設某個瞬間的操做：

image3d
    // 設置點的位置
    .setAttributeFloat("a\_position", 0.5, 0.5, 0.0)
    // 設置點的大小
    .setAttributeFloat("a\_size", 50.0)
    // 設置點的顏色
    .setAttributeFloat("a\_color", 1.0, 0.0, 0.0);

好比點的位置，「a_position」是和着色器中attribute修飾的變量對應的。大部分根據感受應該就能夠看出來，下面稍微提二點：

• image3D選擇的是右手座標系，記做uvz（對應數學中的座標系就是xyz）,每一個軸的有效可視範圍是-1.0~1.0，所以這裏的座標(0.5, 0.5, 0.0)頁面上看上去就是位於第一象限中心（右上角），請注意和瀏覽器的座標區分。
• 點的顏色須要傳遞三個值，範圍是0.0~1.0，分別對應RGB（固然還能夠有一個alpha透明度，這裏沒有傳遞）。

繪製

一切準備完畢，獲取畫筆繪製便可：

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

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

固然，上面的例子可能過於簡單，你也能夠試試旋轉的24邊形這個稍微複雜點的例子，下面是某個瞬間的截圖（自己是運動的，不停旋轉）：