{
  "name": "@exercise/buffer-attributes",
  "version": "1.0.0",
  "main": "server.js",
  "dependencies": {},
  "scripts": {
    "start": "node server.js"
  },
  "readme": "# Exercise\n\nFor this lesson, you will be given a vertex buffer and a shader, and you should then set up an attribute pointer and draw the contents of the buffer.  The attribute is a `vec2` at location 0, and the buffer is a densely packed float array.\n\n# Setting up Attribute Pointers\n\nAs we saw in the last lesson, buffers store data for vertex attributes. However, just storing the data is not enough, we also need to tell the vertex shader where it is. This is done with attribute pointers.\n\nVertex attribute pointers are pointers to slices of buffer data.  The data in a vertex attribute pointer consists of the following:\n\n* An index to the attribute location\n* The data type of the attribute (float, vec2, vec3, etc.)\n* An offset to the start of the attribute\n* A stride representing the distance (in bytes) between attributes\n\nThis is a bit much to unpack, so lets walk through the details step by step.  First, suppose that we have a vertex shader with an attribute at location `0` of type `vec3`:\n\n```glsl\nattribute vec3 position;  //At location 0\n```\n\nAnd that the data for the vertices is encoded as follows:\n\n```javascript\nvar data = [\n  x0, y0, z0,   //Components of first vertex\n  x1, y1, z1,   //Components of second vertex\n  x2, y2, z2,   //Components of third vertex\n   ...\n]\n```\n\nAnd is uploaded to a buffer as follows:\n\n```javascript\nvar buffer = gl.createBuffer(gl.ARRAY_BUFFER)\ngl.bindBuffer(gl.ARRAY_BUFFER, buffer)\ngl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)\n```\n\nFrom here, there are two commands that we need to call to set up an attribute pointer.  First, we need to tell WebGL to use an attribute pointer instead of constant attribute value:\n\n```javascript\ngl.enableVertexAttribArray(0)\n```\n\nWhich works as follows:\n\n## `gl.enableVertexAttribArray(location)`\n> Tells WebGL to use an attribute pointer for the attribute at `location`\n\nAnd once this is done, we can then specify the data of the pointer using the following method:\n\n```javascript\ngl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0)\n```\n\nThis method is pretty complicated, so let's unpack how it works:\n\n## `gl.vertexAttribPointer(location, size, type, normalized, stride, offset)`\n> Sets up an attribute pointer for the attribute at `location` using the vertex buffer currently bound to `gl.ARRAY_BUFFER`:\n* `size` is the size of the attribute in terms of number of elements, e.g.\n    + `size=1` means `float`\n    + `size=2` means `vec2`\n    + `size=3` means `vec3`\n    + `size=4` means `vec4`\n* `type` is the type of the data in the buffer.  The possible values are `gl.FLOAT, gl.BYTE, gl.SHORT, gl.INT, gl.UNSIGNED_BYTE, gl.UNSIGNED_SHORT, gl.UNSIGNED_INT, gl.FIXED`\n* `normalized` is a flag which checks if set for `BYTE, SHORT` or `INT` types rescales them to the range `+/- 1`. This can be useful for encoding values like normals or texture coordinates compactly\n* `stride` is the distance between successive attributes in bytes. If set to `0`, then it assumes that the attributes are tightly packed.\n* `offset` is a pointer (in bytes) to the start of the first attribute in the array.\n",
  "readmeFilename": "README.md",
  "description": "For this lesson, you will be given a vertex buffer and a shader, and you should then set up an attribute pointer and draw the contents of the buffer.  The attribute is a `vec2` at location 0, and the buffer is a densely packed float array.",
  "_id": "@exercise/buffer-attributes@1.0.0",
  "_shasum": "947da2f4a975c69583a06e737130b62f405d1349",
  "_from": "exercises/buffer-attributes",
  "_resolved": "file:exercises/buffer-attributes"
}