<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>개발하는 리프터 꽃게맨입니다.</title>
    <link>https://powerclabman.tistory.com/</link>
    <description>개인 공부용 블로그입니다.</description>
    <language>ko</language>
    <pubDate>Thu, 9 Apr 2026 14:08:13 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>파워꽃게맨</managingEditor>
    <image>
      <title>개발하는 리프터 꽃게맨입니다.</title>
      <url>https://tistory1.daumcdn.net/tistory/6794980/attach/353641e619f644bbacf2e6cfa8c096d1</url>
      <link>https://powerclabman.tistory.com</link>
    </image>
    <item>
      <title>effective C++ - bad_alloc 에 대비하는 방법</title>
      <link>https://powerclabman.tistory.com/200</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;new 로 동적메모리를 할당하려고 시도할 때, 메모리가 부족하다면 std::bad_alloc 예외를 뱉는다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아예 nullptr를 뱉어버리는 malloc 보다는 처리하기 용이한 방식이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그런데 new를 사용할 때 마다. try ~ catch 를 하는건 코드를 복잡하게 만들 우려가 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다행히도 new가 메모리 할당에 실패하면 std::bad_alloc 뿐만 아니라 std::new_handler 라는 함수를 호출한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 함수는 전역적으로 관리되는 함수이며, 사용자가 직접 정의할 수도 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1365&quot; data-origin-height=&quot;460&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bgFeBO/btsOTQzX7XG/SZy5vyakikpky7bRcA0AhK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bgFeBO/btsOTQzX7XG/SZy5vyakikpky7bRcA0AhK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bgFeBO/btsOTQzX7XG/SZy5vyakikpky7bRcA0AhK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgFeBO%2FbtsOTQzX7XG%2FSZy5vyakikpky7bRcA0AhK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1365&quot; height=&quot;460&quot; data-origin-width=&quot;1365&quot; data-origin-height=&quot;460&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;new를 실패할 시 쓰레드는 my_new_handler에서 멈춘다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;한 번쯤 고민해봤던 사항이라 유익할 것 같아서 따로 기록해둔다.&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/200</guid>
      <comments>https://powerclabman.tistory.com/200#entry200comment</comments>
      <pubDate>Thu, 26 Jun 2025 15:08:37 +0900</pubDate>
    </item>
    <item>
      <title>Jam Engine 1차 개발 보고서</title>
      <link>https://powerclabman.tistory.com/199</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h1&gt;서론&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;캡스톤 디자인 2팀의 프로젝트는 자체적으로 개발한 엔진을 이용하여 게임을 제작하는 것이다. 해당 문서는 현재까지 개발된 엔진의 기본적인 메모리 관리부터 실시간 게임 루프, 개발에 유용한 유틸리티 등을 보고한다.&lt;/p&gt;
