Generic attribute / instanced draw mystery

[dy]

Second day I am struggling with mysterious two-level bug, trying to make regl-line2d and regl-scatter2d work together.

The minimal test case:

'use strict'

const regl = require('regl')({
	extensions: ['angle_instanced_arrays']
})

let draw1 = regl({
	primitive: 'points',
	count: 1,

	vert: `
	precision highp float;

	attribute float size;
	attribute vec2 position;

	void main() {
		gl_Position = vec4(position, 0, 1);
		gl_PointSize = size;
	}

	`,
	frag: `
	void main() {
		gl_FragColor = vec4(0,0,1,1);
	}`,
	attributes: {
		position: {
			buffer: [0.5,0.5],
			divisor: 0
		},
		size: {
			buffer: [10],
			divisor: 1
		}
	}
})

let draw2 = regl({
	primitive: 'points',
	count: 1,
	frag: `
	  void main() {
	    gl_FragColor = vec4(1,0,0,1);
	  }
	`,

	vert: `
	  precision highp float;

	  attribute vec2 position;
	  attribute float size;
	  void main() {
	    gl_PointSize = size;
	    gl_Position = vec4(position, 0, 1);
	  }
	  `,

	attributes: {
	  position: [0,0],
	  size: {constant: 5}
	}
})

draw1()
draw2()

setTimeout(() => {
	draw1()
	draw2()
}, 200)

gives [.Offscreen-For-WebGL-0000000005E4B5E0]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to draw with all attributes having non-zero divisors. That does not happen if we invoke only draw1() or draw2() separately.

Second part of the bug - if we disable instanced draw:

...
	attributes: {
		position: {
			buffer: [0.5,0.5],
			// divisor: 0
		},
		size: {
			buffer: [10],
			// divisor: 1
		}
	}
...

and call draw methods as

...
draw1()
draw2()

setTimeout(() => {
	draw1()
}, 200)
...

we get blank screen with all the data cleared.

Tried to dig regl code, but had hard time getting the whole concept at once.

@mikolalysenko hope for your assistance, that slows down progress in plotly/plotly.js#949

[jwerle]

@dfcreative funny enough - if you add a regl._refresh() right before you call draw1() and draw2() in that `setTimeout(), everything works as expected.

[jwerle]

the issue appears to be the refresh proc for the procs environment found on the core object. The regl._refresh function wraps the refresh proc function call while also polling the viewport

[jwerle]

it appears that this proc refreshes vertex attribute state based on some limits modifying any shared attributes in the context. this is likely the issue.

[jwerle]

@mikolalysenko is it worth changing or augmenting the availability of the regl._refresh() function? It seems a workaround/fix needs to be implemented, more documentation around when to use the regl._refresh() function for more than an unsafe escape hatch, or by simply making this function "public" by and documenting the usefulness and purpose of this function

[jwerle]

cc @dfcreative

[dy]

@jwerle yeah, that helps, thanks! As for performance, it is ~0.15ms on my laptop, seems not expensive.

[milcktoast]

I had a similar issue with resizing FBOs on window resize event in a project. If a command is executed outside of regl.frame, regl.poll needs to be called between sets of draw commands. i.e.

draw1()
draw2()
setTimeout(() => {
  regl.poll()
  draw1()
}, 200)

@dfcreative does this fix the issue?

[mikolalysenko]

Fixed with 1.3.1