그래픽스
Received: Jan. 04. 2021 Revised: Mar. 30. 2021 Accepted: Mar. 31. 2021
Corresponding Author: Jinho Park(Soongsil University) E-mail: c2alpha@ssu.ac.kr
ISSN: 1598-4540 / eISSN: 2287-8211
Ⓒ The Korea Game Society. All rights reserved. This is an open-access article distributed under the terms of the Creative Commons Attribution Non-Commercial License (http://creativecommons.otg/licenses/by-nc/3.0), which permits unrestricted non-commercial use, distribution, and reproduction in any medium, provided the original work is properly cited.
폴리곤 메시의 정점 이동과 표면 텍스처 매핑에
노이즈 텍스처를 적용하는 쉐이더 기법
※
홍민석, 박진호
숭실대학교 미디어학부
ghdalstjr130@gmail.com c2alpha@ssu.ac.kr
A Shader Technique that applies Noise Texture to Vertex
Movement and Surface Texture Mapping of Polygon Mesh
Minseok Hong, Jinho Park
Global School of Media, Soongsil University
요 약
폭발, 마법 등 불특정한 시각효과를 구현하는데 파티클과 노이즈가 효과적으로 사용된다. 파 티클은 자유롭게 제작할 수 있지만, 많이 사용될수록 CPU/GPU 사용률이 높아진다. 본 논문에 서는 이러한 단점을 극복하기 위해 변경이 어렵지만, 정해진 자원을 소모하는 폴리곤 메시를 활용해 CPU/GPU 사용률을 줄인다. 그리고 쉐이더를 활용해 폴리곤 메시의 정점과 표면 텍스 처 매핑에 불특정한 패턴을 가진 노이즈 텍스처를 적용하여 시각효과를 구현한다. 실험결과, 프 로파일러에서 쉐이더를 적용한 구체 폴리곤 메시가 2~4ms CPU, 1~2m_s GPU 사용률을 보였고 쉐이더를 활용해 불특정한 시각효과를 구현할 수 있음을 보였다.ABSTRACT
Particle and noise are effectively used to implement unspecific VFX like an explosion, magic. Particle can create freely but, The more usage, the higher CPU/GPU usage. This paper using polygon mesh that is hard to change but consumes fixed resources to overc ome the demerit of particle and reduce CPU/GPU usage. Also, using shader, apply noise texture that is suitable unspecific pattern to vertex and surface texture mapping of polyg on mesh for implement VFX in unity. As a result of experiment, shader applied sphere p olygon mesh show 2~4ms CPU, 1~2ms GPU usage in profiler. Also It has been shown th at shader can be used to implement unspecific VFX.
Keywords : VFX(시각효과), Shader(쉐이더), Noise(노이즈), Vertex(정점), Surface(표면) Polygon Mesh(폴리곤 메시), Texture Mapping(텍스처 매핑)
1. 서 론
시각효과(VFX)는 사람이 상상력을 기반으로 인 위적으로 만들어 낸 결과물이나 자연현상을 가상현 실에서 비슷하게 구현해 내는 시각적 효과를 말한 다. 실체가 모호하거나 현실에선 만들어낼 수 없는 물체를 구현하기 때문에 정해진 방법 없이 다양한 기술을 응용해 만들어낸다. 파티클(Particle)을 활 용해 물결(Wave)[1]을 구현하거나 노이즈(Noise) 원리를 이용해 불[2]을 제작할 수 있다. 파티클을 사용하면 자유롭게 높은 품질을 지닌 시각효과를 구현할 수 있지만 파티클을 많이 사용 할수록 CPU/GPU 자원의 소모가 크다. 그래서 개 발 환경이 변하면 파티클의 입자 수를 조절해야 하는 단점이 있다. 본 논문에서는 이를 극복하기 위해 변경하지 않고 일관된 시각효과를 보여줄 수 있는 폴리곤 메시(Polygon Mesh)[3]와 가우시안 노이즈(Gaussian Noise), 펄린 노이즈(Perlin Nois e)의 원리가 적용된 텍스처(Texture)를 이용하고, 쉐이더(Shader)[4]를 활용해 폭발, 마법 등 불특정 한 모습을 지닌 시각효과[5]를 구현함으로써 파티 클과는 다른 제작 방법을 제시한다. 본 논문에서는 폴리곤 메시의 정점(Vertex)을 가우시안 노이즈 텍스처를 활용해 이동시킨다. 그 리고 펄린 노이즈 텍스처를 합성한 결과를 표면(S urface)의 텍스처 매핑(Texture Mapping)[6]에 적 용해 자연스러운 애니메이션을 보여주는 쉐이더를 제안하고 유니티(Unity) 게임 엔진에서 구현한다. 파티클이 아닌 정해진 자원을 소모하는 폴리곤 메 시를 사용해 개발 환경이 바뀌어도 시각효과를 변 경하지 않고 일관된 연출을 보여줄 수 있다. 또한, 정해지지 않은 패턴이라는 특성이 있는 노이즈 텍 스처를 쉐이더를 활용해 적용하므로 불특정한 형태 를 보이는 시각효과들을 효과적으로 구현할 수 있 다. 정리하면 본 논문은 다음과 같은 기술적 공헌 을 한다. 1. 가우시안 노이즈 텍스처에 따라 자연스럽게 움 직이는 정점 쉐이더를 제안한다. 2. 펄린 노이즈 텍스처를 활용해 표면 텍스처 매핑 에 다양한 애니메이션을 연출하는 프래그먼트(F ragment) 쉐이더를 제안한다. 3. 유니티에서 폴리곤 메시와 노이즈 텍스처를 활 용하는 쉐이더를 구현한다. 본 논문의 구성은 다음과 같다. 먼저 본 논문에 서 활용할 노이즈를 소개하고, 노이즈를 활용한 기 법과 텍스처 애니메이션 기법을 본 논문의 방법과 비교한다.(2장) 다음으로 본 논문의 쉐이더 구현에 기본이 되는 언릿 쉐이더 방식을 소개하고 구현한 다. 그리고 노이즈 텍스처를 활용한 정점, 프래그 먼트 쉐이더를 구현하고 원리를 설명한다. (3장) 다음으로 구체, 바닥, 버섯구름 모양의 폴리곤 메 시에 쉐이더를 활용해 노이즈 텍스처를 적용하고 변숫값에 따른 변화를 관찰한다. 또한, 쉐이더가 적용된 구체 폴리곤 메시의 CPU/GPU 자원 소모 량을 확인하고 본 논문의 원리가 적용된 실제 시 각효과 사례를 알아본다.(4장) 마지막으로 본 연구 를 진행하면서 얻은 결론과 한계를 알아본다.(5장)2. 관련 연구
2.1 노이즈
노이즈란 원치 않는 정보가 저장된 데이터 이미 지라고 할 수 있다. 정해진 패턴, 비슷한 형상이 반복되는 모습이 아닌 비현실적인 곡선, 코너 등의 이미지를 생성한다.[7]2.2 가우시안 노이즈와 펄린 노이즈
가우시안 노이즈는 공기의 진동, 열방사선 등 자 연적으로 생성되는 노이즈이다.[7] 펄린 노이즈는 1 980년대 펄린(Perlin)이 제안한 노이즈 방식으로 자연스럽게 보이는 텍스처를 효과적으로 제작하는 방식이다.[8] 잘 형성된 확률적 분포로 구름, 불 등 자연적으로 나타나는 현상들을 자연스럽게 구현할수 있는 패턴이 형성되어 있는 텍스처로 나타낸다. 이러한 특성들은 불특정한 형태를 가지고 있는 시 각효과 제작에 효과적으로 사용할 수 있다.
2.3 노이즈를 활용한 시각효과 제작 기법
유니티[9]를 활용해 노이즈 텍스처를 효과적으로 활용해 시각효과를 제작하는 방법들이 연구되어 있 다. 먼저 소개할 기법은 쉐이더를 활용해 노이즈 텍스처를 변형한 다음 시각효과 구현에 활용하는 기법이다.[10] 텍스처가 변숫값에 따라 달라지며 불이 타오르는 듯한 연출을 만드는데 효과적인 모 습을 보여준다. 텍스처를 활용해 파티클의 표면에 텍스처 매핑될 결과를 바꾼다는 점에서 발상은 비 슷하다. 하지만 본 논문의 쉐이더는 표면뿐 아니라 물체의 형태가 노이즈 텍스처와 변숫값에 따라 자 연스럽게 움직이도록 변형시킨다. 표면에 텍스처 매핑하는 과정 또한 다르다. 노이즈 텍스처를 변경 하지 않고 특정 변숫값에 따라 쉐이더가 같은 텍 스처를 여러 번 합성해 다른 연출을 만든다. 합성 되는 텍스처들은 그 개수에 따라서 표면에 텍스처 매핑되는 결과가 달라지는데 이 과정에서 각각 다 른 좌표, 속도, 방향을 가지고 이동하며 곱 연산을 통해 합성되므로 자연스러운 애니메이션이 연출된 다. 다음 기법은 쉐이더에서 직접 노이즈의 움직임 [11]을 구현하는 방법이다. 위 방법은 쉐이더에서 함수와 변수를 추가하거나 변경할 수 있어서 노이 즈의 특성을 다양하게 사용할 수 있다. 하지만 노 이즈 기법에 이해도가 부족한 그래픽 디자이너로서 는 구현할 때 부담을 느끼게 된다. 이러한 단점을 극복하기 위해 본 연구의 방식은 미리 제작된 노 이즈 텍스처를 활용한다. 텍스처를 이용하는 방법 은 상용 프로그램들의 발달로 상대적으로 제작하기 쉽고 필터 효과[12]나 변형작업을 거치면 같은 노 이즈 기술이 사용된 텍스처도 다른 느낌을 줄 수 있다.2.4 텍스처 활용 기법
언리얼 엔진(Unreal Engine)의 패너 노드(Pann er Node)[13]는 텍스처의 움직임으로 애니메이션 효과를 주는 기능이 구현되어 있다. 한가지 혹은 여러 가지 노드를 연결하여 사용자가 원하는 대로 다양한 애니메이션을 구현할 수 있다. 본 논문은 패너 노드의 원리를 활용하여 폴리곤 매시의 정점 에 이동을 나타내고, 텍스처 매핑 과정에서 변숫값 을 통해 좌표와 속도, 방향이 자동으로 정해져 텍 스처가 합성되어 자연스러운 애니메이션을 나타낼 수 있는 (식 4)를 제안하였고 3장에서 구현한다. 텍스처의 특징 벡터를 계산해 부력장을 계산하 고 부력에 따라 불꽃 텍스처를 이류 시키는 연구 가 진행되었다.[14] 본 논문은 텍스처에서 특징을 뽑아서 개선하는 방향이 아닌 텍스처가 가지고 있 는 특징을 변경 없이 온전히 활용하며, 변숫값에 따라서 여러 번 합성하여 다양한 패턴을 만들어낸 다는 특징이 있다.
3. 쉐이더 구현
본 논문의 쉐이더는 사진 1과 같은 단계를 거쳐 구현한다. 첫 번째로 언릿 쉐이더의 기본 틀을 구 현한다. 두 번째로 쉐이더 구현에 필요한 변수들을 설정한다. 세 번째로 정점 쉐이더에서 정점 이동을 구현한다. 마지막으로 프래그먼트 쉐이더에서 표면 텍스처 매핑 애니메이션을 구현한다.[Fig. 1] Shader Implementation process
3.1 언릿 쉐이더
빛(Light)을 계산하는 것이 중요하다. 빛에 따라 쉐이더가 적용된 물체의 모습이 달라지기 때문이 다. 이와 다르게 언릿 방식은 빛의 영향을 받지 않 는다. 따라서 빛에 상관없이 일정하게 색을 표현할 수 있다. 시각효과는 빛에 영향을 받기보다는 빛을 발산하여 주변의 물체에 영향을 주는 경우가 많아 이런 언릿의 특성을 잘 이용할 수 있다. 유니티에서는 쉐이더랩(ShaderLab)을 이용해 쉐이더를 제작한다. 단독적으로 사용하면 구현 기 능이 제약되지만 CG/HLSL[17] 기능을 적용하면 쉐이더 내부에서 정점과 프래그먼트에 접근이 가능 해 제약 없이 자유롭게 많은 기능을 구현할 수 있 다. 구성은 쉐이더(Shader), 프로퍼티스(Propertie s), 서브쉐이더(SubShader), 태그(Tags), 패스(Pas s)로 나뉘며 표 1을 통해 확인할 수 있다.
[Table 1] Simple transparency unlit shader
3.2 프로퍼티스 구성
유니티에서는 쉐이더를 머티리얼로 변환해 사용 하기 때문에 변숫값은 머티리얼을 통해 쉐이더로 넘어간다. 프로퍼티스에서 필요한 변수들을 표 2와 같이 선언한다.
[Table 2] Properties variable
프로퍼티스의 변수를 쉐이더에서 실제로 사용하 기 위해서는 패스의 CGPROGRAM-ENDCG 내부 로 선언한 변수들의 값을 받아와야 해서 표 3과 같이 선언한다.
[Table 3] Properties variable use in pass
3.3 정점 쉐이더 구현
정점 이동을 구현하기 위해 폴리곤 메시의 정점 정보를 가져온다. 가져오는 방법은 2가지로 로컬
Shader "Unlit Shader" { Properties{
_TintColor("Color",Color) = (1,1,1,1) }
SubShader{
Tags{ "Queue" = "Transparent" } Blend SrcAlpha OneMinusSrcAlpha Pass{
CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc“ half4 _TintColor; struct v2f{
half4 vertex : POSITION; half2 texcoord : TEXCOORD0; }; v2f vert(appdata_base v){ v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; }
half4 frag(v2f v) : SV_Target {
return _TintColor; } ENDCG } } } Properties {
_NoiseTex("Noise Texture",2D) = "black"{} _NoiseValue("Noise Value", Vector)=(0.1,0.1,0.1,1) _NoiseScale("Noise Scale", float)=0.1
[HDR]_TintColor("Color",Color)=(1,1,1,1) _NoiseTex2("Noise Texture2",2D)="black"{} _Speed("Noise Speed", float)=1
_MaxIndex("MaxIndex",float) = 1 }
Pass{
CGPROGRAM
sampler2D _NoiseTex, _NoiseTex2;
half4 _NoiseTex2_ST, _TintColor, _NoiseValue; half _Speed, _NoiseScale;
half _MaxIndex; ...
좌표를 가져오는 방법(식 1)과 월드 좌표로 변환하 여 가져오는 방식(식 2)이 있다. vt vvt × NV (eq. 1) vt OtoW × vvt × NV (eq. 2) v.vt는 원본 정점 값이고, OtoW는 unity_Objec tToWorld 행렬로 로컬 좌표계에서 월드 좌표계로 바꿀 때 사용하며 원본 정점 값과 곱해준다. NV는 표 2에서 설정한 _NoiseValue로 정점의 크기를 변 경시켜 애니메이션의 자연스러움을 결정한다. (식 1)은 물체의 좌표가 변경되어도 애니메이션이 영향 을 받지 않아야 하는 상황에서 사용한다. (식 2)는 물체의 좌표가 애니메이션에 영향을 주는 상황에서 사용한다. 본 논문에서는 좌표마다 애니메이션이 변경되어 더 다양한 연출이 가능한 (식 2)를 활용 해 정점 쉐이더를 구현한다. 다음으로 노이즈 텍스처를 변환한 폴리곤 메시 의 정점 좌표와 연결한다. 정점 쉐이더에서는 tex2 Dlod[18]함수를 이용해 텍스처를 불러온다. 이때, 애니메이션 효과를 연출하기 위해 텍스처가 입혀질 좌표를 시간 변수인 _Time.x[19]를 활용해 지속적 으로 변경해준다. 값을 원본 정점 값 v.vt에 적용 하기 전에 변경된 값을 (식 3)으로 조정해준다. vvt vvt saturateNM f × NS (eq. 3) NM은 표 5의 _NoiseMove로 노이즈 텍스처가 적용된 정점 값이다. 이를 ‘saturate’로 변환하여 N M의 값은 0과 0~1사이의 값, 1의 값으로 조정해준 다. NM의 값을 제한함으로써 변환 과정에서 생길 수 있는 부자연스러운 움직임을 방지한다. 변환된 값을 그대로 사용할 경우 사진 2의 왼쪽과 같이 0~1의 값 부분으로 정점들이 치우치는 현상이 나 타난다. 이를 해결하기 위해 0.5f만큼 빼주어 –0.5 f~0.5f 사이의 값으로 변경하고 변환된 값의 크기 는 NS로 값을 조절해서 사용한다. 위 모든 과정은 표 4를 통해서 확인할 수 있다.
[Table 4] Vertex shader script
[Fig. 2] Value Correction Before/After
3.4 프래그먼트 쉐이더 구현
표면 텍스처 매핑에 애니메이션 효과를 주기 위 해서 (식 4)를 활용한다. (식 4)는 tex2D[20]로 가 져온 텍스처 데이터들을 _MaxIndex의 값에 따라 서 좌표, 방향과 속도를 정해주고 섞어준다. (eq. 4) (식 4)에서 NT2는 표 2의 _NoiseTex2이며 v.t c는 정점 쉐이더에서 변환해 받아온 텍스처 좌표 값이다. k는 표 2의 _MaxIndex이며 s는 가중치 값이고 t.x는 시간 변수이며 (식 4)의 원리는 다음 과 같다. 첫 텍스처는 t.x값만큼 x좌표로 이동하며 시간 값으로 움직이기 때문에 x방향으로 움직인다. v2f vert(appdata_base v) { v2f o;half4 vertex = mul(unity_ObjectToWorld, v.vertex) * _NoiseValue;
half4 NoiseMove = tex2Dlod(_NoiseTex, float4(vertex.xy + half2(_Time.x,_Time.x),0,0)); v.vertex = v.vertex +(saturate(NoiseMove)-0.5f)*_NoiseScale; o.vertex = UnityObjectToClipPos(v.vertex); o.texcoord = TRANSFORM_TEX(v.texcoord, _NoiseTex2); return o; } T
i k Xmik× Ymik Xmik texDNT vtc ik s ×tfik Ymik texDNT vtc ik s ×tfik tfik tx ik × i그다음, 두 번째 텍스처를 t.x만큼 y좌표로 움직여 주고 처음 텍스처에 곱해준다. 이 과정을 k-1 번 째까지 반복하며 계속 곱해준다. 텍스처가 움직이 는 방향은 i가 짝수일 경우 x정방향, y정방향으로 움직이고 홀수일 경우에는 그 반대 방향으로 움직 인다. 합성과정에서 좌표나 이동속도를 변경을 해 주지 않고 섞어준다면 첫 번째와 두 번째 과정만 이 반복되며 합성되기 때문에 애니메이션이 부자연 스럽게 나타난다. 이를 방지하기 위해서 좌표와 이 동 속도를 i/k값에 따라서 변화시켜준다. 값이 i/k 만큼 순차적으로 증가하고 최대 1만큼 증가 하게 되는데, 크게 변하지 않아서 자연스러운 애니메이 션이 연출된다. (식 4)의 텍스처 합성과정은 사진 3을 통해서 확인할 수 있다.
[Fig. 3] Principle of noise texture blending
위 내용을 정리하면 좌표와 속도 그리고 방향이 i값이 증가할 때마다 바뀌게 되기 때문에 텍스처가 합성되는 과정에서 자연스러운 애니메이션이 연출 된다. (식 4)는 곱 연산으로 계산되기 때문에 곱해 지는 텍스처가 많아질수록 값이 매우 작아져서 사 진 4와 같이 표면의 텍스처 매핑 결과가 나타나지 않는다. 이를 해결하기 위해 ‘pow’를 활용해 합성 된 값을 증폭해서 색상 강도의 영향을 잘 받을 수 있도록 조절해준다. 위 모든 과정은 표 5를 통해 확인할 수 있다.
[Table 5] Fragment shader script
[Fig. 4] Correction of texture blending Before/After
4. 실험 결과
본 연구의 실험은 Intel(R) i7-8750H @ 2.20G Hz와 GeForce RTX 2070 with Max-Q Design GPU사양의 컴퓨터에서 수행되었다. 본 논문의 쉐 이더의 정점 이동에 무작위 색상 정보가 들어간 가우시안 노이즈 텍스처를 사용했고 표면의 텍스처 매핑에 흑백 펄린 노이즈 텍스처를 사용했으며 이 를 구체, 바닥 그리고 버섯구름 폴리곤 메시에 적 용했다. 추가로 쉐이더가 구현된 결과를 심미적으 로 나타내기 위해 포스트 프로세싱(Post Processin g)[21]의 블룸(Bloom)효과를 사용했다.
half4 frag(v2f v) : Color { half4 tex = half4(1,1,1,1); half reversefactor = -1;
for(int i = 1 ; i<_MaxIndex ; i++) { half movefactor = (i/_MaxIndex); half timefactor;
reversefactor *= -1;
timefactor = (_Time.x + movefactor) *reversefactor; tex *= tex2D(_NoiseTex2, v.texcoord+movefactor + _Speed*float2(timefactor,0)); tex *= tex2D(_NoiseTex2, v.texcoord+movefactor + _Speed*float2(0,timefactor)); } tex = saturate(pow(tex,1/(_MaxIndex))); return tex * _TintColor;
[Fig. 5] Used noise textures. Colored gaussian noise texture (a) Gray perlin noise texture (b)
첫 번째로 _NoiseValue의 값에 따른 정점 이동 애니메이션의 변화를 확인한다. 노이즈 텍스처를 입히는 과정에서 정점의 x, y값만 사용했기 때문에 x, y값만 조정한다. _NoiseValue의 x와 y의 값이 1에 가까워질수록 더 복잡한 애니메이션이 연출됨 을 표 6을 통해 확인할 수 있다.
[Table 6] Results via _NoiseValue value
두 번째로 _NoiseScale의 값에 따른 정점 이동 애니메이션의 변화를 확인한다. _NoiseScale는 최 종적으로 영향을 미치는 값이기 때문에 _NoiseVal ue에 비해서 애니메이션에 미치는 영향이 더욱 크 게 나타남을 표 7을 통해 확인할 수 있다.
[Table 7] Results via _NoiseScale value
세 번째로 _MaxIndex 값에 따른 표면 텍스처 매핑의 변화를 비교해본다. 값이 2 이상일 때부터 자연스러운 애니메이션이 연출되며, 일정값 이상의 텍스처가 섞이면 검은색 값이 차지하는 비중이 높 아지면서 합성된 결과의 명암이 더욱 강해진다. 본 논문에서 활용한 노이즈 텍스처는 값이 22 이상일 때부터 위의 특성이 나타나며 이는 표 8을 통해 확인할 수 있다.
[Table 8] Results via _MaxIndex value
_MaxIndex의 값이 일정 이상으로 올라가면 노 이즈 텍스처의 모습이 적어지고 다른 패턴이 연출 된다. 값에 따라 패턴이 변한다는 특징을 잘 활용 하면 활용하면 본래의 노이즈 텍스처와 다른 느낌 의 패턴을 연출할 수 있으며 한가지 텍스처만을 이용함에도 값에 따라서 다른 느낌을 전달할 수 있다. 이는 사진 6를 통해 확인할 수 있다.
[Fig. 6] Different pattern results via _MaxIndex (a) (b)
_NoiseValue Result Image
(0.1, 0.1, 1, 1)
(1, 1, 1, 1)
_NoiseScale Result Image
0.1
0.25
_MaxIndex Result Image
2
네 번째로 구체 폴리곤 메쉬에 본 논문의 쉐이 더가 적용된 경우와 그렇지 않은 경우를 비교하여 본 논문의 쉐이더가 적용될 경우의 자원 소모량을 비교한다. 구체의 개수는 각각 ‘1’개, ‘25’개, ‘100’ 개, ‘400’개를 생산했을 경우로 환경을 설정하고 프 로파일러(Profiler)[22]를 이용해 CPU/GPU 사용량 을 비교했다. 게임(Game)뷰의 해상도는 1024x102 4에 1x 스케일로 진행되었고 모든 생성된 물체가 화면에 들어온 상태에서 150프레임부터 154프레임 까지의 값을 비교했다. 표 5에서 구체가 생성된 개 수와 상관없이, CPU 사용 부분에서는 쉐이더가 적 용되지 않은 구체와 거의 같은 사용량을 보였다. 이와 다르게 GPU 사용 부분에선 작게는 0.22 ms, 크게는 0.86 ms 정도의 사용량의 차이가 발생했다. 정리하면 본 논문의 쉐이더를 적용했을 때 개수가 많아져도 CPU 사용량은 거의 비슷하고, GPU 사 용량에서는 차이를 보였으나 그 정도가 1ms 이내 로 크지 않음을 알 수 있었다. 즉, 쉐이더가 적용 되지 않은 폴리곤 메시와 거의 비슷한 자원 소모 량을 보여주기 때문에 개발 환경이 변해도 시각효 과를 변경하지 않고 사용할 수 있다. 마지막으로 본 논문의 쉐이더의 원리가 사용된 실제 사례를 보도록 한다. 본 논문의 쉐이더 원리 는 ‘100 Special Skills Effects Pack’[23]의 일부 시각효과들[24]에 적용되어 있다. ‘Great Skill VF X’, ‘cool looking effects’ 등의 긍정적인 평가 통 해 사용자들이 시각효과를 잘 활용하고 있음을 알 수 있다.
5. 결 론
본 논문에서는 노이즈 텍스처를 활용해 정점 이 동과 표면 텍스처 매핑에 자연스러운 애니메이션 효과를 구현하는 쉐이더 구현 방법을 제안했다. 쉐 이더를 이용하면 노이즈 텍스처와 변숫값에 따라서 다양하게 폴리곤 메시의 정점을 변경시키고 표면에 텍스처 매핑될 결과를 다양하게 변경할 수 있음을Count Shader not
applied sphere CPU usage GPU usage
Shader applied
sphere CPU usage GPU usage
1 3.14 ms 2.88 ms 3.51 ms 2.97 ms 3.16 ms 0.77 ms 0.78 ms 0.78 ms 0.77 ms 0.78 ms 2.95 ms 3.29 ms 2.87 ms 3.37 ms 2.88 ms 1.02 ms 1.01 ms 1.01 ms 1.02 ms 1.00 ms 25 2.86 ms 3.00 ms 3.23 ms 3.41 ms 2.90 ms 0.79 ms 0.79 ms 0.79 ms 0.79 ms 0.79 ms 3.07 ms 3.04 ms 2.86 ms 3.38 ms 3.34 ms 1.15 ms 1.15 ms 1.16 ms 1.15 ms 1.14 ms 100 3.50 ms 3.70 ms 3.43 ms 3.23 ms 3.67 ms 0.80 ms 0.80 ms 0.79 ms 0.80 ms 0.84 ms 3.28 ms 3.77 ms 3.38 ms 3.17 ms 3.25 ms 1.21 ms 1.21 ms 1.21 ms 1.66 ms 1.20 ms 400 3.66 ms 3.81 ms 3.87 ms 3.82 ms 3.90 ms 1.13 ms 1.13 ms 1.13 ms 1.10 ms 1.13 ms 3.89 ms 3.82 ms 3.45 ms 3.78 ms 3.60 ms 1.85 ms 1.35 ms 1.34 ms 1.33 ms 1.38 ms [Table 9] A comparsion of shader not applied sphere and shader applied sphere
보였다. 파티클로 구현된 시각효과와의 성능 비교 를 통해서 본 논문의 쉐이더는 사용하는 자원이 일정함을 보여주었다. 모양이 정해져 있다는 폴리 곤 메시의 특성상 파티클의 자유로운 시각효과 구 현 방법을 대처할 수는 없다. 하지만 노이즈 텍스 처를 적용해 정점의 이동과 표면의 텍스처 매핑 과정에서 제한적이지만 역동적인 움직임을 구현한 다. 즉, 폴리곤 메시에 쉐이더를 적용하여 사진 7 과 같은 불특정한 모습을 지닌 시각효과를 구현할 수 있다. 텍스처에 따라 차이는 있지만 노이즈 텍스처가 곱하는 횟수가 많아질수록 검은색 값이 차지하는 비율이 급격하게 늘어나게 되고 중간에 합성되는 과정을 사용자 관점에서 예측하기 어렵다는 단점이 있다. 적절히 조절해 사용하면 크게 문제가 없지만, 텍스처를 많이 곱할수록 표면의 텍스처 매핑의 결 과를 예측하거나 조절하기 어렵다는 점은 향후 해 결할 과제이다.
[Fig. 7] Actual usage examples of shader model principle. explosion(a), magic(b)
REFERENCES
[1] Cem Yuksel, Donald Henry House and John Christopher Keyser, “Wave particles”, SIGGR APH '07: ACM SIGGRAPH 2007 papers, 99-es, 2007.
[2] Alfred Russell Kent Fuller, Hari Krishnan, K arim Magdi Mahrous, Bernd Hamann and Ke nneth I Joy, “Real-time procedural volumetric fire”, I3D '07: Proceedings of the 2007 sympo sium on Interactive 3D graphics and games, 175-180, 2007.
[3] Mario Botsch, Mark Pauly, Lief Kobbelt, Pier re Alliez, Bruno Lévy, Stephan Bischoff, Chri
stian Rössl, “Geometric modeling based on p olygonal meshes Video files associated with t his course are available from the citation pag e”, SIGGRAPH '07: ACM SIGGRAPH 2007 c ourses, 1-es, 2007.
[4] Michael McCool, Stefanus Du Toit, Tiberiu P opa, Bryan Chan and Kevin Moule, “Shader algebra”, SIGGRAPH '04: ACM SIGGRAPH 2004 Papers, 787-795, 2004.
[5] “Noise Based Effects based on Unity 2”, Art Station, accessed November 17, 2020, https:// gaph.artstation.com/projects/nY88y1
[6] “Texture Mapping”, The University of Texas at Austin, accessed November 28, 2020, http s://www.cs.utexas.edu/~fussell/courses/cs354-fall2015/lectures/lecture11.pdf
[7] Ajay Kumar Boyat and Brijendra Kumar Jos hi, “A Review Paper: Noise Models in Digital Image Processing”, Signal & Image Processin g: An International Journal (SIPIJ) Vol.6, No. 2, 63-75, 2015.
[8] Ken Perlin, “An Image Synthesizer”, ACM Si ggraph Computer Graphics, 19(3), 287-296, 19 85.
[9] “Welcome to Unity” Unity Technologies, acce ssed September 10, 2020, https://unity.com/ou r-company
[10] “Noise-Texture-Particles”, UnityList, last acc essed September 21, 2020 ,https://unitylist.co m/p/kbc/Noise-Texture-Particles
[11] “Perlin Noise”, Ronja’s Shader Tutorials, last modified September 15, 2018, accessed Septe mber 23, 2020, https://www.ronja-tutorials.co m/2018/09/15/perlin-noise.html#2d-perlin-noise [12] Zineng Tang, “Adaptive Aesthetic Photo Filte r by Deep Learning”, ICVARS '19: Proceedin gs of the 2019 3rd International Conference o n Virtual and Augmented Reality Simulation s, 67-72, 2019.
[13] “Animating UV Coordinates”, Unreal Engine 4 Documentation, accessed February 17, 2021 https://docs.unrealengine.com/en-US/Renderin gAndGraphics/Materials/HowTo/AnimatingUV Coords/index.html
[14] Jong-Hyun Kim, “Sprite Animation Based Fi re Effects Using Spark Textures and Artifici al Buoyancy Field”, vol. 23, no. 10, Korean S ociety of Computer Information, 95-101, 2018.
[15] Michael McCool, Stefanus Du Toit, Tiberiu P opa, Byan Chan and Kevin Moule, “Shader Algebra”, SIGGRAPH '04: ACM SIGGRAPH 2004 Papers, 787-795, 2004.
[16] “Physically-Based Shading at Disney”, Walt Disney Animation Studios, 2012, accessed Se ptember 11, 2020, https://pdfs.semanticscholar. org/3f4b/29a0cc51f1ba8baaf99ac008f3acf18d04d f.pdf
[17] “Writing vertex and fragment shaders”, Unit y Documentation, accessed September 12, 202 0, https://docs.unity3d.com/Manual/SL-Shader Programs.html
[18] “tex2Dlod”, Nvidia Developer Zone, accessed September 13, 2020, https://developer.downloa d.nvidia.com/cg/tex2Dlod.html
[19] “Built-in shader variables“, Unity Documenta tion, accessed September 13, 2020, https://doc s.unity3d.com/kr/530/Manual/SL-UnityShader Variables.html
[20] “tex2D”, Nvidia Developer Zone, accessed Se ptember 17, 2020, https://developer.download.n vidia.com/cg/tex2D.html
[21] “Post-Processing” Unity Documentation, acce ssed November 19, 2020, https://docs.unity3d. com/Manual/PostProcessingOverview.html [22] “Getting started with the Profiler window”,
Unity Documentation, accessed September 17, 2020, https://docs.unity3d.com/2018.4/Documen tation/Manual/ProfilerWindow.html
[23] “100 Special Skills Effects Pack”, Unity Asse t Store, accessed October 7, 2020, https://ass etstore.unity.com/packages/slug/171146 [24] “Noise Based Effects based on Unity”, ArtSt
ation, accessed November 17, 2020, https://ga ph.artstation.com/projects/J9nnZa
