WebGL編程筆記2：uniform變量使用

<canvas id="myCanvas" width="600" height="300" style="border: 1px solid red"></canvas>

const vertex = `
    precision lowp float;
    attribute vec3 vertexPosition;
    void main(void) {
        gl_Position = vec4(vertexPosition, 1.0);
    }
`;
const fragment = `
    precision lowp float;
    uniform   vec4 color;
    void main(void) {        
        gl_FragColor = color;
    }
`;

let canvas = document.getElementById('myCanvas');
let webgl = canvas.getContext('webgl');
const data_position = new Float32Array([
   // x       y      z        r       g       b       a
    -0.5,    0.5,    0.0,    0.9,    0.0,    0.0,    1.0,
    +0.5,    0.5,    0.0,    0.0,    0.8,    0.0,    1.0,
    +0.5,   -0.5,    0.0,    0.0,    0.0,    1.0,    1.0,
    -0.5,   -0.5,    0.0,    1.0,    1.0,    1.0,    1.0
]);
const data_index = new Uint16Array([
    0, 1, 2,
    0, 2, 3
]);
const FSIZE = data_position.BYTES_PER_ELEMENT;

webgl.clearColor(0, 1, 0, 1);
webgl.clear(webgl.COLOR_BUFFER_BIT);

// 第一步：編譯Shader程序，並創建program
let program = createProgram(webgl, vertex, fragment);

// 第二步：創建數據緩沖區和索引緩沖區
let buffer_position = bindBufferWidthData(webgl, webgl.ARRAY_BUFFER, data_position);    // 將頂點數據寫入數據緩沖區並啟用
let buffer_index = bindBufferWidthData(webgl, webgl.ELEMENT_ARRAY_BUFFER, data_index);  // 將索引數據寫入沖區並啟用

// 第三步： 未Shader中的輸入變量定義指針的，並分配取數位置
let vertexPosition = bindVertexAttributePointer(webgl, program, "vertexPosition", 3, webgl.FLOAT, false, FSIZE * 7, 0); // 每次從buffer中取28個字節，從這一段字節中的offset=0字節開始取3個浮點數

// 設置全局變量color
let color = webgl.getUniformLocation(program, 'color');
webgl.uniform4f(color, 1, 0, 0, 1);     // r g b a

// 開始繪制
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);