{
  "name": "@exercise/shader-create",
  "version": "1.0.0",
  "main": "server.js",
  "dependencies": {},
  "scripts": {
    "start": "node server.js"
  },
  "readme": "# Exercise\n\nFor this exercise, you should take the above steps which we outlined and compile/link a simple program object.  The source code for this program has been provided for you as well as a stub function for drawing a triangle (don't worry about the details of this for now).  Once you have everything working, hit submit and go on to the next lesson!\n\n# GLSL and You\n\n**Note:** though it's not compulsory, it's useful to have an understanding of\nthe basics of [GLSL](http://en.wikipedia.org/wiki/OpenGL_Shading_Language) for\nthis section. If you're keen to learn more, working through the first few\nlessons of [shader-school](http://github.com/stackgl/shader-school) should\nget you up to speed.\n\n# Creating Shaders\n\nIn WebGL, objects are rendered in parallel using programs called shaders, which are written in a high level language called GLSL.  GLSL programs need to be uploaded to the WebGL driver, compiled and linked before they can be run. In this lesson, we are going to walk through how to do this using the WebGL API.\n\n### Shader Objects\n\nRecall that shaders come in two different types:  fragment shaders and vertex shaders.  The source code for these shaders are represented in WebGL by \"shader objects\".  To create a shader object (either a vertex or fragment shader), we use the following command:\n\n```javascript\n//Create a fragment shader\nvar fragShader = gl.createShader(gl.FRAGMENT_SHADER)\n\n//Create a vertex shader\nvar vertShader = gl.createShader(gl.VERTEX_SHADER)\n```\n\n## `gl.createShader(type)`\n> Creates a shader object of the given type.  type must be either `gl.FRAGMENT_SHADER` or `gl.VERTEX_SHADER`\n\nOnce we have created a shader, we can upload the source code to WebGL using the following command:\n\n```javascript\ngl.shaderSource(shader, \"\\\nvoid main() {\\\n  gl_FragColor = vec4(1,0,0,1);\\\n}\")\n```\n\n## `gl.shaderSource(shader, source)`\n> Sets the source code of `shader` to the string `source`.  `shader` must be a shader object, created using `gl.createShader` and `source` is a string storing the raw GLSL source code of the shader.\n\nAfter uploading the source code, we then need to tell WebGL to compile the shader for us:\n\n```javascript\ngl.compileShader(shader)\n```\n\n## `gl.compileShader(shader)`\n> Compiles the GLSL source code of a shader object after it has been uploaded.\n\nIt is also a good idea to check for errors after compilation, as `gl.compileShader()` does not throw any exceptions or errors by default.  To see if anything went wrong, we can check the compile status and any compiler output with the following pair of commands:\n\n```javascript\nif(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n  console.error(\"Error compiling shader:\", gl.getShaderInfoLog(shader))\n}\n```\n\n## `gl.getShaderParameter(shader, pname)`\n> Reads the parameter `pname` from shader.  `pname` must be one of:\n* `gl.SHADER_TYPE` returns either `gl.FRAGMENT_SHADER` or `gl.VERTEX_SHADER`\n* `gl.DELETE_STATUS` returns true if shader deleted\n* `gl.COMPILE_STATUS` returns false if there was an error compiling the shader\n\n## `gl.getShaderInfoLog(shader)`\n> Returns a log of error messages created when compiling the shader in string format.\n\n# Program Objects\n\nCompiling a shader object is only the first step to building a shader.  After you have a vertex and fragment shader object, you need to link them together into a single program object which can be used to draw things.  To create a program object, we use the following command:\n\n```javascript\nvar program = gl.createProgram()\n```\n\n## `gl.createProgram()`\n> Creates a new program object.\n\nAfter this, we then need to attach the shader objects to the program:\n\n```javascript\ngl.attachShader(program, fragShader)\ngl.attachShader(program, vertShader)\n```\n\n## `gl.attachShader(program, shader)`\n> Attach the shader object, `shader`, to the program object, `program`\n\nOnce we have attached exactly a fragment shader and a vertex shader to a program, we can finally link it using the command:\n\n```javascript\ngl.linkProgram(program)\n```\n\n## `gl.linkProgram(program)`\n> Links a program object.\n\nAgain, it is useful to check that linking the program was successful, or if it failed report any errors that happened along the way:\n\n```javascript\nif(!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n  console.error('Error linking program:', gl.getProgramInfoLog(program))\n}\n```\n\n## `gl.getProgramParameter(program, pname)`\n> Retrieves the parameter `pname` from the program, `program`.  Some possible values for `pname` include:\n* `gl.LINK_STATUS` checks if the program linked successfully\n* `gl.DELETE_STATUS` checks if the program has been deleted\n\n# Using Program Objects\n\nFinally after we have compiled and linked a program object we can use it to draw things.  Fortunately doing this is pretty simple (compared to all of the above set up).  It only requires one command:\n\n```javascript\ngl.useProgram(program)\n```\n\n## `gl.useProgram(program)`\n> Tells WebGL to use the shader program `program` for all subsequent drawing operations.\n\nThere is no need to turn off a shader in WebGL.  Before you start drawing, you should bind an appropriate shader, and then when you are ready to draw the next thing just bind the next shader and continue.\n\n# Miscellaneous details\n\nProgram and shader objects in WebGL are not garbage collected as the WebGL context keeps a handle on them internally.  So if you are done with a shader and want to release all the resources associated with it you need to remember to delete it.  This can be done using the following commands:\n\n## `gl.deleteShader(shader)`\n> Destroys a shader object\n\n## `gl.deleteProgram(program)`\n> Destroys a program\n\nRemembering to release resources when you are done with them is good practice in WebGL.  While this is not as important an issue with shaders, later on when we come to bigger data structures (like buffers and textures) it will become more important to manage our memory carefully.\n",
  "readmeFilename": "README.md",
  "description": "For this exercise, you should take the above steps which we outlined and compile/link a simple program object.  The source code for this program has been provided for you as well as a stub function for drawing a triangle (don't worry about the details of this for now).  Once you have everything working, hit submit and go on to the next lesson!",
  "_id": "@exercise/shader-create@1.0.0",
  "_shasum": "2634bc2332f0db9ac560855972594536e86f0829",
  "_from": "exercises/shader-create",
  "_resolved": "file:exercises/shader-create"
}