Potential problem with WebGLState attributes cache and WebVR Polyfill

[wrr]

Description of the problem

WebVR Polyfill calls enableVertexAttribArray() which can cause attributes states cached by the WebGLState to become invalid.

Three.js version

I've encountered this problem in code that uses old version of Three.js. The result was an invalid attribute buffer being used instead of a default passed by gl.vertexAttrib3fv. Unfortunately, I don't have a minimal PoC or a code that reproduces this in the newest Three.js. The code in https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLState.js#L424 indicates that the newest Three.js can still have this issue, but I might be missing something.

[mrdoob]

/ping @jsantell

[jsantell]

I'm not terribly familiar with that gl command, but that chunk of code in the polyfill is handling the lens distortion and attempts to do so unobtrusively using gl-preserve-state. Can the lens distortion gl code unset whatever enableVertexAttribArray does?

[jsantell]

How is the WebGLRenderer made aware of the program used by the CardboardUI? I thought attribute enabling would be reset for any program, but would calling disableVertexAttribArray in the CardboardUI fix it?

[wrr]

To fix this on the Poyfill side you could call disableVertexAttribArray, but only if the attribute was originally disabled. There is a gl.getVertexAttrib(index, gl.VERTEX_ATTRIB_ARRAY_ENABLED) call that gl-preserve-state could use to obtain the original state of the attribute.

Always calling disableVertexAttribArray won't fix this: if the attribute was originally enabled by Three.js, the state cached by the WebGLState will also become invalid.

A fix that would work on Three.js side could be to clear the attribute state cache when entering the render() loop. This way attributes state changes done by external rendering code wouldn't cause the cache to become invalid.

[Mugen87]

WebVR support has been removed, see #18129.