WebGL學習筆記（一）：繪製單個點

WebGL 應用必須包含 canvas 標籤，着色器，與JavaScript程序。 canvas 提供運行載體，JavaScript 程序提供數據，着色器控制這些數據的顯示形式。

一、創建一個 canvas 標籤並獲取 WebGL 繪圖環境。

  <canvas id="canvas"></canvas>

  <script>
      var canavs = document.getElementById('canavs');
      var gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl");
  </script>

二、創建着色器與着色器程序

着色器由 GLSL 編寫，在我們編寫代碼的時候，需要將着色器源碼以字符串的形式保存下來，再調用 WebGL 相關的接口創建着色器，最後將着色器鏈接到程序中。其中，着色器又分爲頂點着色器和片元着色器。
頂點着色器用於將輸入的數據進行矩陣變化等處理，計算出頂點在座標系中的位置，並將這些數據傳入片元處理器。片元着色器主要用於計算每個像素的最終顏色。

	//頂點着色器源碼
	 var vertexShaderSource = `
	     void main(){
	         //聲明頂點位置
	         gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
	         //聲明繪製的點的大小
	         gl_PointSize = 10.0;
	     }
	 `    
	 //片元着色器源碼
	 var fragmentShaderSource = `
        void main(){
            //設置像素顏色爲紅色
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `

    //創建頂點着色器對象
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    //將源碼分配給頂點着色器對象
    gl.shaderSource(vertexShader, vertexShaderSource);
    //編譯頂點着色器程序
    gl.compileShader(vertexShader);

    //創建片元着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    //將源碼分配給片元着色器
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    //編譯片元着色器程序
    gl.compileShader(fragmentShader);
    

    //創建着色器程序
    var program = gl.createProgram();
    //將頂點着色器掛載在着色器程序上
    gl.attachShader(program, vertexShader); 
    //將片元着色器掛載在着色器程序上
    gl.attachShader(program, fragmentShader);
    //鏈接着色器程序
    gl.linkProgram(program);
    // 使用剛創建好的着色器程序
    gl.useProgram(program);

三、繪製

    //設置清空畫布顏色爲黑色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //用上一步設置的清空畫布顏色清空畫布
    gl.clear(gl.COLOR_BUFFER_BIT);

    //繪製點
    gl.drawArrays(gl.POINTS, 0, 1);

四、最終效果

五、注意事項

在 WebGL 中，座標原點是畫布的中心，座標表示範圍是 [-1,1]，每一位顏色的取值範圍是 [0,1]。