테크니컬 아트15 머티리얼 프로그래밍 기초 개념 셰이더(Shader)란?셰이더(Shader)는 3D 모델의 표면을 렌더링하고, 빛과 색상을 계산하여 화면에 표시하는 역할을 하는그래픽스 프로그래밍에서 중요한 역할을 하는 프로그램입니다. 셰이더는 주로 그래픽스 API(OpenGL, DirectX, Vulkan 등)를 통해 작성되며, HLSL(High-Level Shader Language), GLSL(OpenGL Shading Language), 또는 언리얼 엔진에서 사용하는 Material Editor 등을 통해 구현할 수 있습니다. 언리얼 엔진 5에서는 Material Editor를 통해 시각적으로 셰이더를 작성할 수 있어, 프로그래밍 지식이 없어도 셰이더를 만들고 조정할 수 있습니다. 셰이더는 게임 그래픽스뿐만 아니라 영화, 애니메이션, VR/AR.. 2024. 7. 12. 테크니컬 아트 : 기초 개념 1 쉐이더(Shader)게임 아트의 꽃: 쉐이더는 게임 아트의 중요한 부분으로, 실시간 렌더링이 가능하고 다이나믹하게 활용할 수 있어 매우 유용하다.역할: 실시간 게임 렌더러에서 쉐이더는 중요한 역할을 한다.개량 필요: 고정적이고 보수적으로 관리하지 않으며, 계속해서 개량해 나가야 한다.PBR (Physical Based Rendering)기반: 재질과 라이팅에 기반을 둔 렌더링 방식.빛의 반사: 빛을 재질에 어떻게 반사시키느냐에 따라 다양한 시각적 결과를 출력한다. 반사는 정반사와 난반사로 나뉘며, 각각의 선택에 따라 결과물이 달라질 수 있다.정의: 정반사와 난반사를 기반으로 실제 물리적 재질에서 나오는 시각적 표현을 하는 것을 PBR이라고 한다.물리적 한계: 완전히 물리적인 것은 아니지만, 물리적 재질을.. 2024. 7. 1. 머티리얼 (쉐이더) 최적화 기초 머티리얼 측정하기먼저 성능을 어떻게 측정하는지부터 알아봅시다. 셰이더 성능을 측정하는 세 가지 주요 방법이 있습니다. .1. Scene View Mode여기서 'Lit' 옵션을 선택하고 'Optimization View Modes'로 들어가 'Shader Complexity'를 선택할 수 있습니다.이 뷰 모드는 씬의 모든 객체를 셰이더 명령어의 복잡도에 따라 초록색에서 흰색까지 그라데이션으로 보여줍니다. 씬을 둘러보면서 객체가 초록색이면 셰이더가 비교적 간단하고, 흰색에 가까울수록 더 복잡하다는 것을 알 수 있습니다.예를 들어, 어떤 객체가 자주색 영역에 있다면 이를 최적화할 수 있습니다.이 방법은 단지 어느 셰이더가 다른 셰이더보다 더 비용을 많이 차지하게 되는지게 대해 모니터링하는 용도로 활용할 수 .. 2024. 7. 1. Unreal Material: Math Expressions(수학 관련 표현식) 모음 엄연하게 표현식과 함수는 다르다.function과 다른의미로 생각하고 내용을 들어가는 것을 권장한다. 값을 확인하고 싶다면 "DebugScalarValues"를 사용할 수 있다- 출력값을 Emissive Color에 연결하여 값을 프리뷰에서 확인할 수 있다.1. 수학적 연산을 기반으로 한 노드들이름설명사진Add : 더하기- 사칙연산의 "덧셈"연산. - 같은개수의 컨테이너끼리 연산이 성립 Tip: Add는 색을 밝게/ 어둡게 하거나 UV 텍스쳐 좌표를 오프셋 할때 사용할 수 있음Subtract : 빼기- 사칙연산의 "빼기"연산 - Add와 마찬가지로 각각 채널별로 연산- 같은 개수의 컨테이너를 가지고 있어야 성립Tip: 색을 어둡게하고 UV를 오프셋 하는데 사용할 수 있음Multiply : 곱하기- 기.. 2024. 6. 24. How to Make Default Master Material Level 1 - Basic Material Setupmaterial is hit control space bar and let's drag out our text textures fromany asset you got online you drag them into here and you pipe them into the appropriate slotsso let's do that we got our normal map this gives our material texture right so you can actually see up hereit's looking like rough concrete really nice we have our color map I'm going to take that R.. 2024. 6. 24. [InsideUnreal ] UI Material Lab 3: Q&A TINA WISDOM: It was.This was incredible. I wish I could get all of the love from chatjust into here where you can see it. But everyone is just talking about how amazing of a presentation that was and how much they learned. IRENE ZANON: Yay. TINA WISDOM: So thank you so much for that, especially that demo. I think being able to actually walk through it step-by-stepis incredibly helpful for being .. 2024. 6. 21. [Inside Unreal] UI Material Lab 2 : Demo 시연 Demo 시연하기 ( 움직이는 사각형 버튼 제작하기 ) I have thought about what am I going to show? In the end, I came up with this idea.Maybe I can show you a button, because we have buttons everywhere in UI. And maybe we just want some cool animationand we want to use lots of material lab functions.So this is our button. And as you can see, it's like a box. But it is slanted, and it has these linesthat move from the.. 2024. 6. 21. [Inside Unreal] UI Material Lab 1: 오프닝 및 라이브러리 설명 Materials and ConceptsSo I noticed some stuff while working with materials. First thing, not going to lie, materials are intimidating.They introduce new concepts that we might not necessarily be used to, like the concept of UVs. They rely heavily on math.And many nodes' names are just not self-explanatory.작업을 하면서 몇 가지를 발견했어요. 첫째, 솔직히 말해서, 머티리얼은 정말 어렵습니다.UV 개념처럼 우리가 익숙하지 않을 수 있는 새로운 개념을 소개하죠. 수학에.. 2024. 6. 21. 언리얼 UMG: 이펙트용 리소스 만들기 렌즈 플레어(Lens Flare)//photoShop1. 512*512로 새로 만들고 바탕을 검정색으로 변경한다. 2. Filter->Render->Lens Flare (105mm Prime)- Brightness는 적당히 설정할 것 - Ctrl+L 로 대비를 조절3. 토성처럼 링이 필요하다. 복제해서 Ctral+T로 크기를 찌부시켜서 만들 수 있다.4. 분할해서 출력한다. - Lens Flare 이미지 - 링 이미지 2024. 6. 20. 언리얼 UMG: WidgetBlueprint 심화 위젯 컴포넌트 1. WidgetSwitch- 하위 위젯들을 index에 맞춰서 변경할 수 있다. - 그래프에서 SetActiveWidgetIndex를 이용해서도 동적으로 변경할 수 있으며, 이때 int 자료형의 변수를 선언하여 번호를 입력하여 변경할 수 있습니다. //----View----//아래의 컴포넌트들은 독립적으로 사용할 수 없다.Widget을 만들어서 안에 넣어주어야하는 컴포넌트 이다.하나의 형태를 가진 Widget을 만들고 그 위젯들을 Solt로서 활용할때 사용하게 된다. //---------Solt으로 활용할 컴포넌트의 세팅----//- Slot으로 활용할 WBP의 그래프 패널에서-> ClassSettings->Detail- Interface->ImplementInterface->Add-.. 2024. 6. 20. 언리얼 UMG: Widget Animation 위젯 블루프린트의 하단에 보면 애니메이션 탭이 있을 것이다. 열면 시퀀스와 똑같이 타임라인과 키프레임을 조절할 수 있는 창이 나온다. 이걸 활용하여 애니메이션을 제작 할 수 있다. 1.+Animation 버튼을 눌러서 애니메이션을 추가한다. (이름설정)2.+Track 버튼을 눌러서 위젯에 붙어있는 컴포넌트들을 불러올 수 있다. -여기에서 에프터 이펙트처럼 사요을 할수 있다 스케일을 조절할 수도 있고 키 애니메이션을 줄 수 있다. 만든 애니메이션을 어떻게 활용할까?- 예를 들어 Pressed 또는 Hovered와 관련된 애니메이션을 만들었다고 생각을 해보자이벤트가 발생했을때 각각 애니메이션이 재생이 되면 좋을 것이라고 생각이 든다. 1. 버튼 컴포넌트를 isVariable = true로 체크해준다.2.. 2024. 6. 20. 언리얼 UMG: Widget Blueprint 기초 폴더구조UI/ - Fonts- Materials- Textures- Widgets 엔진설정//프로젝트 세팅//해상도에 따라서 스케일링 되는 UI를 사용하겠다는 의미//Engine ->UserInterface-> - DPI Scaling -> DPIScaleRule -> Scale to Fit 으로 변경 // curve를 이용해서 과도하게 작아지거나 과도하게 커지지 않도록 조절- Scale to Fit Rule -> 1080*1920 // 사용할 화면에 맞게 조정해준다 - UMG Font // 현재 96 DPI로 되어있다. 때문에 포토샵에서 96으로 해상도를 맞춰주었던 것이다. 포토샵 출력설정 초보자때는 포토샵의 모든 이미지를 조각조각 내면서 붙이기 보다는전체의 이미지를 바닥에 붙이고 그 위에 얹는 방식.. 2024. 6. 19. 이전 1 2 다음 반응형
