# Shader
Shader (1)
The Book of Shaders https://thebookofshaders.com/ 1. Shader Language has a single main function that returns a color at the end. This is similar to C 셰이더 언어는, C와 유사하며, 색을 반환한다. 2.전역 변수 gl_FragColor에 최종 픽셀 색상이 할당된다. 3.뭐... vec4, vec3, vec2의 type들이 있고, float, int, bool등의 타입도 있다. 4.vec4는 네 개의 인수가, Red, Green, Blue, Alpha에 대응한다. Hello world code를 참고해보자! 5. #으로, 전처리
WebGL Shader: Fragment Shader
출처: webglfundamentals.org 사이트 해당 사이트의 내용과 설명이 필요한 개념들을 추가하여 재구성한 내용입니다. Fragment Shader의 역할은 래스터화되는 현재 픽셀의 색상을 제공하는 것이다. 항상 아래와 같은 형식으로 나타낸다. Fragment Shader는 각 픽셀마다 한 번씩 호출된다. 호출될 때마다 특수 전역 변수인 gl_FragColor 를 어떠한 색상으로 설정해줘야 한다. Fragment Shader는 데이터가 필요하다. 3가지 방법으로 데이터를 가져올 수 있다. 유니폼 - 단일 그리기 호출의 모든 정점에 동일하게 유지되는 값 텍스처 - 픽셀/텍셀 데이터 Varying - Vertex Shader에서 전달되고 보간된 데이터 Fragment Shader의 텍스처 셰이더의 텍스처에서 값을 가져오면 `sample
유쉐바
VSCODE Extensions C# for Visual Studio Code (Microsoft) Shader language support for VS Code (Slevesque) ShaderLab VS Code (Amlovey) Unity Code Snippets (Kleber Silva) Properties of a polygonal object Polygon: closed flat fiugure, 삼각형 뿐 아니라 모든 다각형 Primitive: 스페어, 박스, 쿼드 등등 모든 Primitives는 Vertices, Tangents, Normals, UV Coordinates, Color의 공통된 속성을 가진다. 이 속성들은 Mesh에 저장된다. Vertices 표면을 정의하는 점들의 집합 / 메쉬의 교차점 트랜스폼의 하위 속성으로 들어간다. 오브젝트의 피벗 좌표를
[UE5/Shader] Custom Shading Model 추가하기
개요 언리얼에 간단히 Shading Model을 추가해봅니다. 개인적으로 기록해두기 위해 작성해둡니다. 엔진 코드를 수정해야하니 Github에서 엔진 소스 코드를 받아 사용합니다. 언리얼 엔진 5.2.1 기준입니다. 방법 EngineTypes.h의 EMaterialShadingModel ENUM에 새로운 쉐이딩 모델 추가. ShadingCommon.ush에 SHADINGMODELID 지정 ShadingCommon.ush에 디버그 컬러 지정 (**GetShadingModelCo
WebGL Shader : Vertex Shader
출처: webglfundamentals.org 사이트 해당 사이트의 내용과 설명이 필요한 개념들을 추가하여 재구성한 내용입니다. WebGL은 뭔가를 그릴 때마다 2개의 셰이더를 필요로 한다. 바로 Vertex Shader와 Fragment Shader이다. 각각의 셰이더는 함수다. Vertex Shader와 Fragment Shader는 함께 Shader 프로그램으로 연결된다. Vertex Shader Vertex Shader의 역할은 클립 공간 좌표를 생성하는 것으로 아래와 같은 형식이다. 셰이더는 정점마다 한 번씩 호출된다. 호출될 때마다 특수 전역 변수, gl_Position을 특정 클립 공간 좌표로 설정해야 한다. Vertex Shader는 데이터가 필요한데 3가지 방법으로 데이터를 가져올 수 있다. 속성 (버퍼에서 가져온 데이터) 유니
유니티에서 HDR 컬러값 스크립트로 컨트롤 하기
서론 유니티 쉐이더에서 COLOR와 HDR COLOR 이렇게 두가지 색상방식으로 컨트롤 할 일이 종종 있으실 겁니다.. HDR은 (High Dynamic Range)의 약자인데, 이름에서 유추되듯, 일반적으로 색상,밟기범위인 0~1 보다 훨씬 높게 조정할 수 있습니다. 이를 통해 매우 밝은색 혹은 포스트 프로세싱 효과와 결합해서 블룸효과를 낼 때 용이하게 사용되기도 합니다. 인스펙터에서는 위 사진처럼 구성되있습니다. 일반적인 RGB화면에 아래 Intensitiy값이 슬라이더 방식으로 조절할 수 있도록 추가 되어 들어가있습니
[Unity] 아웃라인 쉐이더
노멀을 노멀라이즈하는 놈들 뭐임 Unlit Opaque Backface Render 아웃라인 적용된 머티리얼 추가
WebGL / OpenGL / Shader 초간단 개념
WebGL : Web Graphics Library 화려하고 인터랙션이 많은 그래픽을 처리할 때 사용 OpenGL ES의 API를 웹에서 사용할 수 있도록 개발됨 webGL 1 ver: OpenGL ES 2.0v WebGL 2 ver : OpenGL ES 3.0v GPU를 통해 렌더링 계산이 이뤄짐 GLSL 을 지원하는 네이티브 API 캔버스 내부에서 작동 OpenGL 2차원 및 3차원 그래픽스 표준 API 규격 1992년 실리콘 그래픽스사에서 제작 그래픽, 사용자 입력, 음향 컨트롤러까지 제어하는 Direct X 와 달리 그래픽 처리만 가능 비영리 컨소시엄 크로노스 그룹이 관리 OpenGL > OpenGL ES > WebGL Shader 색의 농도, 색조, 명암 효과를 준다는 뜻의 단어 Shade에서 파생 컴퓨터 그래픽스에서는 그래픽 하드웨어의 렌더링 데이터를 게산하는데 사용되는 함수 정점 셰이더 Vertex
[UE5/C++/Shader] 언리얼 콘텐츠 예제 속 물 상호작용 최적화 및 캐릭터 위치와 동기화
개요 에픽 게임즈 런처(Epic Games Launcher)의 샘플 메뉴엔 무료로 다운로드 가능한 콘텐츠 예제 프로젝트가 있습니다. 프로젝트 안에는 여러 예제 머테리얼, BP 등이 있는데 그 중 랜더 타겟과 관련된 BP 중 마우스 포인터나 캐릭터와 상호 작용하여 런타임에 잔물결을 만드는 WaterSurface_BP가 있습니다. 
Unity URP Shader Study (4) - HLSL : Toon Shader
대장장이 모델링, skybox, ground texture 등등 자료 출처 : 아티스트를 위한 유니티 URP 셰이더 입문 좌측에 있는 오브젝트를 우측처럼 만들어주는 쉐이더를 제작해봤다. 요약 코드에 사용된 기능?들은 다음과 같다. Lambert Light : 램버트 라이트 계산 Toon Shading : 툰 쉐이딩 (램버트 라이트 값을 smooth step값으로 조절하고, Ceil 함수 써서 명암 나눔) Ambient : 툰 쉐이딩에 환경광 적용하기 Rim Light(Fresnel) : 애니메이션에서 빛을 받는
Unity URP Shader Study (3) - Shader Graph : Triplanar 쉐이더 제작
Triplanar란 오브젝트의 X, Y, Z축을 바라보고 있는 영역을 관리할 수 있게끔 해주는 기술로 이해를 했다. 유튜브 자료를 찾아보니 보통 (1)오브젝트 위에 모래나 눈, 풀 등이 쌓여있는 듯한 연출, (2)실시간으로 바뀌는 지형(UV맵을 따로 펴주기 어려움)쉐이더 등에 사용되는 것 같다. (1)은 유니티 코리아 유튜브의 해당 영상을 참고하면 좋을 듯 https://www.youtube.com/watch?v=Zz8-5iYQucE&ab_channel=UnityKorea 내가 이 트라이플래너 쉐이더를 만들어야 했던 상황은 다음과 같았다. 모델링에 윗면과 아랫면(Y방향)에만 다른 텍스쳐가 들어가야 했다. 텍스쳐 크기를 최대 1024px로 맞춰야 했는데, 사용해야 하는 텍스쳐 사이즈에 비해 모델의 사이즈가 커 텍스쳐를 따로 제작해도, 화질 저하가 일어날 수 있다. 디테일 맵으로 넣어서 타일링으로 조절해줄 수 있지만 타일처럼 반복되는 형태의 텍스쳐가 들어가야 했다. 큰
Unity URP Shader Study (2) - Shader Graph : 오브젝트에 눈 쌓인 효과 제작
전체 노드 이미지 예전 프로젝트에서 오브젝트에 눈이 쌓인 효과를 구현해야 했다. Brackeys의 영상을 참고했고, 내 입맛대로 조금씩 수정해서 구현했다. Y축 위로 오브젝트의 버텍스를 조금씩 옮겨 눈이 입체적으로 쌓인 느낌 연출 반짝이는 눈 알맹이 연출 (이거는 게임 Journey의 반짝이는 사막효과처럼 연출해보고 싶었다.) 눈 영역에 투명한 느낌을 주기 위해 Fresnel 효과를 더해줌
Unity URP Shader Study (1) - HLSL : 흔들리는 깃발 구현
친구들과 게임을 개발했을 때 사용했던 쉐이더들을 차근히 벨로그에 정리해보려고 한다. 부끄럽게도, 개발하던 당시에는 쉐이더에 대한 지식이 얕아, 인터넷에서 찾았던 쉐이더 코드를 오류가 나지 않을 정도만 원하는 효과 한 두 개만 추가하는 정도로 수정하여 거의 그대로 사용했었다. 그렇기 때문에 당시 이해하지 못한 구조가 꽤 있었다. 다시 예전 코드들을 뜯어보면서 공부해야지, 공부하면서 정리 해야지 했는데 계속 못하고 있었다. 최근에 많은 일들이 정리되고 본격적으로 다시 HLSL와 ShaderGraph를 공부하기 시작하면서 그 기회가 생겼다. 급하게 공부했던 내용들을 최근에 다시 채우고 있으니 구조가 드디어! 이해가 되어 괜히 뿌듯함을 느끼고 있다. 아직 원인을 잘 모르는 이슈도 있지만, 우선은 구현해낸 것을 정리하는 것을 목표로 한다. 공부하면서 직접 구현해본 것들도 Study 시리즈에 정리해서 올릴 예정이기에, 부족한 부분이 많고 최적화 이슈 등이 있을 수도 있다. !
Unity URP Shader - HLSL(2) : ShaderLab
자료 링크 https://docs.unity3d.com/kr/530/Manual/SL-Properties.html HLSL 프로퍼티 종류 정리 Float : 숫자(Numbers) 및 슬라이더(Sliders) Float4 : 컬러(Colors) 및 벡터(Vectors) Sampler : 텍스처(Textures) 프로퍼티 속성 [HideInInspector] - 머티리얼 인스펙터에 프로퍼티 값을 표시하지 않습니다. [NoScaleOffset] - 머티리얼 인스펙터는 이 속성을 포함한 텍스처 프로퍼티에 대해 텍스처 타일링/오프셋 필드를 표시하지 않습니다. [Normal] - 텍스처 프로퍼티의 노멀맵 예상 여부를 나타냅니다. [HDR] - 텍스처 프로퍼티의 HDR 텍스처 예상 여부를 나타냅니다. [Gamma] - 플로트/벡터 프로퍼티가 UI에서 sRGB로 지정되고(컬러와 동일) 사용되는 색 공간에
Unity URP Shader - HLSL(1) : 기본 구조 정리
HLSL 뉴비의 공부한 내용 정리하기 위해 작성하는 벨로그 공부해야할 영역은 두 가지다. 버텍스 쉐이더 픽셀 쉐이더 버텍스 쉐이더는 말 그대로 오브젝트의 버텍스에 대한 값을 처리하는 영역이고, 픽셀 쉐이더는 해당 오브젝트를 모니터에서 그리기 위해 하나하나의 픽셀에 들어갈 색상을 계산해 처리하는 영역을 말한다. 기존의 유니티 파이프라인에서는 스탠다드 서피스 쉐이더로 CG언어를 사용해야했다. URP에서는 서피스 쉐이더가 호환이 안돼서 Shader Graph와 HLSL를 이용해 쉐이더를 만들어야 한다. 만약 URP에서 서피스 쉐이더로 적용되어있다면 핑크색상으로 재질이 바뀔 것이다. 오류가 난다는 뜻이다. HLSL랑 서피스 쉐이더는 비슷하면서 많이 다르다. 쉐이더 랩을 이용하는 것까지는 동일하지만, 버텍스 쉐이더와 픽셀 쉐이더 영역을 구분해서 사용하고 자료를 받아오는 방식이 조금 다른 것 같다. 이 벨로그에서는 HLSL와 쉐이더 그래프만 다룰 예정이다. 가장 기본적인
유니티 그래픽스(Graphics)
픽셀(Pixel) 디지털 이미지를 구성하는 최소 단위 빨강(R), 초록(G), 파랑(B) 3가지의 서브 픽셀 / 채널로 구성 불투명도를 나타내는 알파값(A)도 보통은 포함 가산 혼합하여 색깔을 나타냄 각 채널의 값의 범위는 0~1 까지 렌더 파이프라인 3D 물체를 화면에 출력하려면 일련의 과정이 필요하고, 이를 렌더 파이프라인 혹은 그래픽 파이프라인이라고 함 1. 입력 조립 단계 버텍스를 그래픽 카드에 전달 그래픽 카드는 버텍스 정보를 바탕으로 물체의 모양을 그림 버텍스(Vertex) 물체를 구성하는 점 인덱스 번호, 위치, 노멀 벡터(어떤 방향을 바라보고 있는지 나타냄), 색, UV 2. 버텍스 셰이더 (Vertex Shader) 버텍스 셰이더는 버텍스와 관련된 각종 연산을 함 (가장 많이 하는 연산 = 좌표 변환) 월드 변환 (Local -> World) 각 물체는 자신만의 고유한 좌
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 1탄]
오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다. 바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤 것이 있는지에 대해 간단히 알아보는 시간이 될 것이다. 초기 세팅 우선, 앞선 시리즈인 threejs 코드편 시리즈에서 배웠던 대로 초기 세팅을 해보자 원하는 디렉터리 위치로 이동 후, 터미널을 열고, 라고 입력해주자. 프로젝트 초기 세팅은 앞의 시리즈에도 겹치는 내용이 많으니, 혹시라도 이해가 가지 않는다면 아래 링크를 클릭하여 읽고 오는 것을 추천한다. (천천히 정독하면, 7분 정도 소요 예상) <a href="https
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 intro]
오늘은 카카오에서 얼마 전(좀 오래 전)선보였던 '춘식이 관찰일기'와 비슷한 각도에서 내려다보는 Orthogonal Camera를 이용한 간단한 포트폴리오 페이지를 만들어보려 한다. 필자도 현재 개발중이나, 완성된 페이지는 대략 아래와 같은 모습이 될 것이다. 포트폴리오 페이지 구현에 필요한 최소 기술 스택 >- #### Vite >- #### HTML >- #### CSS >- #### Javascript >- #### Typescript >- #### React >- #### Threejs >- #### React-Three-Fiber >- #### (기술 스택은 아니지만)Netlify를 비롯한 배
유니티 빌트인 쉐이더
https://unity.com/releases/editor/archive 쉐이더 파일을 복사해서 알파를 준다던가 간단하게 수정할 수 있다.
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 3탄]
코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascript three Light의 효과를 알기 위해선 우선, mesh의 material을 MeshStandardMaterial로 바꾸고, 가장 기본적인 조명인 AmbientLight를 추가해보자. 또한, 2탄에서 작성했던 애니메이션 관련 코드는 잠시 주석처리 해주자. ambientLight를 추가했더니, 사실 meshBasicMaterial과 큰 차이가 없어보인다. 빛이 있다면 항상 존재하는 그림자가 생기지 않고, 어디에서든 같은 밝기를 제공하기 때문이다. 이번에는 그림자를 만들어 보도록 하겠다. 그러기 위해서는 그림자가 생길