handle only value attributes

src/attributes.js

@@ -481,6 +481,9 @@ function getNumElementsFromNonIndexedArrays(arrays) {
   }
   const array = arrays[key];
   const length = getArray(array).length;
+  if (length === undefined) {
+    return 1;   // There's no arrays
+  }
   const numComponents = getNumComponents(array, key);
   const numElements = length / numComponents;
   if (length % numComponents > 0) {
@@ -506,6 +509,9 @@ function getNumElementsFromAttributes(gl, attribs) {
     key = Object.keys(attribs)[0];
   }
   const attrib = attribs[key];
+  if (!attrib.buffer) {
+    return 1; // There's no buffer
+  }
   gl.bindBuffer(ARRAY_BUFFER, attrib.buffer);
   const numBytes = gl.getBufferParameter(ARRAY_BUFFER, BUFFER_SIZE);
   gl.bindBuffer(ARRAY_BUFFER, null);

test/index.js

@@ -1,5 +1,6 @@
 /* global mocha */
 
+import './tests/attribute-buffer-tests.js';
 import './tests/framebuffer-tests.js';
 import './tests/m4-tests.js';
 import './tests/program-tests.js';

test/tests/attribute-buffer-tests.js

@@ -0,0 +1,64 @@
+import {
+  // assertArrayEqual,
+  // assertTruthy,
+  // assertFalsy,
+  // assertEqual,
+} from '../assert.js';
+import {describe} from '../mocha-support.js';
+import {
+  assertNoWebGLError,
+  checkColor,
+  createContext,
+  itWebGL,
+} from '../webgl.js';
+
+
+describe('attribute/buffer tests', () => {
+
+  itWebGL('draws with just attribute values', () => {
+    const {gl} = createContext();
+    gl.canvas.width = 1;
+    gl.canvas.height = 1;
+    gl.viewport(0, 0, 1, 1);
+
+    const vs = `
+    attribute vec4 position;
+    attribute vec4 color;
+
+    varying vec4 v_color;
+
+    void main() {
+      gl_PointSize = 1.0;
+      gl_Position = position;
+      v_color = color;
+    }
+    `;
+    const fs = `
+    precision mediump float;
+
+    varying vec4 v_color;
+    void main() {
+      gl_FragColor = v_color;
+    }`;
+
+    const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
+    const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
+      position: { value: [0, 0] },
+      color: { value: [1, 0, 0, 1] },
+    });
+
+    gl.useProgram(programInfo.program);
+    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+    gl.drawArrays(gl.POINTS, 0, 1);
+
+    checkColor(gl, [255, 0, 0, 255]);
+
+    bufferInfo.attribs.color.value = [0, 1, 0, 1];
+    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+    gl.drawArrays(gl.POINTS, 0, 1);
+
+    checkColor(gl, [0, 255, 0, 255]);
+    assertNoWebGLError(gl);
+  });
+
+});

test/webgl.js

@@ -1,5 +1,14 @@
 import {it} from './mocha-support.js';
-import {assertArrayEqual} from './assert.js';
+import {assertArrayEqual, assertEqual} from './assert.js';
+
+export function assertWebGLError(gl, expected, msg = '') {
+  const err = gl.getError();
+  assertEqual(err, expected, `${twgl.glEnumToString(gl, err)} === ${twgl.glEnumToString(gl, expected)}: ${msg}`);
+}
+
+export function assertNoWebGLError(gl, msg = '') {
+  assertWebGLError(gl, gl.NO_ERROR, msg);
+}
 
 export function createContext() {
   const gl = document.createElement('canvas').getContext('webgl');