# NCUCG Lab4
###### tags: `computer_graphic` `assigment` `112`

For this assignment, you will be completing some color shader. You need to complete some missing code. The following will explain the functions’ functionalities.

## Download

link : https://github.com/leon890820/NCUComputerGraphic

## Introduction

After running the code, you will see some buttons and panels on the screen. From left to right, the functions are as follows:

Load a obj file. Enable Debug Mode.
Access the hierarchy panel. Access the inspector panel.

When you click the button, it will show a window on the screen, and you can select a obj file. I will provide some standard OBJ files for testing. If needed, you can also download the files you require from the internet. Please remember to use files with the extension ".obj", as other formats may result in reading failures. Clicking on the object in the hierarchy allows you to modify attributes such as its position in the inspector section.

The debug button will display lines connecting the vertices. Pressing the button can switch modes.

The camera and light `GameObject` has been put on the hierarchy .

First, you need to paste your code you write in homework3.


The tasks for this assignment include implementing `Flat shading`, `Ground Shading`,`Phong Shading` and `barycentric`. Within the code framework, we have already provided the Renderer function, so you only need to construct the shader parts.

We have some rules that must be followed.

:::warning
rule 1 : Prohibited from using the following built-in functions:

fill(color);
translate(x,y,z);
scale(x,y,z);
rotateX(t);
rotateY(t);
rotateZ(t);

However, the following cases are permitted:
1. You want to create GUI pannel,
2. You want to check the answer.
:::

:::warning
rule 2 : The use of any library is prohibited.
:::

:::warning
rule 3 : Copying is prohibited.
:::

#### float[] barycentric(Vector3 P, Vector4[] verts)

You need to use barycentric coordinates to calculate the barycentric coordinates of the point in the triangle. Please return the values of alpha, beta, and gamma. The GameObject will interpolate the values returned from the vertex shader and pass them to the fragment shader.
Please note that when calculating barycentric coordinates, since we are using perspective coordinates, you should perform Perspective-Correct Interpolation on the results; otherwise, your answer will be incorrect.

left : incorrect right : correct

https://blog.csdn.net/n5/article/details/100148540

diffulty : ★★

#### float PhongFragmentShader: main(Object[] varying)

In this part, we are going to start writing our own shader. In the Phong shader, I have demonstrated how to use and pass relevant variables. I have prepared all the variables you might need. If there are additional requirements, you can modify the functions in Material as needed. I have already passed the world coordinates, world normal vectors, light sources, camera positions, and other information for the point. Please use these to calculate the lighting at that point and return it to the GameObject for rendering.

Once you finished it, you will see the light interact with the object


diffulty : ★★★

#### FlatFragmentShader: main(Object[] varying)

At this point, I'm providing the most basic framework. Please follow the structure of the Phong shader and pass in the necessary objects to implement Flat shading.


diffulty : ★★★

#### GroundFragmentShader: main(Object[] varying)

At this point, I'm providing the most basic framework. Please follow the structure of the Phong shader and pass in the necessary objects to implement Ground shading.


diffulty : ★★★

#### bonus Texture Shader

In the extra credit assignment, please inherit new materials and shaders on your own to complete it. You can use the texture in the data to apply it to objects. The mesh has provided UV coordinates, which can be directly passed into the shader.


diffulty : ★★★★

#### [Optional] Free to supplement with any additional actions you require without violating the rules.

## Score

Each assignment's grading is divided into two parts: fundamentals and advanced.

[4 Score] Correctly complete the barycentric.
[5 Score] Correctly complete the Phong Shading.
[3 Score] Correctly complete the Groung Shading.
[3 Score] Correctly complete the Flat Shading.
[bonus 1.5 score] Complete Other Shading

## FrameWork
* Vector3
Basic vector operations are provided, including addition, subtraction, multiplication, and dot product operations. You can instance it any where in any situation.

* Matrix4
Basic matrix operations are provided, including addition, subtraction, multiplication, rotation and so on. You can instance it any where in any situation.

* Camera
In the Camera class, various information about the camera is stored, including height, width, near plane, far plane, position, orientation, etc. It also provides the view matrix and projection matrix for use.

* GameObject
The GameObject class must be provided with a Mesh class and Shader class. The GameObject is responsible for rendering the object, and it includes a Shader that will be introduced below.

* Mesh
The Mesh class provides the basic properties of an object, including vertex positions, UV coordinates, normal vectors, and other information. When constructing it, you must provide the file location, and the file type must be in the OBJ format.

* Shader
Shaders are divided into two types: Vertex Shader and Fragment Shader. In the Vertex Shader, you need to output the position of vertices to the GameObject. The GameObject will perform vertex culling and interpolation, and then pass the information to the Fragment Shader. In the Fragment Shader, you must calculate the color for each pixel and return it to the renderer buffer.

* Material
In the Material, pass the relevant attribute variables and uniform variables you need. In the attribute variables, include relevant variables about vertices, and in the uniform, pass other necessary variables. Please note that a Material will be bound to the corresponding Shader.

* Button
The Button inherits from the Box class, providing methods such as checking the area and changing the color. When using the run function, you need to pass an anonymous function that allows you to perform specific functions that you provide.

* ShapeButton
The ShapeButton allows you to return a class of Renderer, enabling you to change the current drawing mode on the canvas.

## Submit

:::warning
Deadline :
NCU : TBD

:::

After completing the assignment, please add a README.md file and indicate which tasks have you completed and how did you complete them. **Please take a screen shot or recording the vedio in your readme**. Finally, package the above content and submit it on the eeclass platform using the naming format "StudentID_Homework4.zip".

Ensure that your code is work in your environment before submission, otherwise, it will be considered non-functional and receive a score of 0.

After finish it, please help us fill out the survey to improve our performance.

<style>
span { font: 100% "Times New Roman", sans-serif; }
</style>

{%hackmd oX2tPQNCRcOTOOEbRQQ7OQ %}