Page 6: More Procedural Textures

Exercise: Checkerboard

It’s your turn to make a procedural texture. We’ll start with something simple: make a checkerboard pattern. I’ve started things for you in the files shaders/10-06-01.vs and shaders/10-06-01.fs. I’ve also done the JavaScript part for you, including a slider for the number of checks over the 0-1 range (see 10-06-01.js ( 10-06-01.html)). You shouldn’t have to modify the JavaScript file, but you can if you want to.

A hint: on the next page, you will be asked to enhance your checkerboard. If you write your code to use the step and mix functions to compute the color (rather than using an if statement), the next page will be easier.

You should make this respond correctly to the checks uniform variable. Look at the dots for inspiration. The “number of checks” might mean either the number of squares (along an edge), or the number of dark/light pairs along an edge - whichever way you interpret it, it will be OK.

Exercise: Some Other Pattern

This time, you pick what pattern/texture you want to make! Something more complicated than a checkerboard. Try to make wood grain, plaid, or some wallpaper pattern - as long as it is more complicated than a checkerboard. You can look at various resources to get ideas. For example, OpenGLShading Chapter 6 gives a simple example of a brick texture, and many of the online tools provide galleries of cool examples. See Page  10  (Shader Tools and Examples).

Transferring a shader from one of these websites to our framework can be tricky. Page  10  (Shader Tools and Examples) will discuss it (and ask you to do it). For this page, please write the shader yourself. But, be sure to give attribution (in the text file below) if your shader is based on some example (even if you are just inspired by something). For this exercise, do not use image-based textures or animation.

Again, we’ve given you files to get started. If you need uniform variables, you’ll need to make them yourself. The files are shaders/10-06-02.vs and shaders/10-06-02.fs as well as 10-06-02.js ( 10-06-02.html). Once you’ve implemented the shader, explain your work in 10-06-02.txt

Summary: Procedural Textures

Procedural textures are one of the cooler things we can do with shaders. Let’s look at a detail of using them on Next: Aliasing .