diff --git a/assets/test_2.frag b/assets/test_2.frag index 888da5e..1ce0251 100644 --- a/assets/test_2.frag +++ b/assets/test_2.frag @@ -63,4 +63,5 @@ vec4 srgb_to_linear(vec4 srgb) { void main() { finalColor = linear_to_srgb(vec4(1, 1, 1, 0.25)); + finalColor = vec4(1); } diff --git a/assets/text.frag b/assets/text.frag index 959a76b..58383cf 100644 --- a/assets/text.frag +++ b/assets/text.frag @@ -14,8 +14,53 @@ uniform float divider = 0.5; out vec4 finalColor; -void main() -{ +float float_to_srgb(float l) { + if (l < 0.0031308) { + return l * 12.92; + } else { + return 1.055 * pow(l, 0.41666) - 0.055; + } +} + +vec4 linear_to_srgb(vec4 linear) { + vec4 srgb; + + if (linear.r < 0.0031308) { + srgb.r = linear.r * 12.92; + } else { + srgb.r = 1.055 * pow(linear.r, 0.41666) - 0.055; + } + + if (linear.g < 0.0031308) { + srgb.g = linear.g * 12.92; + } else { + srgb.g = 1.055 * pow(linear.g, 0.41666) - 0.055; + } + + if (linear.b < 0.0031308) { + srgb.b = linear.b * 12.92; + } else { + srgb.b = 1.055 * pow(linear.b, 0.41666) - 0.055; + } + + srgb.a = linear.a; + + return srgb; +} + +float float_to_linear(float s) { + if (s <= 0.04045) { + return s / 12.92; + } else { + return pow((s + 0.055) / 1.055, 2.4); + } +} + +vec4 srgb_to_linear(vec4 srgb) { + return vec4(float_to_linear(srgb.r), float_to_linear(srgb.g), float_to_linear(srgb.b), srgb.a); +} + +void main() { // // Texel color fetching from texture sampler vec4 texelColor0 = texture(texture0, fragTexCoord); // vec4 texelColor1 = texture(texture1, fragTexCoord); @@ -23,5 +68,5 @@ void main() // float x = fract(fragTexCoord.s); // float final = smoothstep(divider - 0.1, divider + 0.1, x); - finalColor = vec4(1, 1, 1, texelColor0.r);//xelColor0;//vec4(1, 1, 0.0, 1.0); + finalColor = vec4(1, 1, 1, float_to_srgb(texelColor0.r)); //xelColor0;//vec4(1, 1, 0.0, 1.0); } diff --git a/build.zig.zon b/build.zig.zon index fbf0f5a..6dbf504 100644 --- a/build.zig.zon +++ b/build.zig.zon @@ -41,8 +41,8 @@ .hash = "sdl3-0.1.5-NmT1Q3ARJgDmFWtbbK3KBb7vufbQD0EjD4Me4Fbdq0p3", }, .raylib_zig = .{ - .url = "git+https://github.com/raylib-zig/raylib-zig?ref=devel#a4d18b2d1cf8fdddec68b5b084535fca0475f466", - .hash = "raylib_zig-5.6.0-dev-KE8REL5MBQAf3p497t52Xw9P7ojndIkVOWPXnLiLLw2P", + .url = "git+https://github.com/raylib-zig/raylib-zig#7d4761b878f43671024ce197f721827b5355a67e", + .hash = "raylib_zig-5.6.0-dev-KE8REGlNBQDR7NML06VBtT7gP3VZNY70E5WohAxzqrNn", }, .znet = .{ .url = "git+https://github.com/connellr023/znet#cb11fb0c4a2b668128c436fbbccd111223c74898", diff --git a/src/client/font.zig b/src/client/font.zig index 40af95f..b54f4fd 100644 --- a/src/client/font.zig +++ b/src/client/font.zig @@ -16,20 +16,24 @@ const Glyph = struct { x : i16, y : i16, - width : u32, - height : u32, - rwidth : i16, - rheight : i16, + width : i32, + height : i32, + // dpi_width : i32, + // dpi_height : i32, + // rwidth : i16, + // rheight : i16, bearing_x : i32, bearing_y : i32, + // dpi_bearing_x : i32, + // dpi_bearing_y : i32, // y_max : i16, // y_min : i16, ascent : i32, descent : i32, - advance : i16, + // advance : i16, st0 : rl.Vector2, st1 : rl.Vector2, @@ -50,7 +54,9 @@ pub const Font = struct { var face = try ft_lib.createFaceMemory(font_data, 0); var glyphs = std.AutoHashMap(u32, Glyph).init(allocator); - try face.setCharSize(0, size * 64, 0, 96); + // try face.setPixelSizes(0, @intCast(size)); + try face.setCharSize(0, size * 64, 0, 72 * @as(u16, @intFromFloat(rl.getWindowScaleDPI().y))); + // try face.setCharSize(0, size * 64, 0, 72 * 1); try face.selectCharmap(.unicode); var rects = try std.ArrayList(rp.stbrp_rect).initCapacity(allocator, 1024); @@ -118,11 +124,14 @@ pub const Font = struct { @memcpy(dst, src); } - const width = bmp.width(); - const height = bmp.rows(); - const bearing_y = face.glyph().bitmapTop(); - const descent = @as(i32, @intCast(height)) - bearing_y; - const ascent = @as(i32, @intCast(height)) - descent; + const width : i32 = @intCast(bmp.width()); + const height : i32 = @intCast(bmp.rows()); + // const dpi_width : i32 = @intFromFloat(@as(f32, @floatFromInt(width)) / rl.getWindowScaleDPI().x); + // const dpi_height : i32 = @intFromFloat(@as(f32, @floatFromInt(height)) / rl.getWindowScaleDPI().y); + const bearing_x : i32 = face.glyph().bitmapLeft(); + const bearing_y : i32 = face.glyph().bitmapTop(); + const descent : i32 = height - bearing_y; + const ascent : i32 = @as(i32, @intCast(height)) - descent; const x : i16 = @intCast(rect.x); const y : i16 = @as(i16, @intCast(rect.y)) + @as(i16, @intCast(height)); @@ -138,15 +147,19 @@ pub const Font = struct { .y = y, .utf32 = char, .index = index, - .bearing_x = face.glyph().bitmapLeft(), - .bearing_y = face.glyph().bitmapTop(), + .bearing_x = bearing_x, + .bearing_y = bearing_y, + // .dpi_bearing_x = @as(i32, @intFromFloat(@as(f32, @floatFromInt(bearing_x)) / rl.getWindowScaleDPI().x)), + // .dpi_bearing_y = @as(i32, @intFromFloat(@as(f32, @floatFromInt(bearing_y)) / rl.getWindowScaleDPI().y)), .width = width, .height = height, - .rwidth = @intCast(face.glyph().metrics().width >> 6), - .rheight = @intCast(face.glyph().metrics().height >> 6), - .descent = @as(i32, @intCast(face.glyph().bitmap().rows())) - face.glyph().bitmapTop(), + // .dpi_width = dpi_width, + // .dpi_height = dpi_height, + // .rwidth = @intCast(face.glyph().metrics().width >> 6), + // .rheight = @intCast(face.glyph().metrics().height >> 6), + .descent = descent, .ascent = ascent, - .advance = @intCast(face.glyph().advance().x >> 6), + // .advance = @intCast(face.glyph().advance().x >> 6), .st0 = .{.x = (fx + 0.5) / fs, .y = (fy - fh) / fs}, .st1 = .{.x = (fx + fw) / fs, .y = (fy - 0.5) / fs}, }; @@ -209,13 +222,19 @@ pub const Font = struct { } var render_pos = pos; - //_ = count_descent; + _ = count_descent; //_ = colour; _ = background; - const draw_size, const max_ascent, const max_descent = self.size_row(text, 0, 0); - _ = max_ascent; - _ = max_descent; + // const draw_size, const max_ascent, const max_descent = self.size_row(text, 0, 0); + // _ = max_ascent; + // _ = max_descent; + const font_ascent = @as(f32, @floatFromInt(self.face.size().metrics().ascender >> 6)); + // const dpi_font_ascent = font_ascent / rl.getWindowScaleDPI().y; + + render_pos.y += font_ascent; + + rl.drawLine(@intFromFloat(render_pos.x), @intFromFloat(render_pos.y), rl.getScreenWidth(), @intFromFloat(render_pos.y), .red); const Context = kb.kbts_CreateShapeContext(null, null); const kb_font = kb.kbts_ShapePushFont(Context, &self.kb); @@ -251,25 +270,35 @@ pub const Font = struct { std.log.info("aah it's wrong!! idk how to handle the error rn!!", .{}); } + const advance_x = @as(f32, @floatFromInt(ft.mulFix(RunGlyph.AdvanceX, @intCast(self.face.size().metrics().x_scale)) >> 6)); + const advance_y = @as(f32, @floatFromInt(ft.mulFix(RunGlyph.AdvanceY, @intCast(self.face.size().metrics().y_scale)) >> 6)); + // const dpi_advance_x = advance_x / rl.getWindowScaleDPI().x; + // const dpi_advance_y = advance_y / rl.getWindowScaleDPI().y; + // glyph : *Glyph = table_find_pointer(*text.font.glyphs, RunGlyph.Id); if (self.glyphs.getPtr(RunGlyph.Id)) |glyph| { var v0 = rl.Vector2.zero(); var v1 = rl.Vector2.zero(); - if (count_descent) { + // const bx = @as(f32, @floatFromInt(glyph.bearing_x)); + const by = @as(f32, @floatFromInt(glyph.bearing_y)); + // const height = @as(f32, @floatFromInt(glyph.height)); + // const descent = @as(f32, @floatFromInt(glyph.descent)); + // const ascent = @as(f32, @floatFromInt(glyph.ascent)); + // if (count_descent) { v0 = render_pos.add(.{ .x = x_offset,// + glyph.bearing_x, - .y = y_offset - @as(f32, @floatFromInt(glyph.bearing_y)) + draw_size.y });// /*- max_descent*/}; - } else { - v0 = render_pos.add(.{ - .x = x_offset,// + glyph.bearing_x, - .y = y_offset - @as(f32, @floatFromInt(@as(i32, @intCast(glyph.height)) - glyph.bearing_y)) - });//* - glyph.height + draw_size.y*/}; - } + .y = y_offset - by });// + draw_size.y });// /*- max_descent*/}; + // } else { + // v0 = render_pos.add(.{ + // .x = x_offset,// + glyph.bearing_x, + // .y = y_offset - @as(f32, @floatFromInt(glyph.height - glyph.bearing_y)) + // });//* - glyph.height + draw_size.y*/}; + // } v1 = v0.add(rl.Vector2{ .x = @floatFromInt(glyph.width), .y = @floatFromInt(glyph.height) }); const p0 : rl.Vector4 = .{ .x = v0.x, .y = v0.y, .z = 0.0, .w = 1.0 }; const p1 : rl.Vector4 = .{ .x = v1.x, .y = v1.y, .z = 0.0, .w = 1.0 }; - x_offset += @floatFromInt(ft.mulFix(RunGlyph.AdvanceX, @intCast(self.face.size().metrics().x_scale)) >> 6); - y_offset += @floatFromInt(ft.mulFix(RunGlyph.AdvanceY, @intCast(self.face.size().metrics().y_scale)) >> 6); + x_offset += advance_x; + y_offset += advance_y; // #if Y_IS_UP { // t0 := Vector2.{ @@ -295,8 +324,8 @@ pub const Font = struct { rl.gl.rlTexCoord2f(st1.x, st1.y); rl.gl.rlVertex2f(p1.x, p1.y); rl.gl.rlTexCoord2f(st1.x, st0.y); rl.gl.rlVertex2f(p1.x, p0.y); } else { - x_offset += @floatFromInt(ft.mulFix(RunGlyph.AdvanceX, @intCast(self.face.size().metrics().x_scale)) >> 6); - y_offset += @floatFromInt(ft.mulFix(RunGlyph.AdvanceY, @intCast(self.face.size().metrics().y_scale)) >> 6); + x_offset += advance_x; + y_offset += advance_y; continue; } } @@ -304,7 +333,7 @@ pub const Font = struct { rl.gl.rlEnd(); rl.gl.rlSetTexture(0); - // rl.endShaderMode(); + rl.endShaderMode(); } pub fn size_row(self: *Font, str: []const u8, n: i32, max_width: f32) struct {rl.Vector2, f32, i32} { diff --git a/src/client/main.zig b/src/client/main.zig index a1aa190..d932132 100644 --- a/src/client/main.zig +++ b/src/client/main.zig @@ -19,8 +19,8 @@ var accumulator : f32 = 0; var k : f32 = 1.0; var frame : i32 = 0; -const screen_width = 640; -const screen_height = 480; +const screen_width = 1280; +const screen_height = 720; var running: bool = true; @@ -38,25 +38,25 @@ pub fn main() !void { defer _ = dbg_allocator.deinit(); try znet.init(); defer znet.deinit(); - rl.initWindow(1280, 720, "zzz"); + rl.setConfigFlags(.{ .window_highdpi = true }); + rl.initWindow(screen_width, screen_height, "zzz"); defer rl.closeWindow(); - // kbts_shape_context *Context = kbts_CreateShapeContext(0, 0); - - // if (gl.binding.isEnabled(@intFromEnum(gl.Capabilities.framebuffer_srgb)) != 0) { - // std.log.info("SRGB: The driver reports GL_FRAMEBUFFER_SRGB is ENABLED", .{}); - // } else { - // std.log.info("SRGB: The driver reports GL_FRAMEBUFFER_SRGB is DISABLED", .{}); - // } - font.ft_lib = try ft.Library.init(); - var f = try font.Font.init("assets/fonts/Vollkorn/static/Vollkorn-Regular.ttf", 48, allocator); + std.log.debug("screen ? {}", .{rl.getScreenWidth()}); + std.log.debug("screen ? {}", .{rl.getScreenHeight()}); + std.log.debug("render ? {}", .{rl.getRenderWidth()}); + std.log.debug("render ? {}", .{rl.getRenderHeight()}); + + // std.log.debug("what's being used for viewport ? {}", .{rl.RLGL.State.framebufferWidth}); + + var f = try font.Font.init("assets/fonts/Vollkorn/static/Vollkorn-Regular.ttf", 42, allocator); defer f.deinit(allocator); font.shader = try rl.loadShader(null, "assets/text.frag"); - const test_shader1 = try rl.loadShader(null, "assets/test_1.frag"); - const test_shader2 = try rl.loadShader(null, "assets/test_2.frag"); + // const test_shader1 = try rl.loadShader(null, "assets/test_1.frag"); + // const test_shader2 = try rl.loadShader(null, "assets/test_2.frag"); // const img = rl.genImageColor(32, 32, .blank); // const tx = try rl.loadTextureFromImage(img); @@ -188,64 +188,66 @@ pub fn main() !void { rl.beginDrawing(); - // f.render_text( - // "Hello, Sa ilor!", - // rl.Vector2.init(400, 400), - // true, - // rl.Color.white, - // rl.Color.blank, - // false, - // true - // ); + // rl.drawRectangle(screen_width - 100, 0, 100, 100, .red); - rl.beginShaderMode(test_shader1); - rl.gl.rlBegin(rl.gl.rl_quads); + f.render_text( + "Whereas, disregard and contempt for human rights have resulted!", + rl.Vector2.init(0, 0), + true, + rl.Color.white, + rl.Color.blank, + false, + true + ); - { - const topLeft : rl.Vector2 = .{ .x = 0.0, .y = 0.0 }; - const bottomRight : rl.Vector2 = .{ .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0, .y = @as(f32, @floatFromInt(rl.getScreenHeight())) }; + // rl.beginShaderMode(test_shader1); + // rl.gl.rlBegin(rl.gl.rl_quads); - rl.gl.rlVertex2f(topLeft.x, topLeft.y); - rl.gl.rlVertex2f(topLeft.x, bottomRight.y); - rl.gl.rlVertex2f(bottomRight.x, bottomRight.y); - rl.gl.rlVertex2f(bottomRight.x, topLeft.y); + // { + // const topLeft : rl.Vector2 = .{ .x = 0.0, .y = 0.0 }; + // const bottomRight : rl.Vector2 = .{ .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0, .y = @as(f32, @floatFromInt(rl.getScreenHeight())) }; - } + // rl.gl.rlVertex2f(topLeft.x, topLeft.y); + // rl.gl.rlVertex2f(topLeft.x, bottomRight.y); + // rl.gl.rlVertex2f(bottomRight.x, bottomRight.y); + // rl.gl.rlVertex2f(bottomRight.x, topLeft.y); - rl.gl.rlEnd(); - rl.endShaderMode(); + // } - rl.beginShaderMode(test_shader2); - rl.gl.rlBegin(rl.gl.rl_quads); + // rl.gl.rlEnd(); + // rl.endShaderMode(); - { - const topLeft : rl.Vector2 = .{ .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0, .y = 0 }; - const bottomRight : rl.Vector2 = .{ .x = @floatFromInt(rl.getScreenWidth()), .y = @floatFromInt(rl.getScreenHeight()) }; + // rl.beginShaderMode(test_shader2); + // rl.gl.rlBegin(rl.gl.rl_quads); - rl.gl.rlVertex2f(topLeft.x, topLeft.y); - rl.gl.rlVertex2f(topLeft.x, bottomRight.y); - rl.gl.rlVertex2f(bottomRight.x, bottomRight.y); - rl.gl.rlVertex2f(bottomRight.x, topLeft.y); - } + // { + // const topLeft : rl.Vector2 = .{ .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0, .y = 0 }; + // const bottomRight : rl.Vector2 = .{ .x = @floatFromInt(rl.getScreenWidth()), .y = @floatFromInt(rl.getScreenHeight()) }; - rl.gl.rlEnd(); - rl.endShaderMode(); + // rl.gl.rlVertex2f(topLeft.x, topLeft.y); + // rl.gl.rlVertex2f(topLeft.x, bottomRight.y); + // rl.gl.rlVertex2f(bottomRight.x, bottomRight.y); + // rl.gl.rlVertex2f(bottomRight.x, topLeft.y); + // } - rl.beginShaderMode(test_shader2); - rl.gl.rlBegin(rl.gl.rl_quads); + // rl.gl.rlEnd(); + // rl.endShaderMode(); - { - const topLeft : rl.Vector2 = .{ .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0, .y = 0 }; - const bottomRight : rl.Vector2 = .{ .x = @floatFromInt(rl.getScreenWidth()), .y = @floatFromInt(rl.getScreenHeight()) }; + // rl.beginShaderMode(test_shader2); + // rl.gl.rlBegin(rl.gl.rl_quads); - rl.gl.rlVertex2f(topLeft.x, topLeft.y); - rl.gl.rlVertex2f(topLeft.x, bottomRight.y); - rl.gl.rlVertex2f(bottomRight.x, bottomRight.y); - rl.gl.rlVertex2f(bottomRight.x, topLeft.y); - } + // { + // const topLeft : rl.Vector2 = .{ .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0, .y = 0 }; + // const bottomRight : rl.Vector2 = .{ .x = @floatFromInt(rl.getScreenWidth()), .y = @floatFromInt(rl.getScreenHeight()) }; - rl.gl.rlEnd(); - rl.endShaderMode(); + // rl.gl.rlVertex2f(topLeft.x, topLeft.y); + // rl.gl.rlVertex2f(topLeft.x, bottomRight.y); + // rl.gl.rlVertex2f(bottomRight.x, bottomRight.y); + // rl.gl.rlVertex2f(bottomRight.x, topLeft.y); + // } + + // rl.gl.rlEnd(); + // rl.endShaderMode(); // rl.drawRectangle(400, 0, 400, 450, rl.Color{ .r = 54, .g = 54, .b = 54, .a = 255 });