fix state diagram for attribute values

Author: greggman

webgl/lessons/resources/webgl-state-diagram.html

@@ -67,7 +67,7 @@
  /\_/\
 ((@v@))  WebGL Owl
 ():::()  sees no WebGL
- VV-VV 
+ VV-VV
 </pre>
 </div>
 <div id="hint"></div>
@@ -160,7 +160,7 @@
 
 <template id="vertex-attributes-template">
       <table>
-        <thead><th>enabled</th><th>value</th><th>size</th><th>type</th><th>normalize</th><th>stride</th><th>offset</th><th>divisor</th><th>buffer</th></thead>
+        <thead><th>enabled</th><th>size</th><th>type</th><th>int</th><th>normalize</th><th>stride</th><th>offset</th><th>divisor</th><th>buffer</th></thead>
         <tbody>
         </tbody>
       </table>
@@ -256,7 +256,7 @@
 # WebGL State diagram
 
 This is an attempt to give a visual representation
-of most of WebGL's internal state. 
+of most of WebGL's internal state.
 
 WebGL is really just an API to run shaders. The only
 functions that actually write pixels are `gl.clear`,

webgl/lessons/resources/webgl-state-diagram/global-ui.js

@@ -170,6 +170,123 @@ function createTextureUnits(parent, maxUnits = 8) {
   };
 }
 
