Computer Graphics 110

Vulkan - 6. deferred shading + phong shading 구현 (code)

1. 지금 잘되고있는 렌더링에 서브패스만 추가해서 감마값만 바꿔보기 - 서브패스 추가하기2. 이 서브패스에 유니폼 버퍼를 추가해보기3. 택스쳐도 넣어보기    4. 지연 렌더링 기본 구현하기 - 퐁모델로 간단하게5. pbr적용6. 렌더패스 추가하여 쉐도우맵 생성해보기 - 일단 방향성 광원으로7. 이걸 받아서 그림자 만들어 보기8. 렌더 패스 동적 생성 - 빛의 개수만큼9. 다중 광원 적용 - 방향성 광원만10. 큐브맵 활용해서 점광원 + 스포트라이트까지 추가 여기서 4단계!를 드디어 구현했다. 이미 서브패스 두개 연결되어있는 상태라 쉬울 것이라 예상했지만생각보단 만만하진 않았다. 생각해보니깐 블로그에 코드를 진짜 안쓴 거 같아서사람들이 블로그에 vulkan 찾아왔다가 내 하소연만 보고 가는 거 같아코드 ..

Vulkan - 5. 두번째 Subpass에 uniform buffer추가

1. 지금 잘되고있는 렌더링에 서브패스만 추가해서 감마값만 바꿔보기 - 서브패스 추가하기2. 이 서브패스에 유니폼 버퍼를 추가해보기3. 택스쳐도 넣어보기4. 지연 렌더링 기본 구현하기 - 퐁모델로 간단하게5. pbr적용6. 렌더패스 추가하여 쉐도우맵 생성해보기 - 일단 방향성 광원으로7. 이걸 받아서 그림자 만들어 보기8. 렌더 패스 동적 생성 - 빛의 개수만큼9. 다중 광원 적용 - 방향성 광원만10. 큐브맵 활용해서 점광원 + 스포트라이트까지 추가 내가 만든 렌더링 단계의 두번째꺼 했다.앞에 한 것보다 볼륨이 크지가 않다.하지만 이거 다음 단계를 퐁셰이딩으로 지연렌더링 구현할꺼라서 정리하는 차원+정말 별건 없는데유니폼 하나 추가하는데도 실수할게 많아 정리해놓고 나중에 추가할 일 생길 때 참고용으로 쓴..

Vulkan - 4. 감마 셰이더 추가해보기

분명 이전 포스트에서 앞으로의 글은 vulkan을 공부하는 메모장이 될 것 이다라고 했는데메모는 그냥 진짜 메모장에 써버렸다..ㅎ 제목과 같이 내가 생각한 step의 첫번째 단계인 간단한 gamma shader를  추가해renderpass에서 subpass를 연결하여 두개의 subpass를 연결하는 작업을 완성했다.일단 결과물 왼쪽에서 오른쪽만드는데 너무 오래걸렸다.vulkan을 너무 쉽게보고 접근한게 화근이였다. 어떤식으로 어떤 순서로 변경해 셰이더를 추가해줄 수 있었는지 기록해보려한다. 우선 opengl처럼 무지성으로 셰이더를 추가해줄 수는 없다.추가해줘야하는 코드가 너무 많기 때문에할 일을 적어놓고 한 일은 체크해주는 방식으로 추가해줘야 나중에 안 헷갈리고 해줄 수 있다. 전에 실패했었던 기억을 되..

Vulkan - 3. 벽을 느낌

원래 주석 포함 2500줄 정도 되는 튜토리얼 코드를 역할 분할하여 클래스화 하니 3200줄 정도가 나왔고이걸 파일로 나눠보니이 정도의 파일량이 나왔는데그래도 한 2주간 공부하며 지지고 볶고 하니 내손이 안 닿은 곳이 없어서 나름 친숙하게 느껴지는 친구가 되었다.. 고 생각했었다. 렌더링을 간절히 기다리는 동료들을 위해 뭐라도 보여주기위해 간단한 빛이 적용되는 지연렌더링 정도만 보여주려고 이제 코드를 수정하는데.. 생각보다 쉽지가 않아서먼저 단계별로 한번 진행해보자 생각했다. 우선 목표는1. 쉐도우맵을 활용한 (점 광원, 스포트라이트, 해 같은 광원(이름이 갑자기 기억이 안난다..)) 그림자 적용2. 지연 렌더링 + pbr적용 일단 광원 하나가 목표이지만다중 광원까지는 해야만한다.   어쨋든 이걸 하려면..

Vulkan - 2. Scene 구성

