codingfarm

참고https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.htmlhttps://webgl2fundamentals.org/webgl/lessons/ko/webgl-fundamentals.html 1. 소개WebGL은 브라우저의 context를 통해 GPU를 사용하여 2D/3D 렌더링을 가속하기위한 API 이다. Scene이나 Camera 같은 추상화된 정보 없으며, 점/선/삼각형을 렌더링 하기 위해 GPU 정점, 쉐이더,텍스처, 상태를 전달하고 draw call을 실행하는 저수준기능만을 제공한다. 쉐이더는 GPU의 각 파이프라인에 실행되는 프로그램이며, GLSL은 이 쉐이더를 작성하기 위한 언이다.WebGL은 WebGL과 WebGL2 두가지..

https://webgl2fundamentals.org/webgl/lessons/ko/webgl-fundamentals.htmlhttps://webgl2fundamentals.org/webgl/lessons/resources/webgl-state-diagram.html WebGL2 초기화 및 렌더링 사이클을 위한 기본적인 API 사용방법 및 자주 사용되는 패턴들을 내 나름대로 정리해보았다.웹/게임을 가리지않고 개발이란 결국 데이터를 읽고, 쓰고, 만들고, 지우는 과정의 반복이라 생각한다.그렇기에 Webgl2의 주요 리소스들을 CRUD 관점에 맞추어 API를 정리하였다. programshadervertex arraybuffertexture생성createProgramcreateShadercreateVerte..

1. 소개three.js 에서 post-process를 구현하기 위해 주로 EffectComposer를 사용해왔다.간단한 효과의 경우, ShaderMaterial에 간단히 쉐이더 코드를 작성하지만,복잡한 효과는 Pass를 상속받는 클래스를 구현한다. r3f의 후처리는 주로 @react-three/postprocessing의 EffectComposer를 사용하며, 이는 Three.js addons의 EffectComposer 가 아니라, postprocessing 라이브러리의 Composer 를 감싼것이다.즉, addons와 postprocessing의 EffectComposer는 이름만 같을 뿐 완전히 다른 구현을 가진, 독립적인 대상이다. 2. addons의 EffectComposerThree.js의 ..

1. 소개그동안 실무에서 3d 개발을 위해 R3F를 중점적으로 사용해왔다.캔버스 사이즈 조절, 카메라 시야각 자동 설정, 렌더링 사이클 관리, 메모리 누수 방지, ray-cast 관리 및 이벤트 제공 등 바닐라 Three.js 에서는 제공해주지 않던, 굉장히 많은 편의성 기능들을 누리는 중이다.이전에는 renderer 생성 -> 캔버스 검색 -> html 엘리먼트 부착 -> 캔버스 사이즈 설정-> 카메라 사이즈 설정 -> 렌더링 사이클 호출 등. 복잡한 과정을 거쳐야 했기에, 간단한 테스트를 하나 수행하기 위해 보일러플레이트 코드를 통째로 복붙해야 했지만, 이제는 그저 컴포넌트를 만들고, 내부에 원하는 요소들을 추가하기만 하면 된다.하지만, R3F 컴포넌트를 통해 Three.js의 3d 객체를 정말로..

EffectComposer 는 후처리 파이프라인으로, 여러 개의 Pass가 순서대로 실행되어, 이전 Pass 결과를 다음 Pass가 입력으로 사용하며 덧그리는 방식으로 동작한다.동작 방식RenderTarget A에 렌더다음 Pass는 A를 입력(texture) 으로 사용결과를 RenderTarget B에 출력A ↔ B를 계속 스왑 (ping-pong)마지막 Pass만 화면(framebuffer)에 출력Pass의 공통 인터페이스pass.render(renderer, writeBuffer, readBuffer, deltaTime);rendererWebGLRendererreadBuffer이전 Pass의 결과 텍스처writeBuffer이번 Pass가 쓸 렌더 타겟deltaTime프레임 간 시간작성 예import..

0. GPGPU(범용 GPU, General Purpose GPU) 정의 : 대규모 병렬 처리에 적합한 GPU를 비 그래픽 분야에 응용하는것 장점 : 많은양의 원소에 비슷한 연산을 병렬적으로 처리하는데 적합 ex : 화면에 그려지는 픽셀 단편(pixel fragment), 파티클 시스템(particle system) 단점 : 그래픽 연산과는 달리 GPU의 연산 결과를 다시 CPU로 보내야함 GPU를 통한 연산 속도가 단점을 충분히 보완 다중처리기(Multiprocessor) GPU의 병렬처리를 수행하기 위한 장치 다중처리기는 하나의 스레드를 수행하기 위한 CUDA 코어를 32개 가진다. NVIDIA의 Fermi 아키텍처는 다중처리기를 16개 까지 지원한다. 즉, 최대 512개의 CUDA 코어를 지원한다...