+function createAttribValues(parent, maxAttribs = 8) {
+  const expander = createExpander(parent, 'Attribute Values', {}, `
+  Each attribute has a value that is used if it is NOT
+  enabled via --gl.enableVertexAttribArray--. 
+
+  For example you have a shader with position and color attributes
+
+  ---glsl
+  attribute vec4 position;
+  attribute vec4 color;
+  ---
+
+  To draw a shape where every vertex gets a different color you'd setup
+  the color attribute with a buffer 
+
+  ---js
+  gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithColorData);
+  gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
+  gl.enableVertexAttribArray(colorLoc);  // use the data from the buffer
+  ---
+
+  To draw a shape where every vertex gets the same color you can
+  disable the attribute and set its value
+
+  ---js
+  gl.disableVertexAttribArray(colorLoc);
+  gl.vertexAttrib4fv(colorLoc, colorForAllVertices);
+  ---
+
+  > Note: Only 8 attribute values are shown here for space reasons but 
+  the actual number of attribute available you can look up with
+  --gl.getParameter(gl.MAX_VERTEX_ATTRIBS)--
+  which will be a minimum of ${globals.isWebGL2 ? 16 : 8}.
+
+  > Note: It's arguably
+  confusing that this value is not part of a vertex array
+  since the flag to use it or not is in the vertex array.
+
+  `);
+
+  const tbody = createTable(expander, ['value']);
+  tbody.parentElement.classList.add('attrib-values');
+  const arrows = [];
+
+  for (let i = 0; i < maxAttribs; ++i) {
+    arrows.push({});
+    const tr = addElem('tr', tbody);
+    addElem('td', tr, {
+      className: 'used-when-disabled',
+      textContent: '0, 0, 0, 1',
+      dataset: {
+        help: helpToMarkdown(`
+          value for this attribute when disabled (the default)
+
+          ---js
+          const loc = gl.getAttribLocation(program, 'someAttrib'); // ${i};
+          gl.disableVertexAttribArray(loc);       // disable if it's not already disabled
+          gl.vertexAttrib4fv(loc, [1, 2, 3, 4]);  // set the value
+          ---
+
+          note that the enabled/disabled state is part of
+          the current vertex array but the values when disabled
+          are global state.
+        `),
+      },
+    });
+  }
+
+  const updateAttribValue = loc => {
+    const row = tbody.rows[loc];
+    const cell = row.cells[0];
+    const enabled = gl.getVertexAttrib(loc, gl.VERTEX_ATTRIB_ARRAY_ENABLED);
+    row.classList.toggle('attrib-enable', enabled);
+
+    const value = gl.getVertexAttrib(loc, gl.CURRENT_VERTEX_ATTRIB).join(', ');
+    if (updateElemAndFlashExpanderIfClosed(cell, value)) {
+      /*
+        Note: This code is copied and pasted from the texture unit code above
+        so it would have to be adapted but, None of the examples use these
+        values, even for a moment, I haven't bothered to make the arrows work.
+
+        To work, arrows from the current program to an attribute need to change
+        so if enabled they connect as they do now but if disable they connect
+        to these values.
+
+        const oldArrow = arrows[unit][targetBinding];
+        if (oldArrow) {
+          arrowManager.remove(oldArrow);
+          arrows[unit][targetBinding] = null;
+        }
+        if (texture) {
+          const targetInfo = getWebGLObjectInfo(texture);
+          if (!targetInfo.deleted) {
+            arrows[unit][targetBinding] = arrowManager.add(
+                cell,
+                targetInfo.ui.elem.querySelector('.name'),
+                getColorForWebGLObject(texture, targetInfo.ui.elem, unit / maxUnits),
+                {offset: { start: {x: 0, y: colNdx * 2 - 4}}});
+          }
+        }
+      */
+    }
+  };
+
+  const updateAttribValues = () => {
+    for (let i = 0; i < maxAttribs; ++i) {
+      updateAttribValue(i);
+    }
+  };
+
+  return {
+    elem: expander,
+    updateAttribValue,
+    updateAttribValues,
+  };
+}
+
 function createUniformBufferBindings(parent, maxUnits = 8) {
   const expander = createExpander(parent, 'Uniform Buffer Bindings', {}, `
   In each program you tell each uniform block which index to find
@@ -336,6 +453,7 @@ export function createGlobalUI(globalStateElem) {
     commonState: createStateUI(globalState.commonState, globalStateElem, 'common state', globalStateQuery),
     textureUnits: createTextureUnits(globalStateElem, 8),
     clearState: createStateUI(globalState.clearState, globalStateElem, 'clear state', globalStateQuery),
+    attribValueState: createAttribValues(globalStateElem, 8),
     ...globals.isWebGL2 && {
       transformFeedbackState: createStateUI(globalState.transformFeedbackState, globalStateElem, 'transform feedback', globalStateQuery),
       uniformBufferBindingsState: createUniformBufferBindings(globalStateElem, Math.min(8, gl.getParameter(gl.MAX_UNIFORM_BUFFER_BINDINGS))),

webgl/lessons/resources/webgl-state-diagram/state-diagram.css

@@ -157,6 +157,7 @@ body {
   background: inherit;
 }
 
+.attrib-values .attrib-enable .used-when-disabled,
 .vertex-array .attrib-enable .used-when-disabled,
 .vertex-array .used-when-enabled {  /* but not enabled */
   background: #444;

webgl/lessons/resources/webgl-state-diagram/state-diagram.js

@@ -456,11 +456,13 @@ export default function main({webglVersion, examples}) {
     origFn.call(this, ...args);
     const {ui} = getCurrentVAOInfo();
     ui.updateAttributes();
+    globals.globalUI.attribValueState.updateAttribValue(args[0]);
   });
   wrapFn('disableVertexAttribArray', function(origFn, ...args) {
     origFn.call(this, ...args);
     const {ui} = getCurrentVAOInfo();
     ui.updateAttributes();
+    globals.globalUI.attribValueState.updateAttribValue(args[0]);
   });
   wrapFn('vertexAttribPointer', function(origFn, ...args) {
     origFn.call(this, ...args);
@@ -488,6 +490,7 @@ export default function main({webglVersion, examples}) {
     const {ui} = getCurrentVAOInfo();
     moveToFront(ui.elem);
     updateProgramAttributesAndUniforms(gl.getParameter(gl.CURRENT_PROGRAM));
+    globals.globalUI.attribValueState.updateAttribValues();
   });
   wrapFn('useProgram', function(origFn, vao) {
     const oldProg = gl.getParameter(gl.CURRENT_PROGRAM);

webgl/lessons/resources/webgl-state-diagram/vertex-array-ui.js

@@ -63,7 +63,7 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
       dataset: {
         help: helpToMarkdown(`
         * --true-- this attribute uses data from a buffer.
-        * --false-- it uses --value--.
+        * --false-- it uses the corresponding global state attribute value.
 
         ---js
         const index = gl.getAttribLocation(program, 'someAttrib'); // ${i}
@@ -74,20 +74,6 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
         ${vaoNote}`),
       },
     });
-    addElem('td', tr, {
-      className: 'used-when-disabled',
-      dataset: {
-        help: helpToMarkdown(`
-        The value used if this attribute is disabled.
-
-        ---js
-        const index = gl.getAttribLocation(program, 'someAttrib'); // ${i}
-        gl.vertexAttrib4fv(index, [1, 2, 3, 4]);
-        ---
-
-        ${vaoNote}`),
-      },
-    });
     addElem('td', tr, {
       className: 'used-when-enabled',
       dataset: {
@@ -248,7 +234,6 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
   const formatters = globals.isWebGL2
       ? [
           formatBoolean,      // enable
-          formatUniformValue, // value
           formatUniformValue, // size
           formatEnum,         // type
           formatBoolean,      // integer
@@ -260,7 +245,6 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
         ]
       : [
           formatBoolean,      // enable
-          formatUniformValue, // value
           formatUniformValue, // size
           formatEnum,         // type
           formatBoolean,      // normalize
@@ -277,7 +261,6 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
       const data = globals.isWebGL2
           ? [
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_ENABLED),
-              gl.getVertexAttrib(i, gl.CURRENT_VERTEX_ATTRIB),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_SIZE),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_TYPE),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_INTEGER),
@@ -289,7 +272,6 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
             ]
           : [
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_ENABLED),
-              gl.getVertexAttrib(i, gl.CURRENT_VERTEX_ATTRIB),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_SIZE),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_TYPE),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_NORMALIZED),
@@ -298,12 +280,8 @@ export function createVertexArrayDisplay(parent, name /*, webglObject */) {
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_DIVISOR),
               gl.getVertexAttrib(i, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING),
             ];
-      if (data[0]) {
-        row.classList.add('attrib-enable');
-      } else {
-        row.classList.remove('attrib-enable');
-      }
-      const bufferNdx = globals.isWebGL2 ? 9 : 8;  // FIXME
+      row.classList.toggle('attrib-enable', data[0]);
+      const bufferNdx = globals.isWebGL2 ? 8 : 7;  // FIXME
       data.forEach((value, cellNdx) => {
         const cell = row.cells[cellNdx];
         const newValue = formatters[cellNdx](value);