绘制一个彩色的三角形-多种顶点数据传入顶点着色器

学习内容：

1. 学习如何将多种数据信息传入顶点着色器;

例子

• 关键代码：
  1. data.BYTES_PRE_ELEMENT; -- 获取每个元素的字节数
  2. gl.vertexAttribPointer(location,size,type,normalized,sride,offset)

• 绘制一个彩色的三角形：

• 程序

"use strict";

var gl;

window.onload = function init() {
    var canvas = document.getElementById("gl-canvas");

    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) { alert("WebGL isn't available"); }

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);


    const vertices = new Float32Array(
        [0.0, 0.5, 10.0, 1.0, 0.0, 0.0,
            - 0.5, -0.5, 20.0, 0.0, 1.0, 0.0,
            0.5, -0.5, 30.0, 0.0, 0.0, 1.0
        ])


    var bufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);

    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    const FSIZE = vertices.BYTES_PER_ELEMENT;

    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, FSIZE * 6, 0);
    gl.enableVertexAttribArray(vPosition);

    var aPointSize = gl.getAttribLocation(program, "aPointSize");
    gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, FSIZE * 6, FSIZE * 2);
    gl.enableVertexAttribArray(aPointSize);


    var aColor = gl.getAttribLocation(program, "aColor");
    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
    gl.enableVertexAttribArray(aColor);


    render();
};


function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

shader着色器

  <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        attribute float aPointSize;
        attribute vec4 aColor;
        varying vec4 v_Color;

        void
        main()
        {;
            gl_PointSize = aPointSize;
            gl_Position = vPosition;
            v_Color=aColor;
        }
        </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 v_Color;
        void
        main()
        {
            gl_FragColor = v_Color;
        }
    </script>