{
  "name": "@exercise/shader-uniforms",
  "version": "1.0.0",
  "main": "server.js",
  "dependencies": {},
  "scripts": {
    "start": "node server.js"
  },
  "readme": "# Exercise\n\nFor this exercise, you should use uniform values to draw a triangle at a handful of different configurations.  This time you are provided with some code for creating a shader program and for drawing a triangle.\n\nThe shader program exposes the following uniforms:\n\n* `scale` - a `float`\n* `offset` - a `vec2`\n* `color` - a `vec3`\n\nYou should draw 4 triangles with the following permutations of the uniform values in the following order:\n\n1. `scale=0.15, offset=[-0.5,-0.5], color=[1, 0, 0]`\n2. `scale=0.25, offset=[0.5,-0.5], color=[0, 1, 0]`\n3. `scale=0.5, offset=[0.1,0.3], color=[0, 0, 1]`\n4. `scale=0.3, offset=[0.3,-0.4], color=[1, 1, 0]`\n\n# Uniform Variables\n\nIf you've done the shader-school exercises, then you should have learned about uniform variables.  Uniforms are variables which are set from WebGL and broadcast out to all executions of a shader program.  In this exercise we are going to learn how to set uniform variables from WebGL. At a high level, there are two steps to this process:\n\n1. Getting the location of the uniform\n2. Setting the value of the uniform\n\nFor example, suppose that we have the following fragment shader:\n\n```glsl\nprecision mediump float;\n\nuniform vec3 color;\n\nvoid main() {\n  gl_FragColor = vec4(color, 1);\n}\n```\n\nAnd that this fragment shader is compiled and linked to a program object which we shall call `program`.  Then to get the location of the uniform variable `color`, we use the following command in WebGL:\n\n```javascript\nvar colorLocation = gl.getUniformLocation(program, 'color')\n```\n\nThis command has the following meaning:\n\n## `gl.getUniformLocation(program, name)`\n> Retrieves the location of the uniform named `name` from `program`, where `name` is a string.\n\nOnce you have a uniform location, you can set the value of the uniform **after you have bound the shader** using one of the `gl.uniform` commands.  For example:\n\n```javascript\ngl.uniform3f(colorLocation, 1, 0, 1)  //Set color to magenta\n```\n\nOr equivalently you can use the `v` variant which lets you pass an array:\n\n```javascript\ngl.uniform3fv(colorLocation, [1,0,1])\n```\n\nThere are 16 different `uniform` commands, but they are all variations on the same basic idea:\n\n## `gl.uniform[1234][fi]?v(location, value)`\n> Sets the value of a uniform.  The number `1234` determines the dimension of the vector which is being set.  For example, `gl.uniform2f` sets the value of a `vec2`, while `gl.uniform3f` sets a `vec3`.  `i` or `f` determines whether the uniform is an integer or a float.  `v` determines whether the arguments are passed in individually or using an array.\n\nThere is also a special command for updating matrix uniforms:\n\n## `gl.uniformMatrix[234]fv(location, transpose, value)`\n> Updates a matrix uniform.  `transpose` is a flag which if set flips the matrix.  `value` is the components of the matrix listed in column major order.\n\nThe different permutations (excluding array arguments) can be summarized in the following list:\n\n* Command - GLSL type\n* `gl.uniform1f` - `float`\n* `gl.uniform2f` - `vec2`\n* `gl.uniform3f` - `vec3`\n* `gl.uniform4f` - `vec4`\n* `gl.uniform1i` - `int`  (Or `sampler2d`/`samplerCube` -- more on this later)\n* `gl.uniform2i` - `ivec2`\n* `gl.uniform3i` - `ivec3`\n* `gl.uniform4i` - `ivec4`\n* `gl.uniformMatrix2fv` - `mat2`\n* `gl.uniformMatrix3fv` - `mat3`\n* `gl.uniformMatrix4fv` - `mat4`\n",
  "readmeFilename": "README.md",
  "description": "For this exercise, you should use uniform values to draw a triangle at a handful of different configurations.  This time you are provided with some code for creating a shader program and for drawing a triangle.",
  "_id": "@exercise/shader-uniforms@1.0.0",
  "_shasum": "8e9681cc78b960d9d51ac7ebd1324b6e500de7b3",
  "_from": "exercises/shader-uniforms",
  "_resolved": "file:exercises/shader-uniforms"
}