flat, smooth shading

 

 

지오메트리의 노말 벡터를 어떻게 주느냐에 따라 결정이 된다.

 

Webgl에서는 geometry안에 각 각의 버텍스마다 노말벡터를 정한다. three.js에서는 필요에 따라 material을 결정하게 된다.

 

three.js에서는 Material에서 falt, smooth shading 설정 값에 따라 각 버텍스의 노말 벡터의 값이 변경되면서 적용됩니다.

 

예제를 보자.

 

좌측 부터 wirefame, smooth, flat

3개의 구를 만들고 Material은 MeshPhongMaterial을 사용하여 적절한 광원을 계산하도록 한다. 

 

Phong Model은 간단하고 빠른 계산을 위해 사용되는 모델이다. 

 

3가지 요소가 있고 이는 diffuse, specular, ambient 값을 계산한다. 

 

그리고 4가지 요소의 벡터를 사용한다.  

 

버텍스의 위치와 버텍스의 노말 벡터

 

이 위치에 들어오는 광원이 있고 이에 대한 반사각, 카메라의 위치와 방향이다.

 

phong Rendering을 다시 생각해 보자. 

 

WebGL은 점, 선, 면만 그릴 수 있다. 위 구는 수많은 삼각형 폴리곤으로 이루어져 있다.

 

falt shading은  각 폴리곤 메쉬의 중복된 정점에서의 노말 벡터를 각각 별도로 계산하는 것이다.

 

smooth shading은 중첩되는 버텍스의 노멀벡터를 각 면에 수직인 노멀벡터로 계산하지 않고 그 중간값인 

하나의 노말벡터만 사용하는 것이다.

따라서 이는 shader의 smooth step과 같이 그라데이션을 발생시켜 아주 부드럽게 보이게 된다.

 

결국 flat, smooth shading은 normal vector를 어떻게 주느냐에 따라서 그려지는 방법이 달라지는 것입니다. 

 

 

flat shading 효과는 세그먼트를 적게 할 수록 더 명확히 보인다.

 

 

추가적으로 퐁은 정반사를 통해 빛을 표현할 때 관찰자의 시점과 방향에서 정반사의 벡터사이의 각도가 커짐에 따라 (내적값이 작아짐) 반사효과를 표현했습니다.

 

이때 반사의 세기, 흡수율, 들어오는 빛의 세기, 그리고 shininess를 cos 세타의 알파제곱으로 표현했습니다.

 

위 그림의 구들은 phong 모델을 사용하여 렌더링하였는데 해당 빛의 세기와 범위를 조절하는 가장 쉬운 방법은 shinniess 값을 늘리거나 줄이는 것입니다. 

 

알파 값이 커질 수록 빛의 범위가 작아지는데 이는 다음과 같습니다.

   const sphere1 = new THREE.Mesh(
      new THREE.SphereGeometry(0.5, 64, 64),
      new THREE.MeshPhongMaterial({ 
        color: 0xff0000, 
        shininess: 9,
        specular: 0xffffff,
      })
    );

    sphere1.position.x = -1;

    const sphere2 = new THREE.Mesh(
      new THREE.SphereGeometry(0.5, 64, 64),
      new THREE.MeshPhongMaterial({ 
        color: 0x00ff00,
        shininess: 90,
        specular: 0xffffff,
      })
    );

    const sphere3 = new THREE.Mesh(
      new THREE.SphereGeometry(0.5, 64, 64),
      new THREE.MeshPhongMaterial({ 
        color: 0x0000ff,
        shininess: 900,
        specular: 0xffffff,
        })
    );