I'm trying to write WebGL code with a blue circle and red rectangle. The circle uses 36 vertices while the rectangle only uses 4, and it causes the circle to not be drawn with the following warning:

drawArraysInstanced: Vertex fetch requires 36, but attribs only supply 4.

I've looked at so many resources to figure out what seems like a simple issue, but nothing seems to work for me.

Here's what I have for the JavaScript code:

"use strict";

var gl; var ballVertices, paddleVertices; var xVelocity, yVelocity; var xCenter, yCenter, paddleCenter; var extent = 0.95; var u_vCenterLoc, u_fCenterLoc var ballBuffer, paddleBuffer; var program;

window.onload = function init() { var canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); }

setup();

// // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 0.8, 0.8, 0.8, 1.0 );

// Load shaders and initialize attribute buffers

program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program );

// Load the data into the GPU

var ballBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, ballBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(ballVertices), gl.STATIC_DRAW );

var paddleBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, paddleBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(paddleVertices), gl.STATIC_DRAW ); // Associate out shader variables with our data buffer

var a_vPositionLoc = gl.getAttribLocation( program, "a_vPosition" ); gl.vertexAttribPointer( a_vPositionLoc, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( a_vPositionLoc );

// associate the center with uniform shader variable // write your code here u_vCenterLoc = gl.getUniformLocation (program, "u_vCenter"); u_fCenterLoc = gl.getUniformLocation (program, "u_fCenter"); render();

};

function setup() {

var numVertices = 36; var radius = 0.05; ballVertices = []; for (var i = 0; i < numVertices; ++i) { var angle = (i / numVertices) * 2 * Math.PI; ballVertices.push(vec2(radius * Math.cos(angle), radius * Math.sin(angle))); }

xCenter = 0; yCenter = 0.95;

xVelocity = randomPosNegOne() * 0.025; yVelocity = randomPosNegOne() * 0.025;

paddleVertices = [ vec2( -0.5, 0.05 ), vec2( -0.5, 0 ), vec2( 0.5, 0.05 ), vec2( 0.5, 0) ];

paddleCenter = 0;

}

function randomPosNegOne() { var ran = Math.random(); return ran > 0.5 ? ran : -ran; }

function animate () {

// increment xCenter and yCenter // write your code here xCenter += xVelocity; yCenter += yVelocity;

// check if xCenter/yCenter is out of bound (use extent), // if yes, keep it in bound and reverse the xVelocity/yVelocity // write your code here

if (xCenter >= extent) { xCenter = extent; xVelocity = -xVelocity; } else if (xCenter <= -extent) { xCenter = -extent; xVelocity = -xVelocity; }

if (yCenter >= extent) { yCenter = extent; yVelocity = -yVelocity; } else if (yCenter <= -extent) { yCenter = -extent; yVelocity = -yVelocity; }

}

function render() { gl.clear( gl.COLOR_BUFFER_BIT );

animate();

// update xCenter/yCenter as uniform to shader // write your code here

gl.uniform2fv (u_vCenterLoc, vec2(xCenter, yCenter)); gl.bindBuffer( gl.ARRAY_BUFFER, ballBuffer ); gl.drawArrays( gl.TRIANGLE_FAN, 0, ballVertices.length );

gl.bindBuffer( gl.ARRAY_BUFFER, paddleBuffer ); gl.uniform3fv (u_fCenterLoc, vec2(paddleCenter, -1)); gl.drawArrays( gl.TRIANGLE_STRIP, 0, paddleVertices.length );

requestAnimFrame(render); }

And here's the corresponding HTML code:

Oops ... your browser doesn't support the HTML5 canvas element

I'm aware my code has become quite messy because I've been trying so many different things to fix this, but I hope someone can help me.