WebGL 노트(둘)반들반들하다

1. 광원
1.1 포인트 라이트 포인트 라이트 통과
위치 및
광선을 발사하여 정의합니다.

광선 복사 감소: 점광원이 공간에서 전파되면 광원의 거리에 따라 감소한다.f(d) = 1 a 0 + a 1 d + a 2 d 2 (국부광 복사감소 공식) f (d) =\rac{1} {a 0+a 1d+a 2d^2} (국부광 복사감소 공식) f (d) = a0 +a1d+a2 d21 (국부광 복사감소 공식) 만약 점광원의 위치가 무궁무진하다면f(d)= 1.0(빛이 무한한 위치에 있으면 d=정무한) f(d)= 1.0(빛이 무한한 위치에 있으면 d=정무한) f(d)=1.0(빛이 무한한 위치에 있으면 d=정무한)

설명: 실제 광원의 거리가 d일 때 그 진폭은 인자 1/d 2 1/d^2 1/d2에 따라 감소하지만 광원에 가까운 대상에 대해 1/d 2 1/d^2 1/d2는 과도한 강도 변화를 일으키고 d가 크면 변화가 너무 작아서 이러한 원인은 실제 광원이 무한한 작은 점이 아니다.점발광체로 한 장면을 조명하는 것이 실제 조명 효과의 간단하고 비슷하다.그래서 a 0, a 1, a 2 세 개의 매개 변수 a 를 더하면0,a_1,a_2 세 개의 매개 변수 a0, a1, a2 세 개의 매개 변수는 사용자가 이 세 개의 계수의 값을 조정하여 장면에서 서로 다른 조명 효과를 얻을 수 있다. 예를 들어 d가 매우 작을 때 a0a 를 부여할 수 있다.0 a0은 f(d) f(d) f(d) f(d)가 커지는 것을 방지하기 위해 큰 값이다.

WebGl과 Three에 대응합니다.js의 빛:
1 . 빛의 거리가 무한원일 때, d=무한정일 때WebGL 안의 평행광에 대응하고Three에 대응한다.js 안의 방향광

WebGL에서 착색기에 두 개의 벡터를 전달해야 합니다. 빛과 빛 방향: uniform vec3 uLightCorlor 및 uniform vec3 uLightDirection.

Three.js에서 방향광을 정의하는 구조기DirectionalLight(color,intensity).

//Three.js      WebGL  .
var uniforms = lightCache.get( light );

uniforms.color.copy( light.color ).multiplyScalar( light.intensity );
uniforms.direction.setFromMatrixPosition( light.matrixWorld );
_vector3.setFromMatrixPosition( light.target.matrixWorld );
uniforms.direction.sub( _vector3 );
uniforms.direction.transformDirection( viewMatrix );

2. 빛의 위치가 부분적일 때 WebGL과 Three에 대응한다.js 안의 점광원.

WebGL 프로그래밍 안내서에는 점광원 정의에 대한 착색기 코드가 없습니다.

Three.js에서 점광원을 정의하는 구조기 PointLight(color,intensity,distance,decay).

//Three.js      WebGL  .
var uniforms = lightCache.get( light );

uniforms.position.setFromMatrixPosition( light.matrixWorld );
uniforms.position.applyMatrix4( viewMatrix );
uniforms.color.copy( light.color ).multiplyScalar( light.intensity );
uniforms.distance = light.distance;
uniforms.decay = ( light.distance === 0 ) ? 0.0 : light.decay;

1.2 방향광 방향광은 *방향 벡터 * 및 *이 방향에서 시작되는 각도 범위 $\theta$*를 통해 결정됩니다(원추와 유사). $$cos\alpha= V_{obj}• V_{light}$$ $V_{obj}$는 광원에서 빛의 대상까지의 단위 방향 벡터를 나타낸다.