&lt;h1&gt;목차&lt;/h1&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;개발 환경&lt;/li&gt;
&lt;li&gt;메모리 관리&lt;/li&gt;
&lt;li&gt;레이어 기반 어플리케이션 루프&lt;/li&gt;
&lt;li&gt;Entity Component System&lt;/li&gt;
&lt;li&gt;렌더링&lt;/li&gt;
&lt;li&gt;리소스&lt;/li&gt;
&lt;li&gt;직렬화&lt;/li&gt;
&lt;li&gt;GUI 기반 에디팅 시스템&lt;/li&gt;
&lt;li&gt;빌드 시스템&lt;/li&gt;
&lt;li&gt;앞으로 남은 과제&lt;/li&gt;
&lt;/ol&gt;
&lt;h1&gt;1. 개발환경&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;주 개발 언어는 C++ 20 을 사용하고 컴파일러는 MSVC 를 사용한다. 그래픽 API로는 DirectX 11 를 사용한다. 더하여 사용한 서드파티는 다음과 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1) SDL3: 크로스 플랫폼 UI 및 미디어 라이브러리&lt;br /&gt;2) Imgui: 즉시 렌더링 GUI&lt;br /&gt;3) ENTT: 게임 루프 구성&lt;br /&gt;4) nlohmann json: JSON 기반 직렬화 라이브러리&lt;br /&gt;5) spdlog: 로깅 시스템&lt;br /&gt;6) google flatbuffer: 바이너리 기반 직렬화 라이브러리&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;개발 OS는 Windows x64기반이며 크로스 플랫폼은 지원하지 않는다.&lt;/p&gt;
&lt;h1&gt;2. 메모리 관리&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;일반적으로 가변 길이 메모리의 경우 new / delete 를 사용하지만, 부지불식간에 할당, 해제되는 리소스는 고정 길이 메모리 풀을 이용하여 관리한다. 또한 상위 레벨에서는 참조 카운트 기반 자체적인 스마트 포인터를 제공한다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;고정길이 메모리 풀&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;힙 할당은 효율적이지만, 할당과 해제가 빈번한 루프 상황에서는 병합 비용이 체감될 정도로 크고 메모리 파편화 우려가 있다. 이러한 상황에 대처하기 위해 자주 사용되는 오브젝트에 대해 메모리를 미리 할당하여 따로 해제하지 않고 지속적으로 재사용하도록 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;캐시라인을 고려하여 4kb 정도의 힙 메모리를 미리 할당한뒤 고정 길이 (ex. 32byte) 로 자른뒤 메모리 요청이 들어오면 해당 블록의 포인터를 반환한다. 해제 요청이 들어오면 따로 메모리는 해제하지 않는다. 이러한 시스템을 고정길이 메모리 풀이라고 정의한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;4kb 가 넘는 메모리 할당이 요구될 수도 있기 때문에, 필요에따라 동적으로 메모리 풀을 추가롤 할당하여 사용자 입장에서는 일반적인 힙 할당과 동일한 감각으로 사용할 수 있다. 메모리 풀마다 8byte의 링크를 추가하여 메모리 풀들 끼리는 연결 리스트 형태로 연결되어있고, 요청에 따라 순차적으로 파괴할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;초기에는 힙 메모리를 모방하여 범용 메모리 풀을 개발하였으나 이 경우 메모리 사용량이 과하게 많이 증가하여 필요이상의 메모리를 할당하고 있는 문제가 발생했다. 그래서 범용 메모리의 경우 new delete 를 사용을 하고 할당 해제가 빈번한 객체만 메모리 풀을 이용하여 관리한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;또 다른 문제점으로는 멀티스레드 환경에서의 critical section이 될 수 있다는 것인데, 스레드의 로컬 스토리지 마다 메모리 풀을 생성하면 이 문제를 해결할 수 있다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;참조 카운트 기반 포인터&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;메모리 관리를 편리하게 하기 위해 참조 카운트를 세어 0이 될 경우 자동으로 메모리 해제가 되도록하는 포인터의 얇은 래퍼이다. 언어 기반에서도 std::shared_ptr 라는 래퍼를 제공하나, 반드시 malloc free 를 사용해야하며 참조 카운트가 thread-safe 하기에 성능 저하가 발생한다는 단점이 있다. 싱글 스레드 기반 해당 엔진에서는 참조 카운트의 원자적 연산이 불필요하고, std::shared_ptr의 객체와 참조 카운터 블록간의 캐시 히트율이 떨어진다는 단점이 존재했기 때문에 직접 래퍼를 만들 필요가 있었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;JSharedPtr은 카운터 블록과 객체간의 연속된 메모리를 보장하기 때문에 참조 카운트 간의 캐시 히트율이 매우 높고 참조 카운팅이 아토믹하지 않기 때문에 일반 std::shared_ptr 대비 30% 가량의 성능 향상을 이끌어 냈다. 앞서 설명한 메모리 풀과 결합할시 할당 및 해제 속도는 최대 8배까지 빨라진다.&lt;/p&gt;
&lt;h1&gt;3. 레이어 기반 어플리케이션 루프&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어플리케이션에는 고정된 루프가 존재하고 Layer 인터페이스를 상속한 Layer 객체를 메인 어플리케이션에 부착하여 자연스럽게 루프에 간섭할 수 있다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;레이어 시스템&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Layer란 프로그램의 서브 시스템 정도로 볼 수 있는데, 이런 서브 시스템기반 Layer 구조는 사용자가 원하는 방향으로 어플리케이션을 확장해나갈 수 있도록 한다. 기본적으로 엔진에서 제공하는 Layer로는 SceneLayer, EditorLayer 등이 있는데 SceneLayer는 게임루프를 제공하고 EditorLayer는 에디팅 시스템을 제공한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;즉, 엔진 차원에서도 레이어를 확장하여 어플리케이션을 구축하고 사용자 입장에서도 레이어를 확장하여 여러가지 기능을 부착할 수 있다. 물리엔진을 위한 PhysicLayer를 부착할 수도 있고, 네트워크를 위한 NetworkLayer를 부착할 수도 있다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;레이어 간의 통신&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Layer 들은 서로 이벤트를 발생시켜 통신한다. 원하는 데이터를 담은 이벤트 구조체를 최상위 어플리케이션에 전송하면 어플리케이션은 이벤트를 모든 레이어에 브로드캐스트한다. 각 레이어는 자신이 처리할 이벤트 리스너를 정의하고 임의의 이벤트를 수신했을 때 적절한 이벤트 리스너를 실행시킨다. 이러한 이벤트 기반 통신은 레이어가 서로의 존재를 몰라도 통신할 수 있다는 장점이 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어플리케이션은 레이어 및 이벤트 기반 구조를 이용하여 항상 느슨한 결합을 유지하며, 이는 개발 유연성을 보장해준다.&lt;/p&gt;
&lt;h1&gt;4. Entity Component System&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;전통적으로 가장 애용된 게임 시스템은 Object Oriented Programming 을 기저에 둔 Object Component 구조이다. 이 구조는 Object 라는 상위 클래스를 상속하여 구체적인 클래스 내부에서 로직를 구성하고, Component라고 하는 여러 Object에서 재사용 가능한 요소들을 Object와 결합한다. Object는 Component 를 담은 컨테이너임과 동시에 스스로 게임 로직을 구성하는 요소이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러나 이런 컴포넌트 객체는 메모리가 분산되어 있기 때문에 1초에 60~120회 루프를 돌아야하는 게임 시스템상 성능 저하가 발생할 수 있다. 캐시 히트라는 건 생각보다 성능을 엄청 좌우한다. 동일한 컴포넌트는 동일한 로직을 수행시키기 때문에 성능을 위주로 생각한다면 동일한 컴포넌트를 한 데 모아서 루프를 수행하는 것이 더 효과적이다. 이를 달성하기 위해서는 전통적인 Object Component 구조를 포기하고 다른 대안을 찾아야 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Entity Component System은 이러한 문제에 대한 완벽한 해결책이다. Object가 Component의 컨테이너가 되는 것이 아니라 Component 는 각자 고유의 컨테이너를 가지고 있다. 해당 컨테이너는 메모리 상 연속적인 공간을 할당하여, 공간 지역성과 시간 지역성이 매우 높다. 이러한 특성 때문에 다형성을 사용하지 못하고 Component는 POD 타입에 가까운 구조체이다. Entity은 Component의 소유자를 가리키는 단순 정수이고 식별자 이외의 역할은 하지 않는다. System은 순수한 로직을 의미한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Entity Component System은 결국 Object Component 를 식별자 - 데이터 - 로직 3가지 순수한 단위로 나눈 것이다. 이렇게 각각을 분리하여 효율적인 게임 루프를 구성할 수 있고 사용자에게 원활한 사용감을 제공한다.&lt;/p&gt;
&lt;h1&gt;5. 렌더링&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;렌더링 API는 앞서 기술했듯 DirectX11을 사용한다. 그래픽스 API 특성상 복잡한 로직이 다수 존재하기에 얇은 래퍼로 감싼 퍼사드를 제공한다. DirectX11은 드라이버 수준에서 많은 최적화를 제공해주기 때문에 중복된 데이터에 대한 캐시를 제외하고는 특별한 최적화를 하진 않는다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;렌더링의 경우 사용자 의도대로 프로그래밍할 수 있도록 하기 위해 정해진 루프는 제공되지 않는다. 그러나 여타 게임 엔진과 동일하게 내부 구조를 잘 모르더라도 게임을 개발할 수 있도록 여러가지 헬퍼 혹은 built-in 된 렌더링 객체들을 제공한다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Built-in 쉐이더&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Built-in 된 그래픽스 알고리즘을 제공하기 위해서는 쉐이더 코드가 필수적이다. 일반적으로는 HLSL 파일 형태로 제공하며 파일을 로딩하여 컴파일 후 사용하는 것이 일반적이나, 이 경우 배포가 어렵다는 단점이 있다. 그래서 컴파일된 쉐이더의 바이너리 코드를 라이브러리에 포함시켜서 배포하는 방식을 선택했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;HLSL을 변경할 때마다 바이너리 코드를 업데이트 해줘야한다는 단점이 있다. 이는 개발중인 HLSL을 추적하여 프로젝트를 빌드할 때마다 스크립트를 이용해 자동으로 컴파일하는 방법을 사용하여 해결하였다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Physical Based Rendering&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;880&quot; data-origin-height=&quot;428&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/csqURv/btsOrxbPF9P/Ei9RDUli0OKkrYQrOhXjSK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/csqURv/btsOrxbPF9P/Ei9RDUli0OKkrYQrOhXjSK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/csqURv/btsOrxbPF9P/Ei9RDUli0OKkrYQrOhXjSK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcsqURv%2FbtsOrxbPF9P%2FEi9RDUli0OKkrYQrOhXjSK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;880&quot; height=&quot;428&quot; data-origin-width=&quot;880&quot; data-origin-height=&quot;428&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;실제 물리현상을 모방하여 라이팅하는 기법이며 해당 엔진의 표준 쉐이더로 차용하고 있다. 배경이 방출하는 빛을 미리 계산하여 텍스처 형태로 저장하고, 그것을 이용하여 물리법칙에 의거한 빛 반사를 근사한다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Post Process&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;851&quot; data-origin-height=&quot;801&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/G6Idb/btsOsbF3rC8/xnT2vGoc83R39lEWPZICOk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/G6Idb/btsOsbF3rC8/xnT2vGoc83R39lEWPZICOk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/G6Idb/btsOsbF3rC8/xnT2vGoc83R39lEWPZICOk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FG6Idb%2FbtsOsbF3rC8%2FxnT2vGoc83R39lEWPZICOk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;851&quot; height=&quot;801&quot; data-origin-width=&quot;851&quot; data-origin-height=&quot;801&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이미 렌더링된 화면을 후처리를 이용하여 추가적인 효과를 제공하는 기법이다. Deferred Rendering 을 기반으로 동작하기 때문에 안티에일리어싱을 적용하기위해 FXAA 필터를 제공하고, 물리 기반 블러를 이용하여 자연스러운 빛 번짐, 발광 등을 구현한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;853&quot; data-origin-height=&quot;489&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/RCpwU/btsOsE8LZl2/nrwsGudeZyjlaktCfuHZiK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/RCpwU/btsOsE8LZl2/nrwsGudeZyjlaktCfuHZiK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/RCpwU/btsOsE8LZl2/nrwsGudeZyjlaktCfuHZiK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRCpwU%2FbtsOsE8LZl2%2FnrwsGudeZyjlaktCfuHZiK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;853&quot; height=&quot;489&quot; data-origin-width=&quot;853&quot; data-origin-height=&quot;489&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추가적으로 안개 효과, 비네팅, 톤 매핑 등 영화적이고 엔터테이먼트 적인 후처리 효과도 이미지 필터 형태로 제공된다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Lighting&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;879&quot; data-origin-height=&quot;1173&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/n1OGk/btsOsBRE0CA/g88KXBzW1KBHXkCBjPNbV0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/n1OGk/btsOsBRE0CA/g88KXBzW1KBHXkCBjPNbV0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/n1OGk/btsOsBRE0CA/g88KXBzW1KBHXkCBjPNbV0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fn1OGk%2FbtsOsBRE0CA%2Fg88KXBzW1KBHXkCBjPNbV0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;879&quot; height=&quot;1173&quot; data-origin-width=&quot;879&quot; data-origin-height=&quot;1173&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;전통 라이팅 기법은 오버헤드가 크기에 라이팅 볼륨을 이용하여 효율적으로 광원을 렌더링한다. 이 경우 광원을 1000개 이상 렌더링해도 실시간 게임 플레이에 문제없는 프레임 속도를 제공한다. 광원은 평행광, 점광, 스포트라이트 총 3종류를 제공하며 셋 다 직접적인 라이팅이 아닌 빛을 대변하는 지오메트리를 렌더링하여 빛 반사를 근사한다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Shadow&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;897&quot; data-origin-height=&quot;604&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bPrXqw/btsOthL2MPu/mkvEVYdkSVZHjktmf48AUK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bPrXqw/btsOthL2MPu/mkvEVYdkSVZHjktmf48AUK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bPrXqw/btsOthL2MPu/mkvEVYdkSVZHjktmf48AUK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbPrXqw%2FbtsOthL2MPu%2FmkvEVYdkSVZHjktmf48AUK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;897&quot; height=&quot;604&quot; data-origin-width=&quot;897&quot; data-origin-height=&quot;604&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;쉐도우는 쉐도우 매핑 기반이며 광원의 종류 별로 1개씩만 만들어낼 수 있다. 렌더러가 Rasterizer 기반이기 때문에 그림자 렌더링에 상당한 오버헤드가 발생하기 때문에 제한할 수 밖에 없었다. 대부분의 겨우 평행광이 만들어내는 그림자가 가장 중요하기 때문에 극심한 오버헤드를 감수하고 무한정 그림자를 만들어내도록 구현할 이유는 없었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;손전등같은 스포트라이트는 쉐도우 매핑을, 태양광같은 평행광은 레벨을 조정할 수 있는 Cascade Shadow Mapping을, 전구같은 점광에는 Omni-Directional Shadow Mapping 알고리즘이 수행된다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Screen Space Ambient Occlusion&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;901&quot; data-origin-height=&quot;516&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/NvyzD/btsOsA6qKdH/XfKid3ictha7Mp1ToDeiUk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/NvyzD/btsOsA6qKdH/XfKid3ictha7Mp1ToDeiUk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/NvyzD/btsOsA6qKdH/XfKid3ictha7Mp1ToDeiUk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNvyzD%2FbtsOsA6qKdH%2FXfKid3ictha7Mp1ToDeiUk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;901&quot; height=&quot;516&quot; data-origin-width=&quot;901&quot; data-origin-height=&quot;516&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Deferred Rendering 을 기반으로 표준 쉐이더가 동작하기 때문에 차폐광을 저렴한 비용으로 도입할 수 있었다. 물체의 틈의 경우 빛이 도달하기 힘들기 때문에 오클루전이라는 그림자효과를 더하면 현실적인 느낌을 줄 수 있다. 실제로는 여러 번 Ray를 쏴서 계산해야하지만 G-buffer 데이터를 이용하여 근사할 수 있었다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;Pre Baked Texturing&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;888&quot; data-origin-height=&quot;521&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/x4Jtt/btsOsynbP9F/o2bmWu78ENu5wWebmGYKbK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/x4Jtt/btsOsynbP9F/o2bmWu78ENu5wWebmGYKbK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/x4Jtt/btsOsynbP9F/o2bmWu78ENu5wWebmGYKbK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fx4Jtt%2FbtsOsynbP9F%2Fo2bmWu78ENu5wWebmGYKbK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;888&quot; height=&quot;521&quot; data-origin-width=&quot;888&quot; data-origin-height=&quot;521&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;빛과 그림자는 앞서 말했듯 비용이 매우 크기 때문에 미리 그림자를 계산하여 텍스처 매핑을 사용할 수 있다. 현재 이러한 텍스처링을 수행할 수는 있지만, 직접 굽는 기능은 제공되지 않는다. 이는 추후 개발할 과제로 남을 것이다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;앞으로 남은 과제&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재 과제로는 Rim light (테두리 효과), 애니메이션, 반사 효과, 반투명 효과등이 있다. 이는 본격적인 게임 개발을 시작하면서 점진적으로 개발할 계획이다.&lt;/p&gt;
&lt;h1&gt;리소스&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;초기에는 리소스를 미리 로딩하고 개발을 했지만, 메모리 공간은 한정되어 있기에 당장에 사용해야할 리소스와 아닌 리소스를 구분하여 필요할때 로딩하고 언로드할 필요성이 생겼다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;게임을 구성하는 기본적인 단위를 Scene이라고 부르는 데 Scene 별로 사용하는 리소스를 구분하여 로딩하는 것이 현실적인 해결방법이었다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;에셋 매니저&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;3D 모델, 텍스처 등을 에셋이라고 하고, 이들을 로드하고 저장하고 제공하는 클래스를 에셋 매니저라고 한다. 에셋 매니저는 씬 마다 하나씩 존재하며 해당 씬에서 사용하는 에셋 목록을 저장한다. 씬이 로드될 때 씬에서 필요한 자원을 한번에 로딩한다. 중복 로딩을 방지하기 위해서 씬이 변경되는 시점에서 중복된 에셋은 이전 씬의 에셋 포인터를 그대로 가져온다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;에셋은 게임이 배포되어도 정확하게 로딩되어야 하므로 각자의 경로를 저장하고 있고, 엔진 고유의 파일 시스템에 의해 엄격하게 관리된다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;모델 최적화&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;909&quot; data-origin-height=&quot;981&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cWfhXO/btsOseWCBmP/jcDzpo5qYwz7Gm4KwJ3k31/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cWfhXO/btsOseWCBmP/jcDzpo5qYwz7Gm4KwJ3k31/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cWfhXO/btsOseWCBmP/jcDzpo5qYwz7Gm4KwJ3k31/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcWfhXO%2FbtsOseWCBmP%2FjcDzpo5qYwz7Gm4KwJ3k31%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;909&quot; height=&quot;981&quot; data-origin-width=&quot;909&quot; data-origin-height=&quot;981&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;br /&gt;에셋 중에 가장 복잡하고 로딩시간이 긴 리소스는 모델이다. 모델은 적어도 3만개 이상의 버텍스로 이루어져 있기 때문에 원본 형식으로 로딩하면 모델 당 3 ~&lt;/p&gt;
&lt;p&gt;&lt;del&gt;5초 정도의 로딩시간이 걸린다. 이를 개선하기 위해 엔진은 고유의 모델 구조를 사용하며 바이너리 코드 형태로 관리한다. 엔진에 내장된 ModelImporter은 외부 형식 모델을 로딩하여 엔진 표준 형식으로 바꿔준다. 이러면 로딩시간을 10배 ~ &lt;/del&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;15배 가량 단축할 수 있다.&lt;/p&gt;
&lt;h1&gt;직렬화&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;C++는 언어 특성상 빌드 시간이 매우 많이 걸린다. 이는 C++ 기반 게임 엔진인 언리얼 엔진도 가지고 있는 고질적인 문제이다. 이를 개선하기 위해서 최대한 개발 작업을 에디터를 이용하여 런타임에 진행할 수 있어야한다. 런타임에 개발한다는 것은 게임의 구성요소가 읽고 쓸 수 있는 데이터로 변환될 수 있어야한다는 것을 의미하기도 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그래서 게임의 로직은 C++ 언어 기반으로 작성하되 오브젝트의 구성, 배치, 테스트, 씬 구성등을 데이터 형식으로 변환할 수만 있어도 생산성이 매우 올라간다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;로직 자체도 스크립트 언어를 사용하면 런타임에 구성할 수 있지만, 개발 시간 대비 리턴이 적다고 판단했기에 이번 프로젝트에 포함되지 않았다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;씬 데이터 직렬화&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;앞서말한 오브젝트의 구성, 배치, 씬 구성등 모두 씬을 직렬화/역직렬화 할 수 있다면 한 번에 달성할 수 있는 목표들이다. 여기서 핵심은 오브젝트의 직렬화인데, Entity Component System을 채용하는 게임 특성상 Component 가 부지기수적으로 늘어날 수 있기 때문에 직렬화하기 매우 까다롭다는 점이 문제점으로 다가왔다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;892&quot; data-origin-height=&quot;753&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/wOBHU/btsOtJ88c7M/7KRWU4owC9N24KNXGRakMK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/wOBHU/btsOtJ88c7M/7KRWU4owC9N24KNXGRakMK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/wOBHU/btsOtJ88c7M/7KRWU4owC9N24KNXGRakMK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwOBHU%2FbtsOtJ88c7M%2F7KRWU4owC9N24KNXGRakMK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;892&quot; height=&quot;753&quot; data-origin-width=&quot;892&quot; data-origin-height=&quot;753&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;바꿀 수 없는 진실은 모든 컴포넌트가 직렬화 역직렬화 로직을 제공해야하며, 런타임에 추가 및 삭제를 제공해야한다는 점이다. 이를 위해서 컴포넌트들이 런타임 리플렉션을 제공하도록 매크로를 정의하였으며 매크로를 가지고 있지 않은 컴포넌트들이 있으면 아예 컴파일이 되지 않도록 막아버렸다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;882&quot; data-origin-height=&quot;859&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/No935/btsOsu58n4e/nsnrnSNScUzOsUvGJNeji1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/No935/btsOsu58n4e/nsnrnSNScUzOsUvGJNeji1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/No935/btsOsu58n4e/nsnrnSNScUzOsUvGJNeji1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNo935%2FbtsOsu58n4e%2FnsnrnSNScUzOsUvGJNeji1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;882&quot; height=&quot;859&quot; data-origin-width=&quot;882&quot; data-origin-height=&quot;859&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이를 통해서 런타임에 씬 데이터를 모두 직렬화 및 역직렬화할 수 있는 기반을 마련했고 런타임에 게임을 구성할 수 있게 하였다.&lt;/p&gt;
&lt;h1&gt;GUI 기반 에디팅 시스템&lt;/h1&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;870&quot; data-origin-height=&quot;1013&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/VIRYK/btsOruGhKsP/vIBaDSpgDAkD3JkzhdsAxK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/VIRYK/btsOruGhKsP/vIBaDSpgDAkD3JkzhdsAxK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/VIRYK/btsOruGhKsP/vIBaDSpgDAkD3JkzhdsAxK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVIRYK%2FbtsOruGhKsP%2FvIBaDSpgDAkD3JkzhdsAxK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;870&quot; height=&quot;1013&quot; data-origin-width=&quot;870&quot; data-origin-height=&quot;1013&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;런타임에 에셋을 로드하고 씬을 쉽게 구성할 수 있도록 GUI 기반 시스템을 제공한다. 버튼 조작으로 씬을 구성하고 데이터를 직렬화 및 역직렬화할 수 있고 게임 구성요소를 간단히 조작할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;또한, 씬을 멈추고 프레임 단위로 분석하는 등 다양한 기능을 제공한다. 최대한 드래그 드랍을 이용하여 빠르게 제품을 생산할 수 있도록 하였다.&lt;/p&gt;
&lt;h1&gt;빌드 시스템&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;프로그램은 개발 시점과 배포 시점의 단계로 나눌 수 있으며, 이 둘은 달라야한다. 스크립트를 이용하여 배포할 수 있는 실행파일을 빌드할 수 있으며 아직 많은 테스트가 필요한 기능이며 게임 개발과 함께 점진적으로 개발해나갈 계획이다.&lt;/p&gt;
&lt;h1&gt;앞으로 남은 과제&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;생각보다 엔진 기반을 잡는데 오래 걸렸고 팀원들도 엔진 사용에 익숙하지 않으며, 테스트도 충분히 진행되지 않았기 때문에 방학동안은 게임을 만들기전 충분한 엔진 사용과 테스트를 이용하여 프로토타입 개발에 힘 쓸 계획이다.&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/199</guid>
      <comments>https://powerclabman.tistory.com/199#entry199comment</comments>
      <pubDate>Sun, 8 Jun 2025 16:55:19 +0900</pubDate>
    </item>
    <item>
      <title>뻘짓) 콘솔로 래스터라이제이션 기반 큐브 렌더링하기</title>
      <link>https://powerclabman.tistory.com/197</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;figure data-ke-type=&quot;video&quot; data-ke-style=&quot;alignCenter&quot; data-video-host=&quot;kakaotv&quot; data-video-url=&quot;https://tv.kakao.com/v/454471741&quot; data-video-thumbnail=&quot;https://scrap.kakaocdn.net/dn/XAcNO/hyYIa9vMoW/ivi28Mwz2PozBSnycKckt1/img.jpg?width=1104&amp;amp;height=720&amp;amp;face=0_0_1104_720,https://scrap.kakaocdn.net/dn/dExMXr/hyYIjL9A9J/gk39LkK5a01y67NLUvRu21/img.jpg?width=1104&amp;amp;height=720&amp;amp;face=0_0_1104_720&quot; data-video-width=&quot;860&quot; data-video-height=&quot;561&quot; data-video-origin-width=&quot;860&quot; data-video-origin-height=&quot;561&quot; data-ke-mobilestyle=&quot;widthContent&quot; data-video-title=&quot;'개발하는 리프터 꽃게맨입니다.'에서 업로드한 동영상&quot; data-video-play-service=&quot;daum_tistory&quot; data-original-url=&quot;&quot;&gt;&lt;iframe src=&quot;https://play-tv.kakao.com/embed/player/cliplink/454471741?service=daum_tistory&quot; width=&quot;860&quot; height=&quot;561&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;figcaption style=&quot;display: none;&quot;&gt;&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;한 3시간 걸린 것 같습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;재밌네요&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;전체코드&lt;/p&gt;
