WebGL warning: "Attribute 0 is disabled. This has significant performance penalty"

canvas, html, javascript, webgl

Solution

I've managed to get the warning to disappear, using clues in the other responses here. I'm going to answer my own question since I've got the specific solution for the case I provided above.

Here are changes I made (generically speaking) to silence the warning:

- Create an attribute variable in the vertex shader for the position.

- Create a buffer object, bind it to the array buffer, and write the vertex data to it.

- Bind the attribute variable to location `0`.

- Assign the buffer object to the attribute variable.

- Enable assignment to the attribute variable.

Here is a diff of the specific changes, and here is a JSFiddle demonstrating the code working without the warning.

Just in case those links die at some point in the future, I'm providing the relevant code snippets here:

The vertex shader source should be changed to:

attribute vec4 a_Position;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;
}

And the following JavaScript code should be inserted immediately below the `gl.useProgram(shaderProgram)` line:

var vertices = new Float32Array([0.0, 0.0, 0.0]),
    vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.bindAttribLocation(shaderProgram, 0, 'a_Position');
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

Problem

When I run the JavaScript/WebGL code below (please scroll down), I see the following warning message in my development console: ``` [.WebGLRenderingContext] PERFORMANCE WARNING: Attribute 0 is disabled. This has significant performance penalty ``` The code below successfully draws a white dot on the canvas. However, I want the warning to go away. What do I need to change in the code below to make it stop appearing? The HTML: ``` <!DOCTYPE html> <html> <body> <canvas id="canvas" width="100" height="100"></canvas> </body> </html> ``` The JavaScript: ``` var VERTEX_SHADER_SOURCE = ""+ "void main() {"+ " gl_Position = vec4(0.0, 0.0, 0.0, 1.0);"+ " gl_PointSize = 10.0;"+ "}", FRAGMENT_SHADER_SOURCE = ""+ "void main() {"+ " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);"+ "}", canvas = document.getElementById('canvas'), gl = canvas.getContext('webgl'), vertexShader = gl.createShader(gl.VERTEX_SHADER), fragmentShader = gl.createShader(gl.FRAGMENT_SHADER), shaderProgram = gl.createProgram(); // Compile the shaders. gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE); gl.compileShader(vertexShader); gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE); gl.compileShader(fragmentShader); // Create linked program. gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram); // Clear the canvas. gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // Draw the point. gl.drawArrays(gl.POINTS, 0, 1); ``` This is a minimal, but complete example, so I'm looking for an answer that tells me specifically what to change. Here is a JSFiddle of the case. I'm running this in Chrome 30.0.1599.101 (on OS X 10.8.5).

Original source