Add Transform, view matrix

Author: karnkaul

guide/src/SUMMARY.md

@@ -47,3 +47,4 @@
   - [Pipeline Layout](descriptor_sets/pipeline_layout.md)
   - [Shader Buffer](descriptor_sets/shader_buffer.md)
   - [Texture](descriptor_sets/texture.md)
+  - [View Matrix](descriptor_sets/view_matrix.md)

guide/src/descriptor_sets/view_matrix.md

@@ -0,0 +1,79 @@
+# View Matrix
+
+Integrating the view matrix will be quite simple and short. First, transformations for objects and cameras/views can be encapsulated into a single struct:
+
+```cpp
+struct Transform {
+  glm::vec2 position{};
+  float rotation{};
+  glm::vec2 scale{1.0f};
+
+  [[nodiscard]] auto model_matrix() const -> glm::mat4;
+  [[nodiscard]] auto view_matrix() const -> glm::mat4;
+};
+```
+
+Extracting the common logic into a helper, both member functions can be implemented easily:
+
+```cpp
+namespace {
+struct Matrices {
+  glm::mat4 translation;
+  glm::mat4 orientation;
+  glm::mat4 scale;
+};
+
+[[nodiscard]] auto to_matrices(glm::vec2 const position, float rotation,
+                 glm::vec2 const scale) -> Matrices {
+  static constexpr auto mat_v = glm::identity<glm::mat4>();
+  static constexpr auto axis_v = glm::vec3{0.0f, 0.0f, 1.0f};
+  return Matrices{
+    .translation = glm::translate(mat_v, glm::vec3{position, 0.0f}),
+    .orientation = glm::rotate(mat_v, glm::radians(rotation), axis_v),
+    .scale = glm::scale(mat_v, glm::vec3{scale, 1.0f}),
+  };
+}
+} // namespace
+
+auto Transform::model_matrix() const -> glm::mat4 {
+  auto const [t, r, s] = to_matrices(position, rotation, scale);
+  // right to left: scale first, then rotate, then translate.
+  return t * r * s;
+}
+
+auto Transform::view_matrix() const -> glm::mat4 {
+  // view matrix is the inverse of the model matrix.
+  // instead, perform translation and rotation in reverse order and with
+  // negative values. or, use glm::lookAt().
+  //  scale is kept unchanged as the first transformation for
+  // "intuitive" scaling on cameras.
+  auto const [t, r, s] = to_matrices(-position, -rotation, scale);
+  return r * t * s;
+}
+```
+
+Add a `Transform` member to `App` to represent the view/camera, inspect its members, and combine with the existing projection matrix:
+
+```cpp
+Transform m_view_transform{};
+
+// ...
+ImGui::Separator();
+if (ImGui::TreeNode("View")) {
+  ImGui::DragFloat2("position", &m_view_transform.position.x);
+  ImGui::DragFloat("rotation", &m_view_transform.rotation);
+  ImGui::DragFloat2("scale", &m_view_transform.scale.x);
+  ImGui::TreePop();
+}
+
+// ...
+auto const mat_view = m_view_transform.view_matrix();
+auto const mat_vp = mat_projection * mat_view;
+auto const bytes =
+  std::bit_cast<std::array<std::byte, sizeof(mat_vp)>>(mat_vp);
+m_view_ubo->write_at(m_frame_index, bytes);
+```
+
+Naturally, moving the view left moves everything else - currently only a single RGBY quad - to the _right_.
+
+![View Matrix](./view_matrix.png)

guide/src/descriptor_sets/view_matrix.png

@@ -563,6 +563,14 @@ void App::inspect() {
 			ImGui::DragFloat("line width", &m_shader->line_width, 0.25f,
 							 line_width_range[0], line_width_range[1]);
 		}
+
+		ImGui::Separator();
+		if (ImGui::TreeNode("View")) {
+			ImGui::DragFloat2("position", &m_view_transform.position.x);
+			ImGui::DragFloat("rotation", &m_view_transform.rotation);
+			ImGui::DragFloat2("scale", &m_view_transform.scale.x, 0.1f);
+			ImGui::TreePop();
+		}
 	}
 	ImGui::End();
 }
@@ -571,9 +579,10 @@ void App::update_view() {
 	auto const half_size = 0.5f * glm::vec2{m_framebuffer_size};
 	auto const mat_projection =
 		glm::ortho(-half_size.x, half_size.x, -half_size.y, half_size.y);
+	auto const mat_view = m_view_transform.view_matrix();
+	auto const mat_vp = mat_projection * mat_view;
 	auto const bytes =
-		std::bit_cast<std::array<std::byte, sizeof(mat_projection)>>(
-			mat_projection);
+		std::bit_cast<std::array<std::byte, sizeof(mat_vp)>>(mat_vp);
 	m_view_ubo->write_at(m_frame_index, bytes);
 }
 

src/app.cpp

@@ -8,6 +8,7 @@
 #include <shader_program.hpp>
 #include <swapchain.hpp>
 #include <texture.hpp>
+#include <transform.hpp>
 #include <vma.hpp>
 #include <window.hpp>
 #include <filesystem>
@@ -107,6 +108,8 @@ class App {
 	std::optional<RenderTarget> m_render_target{};
 	bool m_wireframe{};
 
+	Transform m_view_transform{};
+
 	// waiter must be the last member to ensure it blocks until device is idle
 	// before other members get destroyed.
 	ScopedWaiter m_waiter{};

src/app.hpp

@@ -0,0 +1,39 @@
+#include <glm/gtc/matrix_transform.hpp>
+#include <transform.hpp>
+
+namespace lvk {
+namespace {
+struct Matrices {
+	glm::mat4 translation;
+	glm::mat4 orientation;
+	glm::mat4 scale;
+};
+
+[[nodiscard]] auto to_matrices(glm::vec2 const position, float rotation,
+							   glm::vec2 const scale) -> Matrices {
+	static constexpr auto mat_v = glm::identity<glm::mat4>();
+	static constexpr auto axis_v = glm::vec3{0.0f, 0.0f, 1.0f};
+	return Matrices{
+		.translation = glm::translate(mat_v, glm::vec3{position, 0.0f}),
+		.orientation = glm::rotate(mat_v, glm::radians(rotation), axis_v),
+		.scale = glm::scale(mat_v, glm::vec3{scale, 1.0f}),
+	};
+}
+} // namespace
+
+auto Transform::model_matrix() const -> glm::mat4 {
+	auto const [t, r, s] = to_matrices(position, rotation, scale);
+	// right to left: scale first, then rotate, then translate.
+	return t * r * s;
+}
+
+auto Transform::view_matrix() const -> glm::mat4 {
+	// view matrix is the inverse of the model matrix.
+	// instead, perform translation and rotation in reverse order and with
+	// negative values. or, use glm::lookAt().
+	//  scale is kept unchanged as the first transformation for
+	// "intuitive" scaling on cameras.
+	auto const [t, r, s] = to_matrices(-position, -rotation, scale);
+	return r * t * s;
+}
+} // namespace lvk

src/transform.cpp

@@ -0,0 +1,14 @@
+#pragma once
+#include <glm/mat4x4.hpp>
+#include <glm/vec2.hpp>
+
+namespace lvk {
+struct Transform {
+	glm::vec2 position{};
+	float rotation{};
+	glm::vec2 scale{1.0f};
+
+	[[nodiscard]] auto model_matrix() const -> glm::mat4;
+	[[nodiscard]] auto view_matrix() const -> glm::mat4;
+};
+} // namespace lvk