title: OpenGL: Single vertex attribute for multiple vertices?
body: <p>I have a vertex shader that accepts the following attributes:</p>
  
  <ul>
  <li><code>a_posCoord</code>: vertex position</li>
  <li><code>a_texCoord</code>: texture coordinate (passed to the fragment shader)</li>
  <li><code>a_alpha</code>: transparency factor (passed to the fragment shader)</li>
  </ul>
  
  <p>The objects I'm rendering are all "billboards" (a pair of right triangles to make a rectangle).</p>
  
  <p>I'm using a single call to <code>glDrawArrays</code> to render <strong>many</strong> billboards, each which may have a unique alpha value. A single billboard has 6 vertices. Here's some pseudocode to illustrate how I organize the vertex attribute buffer for a single billboard:</p>
  
  <pre><code>vertexAttributes = [
  
    px1,py1,pz1, // vertex 1: a_posCoord
    tx1,ty1,     // vertex 1: a_texCoord
    alpha,       // vertex 1: a_alpha
  
    px2,py2,pz2, // vertex 2: a_posCoord
    tx2,ty2,     // vertex 2: a_texCoord
    alpha,       // vertex 2: a_alpha
  
    px3,py3,pz3, // vertex 3: a_posCoord
    tx3,ty3,     // vertex 3: a_texCoord
    alpha,       // vertex 3: a_alpha
  
    px4,py4,pz4, // vertex 4: a_posCoord
    tx4,ty4,     // vertex 4: a_texCoord
    alpha,       // vertex 4: a_alpha
  
    px5,py5,pz5, // vertex 5: a_posCoord
    tx5,ty5,     // vertex 5: a_texCoord
    alpha,       // vertex 5: a_alpha
  
    px6,py6,pz6, // vertex 6: a_posCoord
    tx6,ty6,     // vertex 6: a_texCoord
    alpha        // vertex 6: a_alpha
  
    // ... Many more billboards not shown ...
  ];
  </code></pre>
  
  <p>Notice how the same <code>alpha</code> value is repeated 6 times, once for each vertex.</p>
  
  <p><strong>Is there a way I can specify an attribute for all 6 vertices without repeating it for each individual vertex?</strong></p>
  
  <p>Here's what I want my vertex attribute buffer to look like, in the interest of reducing the size of the buffer:</p>
  
  <pre><code>vertexAttributes = [
    px1,py1,pz1, // vertex 1: a_posCoord
    tx1,ty1,     // vertex 1: a_texCoord
  
    px2,py2,pz2, // vertex 2: a_posCoord
    tx2,ty2,     // vertex 2: a_texCoord
  
    px3,py3,pz3, // vertex 3: a_posCoord
    tx3,ty3,     // vertex 3: a_texCoord
  
    px4,py4,pz4, // vertex 4: a_posCoord
    tx4,ty4,     // vertex 4: a_texCoord
  
    px5,py5,pz5, // vertex 5: a_posCoord
    tx5,ty5,     // vertex 5: a_texCoord
  
    px6,py6,pz6, // vertex 6: a_posCoord
    tx6,ty6,     // vertex 6: a_texCoord
  
    alpha        // vertex 1-6: a_alpha
  
    // ... Many more billboards not shown ...
  ];
  </code></pre>
  
  <p>For what it's worth, my current solution works just fine, but makes me feel dirty. I've only just begun to get a handle on using <code>glVertexAttribPointer</code> and was wondering if it somehow supported something like this, or if there's a different method or technique I could use to achieve something less brute-force.</p>
  
  <hr>
  
  <p>This is more specifically a WebGL question, but I'm curious about OpenGL in the general sense.</p>
  
  <p>I'm aware that a geometry shader is really what I need for this particular example, but it's out of the question since they are currently unsupported in WebGL.</p>