Skip to content

Latest commit

 

History

History
125 lines (106 loc) · 3.31 KB

CONTRIBUTING.md

File metadata and controls

125 lines (106 loc) · 3.31 KB
Raw

Contributing/Development

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

git clone [email protected]: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