{"id":84,"date":"2022-08-21T13:30:58","date_gmt":"2022-08-21T13:30:58","guid":{"rendered":"https:\/\/leonwoud.com\/devblog\/?p=84"},"modified":"2022-08-22T13:18:57","modified_gmt":"2022-08-22T13:18:57","slug":"static-rectangle-now-with-more-progress","status":"publish","type":"post","link":"https:\/\/leonwoud.com\/devblog\/static-rectangle-now-with-more-progress\/","title":{"rendered":"Static Rectangle, now with more progress!"},"content":{"rendered":"\n<p>The following is progress made over a few weeks, a few weeks ago. I was still wrapping my head around how Vulkan works, and really just trying to get stuff to work. It was one step forward, two steps back for a time, that&#8217;s just how it is sometimes.<\/p>\n\n\n\n<p>Jumping off from where I was at the end of the last post, I implemented a camera controller which at this time handled all user input. I spent a fair whack of time coming up with a way to handle what happened when the mouse goes outside the bounds of the window, I was quite proud of that. I later found out that GLFW (the cross-platform window framework I am using) has an option to do this for you, you just have to turn it on (and know it exists).<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"700\" style=\"aspect-ratio: 852 \/ 700;\" width=\"852\" controls src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/sr_camera.mp4\"><\/video><\/figure>\n\n\n\n<p>From there, I moved on to lighting. I implemented simple directional lighting fairly quickly, so I moved on to point lights. This is when I broke everything and it took me an embarrassingly long time to figure out what happened&#8230; as it turned out, nothing had happened my ground plane just had inverted normals. Nothing in my renderer at this point helps me figure this stuff out, so I&#8217;ll definitely be adding debug drawing methods in the future, it&#8217;s a bit of a chicken\/egg situation at this point in development.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"802\" src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-1024x802.png\" alt=\"\" class=\"wp-image-87\" srcset=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-1024x802.png 1024w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-300x235.png 300w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-768x601.png 768w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-1536x1202.png 1536w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-250x196.png 250w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-550x431.png 550w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-800x626.png 800w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-230x180.png 230w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-383x300.png 383w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM-639x500.png 639w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-07-31-at-6.56.37-PM.png 1658w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Making some progress, I had one point light working. I&#8217;ll need to look into tone-mapping in the future but the point light <em>is<\/em> sitting right on the ground.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"700\" style=\"aspect-ratio: 852 \/ 700;\" width=\"852\" controls src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/sr_pointlights.mp4\"><\/video><figcaption>Multiple point lights and pac-man or the sun or something.<\/figcaption><\/figure>\n\n\n\n<p>I was getting a bit tired of looking at cubes and spheres. So, next up was implementing OBJ loading and my first pass at structuring a model class. For file loading, it was a toss up between <a href=\"https:\/\/github.com\/tinyobjloader\/tinyobjloader\" target=\"_blank\" rel=\"noopener\">tinyobjloader<\/a> and <a href=\"https:\/\/github.com\/assimp\/assimp\" target=\"_blank\" rel=\"noopener\">assimp<\/a>. I went with tinyobjloader for now, primarily because it&#8217;s a very lightweight header only implementation. Assimp is super full featured which I may look into in the future. Doing this, I learnt a bit about the OBJ format I wasn&#8217;t aware of, which is funny because I have used it in some form or another for 15+ years. I actually may look into my own format at some point, it could be fun and a great learning experience to write my own exporter for Maya and my own parser for Static Rectangle.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"700\" style=\"aspect-ratio: 852 \/ 700;\" width=\"852\" controls src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/obj_loading.mp4\"><\/video><figcaption>Spooky!<\/figcaption><\/figure>\n\n\n\n<p>In the above clip, I had also implemented blinn-phong shading. That was surprisingly simple and I&#8217;m quite excited to see what I can do with shaders in the future.<\/p>\n\n\n\n<p>Next, I needed to do some refactoring. The input was still in the camera controller, so I needed to move it out. I wasn&#8217;t entirely sure what I wanted, so I moved it to the window, as that is where the callbacks are registered. However, it felt weird needing access to the window to get input, so I moved it into its own class which did present some issues with GLFW that needed some&#8230; creative solutions. In the end, I&#8217;m pretty happy with where it is, it&#8217;s by no means complete, it&#8217;s still very basic but it works.<\/p>\n\n\n\n<p>If you need access to the keyboard or mouse you do so from an application owned instance of the input by doing something like <code>input.keyboard.keys[keycode].isDown<\/code> or <code>input.mouse.position.x<\/code> etc.<\/p>\n\n\n\n<p>I also dug out some old models from yesteryear, I was curious to see how it handled models which weren&#8217;t optimised at all. Turns out, fine.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"700\" style=\"aspect-ratio: 852 \/ 700;\" width=\"852\" controls src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/input_test.mp4\"><\/video><figcaption>This car was modelled to be subdivided for an offline renderer. The changing lights are hotkeys setup in my new input system<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-1024x567.png\" alt=\"\" class=\"wp-image-91\" srcset=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-1024x567.png 1024w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-300x166.png 300w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-768x425.png 768w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-1536x851.png 1536w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-250x138.png 250w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-550x305.png 550w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-800x443.png 800w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-325x180.png 325w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-542x300.png 542w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby-903x500.png 903w, https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/shelby.png 1842w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Screenshot from Maya. Not exactly &#8220;real-time&#8221; friendly, but it was never intended to be.<\/figcaption><\/figure>\n\n\n\n<p>I wanted to look at something that wasn&#8217;t a solid colour, but I had yet to get textures working (I had attempted to a number of times at this point). So instead, I added vertex colours to an old model of mine. This was actually easier said than done, as this is where I found out that OBJ technically doesn&#8217;t support vertex colours. There are a couple of unofficial extensions, and one of those is supported by tinyobjloader, so I hacked them in using a script I wrote for Maya.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"700\" style=\"aspect-ratio: 852 \/ 700;\" width=\"852\" controls src=\"https:\/\/leonwoud.com\/devblog\/wp-content\/uploads\/2022\/08\/marvin.mp4\"><\/video><figcaption>Marvin the Magnificent!<\/figcaption><\/figure>\n\n\n\n<p>And that pretty much takes us to where I am today, this last screen recording was from a couple of weeks ago. I&#8217;m currently making my way through the <a href=\"https:\/\/www.amazon.com\/Vulkan-Cookbook-potential-generation-graphics\/dp\/1786468158\" target=\"_blank\" rel=\"noopener\">Vulkan Cookbook<\/a> by Pawel Lapinski and I&#8217;ve already made some changes and flagged a few TODOs as a result.<\/p>\n\n\n\n<p>I did get textures working today, but I&#8217;ll save that for another post!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is progress made over a few weeks, a few weeks ago. I was still wrapping my head around how Vulkan works, and really just trying to get stuff to work. It was one step forward, two steps back for a time, that&#8217;s just how it is sometimes. Jumping [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[9],"tags":[12,11,10],"class_list":["post-84","post","type-post","status-publish","format-standard","hentry","category-game-dev","tag-renderer","tag-static-rectangle","tag-vulkan"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":5,"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/posts\/84\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leonwoud.com\/devblog\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}