# Shader School

[![NPM](https://nodei.co/npm/shader-school.png?downloads=true&stars=true)](https://nodei.co/npm/shader-school/)
[![NPM](https://nodei.co/npm-dl/shader-school.png)](https://nodei.co/npm/shader-school/)

**An introduction to GLSL shaders and graphics programming that runs in your web browser.**

![shader-school](http://imgur.com/Wc74MPW.png)

## Running this thing

First, you need to [get a browser with WebGL](http://get.webgl.org/), as well
as a copy of [node.js](http://nodejs.org/) and [git](http://git-scm.com/). Once you have
all of that set up, you can install the workshop using [npm](http://npmjs.org/), which
is included with node:

```
npm install -g shader-school
```

After that completes, you should be able to run the workshopper with the command:

```
shader-school
```

The script will ask you if you want to create an answer directory, press `y` to
accept. This will populate your current directory with shader files for you to
edit for each lesson – hopefully, it should also automatically open your web
browser but if it doesn't you can find the workshop menu on
[http://localhost:12492/](http://localhost:12492/).

## Stuck?

Feedback and criticism is welcome, please log your troubles in
[issues](https://github.com/gl-modules/shader-school/issues). The workshop is
still being worked on but is very close to being complete!

Full curriculum reviews
[like this one](https://github.com/timoxley/functional-javascript-workshop/issues/7)
are very helpful. More feedback like this please!

## Contributors

<table><tbody>
<tr><th align="left">Mikola Lysenko</th><td><a href="https://github.com/mikolalysenko">GitHub/mikolalysenko</a></td><td><a href="http://twitter.com/mikolalysenko">Twitter/@mikolalysenko</a></td></tr>
<tr><th align="left">Hugh Kennedy</th><td><a href="https://github.com/hughsk">GitHub/hughsk</a></td><td><a href="http://twitter.com/hughskennedy">Twitter/@hughskennedy</a></td></tr>
<tr><th align="left">Chris Dickinson</th><td><a href="https://github.com/chrisdickinson">GitHub/chrisdickinson</a></td><td><a href="http://twitter.com/isntitvacant">Twitter/@isntitvacant</a></td></tr>
</tbody></table>

## Color Scheme

![color scheme](http://imgur.com/mcbbaNt.png)

From left to right:

* `#34363B` `vec3(0.2039, 0.2117, 0.2313)` (black)
* `#A9B0C3` `vec3(0.5372, 0.6901, 0.7647)` (dark grey)
* `#DEE7FF` `vec3(0.8705, 0.9058, 1.0)` (light grey)
* `#FFFFFF` `vec3(1.0, 1.0, 1.0)` (white)
* `#58FF8B` `vec3(0.3451, 1.0, 0.5450)` (green)
* `#FF6E57` `vec3(1.0, 0.4313, 0.3411)` (red)
* `#FFE25F` `vec3(1.0, 0.8862, 0.3725)` (yellow)
* `#61C3FF` `vec3(0.3804, 0.7647, 1.0)` (blue)

## Screenshots

![screenshot](http://imgur.com/snv1Axn.png)

![screenshot](http://imgur.com/GJtvajl.png)

![screenshot](http://imgur.com/hegi9dZ.png)

![screenshot](http://imgur.com/QYyBoea.png)

![screenshot](http://imgur.com/MZyhKjs.png)