From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Tue, 21 Nov 2017 20:21:11 +0000 (+0100)
Subject: better 2D rendering
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=fd08d1defb5c42d2847a9001e1921898e3d526bf;p=blobs.git

better 2D rendering
---

diff --git a/src/app/Assets.hpp b/src/app/Assets.hpp
index d4ab683..ab6a4f3 100644
--- a/src/app/Assets.hpp
+++ b/src/app/Assets.hpp
@@ -3,9 +3,9 @@
 
 #include "../graphics/AlphaSprite.hpp"
 #include "../graphics/ArrayTexture.hpp"
+#include "../graphics/Canvas.hpp"
 #include "../graphics/CreatureSkin.hpp"
 #include "../graphics/Font.hpp"
-#include "../graphics/PlainColor.hpp"
 #include "../graphics/PlanetSurface.hpp"
 #include "../graphics/SunSurface.hpp"
 #include "../world/Resource.hpp"
@@ -47,7 +47,7 @@ struct Assets {
 
 	struct {
 		graphics::AlphaSprite alpha_sprite;
-		graphics::PlainColor plain_color;
+		graphics::Canvas canvas;
 		graphics::PlanetSurface planet_surface;
 		graphics::SunSurface sun_surface;
 		graphics::CreatureSkin creature_skin;
diff --git a/src/app/states.cpp b/src/app/states.cpp
index 862d418..75d9fcf 100644
--- a/src/app/states.cpp
+++ b/src/app/states.cpp
@@ -29,8 +29,8 @@ MasterState::~MasterState() noexcept {
 
 
 void MasterState::OnResize(int w, int h) {
-	assets.shaders.plain_color.Activate();
-	assets.shaders.plain_color.SetVP(glm::mat4(1.0f), glm::ortho(0.0f, float(w), float(h), 0.0f, 1.0e4f, -1.0e4f));
+	assets.shaders.canvas.Activate();
+	assets.shaders.canvas.Resize(float(w), float(h));
 	assets.shaders.alpha_sprite.Activate();
 	assets.shaders.alpha_sprite.SetVP(glm::mat4(1.0f), glm::ortho(0.0f, float(w), float(h), 0.0f, 1.0e4f, -1.0e4f));
 
diff --git a/src/graphics/Canvas.hpp b/src/graphics/Canvas.hpp
new file mode 100644
index 0000000..bc2a47a
--- /dev/null
+++ b/src/graphics/Canvas.hpp
@@ -0,0 +1,52 @@
+#ifndef BLOBS_GRAPHICS_CANVAS_HPP_
+#define BLOBS_GRAPHICS_CANVAS_HPP_
+
+#include "glm.hpp"
+#include "Program.hpp"
+#include "SimpleVAO.hpp"
+
+#include <cstdint>
+
+
+namespace blobs {
+namespace graphics {
+
+class Canvas {
+
+public:
+	Canvas();
+	~Canvas();
+
+	Canvas(const Canvas &) = delete;
+	Canvas &operator =(const Canvas &) = delete;
+
+	Canvas(Canvas &&) = delete;
+	Canvas &operator =(Canvas &&) = delete;
+
+public:
+	void Resize(float w, float h) noexcept;
+	void ZIndex(float) noexcept;
+	void SetColor(const glm::vec4 &) noexcept;
+
+	void Activate() noexcept;
+	void DrawLine(const glm::vec2 &, const glm::vec2 &, float width = 1.0f);
+	void DrawRect(const glm::vec2 &, const glm::vec2 &, float width = 1.0f);
+	void FillRect(const glm::vec2 &, const glm::vec2 &);
+
+private:
+	Program prog;
+	GLuint p_handle;
+	GLuint z_handle;
+	GLuint c_handle;
+
+	struct Attributes {
+		glm::vec2 position;
+	};
+	SimpleVAO<Attributes, std::uint8_t> vao;
+
+};
+
+}
+}
+
+#endif
diff --git a/src/graphics/PlainColor.hpp b/src/graphics/PlainColor.hpp
deleted file mode 100644
index 534218b..0000000
--- a/src/graphics/PlainColor.hpp
+++ /dev/null
@@ -1,68 +0,0 @@
-#ifndef BLOBS_GRAPHICS_PLAINCOLOR_HPP_
-#define BLOBS_GRAPHICS_PLAINCOLOR_HPP_
-
-#include "Program.hpp"
-#include "SimpleVAO.hpp"
-
-#include "glm.hpp"
-
-#include <cstdint>
-
-
-namespace blobs {
-namespace graphics {
-
-class PlainColor {
-
-public:
-	PlainColor();
-	~PlainColor();
-
-	PlainColor(const PlainColor &) = delete;
-	PlainColor &operator =(const PlainColor &) = delete;
-
-	PlainColor(PlainColor &&) = delete;
-	PlainColor &operator =(PlainColor &&) = delete;
-
-public:
-	void Activate() noexcept;
-
-	void SetM(const glm::mat4 &m) noexcept;
-	void SetVP(const glm::mat4 &v, const glm::mat4 &p) noexcept;
-	void SetMVP(const glm::mat4 &m, const glm::mat4 &v, const glm::mat4 &p) noexcept;
-	void SetColor(const glm::vec4 &color) noexcept;
-
-	const glm::mat4 &M() const noexcept { return m; }
-	const glm::mat4 &V() const noexcept { return v; }
-	const glm::mat4 &P() const noexcept { return p; }
-	const glm::mat4 &MV() const noexcept { return mv; }
-	const glm::mat4 &MVP() const noexcept { return mvp; }
-
-	void DrawRect() const noexcept;
-	void OutlineRect() const noexcept;
-
-private:
-	struct Attributes {
-		glm::vec3 position;
-	};
-	SimpleVAO<Attributes, std::uint8_t> vao;
-	Program prog;
-
-	glm::mat4 m;
-	glm::mat4 v;
-	glm::mat4 p;
-	glm::mat4 mv;
-	glm::mat4 mvp;
-
-	GLuint m_handle;
-	GLuint mv_handle;
-	GLuint mvp_handle;
-
-	GLuint fg_color_handle;
-
-};
-
-}
-}
-
-#endif
diff --git a/src/graphics/shader.cpp b/src/graphics/shader.cpp
index 0f372d0..c63a280 100644
--- a/src/graphics/shader.cpp
+++ b/src/graphics/shader.cpp
@@ -1,6 +1,6 @@
 #include "AlphaSprite.hpp"
+#include "Canvas.hpp"
 #include "CreatureSkin.hpp"
-#include "PlainColor.hpp"
 #include "PlanetSurface.hpp"
 #include "Program.hpp"
 #include "Shader.hpp"
@@ -17,6 +17,7 @@
 #include <stdexcept>
 #include <string>
 #include <glm/gtc/type_ptr.hpp>
+#include <glm/gtx/transform.hpp>
 
 
 namespace {
@@ -628,32 +629,42 @@ void CreatureSkin::SetNumLights(int n) noexcept {
 }
 
 
-PlainColor::PlainColor()
+AlphaSprite::AlphaSprite()
 : prog() {
 	prog.LoadShader(
 		GL_VERTEX_SHADER,
 		"#version 330 core\n"
 
 		"layout(location = 0) in vec3 vtx_position;\n"
+		"layout(location = 1) in vec2 vtx_texture;\n"
 
 		"uniform mat4 M;\n"
 		"uniform mat4 MV;\n"
 		"uniform mat4 MVP;\n"
 
+		"out vec2 frag_tex_uv;\n"
+
 		"void main() {\n"
 			"gl_Position = MVP * vec4(vtx_position, 1);\n"
+			"frag_tex_uv = vtx_texture;\n"
 		"}\n"
 	);
 	prog.LoadShader(
 		GL_FRAGMENT_SHADER,
 		"#version 330 core\n"
 
+		"in vec2 frag_tex_uv;\n"
+
+		"uniform sampler2D tex_sampler;\n"
 		"uniform vec4 fg_color;\n"
+		"uniform vec4 bg_color;\n"
 
 		"out vec4 color;\n"
 
 		"void main() {\n"
-			"color = fg_color;\n"
+			"vec4 tex_color = texture(tex_sampler, frag_tex_uv);\n"
+			"vec4 factor = mix(bg_color, fg_color, tex_color.a);\n"
+			"color = vec4((tex_color * factor).rgb, factor.a);\n"
 		"}\n"
 	);
 	prog.Link();
@@ -664,39 +675,44 @@ PlainColor::PlainColor()
 	m_handle = prog.UniformLocation("M");
 	mv_handle = prog.UniformLocation("MV");
 	mvp_handle = prog.UniformLocation("MVP");
+	sampler_handle = prog.UniformLocation("tex_sampler");
 	fg_color_handle = prog.UniformLocation("fg_color");
+	bg_color_handle = prog.UniformLocation("bg_color");
 
 	vao.Bind();
 	vao.BindAttributes();
 	vao.EnableAttribute(0);
+	vao.EnableAttribute(1);
 	vao.AttributePointer<glm::vec3>(0, false, offsetof(Attributes, position));
+	vao.AttributePointer<glm::vec2>(1, false, offsetof(Attributes, texture));
 	vao.ReserveAttributes(4, GL_STATIC_DRAW);
 	{
 		auto attrib = vao.MapAttributes(GL_WRITE_ONLY);
 		attrib[0].position = glm::vec3(-0.5f, -0.5f, 0.0f);
+		attrib[0].texture = glm::vec2(0.0f, 0.0f);
 		attrib[1].position = glm::vec3(-0.5f,  0.5f, 0.0f);
+		attrib[1].texture = glm::vec2(0.0f, 1.0f);
 		attrib[2].position = glm::vec3( 0.5f, -0.5f, 0.0f);
+		attrib[2].texture = glm::vec2(1.0f, 0.0f);
 		attrib[3].position = glm::vec3( 0.5f,  0.5f, 0.0f);
+		attrib[3].texture = glm::vec2(1.0f, 1.0f);
 	}
 	vao.BindElements();
 	vao.ReserveElements(7, GL_STATIC_DRAW);
 	{
 		auto element = vao.MapElements(GL_WRITE_ONLY);
 		element[ 0] = 0;
-		element[ 1] = 3;
+		element[ 1] = 1;
 		element[ 2] = 2;
-		element[ 3] = 0;
-		element[ 4] = 1;
-		element[ 5] = 3;
-		element[ 6] = 2;
+		element[ 3] = 3;
 	}
 	vao.Unbind();
 }
 
-PlainColor::~PlainColor() {
+AlphaSprite::~AlphaSprite() {
 }
 
-void PlainColor::Activate() noexcept {
+void AlphaSprite::Activate() noexcept {
 	prog.Use();
 	glEnable(GL_DEPTH_TEST);
 	glDepthFunc(GL_LESS);
@@ -705,7 +721,7 @@ void PlainColor::Activate() noexcept {
 	glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 }
 
-void PlainColor::SetM(const glm::mat4 &mm) noexcept {
+void AlphaSprite::SetM(const glm::mat4 &mm) noexcept {
 	m = mm;
 	mv = v * m;
 	mvp = p * mv;
@@ -714,7 +730,7 @@ void PlainColor::SetM(const glm::mat4 &mm) noexcept {
 	prog.Uniform(mvp_handle, mvp);
 }
 
-void PlainColor::SetVP(const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
+void AlphaSprite::SetVP(const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
 	v = vv;
 	p = pp;
 	mv = v * m;
@@ -723,7 +739,7 @@ void PlainColor::SetVP(const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
 	prog.Uniform(mvp_handle, mvp);
 }
 
-void PlainColor::SetMVP(const glm::mat4 &mm, const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
+void AlphaSprite::SetMVP(const glm::mat4 &mm, const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
 	m = mm;
 	v = vv;
 	p = pp;
@@ -734,57 +750,54 @@ void PlainColor::SetMVP(const glm::mat4 &mm, const glm::mat4 &vv, const glm::mat
 	prog.Uniform(mvp_handle, mvp);
 }
 
-void PlainColor::SetColor(const glm::vec4 &color) noexcept {
+void AlphaSprite::SetTexture(Texture &tex) noexcept {
+	glActiveTexture(GL_TEXTURE0);
+	tex.Bind();
+	prog.Uniform(sampler_handle, GLint(0));
+}
+
+void AlphaSprite::SetFgColor(const glm::vec4 &color) noexcept {
 	prog.Uniform(fg_color_handle, color);
 }
 
-void PlainColor::DrawRect() const noexcept {
-	vao.Bind();
-	vao.DrawTriangles(6);
+void AlphaSprite::SetBgColor(const glm::vec4 &color) noexcept {
+	prog.Uniform(bg_color_handle, color);
 }
 
-void PlainColor::OutlineRect() const noexcept {
+void AlphaSprite::DrawRect() const noexcept {
 	vao.Bind();
-	vao.DrawLineLoop(4, 3);
+	vao.DrawTriangleStrip(4);
 }
 
 
-AlphaSprite::AlphaSprite()
-: prog() {
+Canvas::Canvas()
+: prog()
+, vao() {
 	prog.LoadShader(
 		GL_VERTEX_SHADER,
 		"#version 330 core\n"
 
-		"layout(location = 0) in vec3 vtx_position;\n"
-		"layout(location = 1) in vec2 vtx_texture;\n"
-
-		"uniform mat4 M;\n"
-		"uniform mat4 MV;\n"
-		"uniform mat4 MVP;\n"
+		"layout(location = 0) in vec2 vtx_position;\n"
 
-		"out vec2 frag_tex_uv;\n"
+		"uniform mat4 P;\n"
+		"uniform float z;\n"
 
 		"void main() {\n"
-			"gl_Position = MVP * vec4(vtx_position, 1);\n"
-			"frag_tex_uv = vtx_texture;\n"
+			// disamond rule adjust
+			//"vec3 position = vtx_position + vec3(0.5, 0.5, 0.0);\n"
+			"gl_Position = P * vec4(vtx_position, z, 1);\n"
 		"}\n"
 	);
 	prog.LoadShader(
 		GL_FRAGMENT_SHADER,
 		"#version 330 core\n"
 
-		"in vec2 frag_tex_uv;\n"
-
-		"uniform sampler2D tex_sampler;\n"
-		"uniform vec4 fg_color;\n"
-		"uniform vec4 bg_color;\n"
+		"uniform vec4 c;\n"
 
 		"out vec4 color;\n"
 
 		"void main() {\n"
-			"vec4 tex_color = texture(tex_sampler, frag_tex_uv);\n"
-			"vec4 factor = mix(bg_color, fg_color, tex_color.a);\n"
-			"color = vec4((tex_color * factor).rgb, factor.a);\n"
+			"color = c;\n"
 		"}\n"
 	);
 	prog.Link();
@@ -792,101 +805,130 @@ AlphaSprite::AlphaSprite()
 		prog.Log(std::cerr);
 		throw std::runtime_error("link program");
 	}
-	m_handle = prog.UniformLocation("M");
-	mv_handle = prog.UniformLocation("MV");
-	mvp_handle = prog.UniformLocation("MVP");
-	sampler_handle = prog.UniformLocation("tex_sampler");
-	fg_color_handle = prog.UniformLocation("fg_color");
-	bg_color_handle = prog.UniformLocation("bg_color");
+	p_handle = prog.UniformLocation("P");
+	z_handle = prog.UniformLocation("z");
+	c_handle = prog.UniformLocation("c");
 
 	vao.Bind();
 	vao.BindAttributes();
 	vao.EnableAttribute(0);
-	vao.EnableAttribute(1);
-	vao.AttributePointer<glm::vec3>(0, false, offsetof(Attributes, position));
-	vao.AttributePointer<glm::vec2>(1, false, offsetof(Attributes, texture));
-	vao.ReserveAttributes(4, GL_STATIC_DRAW);
-	{
-		auto attrib = vao.MapAttributes(GL_WRITE_ONLY);
-		attrib[0].position = glm::vec3(-0.5f, -0.5f, 0.0f);
-		attrib[0].texture = glm::vec2(0.0f, 0.0f);
-		attrib[1].position = glm::vec3(-0.5f,  0.5f, 0.0f);
-		attrib[1].texture = glm::vec2(0.0f, 1.0f);
-		attrib[2].position = glm::vec3( 0.5f, -0.5f, 0.0f);
-		attrib[2].texture = glm::vec2(1.0f, 0.0f);
-		attrib[3].position = glm::vec3( 0.5f,  0.5f, 0.0f);
-		attrib[3].texture = glm::vec2(1.0f, 1.0f);
-	}
+	vao.AttributePointer<glm::vec2>(0, false, offsetof(Attributes, position));
+	vao.ReserveAttributes(255, GL_DYNAMIC_DRAW);
 	vao.BindElements();
-	vao.ReserveElements(7, GL_STATIC_DRAW);
-	{
-		auto element = vao.MapElements(GL_WRITE_ONLY);
-		element[ 0] = 0;
-		element[ 1] = 1;
-		element[ 2] = 2;
-		element[ 3] = 3;
-	}
+	vao.ReserveElements(255, GL_DYNAMIC_DRAW);
 	vao.Unbind();
 }
 
-AlphaSprite::~AlphaSprite() {
-}
-
-void AlphaSprite::Activate() noexcept {
-	prog.Use();
-	glEnable(GL_DEPTH_TEST);
-	glDepthFunc(GL_LESS);
-	glEnable(GL_CULL_FACE);
-	glEnable(GL_BLEND);
-	glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+Canvas::~Canvas() {
 }
 
-void AlphaSprite::SetM(const glm::mat4 &mm) noexcept {
-	m = mm;
-	mv = v * m;
-	mvp = p * mv;
-	prog.Uniform(m_handle, m);
-	prog.Uniform(mv_handle, mv);
-	prog.Uniform(mvp_handle, mvp);
+void Canvas::Resize(float w, float h) noexcept {
+	prog.Uniform(p_handle, glm::ortho(0.0f, w, h, 0.0f, 1.0e4f, -1.0e4f));
 }
 
-void AlphaSprite::SetVP(const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
-	v = vv;
-	p = pp;
-	mv = v * m;
-	mvp = p * mv;
-	prog.Uniform(mv_handle, mv);
-	prog.Uniform(mvp_handle, mvp);
+void Canvas::ZIndex(float z) noexcept {
+	prog.Uniform(z_handle, -z);
 }
 
-void AlphaSprite::SetMVP(const glm::mat4 &mm, const glm::mat4 &vv, const glm::mat4 &pp) noexcept {
-	m = mm;
-	v = vv;
-	p = pp;
-	mv = v * m;
-	mvp = p * mv;
-	prog.Uniform(m_handle, m);
-	prog.Uniform(mv_handle, mv);
-	prog.Uniform(mvp_handle, mvp);
+void Canvas::SetColor(const glm::vec4 &color) noexcept {
+	prog.Uniform(c_handle, color);
 }
 
-void AlphaSprite::SetTexture(Texture &tex) noexcept {
-	glActiveTexture(GL_TEXTURE0);
-	tex.Bind();
-	prog.Uniform(sampler_handle, GLint(0));
+void Canvas::Activate() noexcept {
+	prog.Use();
+	glEnable(GL_DEPTH_TEST);
+	glDepthFunc(GL_LESS);
+	glEnable(GL_CULL_FACE);
+	glEnable(GL_BLEND);
+	glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 }
 
-void AlphaSprite::SetFgColor(const glm::vec4 &color) noexcept {
-	prog.Uniform(fg_color_handle, color);
+void Canvas::DrawLine(const glm::vec2 &p1, const glm::vec2 &p2, float width) {
+	glm::vec2 d = glm::normalize(p2 - p1) * (width * 0.5f);
+	glm::vec2 n = glm::vec2(d.y, -d.x);
+	vao.Bind();
+	vao.BindAttributes();
+	{
+		auto attr = vao.MapAttributes(GL_WRITE_ONLY);
+		attr[0].position = p1 - d + n;
+		attr[1].position = p1 - d - n;
+		attr[2].position = p2 + d + n;
+		attr[3].position = p2 + d - n;
+	}
+	vao.BindElements();
+	{
+		auto elem = vao.MapElements(GL_WRITE_ONLY);
+		elem[0] = 0;
+		elem[1] = 1;
+		elem[2] = 2;
+		elem[3] = 3;
+	}
+	vao.DrawTriangleStrip(4);
+	vao.Unbind();
 }
 
-void AlphaSprite::SetBgColor(const glm::vec4 &color) noexcept {
-	prog.Uniform(bg_color_handle, color);
+void Canvas::DrawRect(const glm::vec2 &p1, const glm::vec2 &p2, float width) {
+	glm::vec2 min(std::min(p1.x, p2.x), std::min(p1.y, p2.y));
+	glm::vec2 max(std::max(p1.x, p2.x), std::max(p1.y, p2.y));
+	glm::vec2 dg1(min.x, max.y);
+	glm::vec2 dg2(max.x, min.y);
+	glm::vec2 d(width * 0.5f, width * 0.5f);
+	glm::vec2 n(d.y, -d.x);
+	vao.Bind();
+	vao.BindAttributes();
+	{
+		auto attr = vao.MapAttributes(GL_WRITE_ONLY);
+		attr[0].position = min + d;
+		attr[1].position = min - d;
+		attr[2].position = dg1 + n;
+		attr[3].position = dg1 - n;
+		attr[4].position = max - d;
+		attr[5].position = max + d;
+		attr[6].position = dg2 - n;
+		attr[7].position = dg2 + n;
+	}
+	vao.BindElements();
+	{
+		auto elem = vao.MapElements(GL_WRITE_ONLY);
+		elem[0] = 0;
+		elem[1] = 1;
+		elem[2] = 2;
+		elem[3] = 3;
+		elem[4] = 4;
+		elem[5] = 5;
+		elem[6] = 6;
+		elem[7] = 7;
+		elem[8] = 0;
+		elem[9] = 1;
+	}
+	vao.DrawTriangleStrip(10);
+	vao.Unbind();
 }
 
-void AlphaSprite::DrawRect() const noexcept {
+void Canvas::FillRect(const glm::vec2 &p1, const glm::vec2 &p2) {
+	glm::vec2 min(std::min(p1.x, p2.x), std::min(p1.y, p2.y));
+	glm::vec2 max(std::max(p1.x, p2.x), std::max(p1.y, p2.y));
+	glm::vec2 dg1(min.x, max.y);
+	glm::vec2 dg2(max.x, min.y);
 	vao.Bind();
+	vao.BindAttributes();
+	{
+		auto attr = vao.MapAttributes(GL_WRITE_ONLY);
+		attr[0].position = min;
+		attr[1].position = dg1;
+		attr[2].position = dg2;
+		attr[3].position = max;
+	}
+	vao.BindElements();
+	{
+		auto elem = vao.MapElements(GL_WRITE_ONLY);
+		elem[0] = 0;
+		elem[1] = 1;
+		elem[2] = 2;
+		elem[3] = 3;
+	}
 	vao.DrawTriangleStrip(4);
+	vao.Unbind();
 }
 
 }
diff --git a/src/ui/Widget.hpp b/src/ui/Widget.hpp
index ed7c848..0f9c8d9 100644
--- a/src/ui/Widget.hpp
+++ b/src/ui/Widget.hpp
@@ -1,7 +1,6 @@
 #ifndef BLOBS_UI_WIDGET_HPP_
 #define BLOBS_UI_WIDGET_HPP_
 
-#include "align.hpp"
 #include "../graphics/glm.hpp"
 
 
@@ -27,20 +26,18 @@ public:
 	Widget &operator =(Widget &&) = delete;
 
 public:
-	Widget *Position(const glm::vec3 &p) noexcept { pos = p; return this; }
-	const glm::vec3 &Position() const noexcept { return pos; }
-	glm::vec3 AlignedPosition() noexcept;
-	glm::vec3 TopLeft() noexcept;
+	Widget *Position(const glm::vec2 &p) noexcept { pos = p; return this; }
+	const glm::vec2 &Position() const noexcept { return pos; }
 
-	Widget *Origin(Gravity o) noexcept { origin = o; return this; }
-	Gravity Origin() const noexcept { return origin; }
+	Widget *ZIndex(float z) noexcept { z_index = z; return this; }
+	float ZIndex() const noexcept { return z_index; }
 
 	virtual glm::vec2 Size() = 0;
 	virtual void Draw(app::Assets &, graphics::Viewport &) noexcept = 0;
 
 private:
-	glm::vec3 pos;
-	Gravity origin;
+	glm::vec2 pos;
+	float z_index;
 
 };
 
diff --git a/src/ui/ui.cpp b/src/ui/ui.cpp
index a1b2f9a..4a9caf2 100644
--- a/src/ui/ui.cpp
+++ b/src/ui/ui.cpp
@@ -24,8 +24,7 @@ CreaturePanel::CreaturePanel(const app::Assets &assets)
 		->Padding(glm::vec2(10.0f))
 		->Spacing(10.0f)
 		->Direction(Panel::VERTICAL)
-		->Background(glm::vec4(0.7f, 0.7f, 0.7f, 1.0f))
-		->Origin(Gravity::NORTH_EAST);
+		->Background(glm::vec4(0.7f, 0.7f, 0.7f, 1.0f));
 }
 
 CreaturePanel::~CreaturePanel() {
@@ -49,7 +48,7 @@ void CreaturePanel::CreateNeeds() {
 		Meter *meter = new Meter;
 		meter
 			->Value(1.0f - need.value)
-			->Size(glm::vec2(100.0f, assets.fonts.medium.Height()))
+			->Size(glm::vec2(100.0f, assets.fonts.medium.Height() + assets.fonts.medium.Descent()))
 			->Padding(glm::vec2(1.0f))
 			->Border(1.0f)
 			->FillColor(glm::vec4(0.0f, 0.0f, 0.0f, 1.0f))
@@ -88,7 +87,7 @@ void CreaturePanel::Draw(app::Assets &assets, graphics::Viewport &viewport) noex
 
 	const glm::vec2 margin(20.0f);
 
-	panel.Position(glm::vec3(viewport.Width() - margin.x, margin.y, 0.0f));
+	panel.Position(glm::vec3(viewport.Width() - margin.x - panel.Size().x, margin.y, 0.0f));
 	panel.Draw(assets, viewport);
 }
 
diff --git a/src/ui/widgets.cpp b/src/ui/widgets.cpp
index fb2ef74..6ce92db 100644
--- a/src/ui/widgets.cpp
+++ b/src/ui/widgets.cpp
@@ -64,7 +64,7 @@ void Label::Draw(app::Assets &assets, graphics::Viewport &viewport) noexcept {
 	glm::vec2 size = Size();
 
 	assets.shaders.alpha_sprite.Activate();
-	assets.shaders.alpha_sprite.SetM(glm::translate(AlignedPosition())
+	assets.shaders.alpha_sprite.SetM(glm::translate(glm::vec3(Position() + (size * 0.5f), -ZIndex()))
 		* glm::scale(glm::vec3(size.x, size.y, 1.0f)));
 	assets.shaders.alpha_sprite.SetTexture(tex);
 	assets.shaders.alpha_sprite.SetFgColor(fg_color);
@@ -92,28 +92,29 @@ Meter::~Meter() {
 }
 
 glm::vec2 Meter::Size() {
-	return size + (2.0f * padding) + (2.0f * border);
+	return size + (2.0f * padding) + glm::vec2(2.0f * border);
 }
 
 void Meter::Draw(app::Assets &assets, graphics::Viewport &viewport) noexcept {
 	glm::vec2 fullsize = Size();
-	assets.shaders.plain_color.Activate();
+	assets.shaders.canvas.Activate();
+	assets.shaders.canvas.ZIndex(ZIndex());
 
 	if (border > 0.0f) {
-		assets.shaders.plain_color.SetM(glm::translate(AlignedPosition())
-			* glm::scale(glm::vec3(fullsize.x, fullsize.y, 1.0f)));
-		assets.shaders.plain_color.SetColor(border_color);
-		assets.shaders.plain_color.OutlineRect();
+		assets.shaders.canvas.SetColor(border_color);
+		assets.shaders.canvas.DrawRect(
+			Position() + glm::vec2(border * 0.5f),
+			Position() + fullsize - glm::vec2(border * 0.5f),
+			border
+		);
 	}
 
 	if (value > 0.0f) {
-		glm::vec3 top_left(glm::vec2(TopLeft()) + padding + glm::vec2(border), Position().z);
-		glm::vec2 actual_size(size.x * value, size.y);
-
-		assets.shaders.plain_color.SetM(glm::translate(align(Gravity::NORTH_WEST, actual_size, top_left))
-			* glm::scale(glm::vec3(actual_size, 1.0f)));
-		assets.shaders.plain_color.SetColor(fill_color);
-		assets.shaders.plain_color.DrawRect();
+		assets.shaders.canvas.SetColor(fill_color);
+		assets.shaders.canvas.FillRect(
+			Position() + glm::vec2(border) + padding,
+			Position() + fullsize - glm::vec2(border) - padding
+		);
 	}
 }
 
@@ -194,20 +195,17 @@ void Panel::Relayout() {
 
 void Panel::Draw(app::Assets &assets, graphics::Viewport &viewport) noexcept {
 	if (bg_color.a > 0.0f) {
-		glm::vec2 fullsize = Size();
-		assets.shaders.plain_color.Activate();
-		assets.shaders.plain_color.SetM(glm::translate(AlignedPosition())
-			* glm::scale(glm::vec3(fullsize.x, fullsize.y, 1.0f)));
-		assets.shaders.plain_color.SetColor(bg_color);
-		assets.shaders.plain_color.DrawRect();
+		assets.shaders.canvas.Activate();
+		assets.shaders.canvas.ZIndex(ZIndex());
+		assets.shaders.canvas.SetColor(bg_color);
+		assets.shaders.canvas.FillRect(Position(), Position() + Size());
 	}
 
-	glm::vec3 cursor = TopLeft();
+	glm::vec2 cursor = Position();
 	cursor.x += padding.x;
 	cursor.y += padding.y;
-	cursor.z -= 1.0f;
 	for (auto &w : widgets) {
-		w->Position(cursor)->Origin(Gravity::NORTH_WEST);
+		w->Position(cursor)->ZIndex(ZIndex() + 1.0f);
 		w->Draw(assets, viewport);
 		cursor[dir] += w->Size()[dir] + spacing;
 	}
@@ -216,20 +214,11 @@ void Panel::Draw(app::Assets &assets, graphics::Viewport &viewport) noexcept {
 
 Widget::Widget()
 : pos(0.0f)
-, origin(Gravity::CENTER) {
+, z_index(1.0f)  {
 }
 
 Widget::~Widget() {
 }
 
-glm::vec3 Widget::AlignedPosition() noexcept {
-	return align(origin, Size(), pos);
-}
-
-glm::vec3 Widget::TopLeft() noexcept {
-	glm::vec2 size = Size();
-	return align(origin, size, pos) - glm::vec3(size * 0.5f, 0.0f);
-}
-
 }
 }