一.筆者自述       

        對於原生WebGL的學習，相信對於很多搞前端圖形開發的小夥伴的痛點是花了很多時間，卻收效甚微；好在現在存在諸如Three.js、Babylon.js、cesium.js等功能強大和齊全的WebGL第三方庫；有了這些第三方庫，我們可以用更少的程式碼構建出絢麗多彩的網路3D應用；那為什麼我們還要學習原生的WebGL，原生的WebGL對於我們來說意味著什麼？接下來筆者就以自身的學習經歷回答這兩個問題：

        首先，筆者在學習WebGL是做科研課題的需要，剛開始的時候也是很茫然，不知道怎麼學，學了一段時間Three.js，又覺得必須把原生的WebGL學一下，不然不明白Three.js到底是怎麼實現的(強迫症患者哈)，於是就學習一段時間的原生WebGL，後來發現用Three.js做科研課題更加合適，裡面提供有各種各樣的功能，不用自己再去寫（ps:如果自己去寫這些功能，我可能畢不了業。。。），於是乎我的Three.js越來越進步，用的越來越熟悉；然而，近期身為即將畢業找工作的我，發現很多崗位都要求具備原生的WebGL開發能力，特別是h5渲染引擎的開發，所以峰迴路轉，我再一次選擇學習原生WebGL，於是便決定把自己的學習經歷和一些例子分享給廣大愛好WebGL開發的道友們，希望我們一起度過原生WebGL的這個劫。

          其次，學習原生的WebGL，意味著我們的底層開發能力更上一層樓，如果你再學習一下計算機圖形學的相關知識，我們也可以自己動手開發自己的渲染引擎，是不是覺得很高大上？尤其當我們掌握了原生WebGL開發的相關知識，回過頭來看哪些第三方庫，一切疑惑自然解開了，正所謂“初聽不知曲中意， 再聽已是曲中人”，你理解了，就自然不會再疑惑它們究竟是怎麼實現的。

二.WebGL開發需要準備什麼

1.WebGL簡介

        關於WebGL的介紹，筆者在很早以前寫過一篇基礎介紹的文章，可以供大家參考：關於WebGL的一些基礎性介紹。

2.開發要求

        程式設計軟體：

要安裝這個外掛，你可以自己到官網下載然後手動新增到webstorm外掛裡面，也可以在webstorm的setting(

設定)>Plugins(外掛)裡面搜尋GLSL Support，安裝即可。

        程式語言：HTML、CSS、JavaScript；其中最為重要的是JavaScript，它是WebGL載體語言，就像C++於OpenGL的重要性一樣，所以一定要具備一定的javascript程式設計基礎。

3.著色器語言：glsl 

         關於著色器語言的介紹，可以參考：著色器介紹；而對於著色器的編寫一般有三種形式，第一種是將著色器程式碼單獨寫在一個檔案，頂點著色器可命名為vShader.glsl， 片元著色器可用命名為Shader.glsl；第二種是將著色器程式碼以字串的形式寫在HTML文件內；第三種是將著色器程式碼解除安裝HTML文件的<script> </script>中間，將其表示為指令碼。本教程用的第三種方法，如下圖：

4.著色器編譯

        關於著色器的編譯可以參考：著色器介紹，筆者在這裡不再講詳細，直接上本教程要用的著色器建立，編譯，連結程式碼，讀者可以根據註釋理解哈，在後面的章節我將講解這個shader.js檔案如何用於建立著、編譯和連結著色器：

//shader.js
//建立著色器
function createShader(gl, type, source) {
    let shader = gl.createShader(type);//建立著色器
    gl.shaderSource(shader, source);//附加著色器原始檔到Shader
    gl.compileShader(shader);//編譯著色器
    let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);//判斷著色器是是否編譯成功
    if(success) {
        return shader;
    } else {
        console.log("著色器建立失敗！");
    }

    console.log(gl.getShaderInfoLog(shader));//獲取著色器資訊
    gl.deleteShader(shader);//刪除著色器
}

//連結著色器程式
function createProgram(gl, vertexShader, fragmentShader) {
    let program = gl.createProgram();//生成程式物件
    gl.attachShader(program, vertexShader);//向程式物件分配著色器
    gl.attachShader(program, fragmentShader);//向程式物件分配著色器
    gl.linkProgram(program);//連結著色器

    let success = gl.getProgramParameter(program, gl.LINK_STATUS);//判斷著色器是否連結成功
    if(success) {
        return program;
    } else {
        console.log("著色器連結失敗！");
    }

    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

//初始化著色器
function initShader(gl, vShaderText, fShaderText) {
    let vShader = createShader(gl, gl.VERTEX_SHADER, vShaderText);
    let fShader = createShader(gl, gl.FRAGMENT_SHADER, fShaderText);

    return createProgram(gl, vShader, fShader);
}

希望經過筆者在前面的這麼多介紹，大家對WebGL有一個初步的認識，從下一節開始，將帶領大家進行一些基礎知識的學習和demo的開發。