COMS W4160 ¡ª Computer Graphics Spring 2021 Programming Assignment 2
Out: Feb. 15
Due: 10:00PM, Mar. 1st (Monday)
At this point, you should be familiar with OpenGL basics. This assignment is to get you familiar with GLSL shading programs. In this assignment, you will apply what you have learned about the graphics pipeline and implement several types of shading models using the GLSL shading language. Shader programs have been widely used in high-performance interactive graphics applications such as video games and VR displays. Here, you need to implement algorithms for vertex and fragment processing stages in order to achieve different visual effects.
1 Principle of Operation
As we discussed in the lecture, the graphics pipeline is a sequence of processing stages that efficiently transforms a set of 3D primitives into a shaded rendering from a particular camera viewpoint. Major stages of the pipeline include:
1. Application (i.e., your OpenGL program) holds the scene being rendered in some appropriate data structure, and sends a series of primitives (only triangles, in our case) to the pipeline for rendering.
2. Vertex processing projects the primitives onto screen space, and optionally performs other process- ing, such as vertex color computation, along the way. The specific operations can be customized by vertex shaders.
3. Rasterization takes the screen-space triangles resulted from vertex processing and generates a frag- ment for every pixel that¡¯s covered by each triangle. It also interpolates1 attribute values, such as colors, normals, and texture coordinates, given by the vertex processing stage, to create smoothly varying attributes for the fragments. Depending on the design of the rasterizer, it may clip the primitives to the view volume.
4. Fragment processing operates on the fragments to determine the final color of each pixel. It performs z-buffering for hidden surface removal and writes the results into the frame buffer.
5. Display shows the contents of the frame buffer so the user can see them.
The specific functionalities of both vertex processing and fragment processing stages can be customized by providing the OpenGL program with your shader code. In this assignment, you will be writing your own shaders that satisfy certain requirements.
2 Getting Started
The template code for this assignment closely follows the solutions to the previous assignment, with some modifications to allow you to use multiple shaders (and switch among them). The compilation of the starter
1I briefly mentioned barycentric interpolation in the lecture, and I will introduce other interpolation schemes later in this semester.
1/5
COMS W4160 ¡ª Computer Graphics Spring 2021
code is the same as that in the first programming assignment. Because of the versatility and popularity of GLSL shading language, there are numerous online resources. In particular, we will use GLSL version 3.30 for testing and grading your submissions. Please refer to the online documentation (and other resources I will share through CourseWorks) for detailed features, keywords, and built-in variables of GLSL 3.30.
The way of running the starter code is the same as the first programming assignment. For example, if you choose to use Apache Ant, you can run
unzip pa2_starter.zip && cd pa2_starter && ant -Dargs=src/resources/models/bunny.obj
After launching the program, you can interact with the program in the same way as you did in the first programming assignment. In addition, you can press Space key to switch among the available shaders. At this point, only two shaders are available:
1. the Phong shader from last assignment
2. a skeleton shader with very basic behavior (adding a red color to all visible objects). The code of both shaders are located in the folder src/resources/shaders/.
3 Programming Requirements 3.1 Guidelines
I encourage you to read the following Java files for better understanding how you can integrate your own shaders in the OpenGL code: Renderer.java, SimpleGame.java ShaderProgram.java, and Material.java.
In particular, please read carefully the methods, Renderer.init(Window), Renderer.createPhongShader() and Renderer.createSkeletonShader(). These methods show you how to instantiate, compile, and inte- grate your shaders in the starter code. After you finish your shader implementations, you need to add a few lines of code in Renderer.java to create them and use them in the code (e.g., see the commented code in Renderer). I put a few comments started with ¡°Student code¡± to give you some hints.
When initializing your shader program, please see the ShaderProgram class (in ShaderProgram.java) for the methods available to you. Make sure that your shader is given a unique name and properly added to the shaderProgramList (see what I did in Renderer.init(Window)).
In Renderer.Render(), you also need to pass the necessary updated data to your shader. Make sure all the uniform variables used in your shaders are properly initialized in this method. I have therein shown you how to set up uniform variables of the shaders I provided, and the currentShader refers to the currently active shader which can be selected using Space key.
3.2 Programming Requirement
You need to implement the following shaders (three of them are required; others are optional).
1. Gouraud shader (required): As a simple starting point, implement a Gouraud shader as we discussed in the lecture. The vertex color should be computed using a Phong reflection model also as discussed in class. The color inside a triangle should be interpolated. Compare your Gouraud shader with the provided Phong shader, and see the difference.
2. Checkerboard texture (required): Using GLSL, you can apply a checkerboard pattern as a simple procedural texture on an object surface . Implement it in a shader and combine it with the Phong shading model (e.g., see phong fragment.fs) so that the object not only has a checkerboard pattern but has a smooth shading effect (see Figure 1).
2/5
COMS W4160 ¡ª Computer Graphics Spring 2021
Figure 1: A checkerboard pattern: Combination of a checkerboard pattern and a Blinn-Phong shading model can be implemented using GLSL shaders.
3. Texture-modulated smooth shader (required): In the Phong shader, colors are computed using the Phong model that we discussed in the class. Now implement an improved version which uses a texture (loaded from an image) to modulate the shaded color (see Figure 2).
In GLSL shader, the texture color can be obtained using a command like texture(texture sampler, outTexCoord), where texture sampler is a uniform variable that you need to set up from your OpenGL code. You need to figure out how to load the texture, bind the texture in OpenGL, set up proper uniform variables to enable texture queries in the shader (I will discuss all these steps in class).
A few OBJ files together with the texture images can be found in src/resources/models.
For texture loading and binding, please use the Texture class. We have provided easy loading of PNG files, though it is left to you to make this Texture class work in tandem with your shader. As another hint, in Line 106 of SimpleGame.java, instead of creating a Material without texture, you might want to replace it with
Material material = new Material(“src/resources/models/spot/spot_texture.png”, reflectance);
Of course, doing so would hard code the texture file name, which is not convenient. You probably don¡¯t want to recompile your code every time when you load a different model (certainly, the CAs wouldn¡¯t prefer to do that when grading your submission). Please change the code to enable command line specification of texture files. For example, the CAs should be able to run
java -XstartOnFirstThread -cp $[LWJGL]:lib/*:build/classes w4160.game.Main
src/resources/models/spot/spot.obj
src/resources/models/spot/spot_texture.png
to load the mesh and the texture image, where $[LWJGL] must be replaced with the LWJGL folder on your computer (just like the first programming assignment).
3/5
COMS W4160 ¡ª Computer Graphics Spring 2021
Figure 2: Example of the texture-modulated smooth shader using data in src/resources/models/spot and data in src/resources/models/bob. (Both meshes are created by Keenan Crane)
4. Normal map (optional): Load an texture image and use its RGB color channels to perturb the mesh¡¯s normals in fragment shader. Such a normal map can cause smooth mesh appears rough. I provided a texture file src/resources/textures/stone texture.png for your test. But please feel free to include whatever texture images for best demonstrating your shader effects.
5. CEL (Toon) Shader (optional): CEL shading is a type of non-photorealistic rendering to make 3D objects appear to be flat by using less shading color instead of a shade gradient. You can find a detailed introduction of the shading algorithm online. Understand the concept and implement your own CEL shader.
6. Hatching and/or Gooch Shader (optional*): Hatching and Gooch shaders are other examples of non-photorealistic shaders. Learn them and implement them.
You are required to implement the first three shaders (#1, #2, and #3) above. For the remaining optional shaders, you should implement any two of them. In total, we expect five shaders in your submission. If you choose to implement both Hatching shader and Gooch shader, we count them as two shaders, so you don¡¯t have to implement #4 or #5. Further, if you implement Hatching shader correctly, you will receive 5 bonus points, as it¡¯s more involved than the other optional shaders.
3.3 Creative Shaders for Bonus Points
Now you have a taste of GLSL shaders. We encourage you to use your imagination to create your own shaders to have some fun ¡ª and to earn some bonus points. This is optional. But if you choose to do it, you can earn up to 10 bonus points! You can implement any shader. The only requirement of this part is that your shader must show some animated (time-varying) effects. Hint: you can pass current system time (e.g., by java.lang.System.currentTimeMillis()) to an uniform variable in your shader which in turn changes the visual effects based on the current time.
If you are inspired by some online shading effects, please add the references in your report. Please do not copy any code online. We are going to check.
4/5
COMS W4160 ¡ª Computer Graphics Spring 2021
Disclaimer: how many bonus points you will receive depends on how novel or interesting your shader is. We understand novelty is subjective. We will make a judgement through a consensus among all CAs, based on the visual effects and algorithmic complexity delivered by your shader.
4 Submission and FAQ
Submission Checklist: Submit your assignment as a zip file via courseworks. Your submission must consist of the following parts:
1. Documented code: Include all of your code and libraries, with usage instructions. Your code should be reasonably documented and be readable/understandable by the CAs. The CAs won¡¯t modify your code. If the CAs are not able to run and use your program, they will not be able to grade it. Try to avoid using obscure packages or OS-dependent libraries. To ensure the CAs can grade your assignment, it is highly suggested to compile your code with Java 8, and include details for compiling and running your code.
In the starter code, we also include a build.xml file which is used to ease your compile and run the code using the Apache Ant building system. It is optional to modify the ant building file for your project, while it will probably make the compile more organized and less tedious. It will also ease the grading work of CAs.
Note: You are allowed to include additional texture image and OBJ files to better demonstrate your shaders.
2. Brief report: Include a description of what you have attempted, special features you¡¯ve implemented, and any instructions on how to run/use your program. In compliance with Columbia¡¯s Code of Academic Integrity, please include references to any external sources or discussions that were used to achieve your results.
In particular, include a screenshot image for each shader that you have implemented, and clearly label them. You can press ¡°1¡± key to save a screenshot.
3. Instruction of running your code: Similar to your PA1 submission, you need to include a list of instructions to tell CAs how to run your code to demonstrate the shaders you implemented.
Since we have a large class, please keep in mind that it is your job to tell CAs clearly how to run your code and demonstrate the shaders. The CAs may not be able to read through your code carefully to check the correctness of your code. They will run the code to check if the requirements are fulfilled. So please tell them step by step how to run your code. It will save lots of their time and effort.
For bonus shader: If you implement a creative shader for bonus points, please state in your report how to run your code to see the creative shader effect. If the CAs can¡¯t run your code, they won¡¯t be able to grade it and give you bonus points. So it is your responsibility to make it clear how to run your code.
Evaluation: Your work will be evaluated on how well you demonstrate proficiency with the requested shader features, and the quality of the submitted code and documentation.
5/5