오랜만에 블로그 글을 쓰는것 같다너무 정신없이 코드를 짜다보니 글을 쓸 정신력이 없었다. 일단 얼추 구상은 맞췄고 하나하나 왜 이렇게 짰고 어떻게 짰는지 써보려고 한다.마지막에는 시간에 쫒겨 너무 대충한 느낌이 나지만..하면서 또 손볼 것이다. 일단 다시 복습main에 App class가 있고App에는 Window, Renderer, Scene, Physics class가 있다. Scene class는 말그대로 오브젝트들이 있고 카메라, 빛이 있는 곳이다. Window class는 이벤트를 관리하여 Scene에 있는 Object들에게 영향을 준다. Physics class는 내 동료들이 짜고 있고 Scene에 있는 Object의 위치와 회전에 물리법칙을 적용한다. Renderer class는 vulkan..

Vulkan - 1. 전반적인 전략

튜토리얼 코드가 공부하면서 쓴 주석까지 포함하여 한파일이고 이게 2000줄이 넘는다.지금은 심지어 모델하나를 렌더링하는 하드코딩 되어있는 상태고 한 클래스에 몰아서 작성되어있기 때문에 잘 분할해서 일반화 시켜야지 내가 나중에 모델이나 셰이더를 추가할 때 막힘없이 진행할 수 있겠다. 머리를 계속 굴린 결과 기본적인 뼈대는 세웠고 여기서 조금씩 추가/변경 해보려고 한다.우선 뼈대는 이렇다mainappwindowrendererphysics (내가 할 거 아님)scene기본적인 뼈대는 이렇게 짰고app에 mainloop가 돌고scene에는 model과 mesh, camera, light가 있다. (일단 여기까지, 나중에 더 추가될 게 있을 수도 있다.)window는 이벤트를 받아 scene에 있는 오브젝트들을 ..

Vulkan - 0. 시작 전

shaderpixel 과제를 끝내고 very real engine 과제를 하기위해 vulkan tutorial을 보고 공부했다. https://vulkan-tutorial.com/ Introduction - Vulkan TutorialAbout This tutorial will teach you the basics of using the Vulkan graphics and compute API. Vulkan is a new API by the Khronos group (known for OpenGL) that provides a much better abstraction of modern graphics cards. This new interface allows you to bettevulkan-tuto..

ShaderPixel - 15. 마치며

이번 과제를 진행하면서 블로그에 과정을 기록한 시간이 굉장히 뜻깊었다.사실 처음부터 블로그를 쓰며 과제를 진행한 이유는, 그때그때 어떤 고민을 했는지, 그리고 그 과정을 통해 무엇을 배웠는지를 기록하기 위해서였다. 하지만 완성된 기능이나 결과물이 나올 때마다 글을 썼기 때문에, 내가 실패했던 경험이나 과정에서 했던 고민들보다는 어떤 것을 어떻게 구현했는지에만 초점이 맞춰진 글이 되어버렸다. 이런 점이 많이 아쉽다. 앞으로도 과제를 하며 블로그를 계속 쓸 예정인데, '무엇을 구현했다'보다는 '어떤 점을 고민했고, 왜 그런 결정을 내렸는가'에 초점을 맞춰 기록하려고 한다. 그래야 과제 진행 과정이 더 풍부해지고, 나중에 돌아봤을 때도 많은 것을 얻을 수 있을 것 같다. 또 한 가지 느낀 점은, 내가 글을 조..

ShaderPixel - 14. 카메라 기준으로 오브젝트 렌더링 순서 정리하기

오브젝트를 카메라 기준으로 멀리서부터 그리는 방식을 구현하였다. 이는 일부 오브젝트, 특히 Cloud와 Water Block과 같은 효과를 위해 필요했다.왜 멀리서부터 그려야 하는가?다른 대부분의 오브젝트는 Vertex Shader에서 미리 정해진 메쉬를 통해 그릴 공간을 정하고, Fragment Shader에서 Ray Marching 방식으로 렌더링한다. 이런 방식은 프레임버퍼의 뎁스 값이 이미 Vertex Shader 단계에서 처리되므로 어떤 순서로 그려도 문제가 없다. 또한, 오브젝트들이 전시 형태로 멀리 떨어져 있어 순서의 영향을 크게 받지 않는다.그러나 Cloud와 Water Block은 조금 다르다.Cloud구름의 끝부분이 매끄럽게 처리되지 않았다.배경과 어우러지도록 렌더링해야 하는데, 현재 ..

ShaderPixel - 13. 3d shader (water block) 추가

과제의 "A 3D (or 4D) shader of your choice." 항목을 구현하기 위해 물 블록 효과를 추가하였다.이번 구현은 구름에서 사용되었던 Signed Distance Field(SDF)를 활용하여, 물결치는 블록과 같은 동적 효과를 구현하였다. 특히, 2D 텍스처를 활용한 굴절 효과와 큐브맵을 활용한 반사 효과가 핵심이다.Vertex Shader#version 330 corelayout (location = 0) in vec3 aPos;layout (location = 1) in vec3 aColor;layout (location = 2) in vec2 aTexCoord;uniform mat4 uView;uniform mat4 uProjection;uniform mat4 uTransfo..