Kursthemen

  • Allgemeines

  • Welcome to the Computer Graphics Lab 2021

    Prerequisites:

    • Labs require basic knowledge of (JavaScript) programming.
    • We do not teach programming!

    What you should learn in the labs:

    • How the theory learned in the lectures can be applied
    • Basic knowledge about the OpenGL/WebGL computer graphics API
    • Understand what the API commands do and how they are used

    What we expect you to learn by yourself:

    • Apply the learned skills to new tasks!
    • Experiment and get practice! → You will need it for the lab project
    • JavaScript basics

    Practice at home!

    • Take a look at tutorials and hand-books.
    • Practice between the lab sessions!
    • We will give you hints what you should practice.

  • Team & Communication

    Team:

    • Prof. Marc Streit
    • Prof. Günter Wallner
    • Patrick Adelberger
    • Klaus Eckelt
    • Indrajit Kurmi

    Contact: cg-lab@jku.at

    Use this unique point of contact. If the answer to your question is potentially interesting to your fellow students, post it in the Moodle forum (see below).

    • This forum is used by the CG lab team for announcements to all participtants.
    • Use the forum to communicate with the CG lab team and with other students.

  • Lab Appointments


    • Lab Group A Group B Group C Group D Group E
      1. Introduction to WebGL Tue 9.3.
      15:30 – 17:00
      Tue 9.3.
      17:15 – 18:45
      Fri 12.3.
      08:30 - 10:00
      Fri 12.3.
      10:15 – 11:45
      Fri 12.3.
      12:00 – 13:30
      2. Transformations and Projections Tue 16.3.
      15:30 – 17:00
      Tue 16.3.
      17:15 – 18:45
      Fri 19.3.
      08:30 - 10:00
      Fri 19.3.
      10:15 – 11:45
      Thu 18.3.
      13:45 - 15:15
      3. Scene Graphs Tue 23.3.
      15:30 – 17:00
      Tue 23.3.
      17:15 – 18:45
      Fri 26.3.
      08:30 - 10:00
      Fri 26.3.
      10:15 – 11:45
      Fri 26.3.
      12:00 – 13:30
      4. Shading, Lights and Materials Tue 13.4.
      15:30 – 17:00
      Tue 13.4.
      17:15 – 18:45
      Fri 16.4.
      08:30 - 10:00
      Fri 16.4.
      10:15 – 11:45
      Fri 16.4.
      12:00 – 13:30
      5. Texturing Tue 20.4.
      15:30 – 17:00
      Tue 20.4.
      17:15 – 18:45
      Fri 23.4.
      08:30 - 10:00
      Fri 23.4.
      10:15 – 11:45
      Fri 23.4.
      12:00 – 13:30
      6. Advanced Texture Mapping Tue 27.4.
      15:30 – 17:00
      Tue 27.4.
      17:15 – 18:45
      Fri 30.4.
      08:30 - 10:00
      Fri 30.4.
      10:15 – 11:45
      Thu 29.4.
      13:45 – 15:15

    • The appointments for the 7th lab are: 

      • Project Q&A: Tue 1.6. 15:30 – 17:00 and Fri 11.6. 08:30 – 10:00
      • Introduction to CUDA: Fri 11.6. 10:15 – 11:45, and Fri 11.6. 12:00 – 13:30

      Please also note that the tutorials for the 7th session are not statically assigned to specific groups. Based on your interests, you will be able to choose from the two topics. You can either choose a Q&A session where we can discuss questions related to your project or you can attend an introduction to CUDA.

  • Lab Material: Slides, Recordings, Zoom Link

    Slides

    Tutorial slides and other material will be posted here.

    The slides you get before the lab sessions might miss solutions. The complete slides will be available by the end of each lab week.


    Code

    The Github repository contains the code for each lab and will be gradually updated: https://github.com/JKU-ICG/cg_lab_2021

  • Further Tutorials and Resources

  • Lab Project: Create a Movie

    The goal of this project is to create an animated movie that lasts exactly 30 seconds.

    Project groups

    • Groups of two students
    • Groups can be built independently of lab group assignments in KUSSS and lab session time slots (A-E).
    • Single projects are not allowed.
    • If you don’t find a partner, use the Moodle forum to find a fellow student.
    • If one of the partners drops the course after the concept submission, let us know immediately so that we can adapt the scope of the project.

    Minimal requirements

    • The movie must be 3D.
    • The movie must last exactly 30 seconds.
    • All basic movie effects and special effects must be clearly visible.
    • All basic movie effects and special effects must be implemented as scene graph nodes.
    • All special effects must be explained.
    • Framework: The implementation must be based on the unmodified lab framework (= everything in the libs folder). However, you are free to add new scene graph nodes. The usage of other external 3D/game engines, such as Three.js, is not allowed. The Github template repository which you get when creating a group via Github classroom contains the framework (so don't just use one of the lab session projects).
    • Documentation: Code needs to be documented and modular (create own function for each feature if possible).
    • Executability: The movie needs to run on regular PCs with Visual Studio Code, as in the lab sessions. The movie needs to be self-contained including all required resources.

    Basic movie effects

    1. Composed object
      a) Add at least one manually composed object that consists of multiple scene graph nodes. Your object should significantly differ from the robot created during the lab sessions.
      b) Animate separate parts of the object and also move the composed object itself in the scene.
      c) Use at least two clearly different materials with specular properties for the various parts of your composed object. Note that a material is different from a texture and that just setting different vertex colors is not sufficient.
    2. Hand-crafted object
      a) Create one scene graph node that renders a hand-crafted 3D shape (5-25 vertices; not a cube, sphere, quad, or loaded model). Fully specify properties for this object, i.e., vertices, normals, and texture coordinates. This object must not be imported from external object files created in modeling tools like Blender. However, you are free to use imported objects for other parts of your scene.
      b) Apply a texture to your self-created complex object by setting proper texture coordinates.
    3. Illumination
      a) Use multiple light sources.
      b) One light source should be moving in the scene.
      c) Implement at least one spot-light by extending the existing light node LightSGNode and a Phong shader. Apply Phong shading to all objects in the scene.
    4. Automated camera flight (Animation)
      For the 30 seconds camera flight, the camera needs to be animated without user intervention and the animation needs to start automatically. You need to create the animation objects (see class Animation). Examples can be found in the comments above the class definition. The first parameter is the TransformSGNode that is to be animated. The second parameter details what the animation should look like. If true is supplied as the third parameter, the animation will keep looping. You can start the animations using the start() function and update the animation in the render step. After the automatic camera flight, it should be possible to freely control the camera using the mouse and keyboard to move through the scene. The camera navigation is implemented already. You can use the WASD-keys to manually control the camera along the viewing direction. (W-key: forward movement, S-key: backward movement, A-key: leftward movement, D-key: rightward movement). You can use the mouse to control the heading (mouse-x; rotation around y-axis) and pitch (mouse-y; rotation around x-axis) of the camera relative to the ground (no roll!).

    Special effects

    • Multiple effects must add up to 30 points.
    • Trivial solutions can result in decreased points.
    • The effects need to conceptually fit into the submitted movie screenplay.
    • Describe the special effects and how you implemented them in the README.md file.
    • 20 points for the complexity, integration, and documentation of the special effects.

    Effect selection

    Easy (10 points)

    • S1. Multi texturing
      Mix multiple textures with an alpha map in the shader. Make sure to combine at least two different textures. For the texture lookup different texture coordinates are typically required. For example, combine a texture showing grass with a texture showing pavement using an alpha texture that defines a walking path. 
    • S2. Level of detail
      Implement a level-of-detail render node and use three different detail levels of your model. Decide which version to render by using the distance of the object to the camera.  Low resolution (i.e., low polygon count) should be used, if the object is further away from the camera. Make sure the swap is visible at some point during your animated camera flight. Note that this is NOT level of detail for textures. 
    • S3. Billboarding
      Implement a billboarding node that makes a flat object face the camera orthogonally at all time. The billboards should mimic 3D objects, such as trees or clouds, in the scene. Make sure the billboard is viewed from multiple different directions during the animated camera flight to prove that its orientation is updated correctly.  

    Medium (20 points)

    • S4. Terrain from heightmap
      Compute the normal vectors for your terrain to allow correct Phong shading. Reading the precomputed normals from another texture is allowed as well.
    • S5. Post-processing shader
      Examples are a toon shader, bloom shader, glare effect, sobel operator, or color space transformation. Tune your post-processing shader carefully such that it looks good, while all other aspects, e.g. textures and different material properties, are still clearly visible. Keep in mind that a post-processing effect is applied to the image generated by rendering the scene to a texture. This means you need multiple render passes: One for rendering the scene to a texture and a second one for rendering the texture to the screen and thereby applying the post-processing effect.
    • S6. Animated water surface
      The animated water surface should at least reflect a skybox and simulate wave movements in a nice way. The normals and thus the reflections should be influenced by the wave movements.
    • S7. Minimap
      Show minimap in one of the corners of the screen that contains a minified version of the world (2D texture or 3D rendered) together with the path of the camera over the last 10 seconds. Moving objects don’t have to be shown. Use a separate viewport for the minimap. 
    • S8. Particle system
      Examples of particle effects are rain, smoke, or fire. The particle system has to use a basic physics simulation. The animations have to be framerate-independent as well. The particle movements should be implemented in the shader. 

    Hard (30 points)

    • S9. Motion blur
      The motion blur should apply to both the moving objects and the camera motion. 

    Own effect suggestions are welcome but need to be described in the movie concept submission. Approval will be given by email.

    Good luck and have fun working on the projects! lächelnd

  • Grading

    General grading remarks

    • Lab attendance is mandatory: If you miss a course without a legitimate reason you will be unregistered. 
    • Project grade is the course grade 
    • Interviews at the end of the semester: theoretical concept questions + code walkthrough
    • Dropping the course after the concept submission will result in a negative grade.
    • There is no lab exam at the end of the semester

    Point distribution

    • Total: 100 points per group (maximum of 50 points per student)
    • 50 points: Minimal requirements and basic movie parts
    • 50 points for special effects: 30 for implementation; 20 for complexity, integration, and documentation
    • <43.75 (87,5%) = grade 2, <37.5 (75%) = 3, <31.25 (62,5%) = 4, <25 (50%) = 5
    • Total points are split between team members. You need to state the distribution depending on the workload (e.g., 60% student A and 40% student B) in the final submission.
    • One student cannot indicate to have contributed more than 75%.   

    Plagiarism

    • Each group is supposed to work alone. However, supporting each other is of course legitimate.
    • Providing code to other groups is not allowed! It does not matter whether it is on purpose or not.
    • If you repeat the lab, you are not allowed to reuse your movie concept from previous years.
    • Do not copy code from the Internet. If you do so, make a comment in the code and you don’t get any points for it. 
    • All involved groups in an incident get 0 points!

    Penalties

    • Late submissions are possible, but they will be penalized.
      1 day: 10% penalty
      2 days: 20% penalty
      3 days: 40% penalty
      >3 days: 100% penalty
    • Note that the penalty applies to the total project points.
    • Changing a special effect after the movie concept deadline.
      • If reported before the final submission: 50% penalty on the effect points.
      • Without announcement: 100% penalty on the effect points.

  • Deadlines & Deliverables

    Concept, intermediate, and final submissions will be submitted via Github classroom. 

    26.03.2021 23:59Concept submission

    • Submit via Github classroom.
    • Create a group and use your movie title as a group name.
    • Fill out the template in the README.md file:
      • Specify group members with full name and student ID.
      • Explain the overall movie idea and concept.
      • Choose special effect(s) adding up to exactly 30 points.
    • Push edited README.md to Github.
    • Make sure that the correctly filled out README.md will show up on the front page of your group repository.

    23.04.2021 23:59: Intermediate submission (the week of the 5th LAB)

    • This submission is mandatory! Without submitting you cannot continue the course.
    • Prepare a first version of your movie that:
      • is 30 seconds long,
      • contains animated objects, and
      • has an animated camera movement. 
    • Push the intermediate project to Github on the day of the submission deadline.
      The repository needs to contain:
      • code/ Intermediate code + resources + libs
      • video/ A screen recording of the intermediate result
    • Note that you don’t need to use any lighting, materials, or textures yet. This will be discussed in later labs and can be added to the project afterward!

    22.06.2021 23:59: Final submission

    • Push your final submission to your Github repository.
    • The package needs to contain:
      • code/ Documented code + resources + libs
      • video/ A screen recording of the movie
      • README.md
      Document which minimal aspects/requirements, basic movie parts, and special effects are implemented in a correct way by filling out the table.
      Mention in the comments column of the table where you have implemented the code for all minimal aspects/requirements and where it is visible (e.g., spotlight is the lamp post shining on the street).
      Explain special effects by describing how they work in principle and how you implemented them.
      Add known issues and limitations.
      Announce the workload of each team member in %, adding up to 100%.

    24.-30.06.2021: Individual interviews

    • Understanding will be checked in individual interviews at the end of the semester. The questions can target conceptual aspects (e.g., Phong shader theory, transformation pipeline, how to render objects without the scene graph implementation) as well as specific implementation details.
    • Each student needs to understand all parts of the project, even those primarily contributed by only one of the group partners.
    • We will send out a Doodle poll for coordinating the time slots.
    • The members of the same group will be asked sequentially.