0. 개요 용도 : 특정 픽셀 단편(pixel fragment)들이 back buffer에 기록되지 못하게 한다. 실제 판화를 만들때 쓰이는 스텐실과 같은 역할 depth buffer에도 기록하지 못하게 함 stencil buffer는 back buffer 및 depth buffer와 해상도가 같다 stencil buffer의 $ij$번째 픽셀은 back buffer나 depth buffer의 $ij$번째 픽셀과 대응된다 stencil buffer를 지정 하면 그 버퍼는 depth buffer에 부착된다.(즉, 이후의 작업에서 서로 연관된다) D3D12_DEPTH_STENCIL_DESC 구조체를 채우고 이것을 PSO의 D3D12_GRAPHICS_PIPELINE_STATE_DESC::DepthStencil..

혼합 현재 pipeline에서 래스터화하는 픽셀(PS에서 출력된 픽셀) 이전 pipeline결과 backbuffer에 저장된 pixel 위 2가지 자원을 섞는 기법 주로 반투명 물체의 렌더링에 사용된다. 목표 혼합의 작동 방식과 Direct3D에서 혼합을 사용하는 법을 이해 Direct3D가 지원하는 여러 혼합모드를 배운다. 기본 도형의 투명도를 알파 성분으로 제어하는 법을 파악한다. HLSL의 clip 함수를 이용ㅇ하여 한 픽셀이 후면 버퍼에 아예 그려지지 않게 만드는 법을 배운다. 1. 혼합공식 혼합 : PS에서 출력된 원본 픽셀($C_{src}$)과 이미 back buffer에 저장되어 있는 대상 픽셀($C_{dst}$)의 색상을 혼합하는것 $C_{src}$ : 현재 래스터화 중인 $ij$ 번째 픽..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 // Default.hlsl //*************************************************************************************** // colo..

학습목표 Pixel Shader에서 texture의 표본을 추출 해 pixel의 색상으로 쓸 수 있도록 texture를 shader resource로 binding하여 쓰는 방식을 알아본다. 버퍼 및 텍스처에 대해 배울때 정리한 바 있지만 여기서 다시한번 상세히 설펴본다 텍스처링은 크게 3가지 요소를 통해 이루어진다. 텍스처 자원 텍스처 필터링 좌표 지정 모드 이 중 텍스처 필터링과 좌표 지정 모드에 대한 정보가 표본 추출기 객체에 묶이게 된다. 1. 텍스처(Texture) D3D12_RESOURCE_DESC::Dimension이 D3D12_RESOURCE_DIMENSION_TEXTURE2D 인 IDTD12RESOURCE 로 대표되는 2차원 텍스처 객체 다양한 종류의 data를 담기 위한 저장공간 픽셀 ..

0. 소개 world 좌표계를 기준으로 주어지는 오브젝트들을 화면에 수월하게 그리기 위해선 카메라의 좌표를 기준으로 표현한 후, 화면에 출력하기 위해 view port 좌표계로 다시한번 변환할 수 있어야 한다. 이를 위해 좌표변환에 대해 알아야 한다. 1. 선형 변환 정의 : $\mathbb R^n$에 속하는 임의의 벡터$u$, $v$와 스칼라 $c$에 대하여 1) $T(u+v) = T(u) + T(v)$ 2) $T(cu) = cT(u)$ 위 2개 조건을 만족하는 변환$T: \mathbb R^n \rightarrow \mathbb R^m$ 을 선형변환 이라 한다. 즉, 선형변환 $T$는 $$T(c_1v_1+c_2v_2) = c_1T(v_1) +c_2T(v_2)$$ 위 등식을 만족한다. 1-1. 행렬 표현..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 12..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // color.hlsl struct VertexIn { float3 PosL : POSITION; float4 Color : COLOR; }; struct VertexOut { float4 PosH : SV_POSITION; float4 Color : COLOR; }; VertexOut VS(VertexIn vin) { VertexOut vout = (VertexOut)0; // Transform to homogeneous clip space. vout.PosH = float4(vin.PosL, 1.0f); // Just pass vertex col..

