Skip to main content

Control Task (Shading and Lighting)


Assignment presentation
  • Prepare a 2 min video presenting your software;
  • Share the link to your GIThub repo through this form;
  • The practical assignment has to reside in a branch named ControlTask.
Requirements
    Use sources from PA#1 adding a new functionality as follows:
  • Render the surface with filled triangles using VBO (Vertex Buffer Object) technology with indices;
  • Add two sliders providing ability to control surface granularity over U and V directions;
  • Implement triangle shading method as per variant;
  • Implement vertex and pixel shaders that calculate intensity of illumination for the surface coming from a single light source: Irgb=Ambient+Diffuse+Specular that rotates in a circle motion around the surface. 
Resources
    The project we started to code at the lecture is here WebGL (branch PA2)

Details on Normals Calculation
  • Facet Average normal: sum all facet normals that are adjacent to the vertex to form a vertex normal, normalize the result;
  • Facet Weighted Average normal: sum all facet normals that are adjacent to the vertex to form a vertex normal observing weight, normalize the result;
  • pass the vertex normals as vertex attributes to GPU.
Details on Gouraud/Phong shading
    Implement the necessary code in .js and/or vertex/fragment shader.

Details on a Local light source
  • pass coordinates of a light source to GPU as uniform parameter;
  • do not forget to multiply the coordinates by ModelView matrix before passing them to GPU.
Details on projection
    use single point perspective/orthographic matrix.

Hint
  • when calculating specular component you can take (0,0,1) direction vector as the vector pointing towards the viewer instead of calculating per-pixel direction (global viewer model);
  • intensity of the light source components can be hardcoded in the shader;
  • you can calculate the world coordinates of each point in fragment shader  interpolating vertex coordinates using hardware interpolator (varying keyword);
  • If you need to interpolate normals along primitive pass them to fragment shader using varying keyword.
Variants
  • Chagovets O. Shading model Gouraud, Facet Average Normal
  • Kandaurov S. Shading model Phong, weighted Facet Average Normal


Comments

Post a Comment

Popular posts from this blog

Practical Assignment #1 (Surface Rendering)

Assignment presentation Share screenshots presenting your assignment, the video and the link to your GIThub repo through  this form . The practical assignment has to reside in a branch named PA1. Prerequisites The credit module is based on WebGL interface brought in JS language. The suggested IDE for JavaScript is VisualStudio Code. Live Server extension for Visual Studio Code How to start Use a skeleton WebGL project:  Project  as a fast way to start (branch PA1). https://webglfundamentals.org  is a comprehensive resource for studying WebGL protocol. Link to handbook The book of surfaces (the password is vggi ) Requirements Basing on the skeleton project add a new js script file containing Model object. Model object has to draw the surface wireframe as two sets of vertices: a set of U polylines and a set of V polylines. Figure out your order number in a list of the group you study at in campus system, that is your variant Render  wir...
Post a Comment
Read more

Part 1

 The lecture we describe the history of OpenGL, OpenGL ES and WebGL standards Переклад лекції українською
Post a Comment
Read more

Calculation & Graphics Work (Texture mapping with MIP levels)

Assignment presentation Share screenshots presenting your assignment, the video and the link to your GIThub repo through  this form . The practical assignment has to reside in a branch named CGW. Texturing with MIP mapping Implement surface texturing with MIP levels for the surface you have started working on. Resources     The project we started to code at the lecture is here  WebGL (branch PA3 ) Requirements Prepare the collection of texture levels with descending resolution having numbers overlaid on top. Alternatively, use images having different color for every image level. Numbers (colors) make MIP level selection mechanism evident. Upload MIP levels one by one to GPU memory. JavaScript prevents loading textures from local disk drive. Either load textures from internet resource or generate texture image on the fly. Find the zoom level where several levels can be easily seen  when preparing  screenshots. ...
Post a Comment
Read more