计算机图形/graphics代写-Drawing in 3D revisited – WebGL style
Evaluation: You get a “satisfactory grade” (3) if you turn in a viable, and complete submission. Higher scores will be awarded for people who incorporate additional features.
Handin: Will be as a Canvas assignment Make sure that you turn in all files needed for your program to run.
Since the visual content of what you must deliver can be quite similar to what Program 4 was asking, it is important to emphasize what you must do differently. In P4, you were explicitly asked to implement actions that are normally the responsibility of the graphics pipeline. For example, prior to calling any actual drawing commands, you had to explicitly transform vertices into the camera coordinate system, apply the projective transfom (using algebra, via the twgl.m4 library), apply a viewport transform to the resulting 2D values (which were in Normalized Display Coordinates), and only then actually call the canvas drawing functions. In your final deliverable to this assignment it is expected that the vertex data provided to the vertex shader will be in world coordinates (or even object local coordinates, if different than the world coordinates) — it will be the shader’s responsibility to apply the necessary transformations to transform these 3D locations into an (x,y,z) triple appropriate for drawing (where (x,y) is the actual display location, and z will be used for visible surface determination via the Z-buffer). The transformation itself is something you will build outside of the shader code, and communicate to the shader as a uniform variable (of type mat4). Also, instead of implementing your own technique of visible surface determination (e.g. painter’s algorithm), you will let the Z-buffer do this task for you — again, it will be your responsibility to produce appropriate z-values in the vertex shader in order to allow the Z-buffer to do its job.
In class, we discussed that setting-up things in WebGL (e.g. compiling/linking/attaching shaders, binding attributes/uniforms, setting up buffers) can either be done by directly using the WebGL API calls that accomplish these (admittedly, sometimes pedantic) tasks, or using a toolbox (like twgl) to aid you in the process. This is exemplified in the code samples we discussed in class. For this assignment, you are free to follow either approach. Also, it is our expectation that you could (although you don’t have to …) incrementally build the entirety of your program starting from one of the provided examples and only appending a handful of new lines of code at a time, while still seeing something visually informative as your output.
The description above conveys the basic features that your implementation should have. Above-and-beyond implementations could venture in the following directions:
- Use hierarchical 3D objects that can be interactively manipulated. The proper way to handle such models would be to also pass the model transformation (i.e. from local coordinates to world coordinates) down to the vertex shader (who would have the responsibility to apply it), while the geometric components of the model themselves will be entered in the vertex buffers in localcoordinates.
- Compute normals, communicate those to the shaders, and use them to control the co等线tion of triangles in an interesting and non-trivial way (i.e. breaking from the simple solution of attaching a single, constant color to every triangle).
- Model several objects, using more than a single vertex/fragment shader pair for different objects of your scene.
- Implement an exciting and cool-looking shader, with graded color transitions within triangles, or implementing an interesting pseudo- (or procedural) texture.
Implementation hints and tips:
- Use Your P4 as a reference – it’s the same, except that you need to draw the triangles differently. All the transformations and whatnot are the same. Your user interface for the camera can be re-used.
- Remember that the coordinates that are the output of the vertex shader are in normalized device coordinates.
- Start simple. The examples given you in class draw a single solid color triangle in screen coordinates first. Then you can slowly add more things: transformations, more triangles, passing colors to the fragment shader, passing colors to the vertex shader, passing normals to the vertex shader, …
- Remember that we pass information per vertex – not per-triangle. You can start by making 3 independent vertices for each triangle, each with the same color and normal.
- You can pass whatever uniforms you want. You may decide to pass the model, view, and projection matrices separately (so there are 3 matrices) and multiply them together in the vertex shader. This way you might retain more flexibility.
- Don’t forget to turn on the depth test. Don’t forget to clear the Z-Buffer when you clear the window.