BFPOWER/levlib
2
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

draw-improvements (#17)

Browse Source 
Major rework to draw rendering system. We are making a SDF first rendering system with tesselated stuff only as a fallback strategy for specific situations where SDF is particularly poorly suited

Co-authored-by: Zachary Levy <zachary@sunforge.is>
Reviewed-on: #17
This commit was merged in pull request #17.
This commit is contained in:
Zachary Levy
2026-04-24 07:57:44 +00:00
parent 37da2ea068
commit bca19277b3
15 changed files with 1773 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
draw/examples/hellope.odin
View File

@@ -1,6 +1,7 @@
package examples
import "../../draw"
import "../../draw/tess"
import "../../vendor/clay"
import "core:math"
import "core:os"
@@ -28,19 +29,26 @@ hellope_shapes :: proc() {
base_layer := draw.begin({width = 500, height = 500})
// Background
draw.rectangle(base_layer, {0, 0, 500, 500}, {40, 40, 40, 255})
draw.rectangle(base_layer, {0, 0, 500, 500}, draw.Color{40, 40, 40, 255})
// ----- Shapes without rotation (existing demo) -----
draw.rectangle(base_layer, {20, 20, 200, 120}, {80, 120, 200, 255})
draw.rectangle_lines(base_layer, {20, 20, 200, 120}, draw.WHITE, thickness = 2)
draw.rectangle(base_layer, {240, 20, 240, 120}, {200, 80, 80, 255}, roundness = 0.3)
draw.rectangle_gradient(
draw.rectangle(
base_layer,
{20, 20, 200, 120},
draw.Color{80, 120, 200, 255},
outline_color = draw.WHITE,
outline_width = 2,
radii = {top_right = 15, top_left = 5},
)
red_rect_raddi := draw.uniform_radii({240, 20, 240, 120}, 0.3)
red_rect_raddi.bottom_left = 0
draw.rectangle(base_layer, {240, 20, 240, 120}, draw.Color{200, 80, 80, 255}, radii = red_rect_raddi)
draw.rectangle(
base_layer,
{20, 160, 460, 60},
{255, 0, 0, 255},
{0, 255, 0, 255},
{0, 0, 255, 255},
{255, 255, 0, 255},
gradient = draw.Linear_Gradient{end_color = {0, 0, 255, 255}, angle = 0},
)
// ----- Rotation demos -----
@@ -50,17 +58,12 @@ hellope_shapes :: proc() {
draw.rectangle(
base_layer,
rect,
{100, 200, 100, 255},
origin = draw.center_of(rect),
rotation = spin_angle,
)
draw.rectangle_lines(
base_layer,
rect,
draw.WHITE,
thickness = 2,
draw.Color{100, 200, 100, 255},
outline_color = draw.WHITE,
outline_width = 2,
origin = draw.center_of(rect),
rotation = spin_angle,
feather_px = 1,
)
// Rounded rectangle rotating around its center
@@ -68,8 +71,8 @@ hellope_shapes :: proc() {
draw.rectangle(
base_layer,
rrect,
{200, 100, 200, 255},
roundness = 0.4,
draw.Color{200, 100, 200, 255},
radii = draw.uniform_radii(rrect, 0.4),
origin = draw.center_of(rrect),
rotation = spin_angle,
)
@@ -80,18 +83,34 @@ hellope_shapes :: proc() {
// Circle orbiting a point (moon orbiting planet)
// Convention B: center = pivot point (planet), origin = offset from moon center to pivot.
// Moon's visual center at rotation=0: planet_pos - origin = (100, 450) - (0, 40) = (100, 410).
planet_pos := [2]f32{100, 450}
planet_pos := draw.Vec2{100, 450}
draw.circle(base_layer, planet_pos, 8, {200, 200, 200, 255}) // planet (stationary)
draw.circle(base_layer, planet_pos, 5, {100, 150, 255, 255}, origin = {0, 40}, rotation = spin_angle) // moon orbiting
draw.circle(
base_layer,
planet_pos,
5,
{100, 150, 255, 255},
origin = draw.Vec2{0, 40},
rotation = spin_angle,
) // moon orbiting
// Ring arc rotating in place
draw.ring(base_layer, {250, 450}, 15, 30, 0, 270, {100, 100, 220, 255}, rotation = spin_angle)
// Sector (pie slice) rotating in place
draw.ring(
base_layer,
draw.Vec2{250, 450},
0,
30,
{100, 100, 220, 255},
start_angle = 0,
end_angle = 270,
rotation = spin_angle,
)
// Triangle rotating around its center
tv1 := [2]f32{350, 420}
tv2 := [2]f32{420, 480}
tv3 := [2]f32{340, 480}
draw.triangle(
tv1 := draw.Vec2{350, 420}
tv2 := draw.Vec2{420, 480}
tv3 := draw.Vec2{340, 480}
tess.triangle_aa(
base_layer,
tv1,
tv2,
@@ -102,8 +121,16 @@ hellope_shapes :: proc() {
)
// Polygon rotating around its center (already had rotation; now with origin for orbit)
draw.polygon(base_layer, {460, 450}, 6, 30, {180, 100, 220, 255}, rotation = spin_angle)
draw.polygon_lines(base_layer, {460, 450}, 6, 30, draw.WHITE, rotation = spin_angle, thickness = 2)
draw.polygon(
base_layer,
{460, 450},
6,
30,
{180, 100, 220, 255},
outline_color = draw.WHITE,
outline_width = 2,
rotation = spin_angle,
)
draw.end(gpu, window)
}
@@ -134,9 +161,6 @@ hellope_text :: proc() {
spin_angle += 0.5
base_layer := draw.begin({width = 600, height = 600})
// Grey background
draw.rectangle(base_layer, {0, 0, 600, 600}, {127, 127, 127, 255})
// ----- Text API demos -----
// Cached text with id — TTF_Text reused across frames (good for text-heavy apps)
@@ -176,7 +200,7 @@ hellope_text :: proc() {
// Measure text for manual layout
size := draw.measure_text("Measured!", JETBRAINS_MONO_REGULAR, FONT_SIZE)
draw.rectangle(base_layer, {300 - size.x / 2, 380, size.x, size.y}, {60, 60, 60, 200})
draw.rectangle(base_layer, {300 - size.x / 2, 380, size.x, size.y}, draw.Color{60, 60, 60, 200})
draw.text(
base_layer,
"Measured!",
@@ -200,7 +224,7 @@ hellope_text :: proc() {
id = CORNER_SPIN_ID,
)
draw.end(gpu, window)
draw.end(gpu, window, draw.Color{127, 127, 127, 255})
}
}
@@ -338,15 +362,21 @@ hellope_custom :: proc() {
draw_custom :: proc(layer: ^draw.Layer, bounds: draw.Rectangle, render_data: clay.CustomRenderData) {
gauge := cast(^Gauge)render_data.customData
// Background from clay's backgroundColor
draw.rectangle(layer, bounds, draw.color_from_clay(render_data.backgroundColor), roundness = 0.25)
border_width: f32 = 2
draw.rectangle(
layer,
bounds,
draw.color_from_clay(render_data.backgroundColor),
outline_color = draw.WHITE,
outline_width = border_width,
)
// Fill bar
fill := bounds
fill.width *= gauge.value
draw.rectangle(layer, fill, gauge.color, roundness = 0.25)
// Border
draw.rectangle_lines(layer, bounds, draw.WHITE, thickness = 2, roundness = 0.25)
fill := draw.Rectangle {
x = bounds.x,
y = bounds.y,
width = bounds.width * gauge.value,
height = bounds.height,
}
draw.rectangle(layer, fill, gauge.color)
}
}

16
draw/examples/textures.odin
View File

@@ -89,7 +89,7 @@ textures :: proc() {
base_layer := draw.begin({width = 800, height = 600})
// Background
draw.rectangle(base_layer, {0, 0, 800, 600}, {30, 30, 30, 255})
draw.rectangle(base_layer, {0, 0, 800, 600}, draw.Color{30, 30, 30, 255})
//----- Row 1: Sampler presets (y=30) ----------------------------------
@@ -154,7 +154,7 @@ textures :: proc() {
ROW2_Y :: f32(190)
// QR code (RGBA texture with baked colors, nearest sampling)
draw.rectangle(base_layer, {COL1, ROW2_Y, ITEM_SIZE, ITEM_SIZE}, {255, 255, 255, 255}) // white bg
draw.rectangle(base_layer, {COL1, ROW2_Y, ITEM_SIZE, ITEM_SIZE}, draw.Color{255, 255, 255, 255}) // white bg
draw.rectangle_texture(
base_layer,
{COL1, ROW2_Y, ITEM_SIZE, ITEM_SIZE},
@@ -176,7 +176,7 @@ textures :: proc() {
{COL2, ROW2_Y, ITEM_SIZE, ITEM_SIZE},
checker_texture,
sampler = .Nearest_Clamp,
roundness = 0.3,
radii = draw.uniform_radii({COL2, ROW2_Y, ITEM_SIZE, ITEM_SIZE}, 0.3),
)
draw.text(
base_layer,
@@ -213,7 +213,7 @@ textures :: proc() {
// Stretch
uv_s, sampler_s, inner_s := draw.fit_params(.Stretch, {COL1, ROW3_Y, FIT_SIZE, FIT_SIZE}, stripe_texture)
draw.rectangle(base_layer, {COL1, ROW3_Y, FIT_SIZE, FIT_SIZE}, {60, 60, 60, 255}) // bg
draw.rectangle(base_layer, {COL1, ROW3_Y, FIT_SIZE, FIT_SIZE}, draw.Color{60, 60, 60, 255}) // bg
draw.rectangle_texture(base_layer, inner_s, stripe_texture, uv_rect = uv_s, sampler = sampler_s)
draw.text(
base_layer,
@@ -226,7 +226,7 @@ textures :: proc() {
// Fill (center-crop)
uv_f, sampler_f, inner_f := draw.fit_params(.Fill, {COL2, ROW3_Y, FIT_SIZE, FIT_SIZE}, stripe_texture)
draw.rectangle(base_layer, {COL2, ROW3_Y, FIT_SIZE, FIT_SIZE}, {60, 60, 60, 255})
draw.rectangle(base_layer, {COL2, ROW3_Y, FIT_SIZE, FIT_SIZE}, draw.Color{60, 60, 60, 255})
draw.rectangle_texture(base_layer, inner_f, stripe_texture, uv_rect = uv_f, sampler = sampler_f)
draw.text(
base_layer,
@@ -239,7 +239,7 @@ textures :: proc() {
// Fit (letterbox)
uv_ft, sampler_ft, inner_ft := draw.fit_params(.Fit, {COL3, ROW3_Y, FIT_SIZE, FIT_SIZE}, stripe_texture)
draw.rectangle(base_layer, {COL3, ROW3_Y, FIT_SIZE, FIT_SIZE}, {60, 60, 60, 255}) // visible margin bg
draw.rectangle(base_layer, {COL3, ROW3_Y, FIT_SIZE, FIT_SIZE}, draw.Color{60, 60, 60, 255}) // visible margin bg
draw.rectangle_texture(base_layer, inner_ft, stripe_texture, uv_rect = uv_ft, sampler = sampler_ft)
draw.text(
base_layer,
@@ -251,12 +251,12 @@ textures :: proc() {
)
// Per-corner radii
draw.rectangle_texture_corners(
draw.rectangle_texture(
base_layer,
{COL4, ROW3_Y, FIT_SIZE, FIT_SIZE},
{20, 0, 20, 0},
checker_texture,
sampler = .Nearest_Clamp,
radii = {20, 0, 20, 0},
)
draw.text(
base_layer,