Assignment 3: Parametric Surfaces
Realistic Rendering Techniques on Bézier and B-Spline Surfaces
CS465/575 - Computer Graphics I
Bilkent University, Fall 2025-2026
- Due Date:
- 23/12/2025, Tuesday, 15:30-16:20 (B-109, During Class Hour)
- Grade Value:
- 20%
You can do this assignment as a group of two students. The demo will be during the class hour. Every student is required to be present in the demo. Demonstrations are a kind of exam, you will be asked questions to understand your contribution during the demo. You must also submit all your source code on Moodle as a zip file, until 23:55 on the same day.
Assignment Overview
In this assignment, you will write a WebGL application to draw parametric (bicubic) Bézier and B-Spline surfaces in wireframe, Gouraud Shaded, or Phong Shaded form, depending on the user's choice. The user should be able to interactively specify the control points of the surface using a mouse-based suitable interface.
Your user interface should have the functionality of camera control (rotation, zoom in/out etc.) You can use functionality of your previous assignments for this purpose.
You will implement the functions to display the surfaces in wireframe, Per-vertex (Gouraud-shaded) and Per-fragment (Phong-shaded) form. You will implement per-vertex (Gouraud shading) and per-fragment (per-pixel) shading (Phong shading), as discussed in the class. You will also implement following three mapping techniques and demonstrate them on bicubic surfaces:
- Parametric Texture Mapping
- Bump Mapping
- Environment Mapping
Prepare at least six images of the objects with these techniques applied (three Bézier and three B-spline surfaces with texture, bump, and environment mapped) demonstrating the techniques that you implemented.
We strongly suggest you to start early because the assigment has a heavy workload. Additonally, forming groups of two students is strongly suggested.
Curves and Surfaces
Chapter 11 of the textbook, Edward Angel and Dave Shreiner, Interactive Computer Graphics, A Top-Down Approach with WebGL, Seventh Edition, Addison-Wesley 2015.- Bézier Curves and Surfaces: Section 11.6, pages 571-574, and
- B-Spline Curves and Surfaces: Section 11.7, pages 575-579.
Grading
1. [30 pts.] Drawing Parametric Patches: You will implement the functions necessary to generate and display the surface geometry based on user-defined control points.
- [15 pts.] Bézier Patches
- [15 pts.] B-Spline Patches
2. [10 pts.] Shading: You must implement the rendering techniques for shading the surfaces
- [2 pts.] Wireframe
- [4 pts.] Gouraud Shading (Per-vertex shading)
- [4 pts.] Phong Shading (Per-fragment/per-pixel shading)
3. [20 pts.] Interactive Control Points: The user should be able to select, drag, and modify the 3D coordinates of the surface's control points to manipulate the shape of the surface interactively.
4. [30 pts.] Realistic Mapping Techniques: The user should able to apply the mapping techniques
- [10 pts.] Parametric Texture Mapping
- [10 pts.] Bump Mapping
- [10 pts.] Environment Mapping
5. [10 pts.] Camera Controls
- [10 pts.] User should be able to pan, zoom in/out and rotate the camera.
- [5 pts.] If only using sliders or keyboard keys.
Tips: Please make sure your program runs in preparation for the demos. You could use simple HTML UI elements or JavaScript (jQuery, AngularJS, jQWidgets, ... etc.) UI widget libraries. There are a vast number of WebGL examples on the web. (Do not use these codes directly). If you use some code for user interface generation or some other purpose with modifications, you must state so at the beginning of that code segment (e.g., method header) and properly state how you modified that code segment.
DO NOT use the third-party wrappers like three.js. Use WebGL from scratch.