버퍼 : shader 프로그램에서 참조하는 자료를 담는 GPU 자원(ID3D12Resource)의 예 버퍼의 종류 : 텍스처, 기타 버퍼 자원등 0. 상수 버퍼(Constant Buffer) 정의 : shader가 참조하기 상수 data를 담기 위한 저장 공간 특징 잦은 수정이 필요 default heap이 아닌 upload heap에 만드는것이 이상적 크기가 하드웨어 최소 할당 크기(256 byte)의 배수여야한다. 1. 상수 버퍼 생성 Create Committed Resource 함수로 생성, ID3D12Resource 인스턴스에 할당 2. Data Upload map 함수로 매핑한후 data copy를 해주고, unmap을 진행해준다 3. 상수 버퍼 서술자 D3D12_DESCRIPTOR_HEAP_..

0. 개요 단순히 정점버퍼에 대해 뿐만 아니라, GPU에서 이를 활용하기 위한 여러가지 작업에 대해서도 알아보겠다. vertex buffer : GPU가 접근가능한 버퍼에 저장된 정점정보 정점 버퍼 및 뷰의 생성 앞서 배웠던 리소스의 생성과정과 동일하되. 추가적으로 해야할 작업들이 더있다. 1. 커스텀 정점형식 정의 Vertex 구조체를 정의한다. 입력 배치 서술을 작성한다 2. 버퍼 생성 D3D12_RESOURCE_DESC 구조체를 정의하여 생성될 자원에 대해 서술한다 D3D12_HEAP_PROPERTIES 구조체를 정의하여 자원이 저장될 heap에 대해 서술한다 D3D12_CLEAR_VALUE 구조체를 정의하여 리소스를 초기화할 값을 결정한다 ID3D12Device::CreateCommittedRes..

모니터의 픽셀들이 무한히 작지는 않기 때문에, 모니터 화면에 임의의 선을 완벽하게 나타내는것은 불가능하다. 선을 픽셀들의 배열로 근사할 때 생기는, 계단현상이라고도 하는 앨리어싱(aliasing)의 예가 아래그림에 나타난다. 출처 : https://m.blog.naver.com/PostView.nhn?blogId=rkalstn2&logNo=30187944993&proxyReferer=https:%2F%2Fwww.google.com%2F 위와같은 픽셀을 제거하기 위한 앨리어싱 제거(antialiasing) 기법들이 존재하며, 이를 통해 아래와 같은 개선된 효과를 얻을 수 있다. 출처 : https://m.blog.naver.com/PostView.nhn?blogId=rkalstn2&logNo=3018794..

0. 개요 하나의 프레임 버퍼를 가지고 게임 화면을 표현하면 화면 깜빡임(Screen Flickering) 및 화면 찢어짐(Screen Tearing) 현상이 나타난다. 화면 깜빡임 : 버퍼를 지우고 그릴경우 발생 화면 찢어짐: 이미 그려진 화면 위에 덮어 쓸 경우 발생 화면 찢어짐 효과 0-1. 더블 버퍼링(Double Buffering) 화면 깜빡임 및 찢어짐 현상을 피하고자 사용되는 방법 후면 버퍼(Back Buffer)와 전면 버퍼(Front Buffer) 2개의 프레임 버퍼의 교환을 통해 프레임 전환을 구현하는 기술 전면 버퍼 : 화면을 표현 후면 버퍼 : 다음 화면이 될 장면을 미리 저장 후면버퍼는 텍스처 이므로 그 원소를 텍셀(texel)이라 부르지만 여기서는 그냥 픽셀(pixel)이라 부름..

정의 : 어떤 프로그램이나 시스템을 이루는 컴포넌트들이 상호 통신할 수 있도록 하는 메커니즘 COM을 이용하면 DirectX의 프로그래밍 언어 독립성과 하위 호환성을 가능하게 할 수 있다. COM을 통해 개발자는 GPU에 종속적이지 않게 프로그래밍 가능 Comptr Com객체를 담기 위한 일종의 스마트 포인터 ComPtr의 여러 메서드 중 이후 포스팅에서 사용하는 것은 다음 세가지이다. 1. Get : 바탕 COM 인터페이스를 가리키는 포인터를 돌려준다. 해당 COM 인터페이스 포인터 형식의 인수를 받는 함수를 호출할 때 쓰인다. 즉, read용으로 쓰인다 ComPtr mRootSignature; ... // SetGraphicsRootSignature는 ID3D12RootSignature* 형식의 인수..