각 강도 감소: f(ϕ ) = c o s a ϕ ( a > 0 , 0 < ϕ < θ ) f(\phi)=cos^{a}\phi(a>0,0<\phi<\theta) f(ϕ)=cosaϕ(a>0,0<ϕ<θ) 광원이 투영 광원이 아닌 경우 f(ϕ ) = 1.0 , f(\phi)=1.0, f(ϕ)=1.0, 객체가 테이퍼 외부에 있는 경우 f(ϕ ) = 0.0 f(\phi)=0.0 f(ϕ)=0.0

해석: 쇠퇴지수 a는 어떤 정값,ϕ\phi ϕ원추축에서 원추 표면 사이의 협각 범위 내의 각도 값을 가리킨다.

대응 Three.js안의 스포트라이트:

Three.js에서 스포트라이트의 구조 함수를 정의합니다: SpotLight(color,intensity,distance,angle,penumbra,decay)

//Three.js        .

var uniforms = lightCache.get( light );

uniforms.position.setFromMatrixPosition( light.matrixWorld );
uniforms.position.applyMatrix4( viewMatrix );

uniforms.color.copy( color ).multiplyScalar( intensity );

uniforms.distance = distance;

uniforms.direction.setFromMatrixPosition( light.matrixWorld );
_vector3.setFromMatrixPosition( light.target.matrixWorld );
uniforms.direction.sub( _vector3 );
uniforms.direction.transformDirection( viewMatrix );

uniforms.coneCos = Math.cos( light.angle );

uniforms.penumbraCos = Math.cos( light.angle * ( 1 - light.penumbra ) );
uniforms.decay = ( light.distance === 0 ) ? 0.0 : light.decay;

1.3 환경광은 장면의 밝기를 설정하여 환경광을 정의한다.모든 대상이 같은 환경광을 가지고 각 빛이 표면을 비추는 전체적인 만반사와 비슷하다.
Three.js 환경광의 구조 함수 정의: AmbientLight(color, intensity)

//Three.js          .
r += color.r * intensity;
g += color.g * intensity;
b += color.b * intensity;

1.4Three.js 안의 다른 빛

반구광: 구조 함수 HemisphereLight(skyColor,groundColor,intensity)

//Three.js          
var uniforms = lightCache.get( light );

uniforms.direction.setFromMatrixPosition( light.matrixWorld );
uniforms.direction.transformDirection( viewMatrix );
uniforms.direction.normalize();

uniforms.skyColor.copy( light.color ).multiplyScalar( intensity );
uniforms.groundColor.copy( light.groundColor ).multiplyScalar( intensity ); 

장방형면광: 구조 함수RectAreaLight(color,intensity,width,height)

var uniforms = lightCache.get( light );
uniforms.color.copy( color ).multiplyScalar( intensity / ( light.width * light.height ) );
uniforms.position.setFromMatrixPosition( light.matrixWorld );
uniforms.position.applyMatrix4( viewMatrix );

_matrix42.identity();
_matrix4.copy( light.matrixWorld );
_matrix4.premultiply( viewMatrix );
_matrix42.extractRotation( _matrix4 );

uniforms.halfWidth.set( light.width * 0.5,0.0, 0.0 );
uniforms.halfHeight.set(0.0, light.height * 0.5, 0.0 );
uniforms.halfWidth.applyMatrix4( _matrix42 );
uniforms.halfHeight.applyMatrix4( _matrix42 );

2. 객체 표면 조명 효과

물체의 광학적 특성은 조명 효과에 영향을 주는 주요한 요소로 이런 특성은 투명도, 색채 반사 계수, 표면 무늬 파라미터를 포함한다.

2.1 난반사가 거칠거나 입자형 표면은 반사광선을 각 방향으로 발산한다. 이런 반사를
만반사

이상적인 만반사체: 입사광이 각 방향에서 같은 강도로 발산된다고 가정하면 관찰자의 위치와 무관하다.이상적인 만반사체 표면상의 반사광 에너지는 랑버여현의 법칙에 의해 계산된다.그래서 랑버 반사체라고도 불린다.랑버의 반사에 대해 빛의 강도는 모든 관찰 방향에서 같다.

