Reproduce Cinder glitch in WebGL

Question

There is a visual glitch that appears using OpenGL in Cinder that I would like to reproduce in WebGL if possible.

The effect comes from initializing a texture with a size, but without any data. Basically it is displaying junk memory on the GPU (which ends up being fragmented discolored images of the desktop, etc.)

The effect that would be very useful for a particular WebGL display I am working on.

The effect below is discussed on this page, if you scroll down to the gl::Texture header:

  

Any leads on getting this to happen in the WebGL/js context? (I am totally open to using other resources/frameworks if they produce the effect in a browser)

Answer 1

There is no way to produce this in WebGL under any circumstances.

In OpenGL and OpenGL ES (on which WebGL is based), no behavior is necessary for the initialization of allocated memory and this "glitch" effect is a consequence of undefined behavior.

WebGL actually defines additional requirements for buffer / texture memory to prevent security exploits, one of which is that allocated memory is always initialized to 0. Thus, this behavior is defined in WebGL and it is defined in such a way that your "glitch" effect is impossible.

WebGL Specification - Version 1.0.2 - March 2013

4 Security

4.1 Resource Restrictions

WebGL resources such as textures and vertex buffer objects (VBOs) must always contain initialized data, even if they were created without initial user data values. Creating a resource without initial values is commonly used to reserve space for a texture or VBO, which is then modified using texSubImage or bufferSubData calls. If initial data is not provided to these calls, the WebGL implementation must initialize their contents to 0; depth renderbuffers must be cleared to the default 1.0 clear depth. This may require creating a zeroed temporary buffer the size of a requested VBO, so that it can be initialized correctly. All other forms of loading data into a texture or VBO involve either ArrayBuffers or DOM objects such as images, and are therefore already required to be initialized.

When WebGL resources are accessed by shaders through a call such as drawElements or drawArrays, the WebGL implementation must ensure that the shader cannot access either out of bounds or uninitialized data. See Enabled Vertex Attributes and Range Checking for restrictions which must be enforced by the WebGL implementation.