var canvas = document.getElementById("mycanvas");
// 獲取上下文並初始化畫布
var gl = canvas.getContext("webgl");
// 定義清除顏色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 通過COLOR_BUFFER_BIT把顏色清除為gl.clearColor()定義的顏色
gl.clear(gl.COLOR_BUFFER_BIT);

//　著色器原始碼
var vertexSource = `
        // 宣告一個屬性變數 a
        attribute vec3 a;
        void
 
 main(){
            // 頂點在作色器處理後的位置資訊
            gl_Position = vec4(a, 1.0);
        }    
`;
var fragmentSource = `
        // 精度限定符, 最小精度為float
        precision mediump float;
        void main(){
            // 片段顏色
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
`;
// 建立定點和片段著色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var
 
 fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 將著色器原始碼附加到著色器上
gl.shaderSource(vertexShader, vertexSource);
gl.shaderSource(fragmentShader, fragmentSource);
// 編譯著色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 建立一個程式物件
var program = gl.createProgram();
// 將編譯好的著色器附加到程式物件上
 

gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
// 連結程式物件
gl.linkProgram(program);
// WebGL引擎使用該程式物件
gl.useProgram(program);


// 建立一個WebGLBuffer緩衝物件
var vertexBuffer = gl.createBuffer();
// 將該緩衝物件繫結為當前的陣列緩衝
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 緩衝資料
var data = [
     0.0 ,  0.5 ,  0.0,
    -0.5 , -0.5 ,  0.0,
     0.5 , -0.5 ,  0.0
];
// 將緩衝資料新增到當前的陣列緩衝中
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

// 獲取著色器原始碼中屬性的引用
var vertexAttribLocation = gl.getAttribLocation(program, "a"); 
// 設定屬性ａ接收gl.ARRAY_BUFFER的資料
gl.vertexAttribPointer(vertexAttribLocation, 3, gl.FLOAT, false, 0, 0);
// 設定通過頂點著色器將緩衝的輸入資料轉換為一系列頂點陣列
gl.enableVertexAttribArray(vertexAttribLocation);
// 繪製緩衝陣列
gl.drawArrays(gl.TRIANGLES, 0, 3);