{
  "name": "@exercise/texture-create",
  "version": "1.0.0",
  "main": "server.js",
  "dependencies": {},
  "scripts": {
    "start": "node server.js"
  },
  "readme": "# Exercise\n\nFor this exercise you should create a texture from a given array of pixels and bind the result to texture 2D.  Your texture must not use any filtering.\n\n# Textures\n\nAfter buffers, the other major way to store data in WebGL is through textures.  Unlike a buffer, it is possible to read any random value from a texture at any point in a shader.\n\nTextures are commonly used to store images or apply surface details to 3D objects.  Each texture in WebGL is stored as a 2D array of color values with up to 4 components per color.\n\nUploading data to textures follows a similar pattern as buffers.  At a high level, we have the following steps:\n\n1. First, we need to create a texture object\n1. Then we bind it\n1. Then we send data to it and configure it\n\n# Texture Creation\n\nCreating a texture is easy enough, we just use the following command:\n\n```javascript\nvar texture = gl.createTexture()\n```\n\nLike buffers, textures are not garbage collected, so you should also release your texture when you are done with the `gl.deleteTexture()` command:\n\n```javascript\n//Call this when you are done with a texture\ngl.deleteTexture(texture)\n```\n\n# Binding Textures\n\nOnce we have created a texture, we can then bind it to the current texture unit like so:\n\n```javascript\ngl.bindTexture(gl.TEXTURE_2D, texture)\n```\n\n# Setting Options\n\nAfter the texture is bound, we can then configure various options on the texture using the `gl.texParameteri` and `gl.texParameterf` commands. We will come back to these in the next lesson, but for now you should use the following two commands to turn off filtering on the texture:\n\n```javascript\ngl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)\ngl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)\n```\n\n# Uploading Image Data\n\nFinally, we can upload image data into the texture.  This is done by calling `gl.texImage2D`.  This function is pretty complicated, but at a high level it just takes a flattened array of pixels and stores it into the texture:\n\n```javascript\n//Create a 2x2 black and white checkerboard\n// Pixels are in RGBA order:\n//  \n//  +------+------+\n//  | RGBA | RGBA |\n//  +------+------+\n//  | RGBA | RGBA |\n//  +------+------+\n//\nvar pixels = new Uint8Array([\n  1,1,1,1,     0,0,0,1,   //First row of image\n  0,0,0,1,     1,1,1,1    //Second row of image\n])\n\n//Upload image to the GPU\ngl.texImage2D(\n  gl.TEXTURE_2D,    //The current texture unit\n  0,                //Miplevel (more on this later)\n  gl.RGBA,          //Internal texture format\n  2,                //Width of texture in pixels\n  2,                //Height of texture in pixels\n  0,                //Ignore this parameter, must be 0\n  gl.RGBA,          //Type of input array\n  gl.UNSIGNED_BYTE, //Storage format of pixel data\n  pixels)           //Pixel data\n```\n",
  "readmeFilename": "README.md",
  "description": "For this exercise you should create a texture from a given array of pixels and bind the result to texture 2D.  Your texture must not use any filtering.",
  "_id": "@exercise/texture-create@1.0.0",
  "_shasum": "b476787ebeaebb3109dea5887f1fa76b7c23bcc1",
  "_from": "exercises/texture-create",
  "_resolved": "file:exercises/texture-create"
}