Starter Code
- The starter code is well-commented, so looking at the actual code is the best way to learn how it works!
- The starter code is has a lot, but it is by no means perfect. AniGraph is still new and evolving, and we can make improvements and clarifications in response to your feedback. In particular, if one group asks for some added functionality and we implement it to help them out, our rule is that we push that functionality to the repo for other groups to use as well. I will also be pushing additional skeleton code showing multi-pass render techniques in the coming days, so if you are interested in more advanced shaders look out for that as well. These are good reasons to make sure you can easily pull updates to the repo!
Running the Code
Start by forking the code from the course repo. Running the code should work as it did with assignments a0-c1;
First install the code
yarn install
Then you can run it with
yarn start
As before, I strongly recommend using the debugger in Webstorm, as I find it tremendously useful to step through code and examine local variables directly in the IDE (though I know many of you prefer VS code, and we aren't going to force you on this).
Main Scene
When you run the code, you should see a scene that looks roughly like this:
The scene being shown here is defined by MainSceneModel and MainSceneController
The main scene is pretty empty right now. It loads one node of a custom skeleton class you can use as a starting point for your own customizations. It also includes the debug interaction mode, which has orbit mouse controls and camera movements with the wasd keyboard keys. The debug interaction mode is attached by default to make debugging easier for you when you are just getting started and haven't written your own interaction mode. You can always switch back to debug mode using the dropdown menu in the control panel.
The Main Scene is mostly empty, as it is intended to be a good starting point for doing your own thing.
Example Scenes
To try out different example scenes in the starter code, you can comment and uncomment the appropriate parts of SceneSelection.tsx
let SceneSelection:Scenes = Scenes.Main; // This example is an empty scene. Room to fill with your hopes and dreams...
// let SceneSelection:Scenes = Scenes.Example0;
// let SceneSelection:Scenes = Scenes.Example1;
// let SceneSelection:Scenes = Scenes.ShaderDemo;
Example 0:
Let's take a look at what's in the Example0 scene. Below is a labeled frame that also lists a function or class name associated with each part of the scene:
Example 1:
Example 1 is similar to example 0, but includes:
- Loading a different type of model (the cat) and a corresponding texture atlas.
- How to set different values in the terrain map. The example just adds a bit of random noise.
- Starting code for implementing an efficient billboard particle system.
Example 2:
Example 2 shows how to set up more advanced multipass rendering methods. It's a good starting point for implementing things like reflective surfaces.
Example 3:
Example 3 provides a starter example for how to implement post-processing effects, which you can think of as image warps and other operations that you can do to the entire image in a shader.
Shader Demo:
The shader demo I showed in class. Press L on the keyboard to add new point light sources. You can edit the shade programs in the demoshader shader directory.