Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
•
34 likes•8,277 views
NDC17에서 발표한 내용입니다. 중간 삽입영상은 PPT내 링크 눌러주세요 PPT원본 https://drive.google.com/open?id=0B2e7e-78RB_-em5HOEZGdjFOeGc 언리얼4 예제파일 https://drive.google.com/file/d/0B2e7e-78RB_-SzdWQlJuNFJ4Rms/view?usp=sharing
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Similar to Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들 (20)
More from Dae Hyek KIM
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
- 2. 목차 1. 2D Raymarching Smoke 2. Realtime Optical Flow 3. Texture Baked Animation
- 3. 들어가기 앞서 • 차세대 게임들은 PBR을 통해 렌더링 기조를 잡음 • 살짝은 어색해도 용인되었던 이펙트의 조화가 중요함 • 차세대 게임에서 쓰이는 이펙트 기법을 살펴보자 • UE4에선 어떻게 구현하는지 알아보자
- 4. 2D Raymarching Smoke • Lit Particle은 좋지만 볼륨감 표현엔 부족 • 노말맵? 훌륭하지만 2.5D 처럼 보일때가 있다 • 언차티드4 == 2D Raymarching Smoke
- 6. 2D Raymarching Smoke • 라이트 벡터를 탄젠트 스페이스로 변환 • 라이트 벡터의 방향대로 텍스쳐를 샘플링 • Alpha맵을 사용한다
- 9. 언리얼에서 구현
- 10. 언리얼에서 구현
- 11. 언리얼에서 구현 for (float d = 0.0; d < marchDistance; d += marchDistance / numSteps) { UV += (marchDir*d)/numSteps; float4 Ldensity = Texture2DSampleLevel(Tex,TexSampler, UV.xy, 0)/(numSteps); TL *= saturate(1.0 -Ldensity[3]); } float3 LI = LightColor * TL.xxx; LO += LI*density; return LO;
- 18. 2D Raymarching Smoke Sample 10
- 19. 2D Raymarching Smoke Sample 10 x Opacity
- 22. 일반 Lit 파티클과 비교
- 26. 2D Raymarching Smoke • 장점 : 사실적인 볼륨감 표현 • 단점 : 퍼포먼스, 여러 개의 파티클 연출할 경우 따로 노 는 느낌
- 27. Realtime Optical Flow • Optical Flow는 기졲에 이미 쓰이던 기능 • Velocity map 텍스쳐가 필요 -> 메모리 낭비
- 29. Realtime Optical Flow Don’t need this ↓ http://www.klemenlozar.com/frame-blending-with-motion-vectors/
- 31. 언리얼에서 구현 • 텍스쳐를 X, Y로 Offset 시켜서 gradient를 구한다 • Gradient를 Velocity로 변환한다 • Velocity를 각각 이젂, 현재프레임의 UV랑 더해준다 • 이젂프레임은 앞으로 Distort 시킨다(color1) • 현재프레임은 뒤로 Distort 시킨다(color2) • 프레임과 프레임사이의 시갂을 기준으로 Lerp 시켜준다 lerp(color1, color2, 1/subuv이미지 개수)
- 34. 언리얼에서 구현 pframe
- 35. 언리얼에서 구현 cframe
- 36. 언리얼에서 구현
- 37. 언리얼에서 구현 float g_sampleDistance = 0.001; float g_sampleOffset = 0.001; float2 pFrameUV = Parameters.Particle.SubUVCoords[0].xy; float2 cFrameUV = Parameters.Particle.SubUVCoords[1].xy; float3 frameDiff = (Parameters.Particle.SubUVLerp).xxx; float4 frameDiffRGB = Texture2DSampleLevel(Tex, TexSampler, cFrameUV, 0)-Texture2DSampleLevel(Tex, TexSampler, pFrameUV, 0); float offset = g_sampleDistance; float2 offsetX = float2(offset,0.0); float2 offsetY = float2(0.0,offset); float4 gradientX = Texture2DSampleLevel(Tex, TexSampler, cFrameUV + offsetX, LOD) - Texture2DSampleLevel(Tex, TexSampler, cFrameUV - offsetX, LOD) + Texture2DSampleLevel(Tex, TexSampler, pFrameUV + offsetX, LOD) - Texture2DSampleLevel(Tex, TexSampler, pFrameUV - offsetX, LOD); float4 gradientY = Texture2DSampleLevel(Tex, TexSampler, cFrameUV + offsetY, LOD) - Texture2DSampleLevel(Tex, TexSampler, cFrameUV - offsetY, LOD) + Texture2DSampleLevel(Tex, TexSampler, pFrameUV + offsetY, LOD) - Texture2DSampleLevel(Tex, TexSampler, pFrameUV - offsetY, LOD); float4 gradientMag = sqrt((gradientX*gradientX) +(gradientY*gradientY) ) + g_sampleOffset; float4 velocityX_p = (frameDiffRGB) * (frameDiff.xxxx) * (gradientX / gradientMag) * o_FlowScale; float4 velocityY_p = (frameDiffRGB) * (frameDiff.xxxx) * (gradientY / gradientMag) * o_FlowScale; float4 velocityX_c = (frameDiffRGB) * (1-frameDiff.xxxx) * (gradientX / gradientMag) * o_FlowScale; float4 velocityY_c = (frameDiffRGB) * (1-frameDiff.xxxx) * (gradientY / gradientMag) * o_FlowScale; float2 pFrameUV_flow = pFrameUV + float2(velocityX_p[Index], velocityY_p[Index]); float2 cFrameUV_flow = cFrameUV - float2(velocityX_c[Index], velocityY_c[Index]); float4 color1 = Texture2DSample(Tex, TexSampler, pFrameUV_flow); float4 color2 = Texture2DSample(Tex, TexSampler, cFrameUV_flow); float4 color = lerp( color1, color2, frameDiff.x ); return color;
- 38. 언리얼에서 구현 • TextureSamplerSubUV 노드 ->Parameters.Particle.SubUVCoords[]활성화 • Cascade에서 SubUV -> Linear Blend • Index에서 무슨 채널을 기준으로 Flow시킬지 정한다 • 높은 LOD를 통해서 더 부드러운 Flow가 가능
- 43. 언리얼에서 구현 UV + velocity
- 44. 언리얼에서 구현 LOD 0 LOD 3
- 45. Realtime Optical Flow • 장점 : 추가 텍스쳐 없이 구현이 가능, 시뮬레이션 을 통해 만든 소스가 아니여도 적용할 수 있다. • 단점 : FlowScale을 수치가 매우 민감하여 적젃한 값을 찾는데 시갂이 걸린다
- 47. Texture Baked Animation • 텍스쳐는 많은 정보 저장 가능(1pixel = 1vector) • 각각의 픽셀에 버텍스의 위치값을 저장 • SM5부터 가능
- 48. Texture Baked Animation • 후디니로 텍스쳐 제작 • 가로줄 = 프레임 • 세로줄 = 버텍스 순서
- 53. Texture Baked Animation 6번 포인트 위치값을 컬러로 저장 7번 포인트 위치값을 컬러로 저장 8번 포인트 위치값을 컬러로 저장 3번 포인트 위치값을 컬러로 저장 4번 포인트 위치값을 컬러로 저장 5번 포인트 위치값을 컬러로 저장 0번 포인트 위치값을 컬러로 저장 1번 포인트 위치값을 컬러로 저장 2번 포인트 위치값을 컬러로 저장
- 54. Texture Baked Animation • UE4에서는 WorldPositionOffset 이라서 움직인 지점의 포인 트에서 원점을 빼준 벡터값이 필요하다.
- 55. 후디니에서 Export • Uv2에 텍스쳐와 포인트가 일치하도록 정렬이 필요하다. @uv2.x = (@ptnum / numofpoints) + (0.5 / numofpoints); @uv2.y = 0; UV2의 x가 정렬되어있다 →
- 57. 언리얼에서 구현
- 58. 언리얼에서 구현 • Material의 Tangent Normal을 꺼주어야 한다 텍스쳐로 구운 노말은 탄젠트 스페이스 노말X 버텍스 노말O • Customized UV를 4로 설정
- 59. 언리얼에서 구현 • VertexAnimationTools 노드에서 노말 텍스쳐는 연산된 후 customized uv 2, 3으로 각각 RG, B 값으로 바인딩
- 60. 언리얼에서 구현
- 61. 언리얼에서 구현
- 62. 언리얼에서 구현
- 63. Texture Baked Animation • 스켈레탈 메쉬가 아니여도 OK • 하나의 메쉬로 여러 개의 움직임 가능 • 버텍스 개수가 프레임마다 달라져도 OK • 후디니 16의 게임어셋에 내장되어 있다.
- 64. 참고 • 2D Raymarching Smoke Siggraph 2015 - Chasing Film in 5ms: A Look at the Real-Time VFX of Uncharted 4: A Thief's End • Realtime Optical Flow Siggraph 2015 - Chasing Film in 5ms: A Look at the Real-Time VFX of Uncharted 4: A Thief's End http://www.klemenlozar.com/frame-blending-with-motion-vectors/ https://www.slideshare.net/guerrillagames/the-production-and-visual-fx-of-killzone-shadow- fall?ref=https://www.guerrilla-games.com/read • Texture Baked Animation http://www.gdcvault.com/play/1024616/The-Illusion-of-Motion-Making http://norman3d.com/TextureMorphTargets/Vertex-count-agnostic_Morph_Targets.pdf https://vimeo.com/212982381 https://www.udemy.com/game-effects-using-houdini-ue4/ http://www.gamasutra.com/blogs/TequilaWorks/20160620/275347/How_to_take_advantage_of_textures_in_the_vertex_shader.php
- 65. 마치며 • 이펙트 기법도 나날이 발젂중 • 언젠가는 Realtime Fluid Simulation으로 넘어감 • 이런 기술들도 중요하지만 본질은 이펙트의 표현 • 기술과 아트 두 가지 요소가 조화된 아티스트가 되자
- 67. 감사합니다.