initial commit

resources/shaders/Makefile

@@ -0,0 +1,33 @@
+SOURCE_DIR := ./source
+COMPILED_DIR := ./compiled
+
+SOURCE_FILES := $(wildcard $(SOURCE_DIR)/*.glsl)
+
+COMPILED_FILES := $(patsubst $(SOURCE_DIR)/%.glsl,$(COMPILED_DIR)/%.spv,$(SOURCE_FILES))
+
+all: $(COMPILED_FILES)
+	@echo "Compiling shaders from $(SOURCE_DIR) -> $(COMPILED_DIR)"
+
+$(COMPILED_DIR)/%.spv: $(SOURCE_DIR)/%.glsl
+	@mkdir -p $(COMPILED_DIR)
+	@stage=$$(basename $< .glsl | cut -d. -f2); \
+	if [ "$$stage" = "frag" ] || [ "$$stage" = "vert" ]; then \
+		echo "$$stage $(notdir $<) > $(notdir $@)"; \
+		glslc -O0 -g -fshader-stage=$$stage $< -o $@; \
+	else \
+		echo "Skipping $<: unsupported stage $$stage"; \
+	fi
+
+$(COMPILED_DIR):
+	mkdir -p $(COMPILED_DIR)
+
+.PHONY: clean
+clean:
+	rm -rf $(COMPILED_DIR)
+
+.PHONY: tree
+tree:
+	tree $(COMPILED_DIR)
+
+.PHONY: compile_all
+compile_all: clean all tree

resources/shaders/source/ugui.frag.glsl

@@ -0,0 +1,118 @@
+#version 450
+
+/* Combined fragment shader to render UGUI commands */
+
+// type values, these are the same as in renderer.c3
+const uint TYPE_RECT   = 0;
+const uint TYPE_FONT   = 1;
+const uint TYPE_SPRITE = 2;
+const uint TYPE_MSDF   = 3;
+
+// viewport size
+layout(set = 3, binding = 0) uniform Viewport {
+    ivec2 view;
+};
+
+// textures
+layout(set = 2, binding = 0) uniform sampler2D font_atlas;
+layout(set = 2, binding = 1) uniform sampler2D sprite_atlas;
+
+// inputs
+layout(location = 0) in vec4  in_color;
+layout(location = 1) in vec2  in_uv;
+layout(location = 2) in vec4  in_quad_size;
+layout(location = 3) in float in_radius;
+layout(location = 4) flat in uint  in_type;
+
+// outputs
+layout(location = 0) out vec4 fragColor;
+
+
+// SDF for a rounded rectangle given the centerpoint, half size and radius, all in pixels
+float sdf_rr(vec2 p, vec2 half_size, float radius) {
+	vec2 q = abs(p) - half_size + radius;
+	return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+}
+
+
+const float PX_RANGE = 4.0f;
+float screen_px_range(vec2 uv, sampler2D tx) {
+	vec2 unit_range = vec2(PX_RANGE)/vec2(textureSize(tx, 0));
+	vec2 texel_size = vec2(1.0)/fwidth(uv);
+	return max(0.5*dot(unit_range, texel_size), 1.0);
+}
+
+
+float median(float r, float g, float b) {
+	return max(min(r, g), min(max(r, g), b));
+}
+
+
+// main for TYPE_RECT, draw a rouded rectangle with a SDF
+void rect_main()
+{
+	vec2 centerpoint = in_quad_size.xy + in_quad_size.zw * 0.5;
+	vec2 half_size = in_quad_size.zw * 0.5;
+	float distance = sdf_rr(vec2(gl_FragCoord) - centerpoint, half_size, in_radius);
+	float alpha = 1.0 - smoothstep(0.0, 1.5, distance);
+	fragColor = vec4(in_color.rgb, in_color.a * alpha);
+}
+
+
+// main for TYPE_SPRITE, draws a sprite sampled from an atlas
+void sprite_main()
+{
+	ivec2 ts = textureSize(sprite_atlas, 0);
+	vec2 fts = vec2(ts);
+	vec2 real_uv = in_uv.xy / fts;
+	fragColor = texture(sprite_atlas, real_uv);
+}
+
+
+// main for TYPE_FONT, draws a character sampled from an atlas that contains only the alpha channel
+void font_main()
+{
+	ivec2 ts = textureSize(font_atlas, 0);
+	vec2 fts = vec2(ts);
+	vec2 real_uv = in_uv.xy / fts;
+
+	vec4 opacity = texture(font_atlas, real_uv);
+	fragColor = vec4(in_color.rgb, in_color.a*opacity.r);
+}
+
+
+// main for TYPE_MSDF, draws a sprite that is stored as a multi-channel SDF
+void msdf_main() {
+	ivec2 ts = textureSize(sprite_atlas, 0);
+	vec2 fts = vec2(ts);
+	vec2 real_uv = in_uv.xy / fts;
+
+	vec3 msd = texture(sprite_atlas, real_uv).rgb;
+	float sd = median(msd.r, msd.g, msd.b);
+	float distance = screen_px_range(real_uv, sprite_atlas)*(sd - 0.5);
+	float opacity = clamp(distance + 0.5, 0.0, 1.0);
+	fragColor = in_color * opacity;
+}
+
+
+// shader main
+void main()
+{
+	switch (in_type) {
+	case TYPE_RECT:
+		rect_main();
+		break;
+	case TYPE_FONT:
+		font_main();
+		break;
+	case TYPE_SPRITE:
+		sprite_main();
+		break;
+	case TYPE_MSDF:
+		msdf_main();
+		break;
+	default:
+		// ERROR, invalid type, return magenta
+		fragColor = vec4(1.0, 0.0, 1.0, 1.0);
+	}
+}

resources/shaders/source/ugui.vert.glsl

@@ -0,0 +1,47 @@
+#version 450
+
+/* Combined vertex shader to render UGUI commands */
+
+// Viewport size in pixels
+layout(set = 1, binding = 0) uniform Viewport {
+	ivec2 view;
+};
+
+// inputs
+layout(location = 0) in ivec2 in_position;
+layout(location = 1) in ivec4 in_attr; // quad x,y,w,h
+layout(location = 2) in ivec4 in_uv;
+layout(location = 3) in uvec4 in_color;
+layout(location = 4) in uint  in_type;
+
+// outputs
+layout(location = 0) out vec4  out_color;
+layout(location = 1) out vec2  out_uv;
+layout(location = 2) out vec4  out_quad_size;
+layout(location = 3) out float out_radius;
+layout(location = 4) out uint  out_type;
+
+
+void main()
+{
+	// vertex position
+	ivec2 px_pos = in_attr.xy + in_position.xy * in_attr.zw;
+	vec2 clip_pos;
+	clip_pos.x = float(px_pos.x)*2.0 / view.x - 1.0;
+	clip_pos.y = -(float(px_pos.y)*2.0 / view.y - 1.0);
+	gl_Position = vec4(clip_pos, 0.0, 1.0);
+
+	// color output
+	out_color = vec4(in_color) / 255.0;
+
+	// uv output. only useful if the type is SPRITE
+	vec2 px_uv = in_uv.xy + in_position.xy * in_uv.zw;
+	out_uv = vec2(px_uv);
+
+	// quad size and radius output, only useful if type is RECT
+	out_quad_size = vec4(in_attr);
+	out_radius = float(abs(in_uv.x));
+
+	// type output
+	out_type = in_type;
+}

resources/style.css

@@ -0,0 +1,88 @@
+div {
+	bg: #282828;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #6c19ca8f;
+	accent: #fabd2fff;
+}
+
+separator {
+	bg: #fbf1c7ff;
+	size: 1;
+	padding: 0 5 0 5;
+}
+
+button {
+	margin: 2;
+	border: 2;
+	padding: 2;
+	radius: 10;
+	size: 32;
+
+	bg: #3c3836ff;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #458588ff;
+	accent: #504945ff;
+}
+
+checkbox {
+	margin: 2;
+	border: 2;
+	padding: 1;
+	radius: 10;
+	size: 20;
+	bg: #3c3836ff;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #458588ff;
+	accent: #fabd2fff;
+}
+
+toggle {
+	margin: 2;
+	border: 2;
+	padding: 1;
+	radius: 10;
+	size: 20;
+	bg: #3c3836ff;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #458588ff;
+	accent: #fabd2fff;
+}
+
+slider {
+	margin: 2;
+	padding: 2;
+	border: 1;
+	radius: 4;
+	size: 8;
+	bg: #3c3836ff;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #458588ff;
+	accent: #fabd2fff;
+}
+
+scrollbar {
+	padding: 2;
+	size: 8;
+	bg: #45858842;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #458588ff;
+	accent: #fabd2fff;
+}
+
+
+text-box {
+	bg: #4a4543ff;
+	fg: #fbf1c7ff;
+	primary: #cc241dff;
+	secondary: #458588ff;
+	accent: #8f3f61a8;
+	border: 1;
+	padding: 4;
+	margin: 2;
+}