Interleaving Endpoint and Color Data in Buffers

This JavaScript program demonstrates how to interleave data for a vertex inside a buffer in a WebGL program.

InterleavedLineEnpointsAndColors.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>

    <script  id="idVertexShader" type="c">
      attribute vec2 av2EndPoint;
      attribute vec3 av3Color;
      varying vec4 vv4Color;

      void main() {
        gl_Position = vec4(av2EndPoint, 0.0, 1.0);
        vv4Color = vec4(av3Color, 1.0);
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;
      varying vec4 vv4Color;

      void main() {
        gl_FragColor = vv4Color;
      }
    </script>

    <script type="text/javascript">
    var gqProgram = null;
    var gqGL = null;
    function CreateProgramAndContext() {
      // Get the WebGL Context
      var qCanvas = document.querySelector("#idCanvasWebGL");
      gqGL = qCanvas.getContext("webgl");

      // Compile the vertex shader
      var sVertexShaderCode = document.querySelector("#idVertexShader").text;
      var qVertexShader = gqGL.createShader(gqGL.VERTEX_SHADER);
      gqGL.shaderSource(qVertexShader, sVertexShaderCode);
      gqGL.compileShader(qVertexShader);

      // Compile the fragment shader
      var sFragmentShaderCode = document.querySelector("#idFragmantShader").text;
      var qFragmentShader = gqGL.createShader(gqGL.FRAGMENT_SHADER);
      gqGL.shaderSource(qFragmentShader, sFragmentShaderCode);
      gqGL.compileShader(qFragmentShader);

      // Compile and link the program
      gqProgram = gqGL.createProgram();
      gqGL.attachShader(gqProgram, qVertexShader);
      gqGL.attachShader(gqProgram, qFragmentShader);
      gqGL.linkProgram(gqProgram);
      gqGL.useProgram(gqProgram);
    }

    function CreateBuffers() {
      // An interleaved array
      // The first two values are 2d coordinates
      // The last three values are 3d RBG colors
      var faEndpointsAndColors = new Float32Array([
        -0.5,  0.5,    0.0,  1.0,  0.0,
         0.5, -0.5,    1.0,  0.0,  1.0,
         0.5,  0.5,    1.0,  0.0,  0.0,
        -0.5, -0.5,    0.0,  1.0,  1.0
      ]);
      var iBytesPerFloat = faEndpointsAndColors.BYTES_PER_ELEMENT;

      var qEndpointColorBuffer = gqGL.createBuffer();
      gqGL.bindBuffer(gqGL.ARRAY_BUFFER, qEndpointColorBuffer);
      gqGL.bufferData(gqGL.ARRAY_BUFFER, faEndpointsAndColors, gqGL.STATIC_DRAW);

      var qEndpointLoc = gqGL.getAttribLocation(gqProgram, 'av2EndPoint');
      gqGL.vertexAttribPointer(qEndpointLoc, 2, gqGL.FLOAT, false, iBytesPerFloat * 5, 0);
      gqGL.enableVertexAttribArray(qEndpointLoc);

      var qColorLoc = gqGL.getAttribLocation(gqProgram, 'av3Color');
      gqGL.vertexAttribPointer(qColorLoc, 3, gqGL.FLOAT, false, iBytesPerFloat * 5, iBytesPerFloat * 2);
      gqGL.enableVertexAttribArray(qColorLoc);

      // Unbind the buffer
      gqGL.bindBuffer(gqGL.ARRAY_BUFFER, null);
    }

    function Initialization() {
      CreateProgramAndContext();
      CreateBuffers();
      gqGL.clearColor(0.98, 0.98, 0.98, 1.0);
      gqGL.clear(gqGL.COLOR_BUFFER_BIT);
      gqGL.drawArrays(gqGL.LINES, 0, 4);
    }
    </script>
  </head>
  <body onload="Initialization();">
    <canvas id="idCanvasWebGL" width="400", height="400" style="border:1px solid black"></canvas>
  </body>
</html>

WebGL JavaScript

Interleaving Endpoint and Color Data in Buffers

InterleavedLineEnpointsAndColors.html

Output