&lt;div data-ke-type=&quot;moreLess&quot; data-text-more=&quot;더보기&quot; data-text-less=&quot;닫기&quot;&gt;&lt;a class=&quot;btn-toggle-moreless&quot;&gt;더보기&lt;/a&gt;
&lt;div class=&quot;moreless-content&quot;&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#include&lt;/span&gt; &lt;span&gt;&amp;lt;&lt;/span&gt;iostream&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#define&lt;/span&gt; NOMINMAX&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#include&lt;/span&gt; &lt;span&gt;&amp;lt;&lt;/span&gt;Windows.h&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#include&lt;/span&gt; &lt;span&gt;&amp;lt;&lt;/span&gt;cassert&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#include&lt;/span&gt; &lt;span&gt;&amp;lt;&lt;/span&gt;chrono&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#include&lt;/span&gt; &lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;vector&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#define&lt;/span&gt; PI &lt;span style=&quot;color: #0099cc;&quot;&gt;3.&lt;/span&gt;14159265358979323846f&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #0086b3;&quot;&gt;#define&lt;/span&gt; DEG2RAD(x) ((x) &lt;span&gt;*&lt;/span&gt; PI &lt;span&gt;/&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;180.&lt;/span&gt;f)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; ScreenBuffer&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;uint8_t&lt;span&gt;*&lt;/span&gt; buffer;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;uint32_t width;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;uint32_t height;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Matrix4x4&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; m[&lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;static&lt;/span&gt; Matrix4x4 Identity()&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 result &lt;span&gt;=&lt;/span&gt; {};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Vec3&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 &lt;span&gt;operator&lt;/span&gt;&lt;span&gt;-&lt;/span&gt; (&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; other) &lt;span&gt;const&lt;/span&gt; { &lt;span&gt;return&lt;/span&gt; { x &lt;span&gt;-&lt;/span&gt; other.x, y &lt;span&gt;-&lt;/span&gt; other.y, z &lt;span&gt;-&lt;/span&gt; other.z }; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 &lt;span&gt;operator&lt;/span&gt;&lt;span&gt;*&lt;/span&gt;(&lt;span&gt;const&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; scalar) &lt;span&gt;const&lt;/span&gt; { &lt;span&gt;return&lt;/span&gt; { x &lt;span&gt;*&lt;/span&gt; scalar, y &lt;span&gt;*&lt;/span&gt; scalar, z &lt;span&gt;*&lt;/span&gt; scalar }; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 &lt;span&gt;operator&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;(&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; other) &lt;span&gt;const&lt;/span&gt; { &lt;span&gt;return&lt;/span&gt; { x &lt;span&gt;+&lt;/span&gt; other.x, y &lt;span&gt;+&lt;/span&gt; other.y, z &lt;span&gt;+&lt;/span&gt; other.z }; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; Dot(&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; other) &lt;span&gt;const&lt;/span&gt; { &lt;span&gt;return&lt;/span&gt; x &lt;span&gt;*&lt;/span&gt; other.x &lt;span&gt;+&lt;/span&gt; y &lt;span&gt;*&lt;/span&gt; other.y &lt;span&gt;+&lt;/span&gt; z &lt;span&gt;*&lt;/span&gt; other.z; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 Cross(&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; other) &lt;span&gt;const&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;y &lt;span&gt;*&lt;/span&gt; other.z &lt;span&gt;-&lt;/span&gt; z &lt;span&gt;*&lt;/span&gt; other.y,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;z &lt;span&gt;*&lt;/span&gt; other.x &lt;span&gt;-&lt;/span&gt; x &lt;span&gt;*&lt;/span&gt; other.z,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;x &lt;span&gt;*&lt;/span&gt; other.y &lt;span&gt;-&lt;/span&gt; y &lt;span&gt;*&lt;/span&gt; other.x&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 Normalize() &lt;span&gt;const&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; length &lt;span&gt;=&lt;/span&gt; sqrtf(x &lt;span&gt;*&lt;/span&gt; x &lt;span&gt;+&lt;/span&gt; y &lt;span&gt;*&lt;/span&gt; y &lt;span&gt;+&lt;/span&gt; z &lt;span&gt;*&lt;/span&gt; z);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; { x &lt;span&gt;/&lt;/span&gt; length, y &lt;span&gt;/&lt;/span&gt; length, z &lt;span&gt;/&lt;/span&gt; length };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; x, y, z;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Vec4&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec4() &lt;span&gt;=&lt;/span&gt; &lt;span&gt;default&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec4(&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; vec3, &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; w) : x(vec3.x), y(vec3.y), z(vec3.z), w(w) {}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 ToVec3() &lt;span&gt;const&lt;/span&gt; { &lt;span&gt;return&lt;/span&gt; Vec3{ x,y,z }; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; x, y, z, w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; GrayScale&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; scale;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Vertex&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 posL;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 normal;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;GrayScale color;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; PSInput&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec4 posH;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 posW;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 normal;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;GrayScale color;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Context&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;ScreenBuffer frontBuffer;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt;&lt;span&gt;*&lt;/span&gt; depthBuffer;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;HANDLE mainConsole;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; prevKeyInput[&lt;span style=&quot;color: #0099cc;&quot;&gt;256&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; keyInput[&lt;span style=&quot;color: #0099cc;&quot;&gt;256&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::chrono::high_resolution_clock::time_point lastTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput(&lt;span&gt;*&lt;/span&gt;vertexShader)(&lt;span&gt;const&lt;/span&gt; Vertex&lt;span&gt;&amp;amp;&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;GrayScale(&lt;span&gt;*&lt;/span&gt;pixelShader)(&lt;span&gt;const&lt;/span&gt; PSInput&lt;span&gt;&amp;amp;&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;} g_context;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; InitContext(uint32_t width, uint32_t height);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; ReleaseContext();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; DrawPixel(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer, uint32_t x, uint32_t y, uint8_t color);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; PresentToConsole(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;char&lt;/span&gt; CvtColorToChar(uint8_t color);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; ClearScreenBuffer(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer, uint8_t color);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; InitContext(uint32_t width, uint32_t height)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.mainConsole &lt;span&gt;=&lt;/span&gt; GetStdHandle(STD_OUTPUT_HANDLE);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.frontBuffer.width &lt;span&gt;=&lt;/span&gt; width;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.frontBuffer.height &lt;span&gt;=&lt;/span&gt; height;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.frontBuffer.buffer &lt;span&gt;=&lt;/span&gt; &lt;span&gt;new&lt;/span&gt; uint8_t[width &lt;span&gt;*&lt;/span&gt; height];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.depthBuffer &lt;span&gt;=&lt;/span&gt; &lt;span&gt;new&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt;[width &lt;span&gt;*&lt;/span&gt; height];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.lastTime &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::chrono::high_resolution_clock::now();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;ClearScreenBuffer(&lt;span&gt;&amp;amp;&lt;/span&gt;g_context.frontBuffer, &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PresentToConsole(&lt;span&gt;&amp;amp;&lt;/span&gt;g_context.frontBuffer);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; ReleaseContext()&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;delete&lt;/span&gt;[] g_context.frontBuffer.buffer;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;delete&lt;/span&gt;[] g_context.depthBuffer;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;char&lt;/span&gt; CvtColorToChar(uint8_t color)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;uint8_t key &lt;span&gt;=&lt;/span&gt; (color &lt;span&gt;/&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;255.&lt;/span&gt;f) &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;9.&lt;/span&gt;f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;switch&lt;/span&gt; (key)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;' '&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'.'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;':'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'-'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'='&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;5&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'+'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;6&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'*'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;7&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'#'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;8&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'%'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;case&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;9&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;'@'&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;default&lt;/span&gt;: &lt;span&gt;return&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;' '&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; DrawPixel(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer, uint32_t x, uint32_t y, uint8_t color)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (x &lt;span&gt;&amp;lt;&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;width &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; y &lt;span&gt;&amp;lt;&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;height)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;buffer[y &lt;span&gt;*&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;width &lt;span&gt;+&lt;/span&gt; x] &lt;span&gt;=&lt;/span&gt; CvtColorToChar(color);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; PresentToConsole(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;DWORD written;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; y &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; y &lt;span&gt;&amp;lt;&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;height; y&lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;WriteConsoleA(g_context.mainConsole,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;buffer &lt;span&gt;+&lt;/span&gt; y &lt;span&gt;*&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;width,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;width,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;&amp;amp;&lt;/span&gt;written, nullptr);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;WriteConsoleA(g_context.mainConsole,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #63a35c;&quot;&gt;&quot;\n&quot;&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;&amp;amp;&lt;/span&gt;written, nullptr);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;SetConsoleCursorPosition(g_context.mainConsole, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt; });&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; ClearScreenBuffer(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer, uint8_t color)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::memset(in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;buffer, CvtColorToChar(color), in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;width &lt;span&gt;*&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;height);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; ClearDepthBuffer(&lt;span&gt;const&lt;/span&gt; ScreenBuffer&lt;span&gt;*&lt;/span&gt; in_buffer, &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; depth)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::memset(g_context.depthBuffer, depth, in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;width &lt;span&gt;*&lt;/span&gt; in_buffer&lt;span&gt;-&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;height &lt;span&gt;*&lt;/span&gt; &lt;span&gt;sizeof&lt;/span&gt;(&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt;));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; DepthTest(&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; depth, uint32_t x, uint32_t y)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (depth &lt;span&gt;&amp;gt;&lt;/span&gt; g_context.depthBuffer[y &lt;span&gt;*&lt;/span&gt; g_context.frontBuffer.width &lt;span&gt;+&lt;/span&gt; x])&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.depthBuffer[y &lt;span&gt;*&lt;/span&gt; g_context.frontBuffer.width &lt;span&gt;+&lt;/span&gt; x] &lt;span&gt;=&lt;/span&gt; depth;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; &lt;span&gt;false&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; UpdateInput()&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; i &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; i &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;256&lt;/span&gt;; i&lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (GetAsyncKeyState(i) &lt;span&gt;&amp;amp;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0x8000&lt;/span&gt;)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.keyInput[i] &lt;span&gt;=&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;else&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.keyInput[i] &lt;span&gt;=&lt;/span&gt; &lt;span&gt;false&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::memcpy(g_context.prevKeyInput, g_context.keyInput, &lt;span&gt;sizeof&lt;/span&gt;(g_context.prevKeyInput));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; UpdateTimer()&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;auto&lt;/span&gt; now &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::chrono::high_resolution_clock::now();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.deltaTime &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::chrono::duration&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;(now &lt;span&gt;-&lt;/span&gt; g_context.lastTime).count();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.lastTime &lt;span&gt;=&lt;/span&gt; now;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; IsKeyPressed(&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; key) { &lt;span&gt;return&lt;/span&gt; g_context.keyInput[key] &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; &lt;span&gt;!&lt;/span&gt;g_context.prevKeyInput[key]; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; IsKeyReleased(&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; key) { &lt;span&gt;return&lt;/span&gt; &lt;span&gt;!&lt;/span&gt;g_context.keyInput[key] &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; g_context.prevKeyInput[key]; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; IsKeyDown(&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; key) { &lt;span&gt;return&lt;/span&gt; g_context.keyInput[key]; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;bool&lt;/span&gt; IsKeyUp(&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; key) { &lt;span&gt;return&lt;/span&gt; &lt;span&gt;!&lt;/span&gt;g_context.keyInput[key]; }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Matrix4x4 Multiply(&lt;span&gt;const&lt;/span&gt; Matrix4x4&lt;span&gt;&amp;amp;&lt;/span&gt; a, &lt;span&gt;const&lt;/span&gt; Matrix4x4&lt;span&gt;&amp;amp;&lt;/span&gt; b)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; i &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; i &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;i)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; j &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; j &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;j)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.m[i][j] &lt;span&gt;=&lt;/span&gt; a.m[i][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; b.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][j] &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;a.m[i][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; b.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][j] &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;a.m[i][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; b.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][j] &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;a.m[i][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; b.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][j];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Matrix4x4 Invert(&lt;span&gt;const&lt;/span&gt; Matrix4x4&lt;span&gt;&amp;amp;&lt;/span&gt; mat)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 inv;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; det &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; i &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; i &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;i)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; j &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; j &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;j)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;inv.m[i][j] &lt;span&gt;=&lt;/span&gt; mat.m[j][i];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;det &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; inv.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; inv;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Matrix4x4 Transpose(&lt;span&gt;const&lt;/span&gt; Matrix4x4&lt;span&gt;&amp;amp;&lt;/span&gt; mat)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; i &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; i &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;i)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; j &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; j &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;j)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.m[i][j] &lt;span&gt;=&lt;/span&gt; mat.m[j][i];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Vec4 TransformVector(&lt;span&gt;const&lt;/span&gt; Matrix4x4&lt;span&gt;&amp;amp;&lt;/span&gt; mat, &lt;span&gt;const&lt;/span&gt; Vec4&lt;span&gt;&amp;amp;&lt;/span&gt; vec)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec4 result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.x &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.y &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.z &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.w &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Vec4 TransformVector(&lt;span&gt;const&lt;/span&gt; Matrix4x4&lt;span&gt;&amp;amp;&lt;/span&gt; mat, &lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; vec)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec4 result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.x &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.y &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.z &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;result.w &lt;span&gt;=&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.x &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.y &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; vec.z &lt;span&gt;+&lt;/span&gt; mat.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; result;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Matrix4x4 CreateWorld(&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; translate, &lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; yawPitchRoll, &lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; scale)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 world;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; cy &lt;span&gt;=&lt;/span&gt; cos(yawPitchRoll.y);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; sy &lt;span&gt;=&lt;/span&gt; sin(yawPitchRoll.y);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; cp &lt;span&gt;=&lt;/span&gt; cos(yawPitchRoll.x);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; sp &lt;span&gt;=&lt;/span&gt; sin(yawPitchRoll.x);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; cr &lt;span&gt;=&lt;/span&gt; cos(yawPitchRoll.z);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; sr &lt;span&gt;=&lt;/span&gt; sin(yawPitchRoll.z);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 rotationYaw &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;cy, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, sy, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;-&lt;/span&gt;sy, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, cy, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 rotationPitch &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, cp, sp, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;sp, cp, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 rotationRoll &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;cr, sr, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;-&lt;/span&gt;sr, cr, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 rotation &lt;span&gt;=&lt;/span&gt; Multiply(rotationYaw, Multiply(rotationPitch, rotationRoll));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.x &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.x &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.x &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; translate.x;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.y &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.y &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.y &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; translate.y;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.z &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.z &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; scale.z &lt;span&gt;*&lt;/span&gt; rotation.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; translate.z;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;world.m[&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;][&lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; world;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Matrix4x4 CreateView(&lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; cameraPosition, &lt;span&gt;const&lt;/span&gt; Vec3&lt;span&gt;&amp;amp;&lt;/span&gt; lookDirection)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 zAxis &lt;span&gt;=&lt;/span&gt; (lookDirection &lt;span&gt;*&lt;/span&gt; &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f).Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 up &lt;span&gt;=&lt;/span&gt; { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; dot &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::abs(&lt;a style=&quot;background-color: #000000; color: #000000;&quot; href=&quot;https://unsafelink.com/http://up.Dot&quot;&gt;up.Dot&lt;/a&gt;(zAxis));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (dot &lt;span&gt;&amp;gt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;999f)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;up &lt;span&gt;=&lt;/span&gt; { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::abs(&lt;a style=&quot;background-color: #000000; color: #000000;&quot; href=&quot;https://unsafelink.com/http://zAxis.Dot&quot;&gt;zAxis.Dot&lt;/a&gt;(up)) &lt;span&gt;&amp;gt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;999f)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;up &lt;span&gt;=&lt;/span&gt; { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 xAxis &lt;span&gt;=&lt;/span&gt; up.Cross(zAxis).Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 yAxis &lt;span&gt;=&lt;/span&gt; zAxis.Cross(xAxis).Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 view &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;xAxis.x, xAxis.y, xAxis.z, &lt;span&gt;-&lt;/span&gt;&lt;a style=&quot;background-color: #000000; color: #000000;&quot; href=&quot;https://unsafelink.com/http://xAxis.Dot&quot;&gt;xAxis.Dot&lt;/a&gt;(cameraPosition),&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;yAxis.x, yAxis.y, yAxis.z, &lt;span&gt;-&lt;/span&gt;&lt;a style=&quot;background-color: #000000; color: #000000;&quot; href=&quot;https://unsafelink.com/http://yAxis.Dot&quot;&gt;yAxis.Dot&lt;/a&gt;(cameraPosition),&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;zAxis.x, zAxis.y, zAxis.z, &lt;span&gt;-&lt;/span&gt;&lt;a style=&quot;background-color: #000000; color: #000000;&quot; href=&quot;https://unsafelink.com/http://zAxis.Dot&quot;&gt;zAxis.Dot&lt;/a&gt;(cameraPosition),&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; view;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Matrix4x4 CreateProjection(&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; fov, &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; aspect, &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; nearZ, &lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; farZ)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; f &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;/&lt;/span&gt; tanf(fov &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;5f);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; rangeInv &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;/&lt;/span&gt; (nearZ &lt;span&gt;-&lt;/span&gt; farZ);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 projection &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;f &lt;span&gt;/&lt;/span&gt; aspect, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, (nearZ &lt;span&gt;+&lt;/span&gt; farZ) &lt;span&gt;*&lt;/span&gt; rangeInv, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, (&lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt; &lt;span&gt;*&lt;/span&gt; nearZ &lt;span&gt;*&lt;/span&gt; farZ) &lt;span&gt;*&lt;/span&gt; rangeInv, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; projection;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; SetVertexShader(PSInput(&lt;span&gt;*&lt;/span&gt;vertexShader)(&lt;span&gt;const&lt;/span&gt; Vertex&lt;span&gt;&amp;amp;&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.vertexShader &lt;span&gt;=&lt;/span&gt; vertexShader;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; SetPixelShader(GrayScale(&lt;span&gt;*&lt;/span&gt;pixelShader)(&lt;span&gt;const&lt;/span&gt; PSInput&lt;span&gt;&amp;amp;&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_context.pixelShader &lt;span&gt;=&lt;/span&gt; pixelShader;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;void&lt;/span&gt; Render(&lt;span&gt;const&lt;/span&gt; Vertex&lt;span&gt;*&lt;/span&gt; vertices, uint32_t vertexCount,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;const&lt;/span&gt; uint32_t&lt;span&gt;*&lt;/span&gt; indices, uint32_t indexCount)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;assert(g_context.vertexShader &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;&quot;Vertex shader not set&quot;&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;assert(g_context.pixelShader &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; &lt;span style=&quot;color: #63a35c;&quot;&gt;&quot;Pixel shader not set&quot;&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::&lt;span style=&quot;color: #066de2;&quot;&gt;vector&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;PSInput&lt;span&gt;&amp;gt;&lt;/span&gt; rasterizerInput;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;rasterizerInput.reserve(vertexCount);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// vertex shader&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (uint32_t i &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; i &lt;span&gt;&amp;lt;&lt;/span&gt; vertexCount; i&lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vertex vertex &lt;span&gt;=&lt;/span&gt; vertices[i];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput psInput &lt;span&gt;=&lt;/span&gt; g_context.vertexShader(vertex);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// perspective divide&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput.posH.x &lt;span&gt;/&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; psInput.posH.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput.posH.y &lt;span&gt;/&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; psInput.posH.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput.posH.z &lt;span&gt;/&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; psInput.posH.w;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput.posH.w &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// viewport transformation&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput.posH.x &lt;span&gt;=&lt;/span&gt; (psInput.posH.x &lt;span&gt;+&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f) &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;5f &lt;span&gt;*&lt;/span&gt; g_context.frontBuffer.width;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput.posH.y &lt;span&gt;=&lt;/span&gt; (&lt;span&gt;-&lt;/span&gt;psInput.posH.y &lt;span&gt;+&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f) &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;5f &lt;span&gt;*&lt;/span&gt; g_context.frontBuffer.height;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;rasterizerInput.emplace_back(psInput);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// rasterization&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (size_t i &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;; i &lt;span&gt;&amp;lt;&lt;/span&gt; indexCount &lt;span&gt;/&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;i)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput psInput1 &lt;span&gt;=&lt;/span&gt; rasterizerInput[indices[i &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;]];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput psInput2 &lt;span&gt;=&lt;/span&gt; rasterizerInput[indices[i &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt; &lt;span&gt;+&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;]];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput psInput3 &lt;span&gt;=&lt;/span&gt; rasterizerInput[indices[i &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt; &lt;span&gt;+&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;]];&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// back face culling&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 edge1 &lt;span&gt;=&lt;/span&gt; psInput2.posW &lt;span&gt;-&lt;/span&gt; psInput1.posW;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 edge2 &lt;span&gt;=&lt;/span&gt; psInput3.posW &lt;span&gt;-&lt;/span&gt; psInput1.posW;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 normal &lt;span&gt;=&lt;/span&gt; edge2.Cross(edge1);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (normal.z &lt;span&gt;&amp;gt;&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;continue&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// bounding box&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; minX &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::min({ psInput1.posH.x, psInput2.posH.x, psInput3.posH.x });&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; maxX &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::max({ psInput1.posH.x, psInput2.posH.x, psInput3.posH.x });&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; minY &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::min({ psInput1.posH.y, psInput2.posH.y, psInput3.posH.y });&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; maxY &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::max({ psInput1.posH.y, psInput2.posH.y, psInput3.posH.y });&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;minX &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::max(minX, &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;maxX &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::min(maxX, &lt;span&gt;static_cast&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;(g_context.frontBuffer.width) &lt;span&gt;-&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;minY &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::max(minY, &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;maxY &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::min(maxY, &lt;span&gt;static_cast&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;(g_context.frontBuffer.height) &lt;span&gt;-&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// triangle rasterization&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; y &lt;span&gt;=&lt;/span&gt; minY; y &lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; maxY; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;y)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;for&lt;/span&gt; (&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; x &lt;span&gt;=&lt;/span&gt; minX; x &lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; maxX; &lt;span&gt;+&lt;/span&gt;&lt;span&gt;+&lt;/span&gt;x)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// barycentric coordinates&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; alpha &lt;span&gt;=&lt;/span&gt; ((psInput2.posH.y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y) &lt;span&gt;*&lt;/span&gt; (x &lt;span&gt;-&lt;/span&gt; psInput3.posH.x) &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;(psInput3.posH.x &lt;span&gt;-&lt;/span&gt; psInput2.posH.x) &lt;span&gt;*&lt;/span&gt; (y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y)) &lt;span&gt;/&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;((psInput2.posH.y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y) &lt;span&gt;*&lt;/span&gt; (psInput1.posH.x &lt;span&gt;-&lt;/span&gt; psInput3.posH.x) &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;(psInput3.posH.x &lt;span&gt;-&lt;/span&gt; psInput2.posH.x) &lt;span&gt;*&lt;/span&gt; (psInput1.posH.y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; beta &lt;span&gt;=&lt;/span&gt; ((psInput3.posH.y &lt;span&gt;-&lt;/span&gt; psInput1.posH.y) &lt;span&gt;*&lt;/span&gt; (x &lt;span&gt;-&lt;/span&gt; psInput3.posH.x) &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;(psInput1.posH.x &lt;span&gt;-&lt;/span&gt; psInput3.posH.x) &lt;span&gt;*&lt;/span&gt; (y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y)) &lt;span&gt;/&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;((psInput2.posH.y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y) &lt;span&gt;*&lt;/span&gt; (psInput1.posH.x &lt;span&gt;-&lt;/span&gt; psInput3.posH.x) &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;(psInput3.posH.x &lt;span&gt;-&lt;/span&gt; psInput2.posH.x) &lt;span&gt;*&lt;/span&gt; (psInput1.posH.y &lt;span&gt;-&lt;/span&gt; psInput3.posH.y));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; gamma &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;-&lt;/span&gt; alpha &lt;span&gt;-&lt;/span&gt; beta;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (alpha &lt;span&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt; &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; beta &lt;span&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt; &lt;span&gt;&amp;amp;&lt;/span&gt;&lt;span&gt;&amp;amp;&lt;/span&gt; gamma &lt;span&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// interpolate color&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;uint8_t color &lt;span&gt;=&lt;/span&gt; &lt;span&gt;static_cast&lt;/span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;uint8_t&lt;span&gt;&amp;gt;&lt;/span&gt;(alpha &lt;span&gt;*&lt;/span&gt; psInput1.color.scale &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;beta &lt;span&gt;*&lt;/span&gt; psInput2.color.scale &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;gamma &lt;span&gt;*&lt;/span&gt; psInput3.color.scale);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; z &lt;span&gt;=&lt;/span&gt; alpha &lt;span&gt;*&lt;/span&gt; psInput1.posH.z &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;beta &lt;span&gt;*&lt;/span&gt; psInput2.posH.z &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;gamma &lt;span&gt;*&lt;/span&gt; psInput3.posH.z;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (&lt;span&gt;!&lt;/span&gt;DepthTest(z, x, y))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;continue&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput input;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posH.x &lt;span&gt;=&lt;/span&gt; x;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posH.y &lt;span&gt;=&lt;/span&gt; y;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posH.z &lt;span&gt;=&lt;/span&gt; z;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posH.w &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.color.scale &lt;span&gt;=&lt;/span&gt; color;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.normal &lt;span&gt;=&lt;/span&gt; psInput1.normal &lt;span&gt;*&lt;/span&gt; alpha &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput2.normal &lt;span&gt;*&lt;/span&gt; beta &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput3.normal &lt;span&gt;*&lt;/span&gt; gamma;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posW &lt;span&gt;=&lt;/span&gt; psInput1.posW &lt;span&gt;*&lt;/span&gt; alpha &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput2.posW &lt;span&gt;*&lt;/span&gt; beta &lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;psInput3.posW &lt;span&gt;*&lt;/span&gt; gamma;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// pixel shader&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;GrayScale output &lt;span&gt;=&lt;/span&gt; g_context.pixelShader(input);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;uint8_t grayScale &lt;span&gt;=&lt;/span&gt; output.scale &lt;span&gt;*&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;255.&lt;/span&gt;f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;DrawPixel(&lt;span&gt;&amp;amp;&lt;/span&gt;g_context.frontBuffer, x, y, grayScale);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #999999;&quot;&gt;//////////////////////////////////////////////////////////////////////////&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #999999;&quot;&gt;// cube&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Vertex vertices[&lt;span style=&quot;color: #0099cc;&quot;&gt;36&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// front&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// right&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// top&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// back&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// left&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// bottom&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } },&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{ { &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;f } }&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;uint32_t indices[&lt;span style=&quot;color: #0099cc;&quot;&gt;36&lt;/span&gt;] &lt;span&gt;=&lt;/span&gt; {&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;1&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;2&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;3&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;5&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;6&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;4&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;6&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;7&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;8&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;9&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;10&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;8&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;10&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;11&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;12&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;13&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;14&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;12&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;14&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;15&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;16&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;17&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;18&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;16&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;18&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;19&lt;/span&gt;,&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;20&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;21&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;22&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;20&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;22&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;23&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;};&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Transform&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 translate;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 yawPitchRoll;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 scale;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;} g_transform &lt;span&gt;=&lt;/span&gt; { { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f } };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;Transform g_cameraTransform &lt;span&gt;=&lt;/span&gt; { { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;15.&lt;/span&gt;f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f }, { &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f } };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span&gt;struct&lt;/span&gt; Uniforms&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 worldMatrix;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 worldInverseTransposeMatrix;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 viewMatrix;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 projectionMatrix;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 lightPosition;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 cameraPosition;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;} g_uniforms;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;PSInput VertexShader(&lt;span&gt;const&lt;/span&gt; Vertex&lt;span&gt;&amp;amp;&lt;/span&gt; vertex)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 posW &lt;span&gt;=&lt;/span&gt; TransformVector(g_uniforms.worldMatrix, vertex.posL).ToVec3();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 normalW &lt;span&gt;=&lt;/span&gt; TransformVector(g_uniforms.worldInverseTransposeMatrix, vertex.normal).ToVec3();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Matrix4x4 projViewMatrix &lt;span&gt;=&lt;/span&gt; Multiply(g_uniforms.projectionMatrix, g_uniforms.viewMatrix);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec4 posP &lt;span&gt;=&lt;/span&gt; TransformVector(projViewMatrix, posW);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PSInput input;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posH &lt;span&gt;=&lt;/span&gt; posP;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.posW &lt;span&gt;=&lt;/span&gt; posW;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.normal &lt;span&gt;=&lt;/span&gt; normalW;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;input.color &lt;span&gt;=&lt;/span&gt; vertex.color;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; input;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;GrayScale PixelShader(&lt;span&gt;const&lt;/span&gt; PSInput&lt;span&gt;&amp;amp;&lt;/span&gt; input)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;GrayScale output;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 normal &lt;span&gt;=&lt;/span&gt; input.normal.Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 lightDir &lt;span&gt;=&lt;/span&gt; (g_uniforms.lightPosition &lt;span&gt;-&lt;/span&gt; input.posW).Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 toEye &lt;span&gt;=&lt;/span&gt; (g_uniforms.cameraPosition &lt;span&gt;-&lt;/span&gt; input.posW).Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Vec3 halfVector &lt;span&gt;=&lt;/span&gt; (lightDir &lt;span&gt;+&lt;/span&gt; toEye).Normalize();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; diffuse &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::max(&lt;a style=&quot;background-color: #000000; color: #000000;&quot; href=&quot;https://unsafelink.com/http://normal.Dot&quot;&gt;normal.Dot&lt;/a&gt;(lightDir), &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #066de2;&quot;&gt;float&lt;/span&gt; ambient &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;2f;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;output.scale &lt;span&gt;=&lt;/span&gt; ambient &lt;span&gt;+&lt;/span&gt; diffuse;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;output.scale &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::max(output.scale, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;output.scale &lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::min(output.scale, &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;return&lt;/span&gt; output;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&lt;span style=&quot;color: #066de2;&quot;&gt;int&lt;/span&gt; main()&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;InitContext(&lt;span style=&quot;color: #0099cc;&quot;&gt;240&lt;/span&gt;, &lt;span style=&quot;color: #0099cc;&quot;&gt;80&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition &lt;span&gt;=&lt;/span&gt; { &lt;span style=&quot;color: #0099cc;&quot;&gt;5.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;5.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;5.&lt;/span&gt;0f };&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;SetVertexShader(VertexShader);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;SetPixelShader(PixelShader);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;while&lt;/span&gt; (&lt;span&gt;true&lt;/span&gt;)&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;UpdateInput();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;UpdateTimer();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(VK_ESCAPE))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;break&lt;/span&gt;;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;ClearScreenBuffer(&lt;span&gt;&amp;amp;&lt;/span&gt;g_context.frontBuffer, &lt;span style=&quot;color: #0099cc;&quot;&gt;0&lt;/span&gt;);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;ClearDepthBuffer(&lt;span&gt;&amp;amp;&lt;/span&gt;g_context.frontBuffer, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;f);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// Translate&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(VK_LEFT))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.translate.x &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(VK_RIGHT))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.translate.x &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(VK_UP))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.translate.y &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(VK_DOWN))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.translate.y &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// Rotate&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'A'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.yawPitchRoll.y &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'D'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.yawPitchRoll.y &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'W'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.yawPitchRoll.x &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'S'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.yawPitchRoll.x &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// Scale&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'Q'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.scale.x &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.scale.y &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'E'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;{&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.scale.x &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_transform.scale.y &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// camera position&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'Z'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_cameraTransform.translate.z &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'X'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_cameraTransform.translate.z &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #999999;&quot;&gt;// light position&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'I'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition.z &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'K'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition.z &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'J'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition.x &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'L'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition.x &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'U'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition.y &lt;span&gt;-&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;if&lt;/span&gt; (IsKeyDown(&lt;span style=&quot;color: #63a35c;&quot;&gt;'O'&lt;/span&gt;))&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.lightPosition.y &lt;span&gt;+&lt;/span&gt;&lt;span&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f &lt;span&gt;*&lt;/span&gt; g_context.deltaTime;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.worldMatrix &lt;span&gt;=&lt;/span&gt; CreateWorld(g_transform.translate, g_transform.yawPitchRoll, g_transform.scale);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.worldInverseTransposeMatrix &lt;span&gt;=&lt;/span&gt; Invert(Transpose(g_uniforms.worldMatrix));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.viewMatrix &lt;span&gt;=&lt;/span&gt; CreateView(g_cameraTransform.translate, { &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;0f, &lt;span&gt;-&lt;/span&gt;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;0f });&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.projectionMatrix &lt;span&gt;=&lt;/span&gt; CreateProjection(DEG2RAD(&lt;span style=&quot;color: #0099cc;&quot;&gt;60.&lt;/span&gt;f),&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style=&quot;color: #0099cc;&quot;&gt;1.&lt;/span&gt;66f, &lt;span style=&quot;color: #0099cc;&quot;&gt;0.&lt;/span&gt;1f, &lt;span style=&quot;color: #0099cc;&quot;&gt;100.&lt;/span&gt;f);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;g_uniforms.cameraPosition &lt;span&gt;=&lt;/span&gt; g_cameraTransform.translate;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Render(vertices, &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::&lt;span style=&quot;color: #066de2;&quot;&gt;size&lt;/span&gt;(vertices), indices, &lt;span style=&quot;color: #066de2;&quot;&gt;std&lt;/span&gt;::&lt;span style=&quot;color: #066de2;&quot;&gt;size&lt;/span&gt;(indices));&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;PresentToConsole(&lt;span&gt;&amp;amp;&lt;/span&gt;g_context.frontBuffer);&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;ReleaseContext();&lt;/div&gt;
&lt;div style=&quot;background-color: #222222; color: #d3d3d3; text-align: left;&quot;&gt;}&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/197</guid>
      <comments>https://powerclabman.tistory.com/197#entry197comment</comments>
      <pubDate>Thu, 17 Apr 2025 14:43:52 +0900</pubDate>
    </item>
    <item>
      <title>Screen Space Ambient Occulusion</title>
      <link>https://powerclabman.tistory.com/196</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;356&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/sCs6i/btsNjbOj5Ok/w48NIQ7O7kaqelAjHjmujK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/sCs6i/btsNjbOj5Ok/w48NIQ7O7kaqelAjHjmujK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/sCs6i/btsNjbOj5Ok/w48NIQ7O7kaqelAjHjmujK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsCs6i%2FbtsNjbOj5Ok%2Fw48NIQ7O7kaqelAjHjmujK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;600&quot; height=&quot;356&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;356&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇게 눈에 띄는 효과는 아니지만&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;없으면 허전한게 앰비언트 오클루전 인 것 같습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;400&quot; data-origin-height=&quot;209&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cbiwMV/btsNkusnVUl/ko0yPSo46v4krrs74AAgjk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cbiwMV/btsNkusnVUl/ko0yPSo46v4krrs74AAgjk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cbiwMV/btsNkusnVUl/ko0yPSo46v4krrs74AAgjk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbiwMV%2FbtsNkusnVUl%2Fko0yPSo46v4krrs74AAgjk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;400&quot; height=&quot;209&quot; data-origin-width=&quot;400&quot; data-origin-height=&quot;209&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;반구형 오프셋 커널을 만들어서&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재 픽셀을 일정 오프셋만큼 이동시켜줍니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그 다음 해당 픽셀의 깊이와 뎁스 버퍼에 저장된 깊이를 비교하여&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;뎁스 버퍼에 저장된 깊이가 더 얕다면 오클루전 팩터에 1씩 더합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이것은 현재 픽셀 주변에 나를 가리는 차폐체가 있다는 것을 의미합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇게 게산하면&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1910&quot; data-origin-height=&quot;1093&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dYFYTc/btsNi0e2FIv/L9M8D9DI1ugcq5GeVkerk1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dYFYTc/btsNi0e2FIv/L9M8D9DI1ugcq5GeVkerk1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dYFYTc/btsNi0e2FIv/L9M8D9DI1ugcq5GeVkerk1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdYFYTc%2FbtsNi0e2FIv%2FL9M8D9DI1ugcq5GeVkerk1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1910&quot; height=&quot;1093&quot; data-origin-width=&quot;1910&quot; data-origin-height=&quot;1093&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 장면에서&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1293&quot; data-origin-height=&quot;737&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dTrYhI/btsNkLG5fdY/SqwbV8Dk1GkdJNiv2kMAlK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dTrYhI/btsNkLG5fdY/SqwbV8Dk1GkdJNiv2kMAlK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dTrYhI/btsNkLG5fdY/SqwbV8Dk1GkdJNiv2kMAlK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdTrYhI%2FbtsNkLG5fdY%2FSqwbV8Dk1GkdJNiv2kMAlK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1293&quot; height=&quot;737&quot; data-origin-width=&quot;1293&quot; data-origin-height=&quot;737&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 차폐 정도를 계산할 수 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이걸 라이팅 과정에서 앰비언트 부분에 곱해주면 SSAO 완성입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cJUyRJ/btsNi4ItTEH/kGcAvZut9gkgug0Cm9vfz0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cJUyRJ/btsNi4ItTEH/kGcAvZut9gkgug0Cm9vfz0/img.png&quot; data-origin-width=&quot;1104&quot; data-origin-height=&quot;819&quot; data-is-animation=&quot;false&quot; style=&quot;width: 48.3183%; margin-right: 10px;&quot; data-widthpercent=&quot;48.89&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cJUyRJ/btsNi4ItTEH/kGcAvZut9gkgug0Cm9vfz0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcJUyRJ%2FbtsNi4ItTEH%2FkGcAvZut9gkgug0Cm9vfz0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1104&quot; height=&quot;819&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bd1KFK/btsNjOdORL5/mGNuXjcFdCwsHD1gSFmbhk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bd1KFK/btsNjOdORL5/mGNuXjcFdCwsHD1gSFmbhk/img.png&quot; data-origin-width=&quot;1112&quot; data-origin-height=&quot;789&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;51.11&quot; style=&quot;width: 50.5189%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bd1KFK/btsNjOdORL5/mGNuXjcFdCwsHD1gSFmbhk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbd1KFK%2FbtsNjOdORL5%2FmGNuXjcFdCwsHD1gSFmbhk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1112&quot; height=&quot;789&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;좌: AO 가 적용되지 않음&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우: AO 가 적용됨&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;차이가 좀 있는지요..?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;제 눈에는 조금 납니다&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/wkLBR/btsNjJbUR3U/5ajhijagTHeEMT4xcGpfHK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/wkLBR/btsNjJbUR3U/5ajhijagTHeEMT4xcGpfHK/img.png&quot; data-origin-width=&quot;816&quot; data-origin-height=&quot;574&quot; data-is-animation=&quot;false&quot; style=&quot;width: 50.638%; margin-right: 10px;&quot; data-widthpercent=&quot;51.23&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/wkLBR/btsNjJbUR3U/5ajhijagTHeEMT4xcGpfHK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwkLBR%2FbtsNjJbUR3U%2F5ajhijagTHeEMT4xcGpfHK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;816&quot; height=&quot;574&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JS60l/btsNjAmywB1/Kt3kkC0D9DbJE2TzOMAIM0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JS60l/btsNjAmywB1/Kt3kkC0D9DbJE2TzOMAIM0/img.png&quot; data-origin-width=&quot;820&quot; data-origin-height=&quot;606&quot; data-is-animation=&quot;false&quot; style=&quot;width: 48.1992%;&quot; data-widthpercent=&quot;48.77&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JS60l/btsNjAmywB1/Kt3kkC0D9DbJE2TzOMAIM0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJS60l%2FbtsNjAmywB1%2FKt3kkC0D9DbJE2TzOMAIM0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;820&quot; height=&quot;606&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;좌: AO 가 적용되지 않음&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우: AO 가 적용됨&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재는 샘플링수가 64, 노이즈의 크기는 4입니다. 꽤나 고품질이죠.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;846&quot; data-origin-height=&quot;398&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bkPwgJ/btsNjN0lMvH/wmZMsGT586LjDmMtKQIYd1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bkPwgJ/btsNjN0lMvH/wmZMsGT586LjDmMtKQIYd1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bkPwgJ/btsNjN0lMvH/wmZMsGT586LjDmMtKQIYd1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkPwgJ%2FbtsNjN0lMvH%2FwmZMsGT586LjDmMtKQIYd1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;846&quot; height=&quot;398&quot; data-origin-width=&quot;846&quot; data-origin-height=&quot;398&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;잘보면 AO 텍스처에 아티펙터같은게 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;블러링을 시도해봤습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;916&quot; data-origin-height=&quot;432&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ddYjWF/btsNjbOkSJl/I0PCS4yWKCPpsSpQ9lXHvK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ddYjWF/btsNjbOkSJl/I0PCS4yWKCPpsSpQ9lXHvK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ddYjWF/btsNjbOkSJl/I0PCS4yWKCPpsSpQ9lXHvK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FddYjWF%2FbtsNjbOkSJl%2FI0PCS4yWKCPpsSpQ9lXHvK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;916&quot; height=&quot;432&quot; data-origin-width=&quot;916&quot; data-origin-height=&quot;432&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;블러링을 해주면 아티펙트는 확실히 사라지는데 경계가 생깁니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다른 블러를 사용해야겠습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저는 Separable Bilateral Blur 라는 블러를 사용해봤습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;기본적으로 가우시안 블러를 사용하는데, 픽셀 간의 깊이 차이를 고려하여 경계부분은 블러처리가 되지 않습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1010&quot; data-origin-height=&quot;348&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/EBTcv/btsNk56ES7R/eaarIAO3J6qunovepjejF1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/EBTcv/btsNk56ES7R/eaarIAO3J6qunovepjejF1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/EBTcv/btsNk56ES7R/eaarIAO3J6qunovepjejF1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEBTcv%2FbtsNk56ES7R%2FeaarIAO3J6qunovepjejF1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1010&quot; height=&quot;348&quot; data-origin-width=&quot;1010&quot; data-origin-height=&quot;348&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;블러가 없을 때&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1103&quot; data-origin-height=&quot;428&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Hx8KP/btsNlgGRbm9/zVB970ezONFQ4mt2kKV8O0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Hx8KP/btsNlgGRbm9/zVB970ezONFQ4mt2kKV8O0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Hx8KP/btsNlgGRbm9/zVB970ezONFQ4mt2kKV8O0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHx8KP%2FbtsNlgGRbm9%2FzVB970ezONFQ4mt2kKV8O0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1103&quot; height=&quot;428&quot; data-origin-width=&quot;1103&quot; data-origin-height=&quot;428&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;블러가 있을 때&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;격자 무늬가 사라진 것으로 만족입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;889&quot; data-origin-height=&quot;521&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/qKT6c/btsNkG7mJCi/bCsoSskK3EmYJI5hHnkfh0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/qKT6c/btsNkG7mJCi/bCsoSskK3EmYJI5hHnkfh0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/qKT6c/btsNkG7mJCi/bCsoSskK3EmYJI5hHnkfh0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqKT6c%2FbtsNkG7mJCi%2FbCsoSskK3EmYJI5hHnkfh0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;889&quot; height=&quot;521&quot; data-origin-width=&quot;889&quot; data-origin-height=&quot;521&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;블러가 없을 때&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;892&quot; data-origin-height=&quot;641&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/2ldpC/btsNjbVgeBk/5qTClhPP3oBVHhi0tTx7k1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/2ldpC/btsNjbVgeBk/5qTClhPP3oBVHhi0tTx7k1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/2ldpC/btsNjbVgeBk/5qTClhPP3oBVHhi0tTx7k1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2ldpC%2FbtsNjbVgeBk%2F5qTClhPP3oBVHhi0tTx7k1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;892&quot; height=&quot;641&quot; data-origin-width=&quot;892&quot; data-origin-height=&quot;641&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;블러가 있을 때&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;확실히 깔끔해진 모양&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;429&quot; data-origin-height=&quot;191&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Z1dSz/btsNi2KTQMx/VwrXJK7zczXfBPfkoK8yTK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Z1dSz/btsNi2KTQMx/VwrXJK7zczXfBPfkoK8yTK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Z1dSz/btsNi2KTQMx/VwrXJK7zczXfBPfkoK8yTK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZ1dSz%2FbtsNi2KTQMx%2FVwrXJK7zczXfBPfkoK8yTK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;429&quot; height=&quot;191&quot; data-origin-width=&quot;429&quot; data-origin-height=&quot;191&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우려하던 경계 현상도 없어졌습니다.&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/196</guid>
      <comments>https://powerclabman.tistory.com/196#entry196comment</comments>
      <pubDate>Mon, 14 Apr 2025 13:15:05 +0900</pubDate>
    </item>
    <item>
      <title>라이트 볼륨을 이용한 대규모 라이팅</title>
      <link>https://powerclabman.tistory.com/195</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;figure data-ke-type=&quot;video&quot; data-ke-style=&quot;alignCenter&quot; data-video-host=&quot;kakaotv&quot; data-video-url=&quot;https://tv.kakao.com/v/454363260&quot; data-video-thumbnail=&quot;https://scrap.kakaocdn.net/dn/DQVdH/hyYCin0DtL/AZkqcsxWpayLOeaMvoAfb0/img.jpg?width=1216&amp;amp;height=720&amp;amp;face=0_0_1216_720,https://scrap.kakaocdn.net/dn/cb0ojm/hyYExEHc1g/9diT016E31KBPFFD5rbFl1/img.jpg?width=1216&amp;amp;height=720&amp;amp;face=0_0_1216_720&quot; data-video-width=&quot;860&quot; data-video-height=&quot;509&quot; data-video-origin-width=&quot;860&quot; data-video-origin-height=&quot;509&quot; data-ke-mobilestyle=&quot;widthContent&quot; data-video-title=&quot;'개발하는 리프터 꽃게맨입니다.'에서 업로드한 동영상&quot; data-video-play-service=&quot;daum_tistory&quot; data-original-url=&quot;&quot;&gt;&lt;iframe src=&quot;https://play-tv.kakao.com/embed/player/cliplink/454363260?service=daum_tistory&quot; width=&quot;860&quot; height=&quot;509&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;figcaption style=&quot;display: none;&quot;&gt;&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;(그림자를 만들어내지 않는..) 빛 무려 1000개를 렌더링해도 60 프레임 유지!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/195</guid>
      <comments>https://powerclabman.tistory.com/195#entry195comment</comments>
      <pubDate>Sun, 13 Apr 2025 01:41:23 +0900</pubDate>
    </item>
    <item>
      <title>라이트매핑 테스트 (Light Map)</title>
      <link>https://powerclabman.tistory.com/194</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1883&quot; data-origin-height=&quot;1096&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Sqh38/btsNgB6OAYN/0kse69t9DiA04eDWCn2Axk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Sqh38/btsNgB6OAYN/0kse69t9DiA04eDWCn2Axk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Sqh38/btsNgB6OAYN/0kse69t9DiA04eDWCn2Axk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSqh38%2FbtsNgB6OAYN%2F0kse69t9DiA04eDWCn2Axk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1883&quot; height=&quot;1096&quot; data-origin-width=&quot;1883&quot; data-origin-height=&quot;1096&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;조금 어둡네요 Direct Light 와 합치면 꽤나 자연스러울 것 같습니다.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1886&quot; data-origin-height=&quot;1085&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bsYrKv/btsNfQKjlYj/GeOkUAH2eA6L81EYJogr61/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bsYrKv/btsNfQKjlYj/GeOkUAH2eA6L81EYJogr61/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bsYrKv/btsNfQKjlYj/GeOkUAH2eA6L81EYJogr61/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbsYrKv%2FbtsNfQKjlYj%2FGeOkUAH2eA6L81EYJogr61%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1886&quot; height=&quot;1085&quot; data-origin-width=&quot;1886&quot; data-origin-height=&quot;1085&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;숲 환경에서 렌더링하니까 매우 자연스럽습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1901&quot; data-origin-height=&quot;1102&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cbrpNm/btsNfRWQYtg/zr1K1UUVIGKzl1D01jiO2k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cbrpNm/btsNfRWQYtg/zr1K1UUVIGKzl1D01jiO2k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cbrpNm/btsNfRWQYtg/zr1K1UUVIGKzl1D01jiO2k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbrpNm%2FbtsNfRWQYtg%2Fzr1K1UUVIGKzl1D01jiO2k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1901&quot; height=&quot;1102&quot; data-origin-width=&quot;1901&quot; data-origin-height=&quot;1102&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;가장 보기 좋네요&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1878&quot; data-origin-height=&quot;1098&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bn8TgU/btsNgiMxO8U/4Y785fLhm3gQJNGYsUhvz0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bn8TgU/btsNgiMxO8U/4Y785fLhm3gQJNGYsUhvz0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bn8TgU/btsNgiMxO8U/4Y785fLhm3gQJNGYsUhvz0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbn8TgU%2FbtsNgiMxO8U%2F4Y785fLhm3gQJNGYsUhvz0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1878&quot; height=&quot;1098&quot; data-origin-width=&quot;1878&quot; data-origin-height=&quot;1098&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;퐁 모델 기반이라 그런지&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;PBR 과는 잘 안어울리는 것 같습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;쉐이더를 바꿔주거나, IBL 적용을 disable 시켜주면 훨 씬 자연스러울듯합니다.&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/194</guid>
      <comments>https://powerclabman.tistory.com/194#entry194comment</comments>
      <pubDate>Fri, 11 Apr 2025 03:08:20 +0900</pubDate>
    </item>
    <item>
      <title>대규모 모델 로딩 테스트</title>
      <link>https://powerclabman.tistory.com/193</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1908&quot; data-origin-height=&quot;1069&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bCaGPd/btsNbisMZ9J/MiGOORRBSECgkk5f7g1FoK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bCaGPd/btsNbisMZ9J/MiGOORRBSECgkk5f7g1FoK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bCaGPd/btsNbisMZ9J/MiGOORRBSECgkk5f7g1FoK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCaGPd%2FbtsNbisMZ9J%2FMiGOORRBSECgkk5f7g1FoK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1908&quot; height=&quot;1069&quot; data-origin-width=&quot;1908&quot; data-origin-height=&quot;1069&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/193</guid>
      <comments>https://powerclabman.tistory.com/193#entry193comment</comments>
      <pubDate>Mon, 7 Apr 2025 16:50:47 +0900</pubDate>
    </item>
    <item>
      <title>FlatBuffers 를 이용한 모델 로딩 최적화</title>
      <link>https://powerclabman.tistory.com/192</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1895&quot; data-origin-height=&quot;1061&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Ve08K/btsNaaOVggC/VfXYZcWPxpsS6M7RIlogOk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Ve08K/btsNaaOVggC/VfXYZcWPxpsS6M7RIlogOk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Ve08K/btsNaaOVggC/VfXYZcWPxpsS6M7RIlogOk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVe08K%2FbtsNaaOVggC%2FVfXYZcWPxpsS6M7RIlogOk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1895&quot; height=&quot;1061&quot; data-origin-width=&quot;1895&quot; data-origin-height=&quot;1061&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;3D 모델을 로딩한다고 하면 일반적으로 assimp를 이용해 fbx나 obj 파일을 로딩합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;fbx obj 의 경우 내부 데이터가 굉장히 복잡하기 떄문에 로딩하는데 다소 시간이 걸립니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;만약 소프트웨어에서 필요한 데이터만 로딩할 수 있따면 로딩하는 시간이 훨씬 줄어듭니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 fbx 파일을 로딩하는데 걸리는 시간을 보겠습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1229&quot; data-origin-height=&quot;93&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bSADRk/btsM7hurfH3/u2fX41vQKKqEJWGdvTZKHK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bSADRk/btsM7hurfH3/u2fX41vQKKqEJWGdvTZKHK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bSADRk/btsM7hurfH3/u2fX41vQKKqEJWGdvTZKHK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSADRk%2FbtsM7hurfH3%2Fu2fX41vQKKqEJWGdvTZKHK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1229&quot; height=&quot;93&quot; data-origin-width=&quot;1229&quot; data-origin-height=&quot;93&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;드래곤 모델을 로딩하는데 1.586초가 소모되었습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;736&quot; data-origin-height=&quot;209&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bVkocF/btsM9BNgGmV/VwE3Iasr5wMOXcqrtNfDvK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bVkocF/btsM9BNgGmV/VwE3Iasr5wMOXcqrtNfDvK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bVkocF/btsM9BNgGmV/VwE3Iasr5wMOXcqrtNfDvK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbVkocF%2FbtsM9BNgGmV%2FVwE3Iasr5wMOXcqrtNfDvK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;736&quot; height=&quot;209&quot; data-origin-width=&quot;736&quot; data-origin-height=&quot;209&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참고로 해당 모델은 약 114000 개 가량의 버텍스와 인덱스를 가지고 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;최초에는 Josn을 이용하여 버텍스(위치, 법선, 탄젠트, 비탄젠트, uv, 노말) 과 머테리얼 속성 (PBR 및 Phong, 텍스처 경로)를 저장했는데, 커스텀 타입의 저장 및 불러오기 시간이 과하게 많이 걸렸습니다. (파일 크기도 크구요)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그래서 선택한 것이 바이너리로 데이터를 저장하는 것이었습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그 과정에서 사용한 것은 구글의 FlatBuffers 라는 라이브러리입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://github.com/google/flatbuffers&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://github.com/google/flatbuffers&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1743820365318&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;object&quot; data-og-title=&quot;GitHub - google/flatbuffers: FlatBuffers: Memory Efficient Serialization Library&quot; data-og-description=&quot;FlatBuffers: Memory Efficient Serialization Library - google/flatbuffers&quot; data-og-host=&quot;github.com&quot; data-og-source-url=&quot;https://github.com/google/flatbuffers&quot; data-og-url=&quot;https://github.com/google/flatbuffers&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/28GlV/hyYCfQI0OS/pjwaf9hYKpjBVORQ4FaUC0/img.png?width=700&amp;amp;height=700&amp;amp;face=0_0_700_700,https://scrap.kakaocdn.net/dn/c04gNk/hyYBaI7vKi/bhbCWpuCtMk3PNk74cKob1/img.png?width=700&amp;amp;height=700&amp;amp;face=0_0_700_700&quot;&gt;&lt;a href=&quot;https://github.com/google/flatbuffers&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://github.com/google/flatbuffers&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/28GlV/hyYCfQI0OS/pjwaf9hYKpjBVORQ4FaUC0/img.png?width=700&amp;amp;height=700&amp;amp;face=0_0_700_700,https://scrap.kakaocdn.net/dn/c04gNk/hyYBaI7vKi/bhbCWpuCtMk3PNk74cKob1/img.png?width=700&amp;amp;height=700&amp;amp;face=0_0_700_700');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;GitHub - google/flatbuffers: FlatBuffers: Memory Efficient Serialization Library&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;FlatBuffers: Memory Efficient Serialization Library - google/flatbuffers&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;github.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;837&quot; data-origin-height=&quot;735&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dotMU9/btsNbcEK2pQ/u6HNSygEwM0mqC2cwninYk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dotMU9/btsNbcEK2pQ/u6HNSygEwM0mqC2cwninYk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dotMU9/btsNbcEK2pQ/u6HNSygEwM0mqC2cwninYk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdotMU9%2FbtsNbcEK2pQ%2Fu6HNSygEwM0mqC2cwninYk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;837&quot; height=&quot;735&quot; data-origin-width=&quot;837&quot; data-origin-height=&quot;735&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이런 식으로 데이터 스키마를 정의한 다음에&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1974&quot; data-origin-height=&quot;815&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bGq2TG/btsM91Y1UfG/uEHAa3DKDsRJ8YJ3Oh8C3K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bGq2TG/btsM91Y1UfG/uEHAa3DKDsRJ8YJ3Oh8C3K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bGq2TG/btsM91Y1UfG/uEHAa3DKDsRJ8YJ3Oh8C3K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGq2TG%2FbtsM91Y1UfG%2FuEHAa3DKDsRJ8YJ3Oh8C3K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1974&quot; height=&quot;815&quot; data-origin-width=&quot;1974&quot; data-origin-height=&quot;815&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;열심히 exporter와 importer를 만들어줍니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;793&quot; data-origin-height=&quot;469&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b7juB8/btsM9EXmbdI/XjkdO3BFSXU144sXEaDPkk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b7juB8/btsM9EXmbdI/XjkdO3BFSXU144sXEaDPkk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b7juB8/btsM9EXmbdI/XjkdO3BFSXU144sXEaDPkk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7juB8%2FbtsM9EXmbdI%2FXjkdO3BFSXU144sXEaDPkk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;793&quot; height=&quot;469&quot; data-origin-width=&quot;793&quot; data-origin-height=&quot;469&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;결과입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;export 는 0.124초&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;import 는 0.109초 걸렸습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;기존 방법과 비교하면&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1.586 -&amp;gt; 0.109&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;14.5배 가량 빨라졌습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;조금 더 큰 모델을 대상으로 진행해보겠습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2039&quot; data-origin-height=&quot;1075&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bK0zsT/btsM97kqL0q/Ddu0cjC2CvmquqbzkRP9E0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bK0zsT/btsM97kqL0q/Ddu0cjC2CvmquqbzkRP9E0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bK0zsT/btsM97kqL0q/Ddu0cjC2CvmquqbzkRP9E0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbK0zsT%2FbtsM97kqL0q%2FDdu0cjC2CvmquqbzkRP9E0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2039&quot; height=&quot;1075&quot; data-origin-width=&quot;2039&quot; data-origin-height=&quot;1075&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;로드하는데 6초정도 걸리는 모델을 임포트해봤는데요&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 모델을 바이너리 방식으로 변환후 입력받으면..&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1075&quot; data-origin-height=&quot;379&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/wSL7e/btsNaMzMlFK/H9lKamdKIsS5SsoBMJZ8UK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/wSL7e/btsNaMzMlFK/H9lKamdKIsS5SsoBMJZ8UK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/wSL7e/btsNaMzMlFK/H9lKamdKIsS5SsoBMJZ8UK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwSL7e%2FbtsNaMzMlFK%2FH9lKamdKIsS5SsoBMJZ8UK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1075&quot; height=&quot;379&quot; data-origin-width=&quot;1075&quot; data-origin-height=&quot;379&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;익스포트에 0.736초&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;964&quot; data-origin-height=&quot;131&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bnk5TQ/btsNaclCSOw/Y8UG1z3rVkcGyKsCZvcViK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bnk5TQ/btsNaclCSOw/Y8UG1z3rVkcGyKsCZvcViK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bnk5TQ/btsNaclCSOw/Y8UG1z3rVkcGyKsCZvcViK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbnk5TQ%2FbtsNaclCSOw%2FY8UG1z3rVkcGyKsCZvcViK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;964&quot; height=&quot;131&quot; data-origin-width=&quot;964&quot; data-origin-height=&quot;131&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;임포트에 0.68초 걸립니다.&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/192</guid>
      <comments>https://powerclabman.tistory.com/192#entry192comment</comments>
      <pubDate>Sat, 5 Apr 2025 13:16:05 +0900</pubDate>
    </item>
    <item>
      <title>Fast Approximate Anti-Aliasing</title>
      <link>https://powerclabman.tistory.com/191</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;결과 먼저 확인하겠습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1428&quot; data-origin-height=&quot;370&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/niKyh/btsM4kxrY6V/g37i6LBagPlIuIZahrjBLK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/niKyh/btsM4kxrY6V/g37i6LBagPlIuIZahrjBLK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/niKyh/btsM4kxrY6V/g37i6LBagPlIuIZahrjBLK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FniKyh%2FbtsM4kxrY6V%2Fg37i6LBagPlIuIZahrjBLK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1428&quot; height=&quot;370&quot; data-origin-width=&quot;1428&quot; data-origin-height=&quot;370&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1: X&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2: 품질 중&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;3: 품질 상&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참고 문헌&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf&lt;/a&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;FXAA는 준수한 성능을 보이면서 매우 성능이 좋은 안티에일리어싱 기법입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;FXAA는 LDR로 변환된 후의 디스플레이용 sRGB 색 공간에 적용하라고 합니다. 즉 HDR -&amp;gt; LDR의 톤매핑 적용 후 이미지필터처럼 적용하는 것이지요&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;HDR 이미지에 바로 FXAA를 적용하면 제대로 적용되지 않는다고 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아무래도 FXAA는 광도와 휘도를 이용하는 알고리즘에다가 [0, 1] 범위에서 동작하는 것을 전제로하기에 [0, ~] 의 범위를 가지는 HDR에서는 안티에일리어싱이 적용되지 않은 것과 유사하다고 합니다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;안티앨리어싱의 원리는 다음과 같습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1. RGB 색상 데이터를 입력으로 받아 밝기 추정값으로 변환하고&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;634&quot; data-origin-height=&quot;595&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bCcxHx/btsM4S1swuP/WPEPoZkeHheyR1UHyrqseK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bCcxHx/btsM4S1swuP/WPEPoZkeHheyR1UHyrqseK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bCcxHx/btsM4S1swuP/WPEPoZkeHheyR1UHyrqseK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCcxHx%2FbtsM4S1swuP%2FWPEPoZkeHheyR1UHyrqseK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;634&quot; height=&quot;595&quot; data-origin-width=&quot;634&quot; data-origin-height=&quot;595&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2. FXAA는 지역적인 영역의 대비를 확인해서 엣지를 감지합니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;632&quot; data-origin-height=&quot;605&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cbXs8A/btsM2XbU4yQ/dNKcZkT5vnZL5KiM5dDrV0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cbXs8A/btsM2XbU4yQ/dNKcZkT5vnZL5KiM5dDrV0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cbXs8A/btsM2XbU4yQ/dNKcZkT5vnZL5KiM5dDrV0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbXs8A%2FbtsM2XbU4yQ%2FdNKcZkT5vnZL5KiM5dDrV0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;632&quot; height=&quot;605&quot; data-origin-width=&quot;632&quot; data-origin-height=&quot;605&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;br /&gt;3. 엣지를 수평성분과 수직 성분으로 분류합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;650&quot; data-origin-height=&quot;569&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cpLOrE/btsM5ZlfYIY/xaFPC1BbUvuaAiI2M01aj0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cpLOrE/btsM5ZlfYIY/xaFPC1BbUvuaAiI2M01aj0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cpLOrE/btsM5ZlfYIY/xaFPC1BbUvuaAiI2M01aj0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcpLOrE%2FbtsM5ZlfYIY%2FxaFPC1BbUvuaAiI2M01aj0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;650&quot; height=&quot;569&quot; data-origin-width=&quot;650&quot; data-origin-height=&quot;569&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;4. 엣지의 방향을 이용하여 대비가 가장 높은 픽셀만 선별합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;605&quot; data-origin-height=&quot;583&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bGt3qE/btsM4fbOKpj/bBWewPQN29nFBO2gsrrAMk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bGt3qE/btsM4fbOKpj/bBWewPQN29nFBO2gsrrAMk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bGt3qE/btsM4fbOKpj/bBWewPQN29nFBO2gsrrAMk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGt3qE%2FbtsM4fbOKpj%2FbBWewPQN29nFBO2gsrrAMk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;605&quot; height=&quot;583&quot; data-origin-width=&quot;605&quot; data-origin-height=&quot;583&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;619&quot; data-origin-height=&quot;565&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/lhwr9/btsM5mH1Xhn/wq2FzZbP22kihpk61z368k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/lhwr9/btsM5mH1Xhn/wq2FzZbP22kihpk61z368k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/lhwr9/btsM5mH1Xhn/wq2FzZbP22kihpk61z368k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Flhwr9%2FbtsM5mH1Xhn%2Fwq2FzZbP22kihpk61z368k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;619&quot; height=&quot;565&quot; data-origin-width=&quot;619&quot; data-origin-height=&quot;565&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;5. 엣지의 끝을 기준으로 엣지의 오프셋을 계산합니다. 이 오프셋을 통해서 입력 텍스처를 다시 샘플링합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;721&quot; data-origin-height=&quot;736&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cBx92Q/btsM4btGTGC/41GIKmsqrZe1Z6AZR1ATp0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cBx92Q/btsM4btGTGC/41GIKmsqrZe1Z6AZR1ATp0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cBx92Q/btsM4btGTGC/41GIKmsqrZe1Z6AZR1ATp0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcBx92Q%2FbtsM4btGTGC%2F41GIKmsqrZe1Z6AZR1ATp0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;721&quot; height=&quot;736&quot; data-origin-width=&quot;721&quot; data-origin-height=&quot;736&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;772&quot; data-origin-height=&quot;781&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/THUIt/btsM4sIJFiY/MFRdeL1Co7GkWBuvQKxcW0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/THUIt/btsM4sIJFiY/MFRdeL1Co7GkWBuvQKxcW0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/THUIt/btsM4sIJFiY/MFRdeL1Co7GkWBuvQKxcW0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTHUIt%2FbtsM4sIJFiY%2FMFRdeL1Co7GkWBuvQKxcW0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;772&quot; height=&quot;781&quot; data-origin-width=&quot;772&quot; data-origin-height=&quot;781&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;있는 것과 없는 것은 차이가 좀 큽니다. (??)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;제 눈에는 예.. 좀 큽니다 ^^!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2D 이미지는 몰라도&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;확실히 3D 이미지는 안티 앨리어싱이 적용된것이 훨씬 그럴듯해보입니다.&lt;/p&gt;</description>
      <category>컴퓨터 그래픽스</category>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/191</guid>
      <comments>https://powerclabman.tistory.com/191#entry191comment</comments>
      <pubDate>Wed, 2 Apr 2025 02:37:09 +0900</pubDate>
    </item>
    <item>
      <title>Deferred Rendering + PBR</title>
      <link>https://powerclabman.tistory.com/190</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2074&quot; data-origin-height=&quot;1132&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c4mPcg/btsM2n9o6Tz/wyEDnykKkDfHBLGHEQdqgK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c4mPcg/btsM2n9o6Tz/wyEDnykKkDfHBLGHEQdqgK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c4mPcg/btsM2n9o6Tz/wyEDnykKkDfHBLGHEQdqgK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc4mPcg%2FbtsM2n9o6Tz%2FwyEDnykKkDfHBLGHEQdqgK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2074&quot; height=&quot;1132&quot; data-origin-width=&quot;2074&quot; data-origin-height=&quot;1132&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2195&quot; data-origin-height=&quot;1140&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bs3jDP/btsM2IZP1BX/qGHVG0dZL4g1tOCtXZtp01/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bs3jDP/btsM2IZP1BX/qGHVG0dZL4g1tOCtXZtp01/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bs3jDP/btsM2IZP1BX/qGHVG0dZL4g1tOCtXZtp01/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbs3jDP%2FbtsM2IZP1BX%2FqGHVG0dZL4g1tOCtXZtp01%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2195&quot; height=&quot;1140&quot; data-origin-width=&quot;2195&quot; data-origin-height=&quot;1140&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2186&quot; data-origin-height=&quot;1082&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/OmraY/btsM4QBRhAE/fEoQjhWNdoprzeNp86jyR1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/OmraY/btsM4QBRhAE/fEoQjhWNdoprzeNp86jyR1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/OmraY/btsM4QBRhAE/fEoQjhWNdoprzeNp86jyR1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOmraY%2FbtsM4QBRhAE%2FfEoQjhWNdoprzeNp86jyR1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2186&quot; height=&quot;1082&quot; data-origin-width=&quot;2186&quot; data-origin-height=&quot;1082&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;잘 나와서 기쁘네요&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1910&quot; data-origin-height=&quot;1067&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/P0bzX/btsM3YgkUaI/4x3ZZX6BtcIMkJGVh81knk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/P0bzX/btsM3YgkUaI/4x3ZZX6BtcIMkJGVh81knk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/P0bzX/btsM3YgkUaI/4x3ZZX6BtcIMkJGVh81knk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FP0bzX%2FbtsM3YgkUaI%2F4x3ZZX6BtcIMkJGVh81knk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1910&quot; height=&quot;1067&quot; data-origin-width=&quot;1910&quot; data-origin-height=&quot;1067&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;근데 잘보면&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1507&quot; data-origin-height=&quot;874&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/DPXil/btsM4ilh7Ql/FnyMReWvaSoQOGtEVnzzyK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/DPXil/btsM4ilh7Ql/FnyMReWvaSoQOGtEVnzzyK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/DPXil/btsM4ilh7Ql/FnyMReWvaSoQOGtEVnzzyK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDPXil%2FbtsM4ilh7Ql%2FFnyMReWvaSoQOGtEVnzzyK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1507&quot; height=&quot;874&quot; data-origin-width=&quot;1507&quot; data-origin-height=&quot;874&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;MSAA를 사용하지 않아서 다소 끝처리가 아쉽습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;직접 안티에일리어싱을 해줘야하는데&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;관련 코드는 바로 작성해보겠습니다.&amp;nbsp;&lt;/p&gt;</description>
      <author>파워꽃게맨</author>
      <guid isPermaLink="true">https://powerclabman.tistory.com/190</guid>
      <comments>https://powerclabman.tistory.com/190#entry190comment</comments>
      <pubDate>Tue, 1 Apr 2025 13:05:22 +0900</pubDate>
    </item>
  </channel>
</rss>