CONTRIBUTING.md

Contributing/Development

Requires npm 2.x.x to work on locally due to the use of local dependencies.

git clone git@github.com:hughsk/workshop-app-shell.git
cd workshop-app-shell
npm install
npm start

Publishing a New Version

The publish process for webgl-workshop is a little more involved. Before publishing, we reinstall and dedupe all of the dependencies before creating a tarball with all of the node_modules already included.

We then publish the tarball instead of the directory, meaning that the installation can finish in a single step. This simplifies installing the workshop when bandwidth is limited. So when publishing, make sure to use the following instead:

make publish

The workshop.tar.gz file that's generated can also be installed directly if you have no internet access whatsoever:

make pack
npm install ./workshop.tar.gz

Running the Server

npm run dev

Building the App

make clean build

Writing a New Exercise

In this project, each exercise is treated as an independent package, i.e. a directory with its own package.json file, dependencies and so on. You're also given almost full control with your exercise – it's essentially just a vanilla route handler. See the exercises directory for a few existing examples.

The steps are as follows:

1. Create a new directory in exercises. The name of this directory is not important.
2. Place a package.json file in there, with main pointing to server.js and the name being @exercise/my-exercise-name. This name will be used across the app to refer to the exercise in question (feel free to change that last part as you wish).
3. Copy exercises/bare/server.js into your new exercise directory.
4. Add an entry to exercises.json, where the key should be the exercise name as it appears on the menu and the value should be the same name property used in your package.json.
5. Run npm install --save exercises/* from the project root to update the exercise dependencies.

Next time you run the server you should be good to go!

Lesson Plan

1. Basic WebGL
2. Context creation
3. clear color
4. Scissor
5. Shaders
6. Shader objects (have student create vert/frag shaders)
7. Program objects (have student link shader)
8. Binding shaders
9. Uniforms
10. Constant attributes & attribute locations
11. Buffers
12. Basic buffer creation
13. Attribute pointers
14. drawArrays
15. Element buffers and drawElements
16. First challenge
17. Draw a triangle from start to finish
18. Textures
19. 2D textures
20. Mipmaps and filtering
21. Wrapping modes
22. Multitexturing
23. 3D considerations
24. Depth buffer
25. Viewport and clip coordinates
26. Face culling
27. Back and front face variables
28. Second challenge:
29. Draw a 3D textured mesh
30. Framebuffer objects
31. Render buffers
32. Frame buffer basics
33. Feedback loop
34. Blending
35. Stencil buffer
36. basic usage
37. shadows?
38. Advanced buffer tricks
39. copyTexImage
40. Color mask, depth mask, stencil mask
41. depth func
42. Reading pixels
43. Advanced drawing tricks
44. Line width
45. Polygon offset
46. Extensions
47. Vertex array objects
48. Float textures
49. Instanced arrays
50. Multiple draw buffers
51. Context loss