만약 모든 표면이 이상적인 만반사체에 따라 대처한다면 서로 다른 광원이 만반사 아래에서 반사하는 빛의 강도는 다음과 같다.

환경광 아래의 만반사: I a m b = k d I a(k d는 만반사 계수, I a는 환경광 강도) I{amb}=k_dI_(k d는 만반사 계수, I a는 환경광 강도) Iamb = kd Ia(kd는 만반사 계수, Ia는 환경광 강도)

점광원 아래의 만반사: I = k d I l c o sθ (kd는 만반사 계수, Il은 입사광 강도,θ 입사광선과 평면 법방향량의 협각으로 0에서 90도 사이에 있어야 효과가 있다) I=kdI_lcos\theta(k d는 만반사 계수, I l은 입사광 강도,\theta는 입사광과 평면 법방향량의 협각으로 0-90도 사이에 효과가 있어야 함) I=kd Il cosθ(kd는 만반사 계수, Il은 입사광 강도,θ입사광과 평면법방향량의 협각으로 0에서 90도 사이에 있어야 효과가 있다

환경광과 점광원이 동시에 존재하는 만반사: I a m b, d i f = k a I a + k d I l(N·L)(k a는 환경광 반사 계수, k d는 만반사 계수) I{amb,diff}=k_aI_a+k_dI_l(N·L)(k a는 환경광 반사 계수, k d는 만반사 계수) Iamb, diff=ka Ia+kd Il(N·L)(ka는 환경광 반사 계수, kd는 만반사 계수) ka와 kd는 모두 표면의 재질에 의해 결정되며, 단색광의 경우 그 값은 모두 0에서 1 사이에 있다.k_a와kd 모두 표면의 재질에 의해 결정되며, 단색광의 경우 그 값은 0에서 1 사이에 있다.ka와 kd는 모두 표면의 재질에 의해 결정되며 단색광의 경우 그 값은 0에서 1 사이에 있다.

2.2 거울면 반사 반사 광선이 눈에 띄거나 밝은 점으로 집중되어 **거울면 반사*가 된다.기존의 표면을 가정하면 법방향량은 N, L은 광원 방향, R은 반사광 방향, V는 시점 방향, L과 N의 협각 = R과 N의 협각 = $\theta, $R과 V의 협각은 $\phi$.*이상적인 거울면 반사재료*$\theta=\phi$일 때만 관찰자가 반사광을 볼 수 있습니다.
비이상 반사체 시스템 시스템의 반사 방향은 벡터 R 주위의 유한한 범위 내에 분포한다.비교적 매끄러운 반사 범위는 비교적 작고, 비교적 거친 반사 범위는 비교적 크다.Phong Bui Tuong은 거울의 범위를 계산하는 경험 공식을 제시하여 Phong의 반사 모델이 되었다.(Phong) I s p e c = W ( θ ) I l c o s n s ϕ (V·R < = 0 또는 N·L < = 0시, I s p e c = 0) I{spec}=W(\theta)I_lcos^{n s}\phi(V·R<=0 또는 N·L<=0시, I {spec}=0)\tag{Phong} Ispec=W(θ)Il​cosns​ϕ(V·R<=0 또는 N·L<=0시, Ispec=0)(Phong)(W)θ ) 거울면 반사 계수를 나타내고 I l은 광원 강도를 나타낸다.ϕ 관찰방향 V와 반사방향 R의 협각을 나타낸다.N s는 미러 반사 매개변수를 나타내고 재료에 의해 결정됩니다(W (\theta)는 미러 반사 계수를 나타냅니다. Il은 광원의 강도를 나타내고\phi는 관찰방향 V와 반사방향 R의 협각을 나타낸다.N_s는 광택 반사 매개변수를 나타내며 재료에 의해 결정됨)(W(θ)미러 반사 계수를 나타내고 Il은 광원 강도를 나타냅니다.ϕ관찰방향 V와 반사방향 R의 협각을 나타낸다.Ns는 재료에 의해 결정되는 미러 반사 매개변수를 나타냅니다.
간략화된 Phong 모형은 V•R 대신 N•H를 사용할 수 있으며 H는 L과 V의 반각 벡터를 나타낼 수 있다.
2.3 만반사와 거울반사의 합병
(1) I = I d i f f + I s p e c I=I_{diff}+I_{spec}\tag{1} I=Idiff​+Ispec​(1) (2) = k a I a + k d I l ( N • L ) + W ( θ ) I l c o s n s ϕ =k_aI_a+k_dI_l(N• L)+W(\theta)I_lcos^{n_s}\phi\tag{2} =ka​Ia​+kd​Il​(N•L)+W(θ)Il​cosns​ϕ(2) (3) = k a I a + k d I l ( N • L ) + W ( θ ) I l ( N • H ) n s =k_aI_a+k_dI_l(N• L)+W(\theta)I_l(N• H)^{n_s}\tag{3} =ka​Ia​+kd​Il​(N•L)+W(θ)Il​(N•H)ns​(3)
2.4 다광원의 만반사와 거울면 반사의 합병
(1) I = I a m b , d i f f + ∑ i = 0 n   [ I l , d i f f + I l , s p e c ] I=I_{amb,diff} +\sum_{i=0}^{n}\[I_{l,diff}+I_{l,spec}]\tag{1} I=Iamb,diff​+i=0∑n​ [Il,diff​+Il,spec​](1) (2) = k a I a + ∑ i = 0 n I l [ k d ( N • L ) + k s ( N • H ) n s ] =k_aI_a+\sum_{i=0}^{n}I_l[k_d(N• L)+k_s(N• H)^{n_s}]\tag{2} =ka​Ia​+i=0∑n​Il​[kd​(N•L)+ks​(N•H)ns​](2)
3. 표면 그리기 알고리즘
Gouraud 명암 처리

각 다각형 정점의 평균 단위 법방향량을 확정한다.

각 정점에 대해 광조 모델에 따라 빛의 강도를 계산한다.

다각형 투영 구역에서 정점의 강도에 대해 선형 삽입값을 한다.

단점: 표면의 높은 빛은 때때로 이상한 모양이 나타날 수 있고 선형 빛의 강도 삽입값은 표면에 지나치게 밝거나 지나치게 어두운 줄무늬를 만들어 마하대 효과가 된다.
Phong 명암 처리

각 다각형 정점의 평균 단위 법방향량을 확정한다.

다각형 투영 구역에서 정점법 벡터에 대해 선형 삽입값을 한다.

광조 모델에 따라 삽입값의 법방향량을 사용하여 각 스캐닝 라인을 따라 투영 픽셀의 광강도를 계산한다.

단점: Gouraud 방법보다 더 많은 계산이 필요합니다.
빠른 Phong 명암 처리(테일러 전시식) I d i f (x, y) = T 5 x 2 + T 4 x y + T 3 y 2 + T 2 x T 1 x T 0 Idiff(x,y) = T_5x^2+T_4xy+T_3y^2+T_2x+T_1y+T_0\tag{테일러 전시식} Id iff(x, y) = T5 x 2+T4 xy+T3 y2+T2 x+T1 y+T0(테일러 전시식) Tk는 빛의 방향과 각 정점의 빛의 강도를 확정하는 함수이다.T_k는 빛의 방향과 각 정점의 빛의 강도를 확정하는 함수이다.Tk는 빛의 방향과 각 정점의 빛의 강도에 의해 확정된 함수이다.
단점: 빠른 Phong 방법으로 Phong 표면 그리기 알고리즘의 계산량을 줄였지만 그 계산량은 Gouraud 표면 그리기 알고리즘의 두 배에 해당하는 시간이다.기본적인 Phong 표면 그리기 알고리즘은 Gouraud 그리기보다 6~7배 더 소모된다.