260 lines
14 KiB
C
260 lines
14 KiB
C
#include "clay_renderer_SDL3.h"
|
|
|
|
#define CLAY_IMPLEMENTATION
|
|
#include <clay/clay.h>
|
|
#include <SDL3/SDL.h>
|
|
#include <SDL3/SDL_main.h>
|
|
#include <SDL3/SDL_render.h>
|
|
#include <SDL3_image/SDL_image.h>
|
|
#include <SDL3_ttf/SDL_ttf.h>
|
|
#include <assert.h>
|
|
#include <stddef.h>
|
|
|
|
|
|
/* Global for convenience. Even in 4K this is enough for smooth curves (low radius or rect size coupled with
|
|
* no AA or low resolution might make it appear as jagged curves) */
|
|
static int NUM_CIRCLE_SEGMENTS = 16;
|
|
|
|
static void SDL_Clay_GenerateRoundedRectCorner(SDL_Vertex *vertices, size_t begin, size_t count, SDL_FPoint origin, SDL_FPoint offset, SDL_FColor color, SDL_FPoint texel, float radius) {
|
|
assert(count > 0);
|
|
if (count == 1) {
|
|
vertices[begin] = (SDL_Vertex){ { origin.x, origin.y }, color, texel };
|
|
} else {
|
|
constexpr double quarterCircleRadians = SDL_PI_D / 2.0;
|
|
for (size_t i = 0; i < count; ++i) {
|
|
double const angle = (quarterCircleRadians / ((double)count-1)) * i;
|
|
vertices[begin + i] = (SDL_Vertex) { .position = {
|
|
origin.x + (radius * (offset.x * SDL_cos(angle) - offset.y * SDL_sin(angle))),
|
|
origin.y + (radius * (offset.x * SDL_sin(angle) + offset.y * SDL_cos(angle)))
|
|
},
|
|
.color = color, .tex_coord = texel
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
//all rendering is performed by a single SDL call, avoiding multiple RenderRect + plumbing choice for circles.
|
|
static void SDL_Clay_RenderFillRoundedRect(Clay_SDL3RendererData *rendererData, const SDL_FRect rect, const Clay_CornerRadius cornerRadius, const Clay_Color clayColor) {
|
|
static constexpr SDL_FPoint topLeftTexel = { 0, 0 };
|
|
static constexpr SDL_FPoint topRightTexel = { 1, 0 };
|
|
static constexpr SDL_FPoint bottomRightTexel = { 1, 1 };
|
|
static constexpr SDL_FPoint bottomLeftTexel = { 0, 1 };
|
|
SDL_FColor const color = { clayColor.r/255, clayColor.g/255, clayColor.b/255, clayColor.a/255 };
|
|
|
|
const float maxRadius = SDL_min(rect.w, rect.h) / 2.0f;
|
|
float radii[4] = {
|
|
SDL_min(cornerRadius.topLeft, maxRadius),
|
|
SDL_min(cornerRadius.topRight, maxRadius),
|
|
SDL_min(cornerRadius.bottomLeft, maxRadius),
|
|
SDL_min(cornerRadius.bottomRight, maxRadius),
|
|
};
|
|
int numCircleSegments[4] = { 1, 1, 1, 1 };
|
|
int totalVertices = 0;
|
|
for (int i = 0; i < 4; ++i) {
|
|
numCircleSegments[i] = SDL_clamp((int)radii[i], 1, NUM_CIRCLE_SEGMENTS);
|
|
totalVertices += numCircleSegments[i];
|
|
}
|
|
|
|
size_t vindex = 0;
|
|
// generate topleft corner
|
|
SDL_FPoint origin = {
|
|
rect.x + radii[0],
|
|
rect.y + radii[0]
|
|
};
|
|
SDL_FPoint offset = { -1, 0 };
|
|
SDL_Vertex vertices[totalVertices];
|
|
SDL_Clay_GenerateRoundedRectCorner(vertices, vindex, numCircleSegments[0], origin, offset, color, topLeftTexel, radii[0]);
|
|
vindex += numCircleSegments[0];
|
|
origin = (SDL_FPoint) {
|
|
rect.x + rect.w - radii[1],
|
|
rect.y + radii[1]
|
|
};
|
|
offset = (SDL_FPoint) { 0, -1 };
|
|
SDL_Clay_GenerateRoundedRectCorner(vertices, vindex, numCircleSegments[1], origin, offset, color, topRightTexel, radii[1]);
|
|
vindex += numCircleSegments[1];
|
|
origin = (SDL_FPoint) {
|
|
rect.x + rect.w - radii[2],
|
|
rect.y + rect.h - radii[2]
|
|
};
|
|
offset = (SDL_FPoint) { 1, 0 };
|
|
SDL_Clay_GenerateRoundedRectCorner(vertices, vindex, numCircleSegments[2], origin, offset, color, bottomRightTexel, radii[2]);
|
|
vindex += numCircleSegments[2];
|
|
origin = (SDL_FPoint) {
|
|
rect.x + radii[3],
|
|
rect.y + rect.h - radii[3]
|
|
};
|
|
offset = (SDL_FPoint) { 0, 1 };
|
|
SDL_Clay_GenerateRoundedRectCorner(vertices, vindex, numCircleSegments[3], origin, offset, color, bottomLeftTexel, radii[3]);
|
|
vindex += numCircleSegments[3];
|
|
|
|
assert(vindex == totalVertices);
|
|
size_t totalTris = totalVertices - 2;
|
|
int totalIndeces = totalTris * 3;
|
|
int indeces[totalTris * 3];
|
|
for (size_t i = 0; i < totalTris; ++i) {
|
|
int *tri = indeces + (i * 3);
|
|
tri[0] = i + 1;
|
|
tri[1] = i + 2;
|
|
tri[2] = 0;
|
|
}
|
|
|
|
// Render everything
|
|
SDL_RenderGeometry(rendererData->renderer, NULL, vertices, totalVertices, indeces, totalIndeces);
|
|
#if 0
|
|
// Render debug wireframe
|
|
for (size_t i = 0; i < totalTris; ++i) {
|
|
SDL_SetRenderDrawColor(rendererData->renderer, 255, 255, 255, 255);
|
|
SDL_RenderLine(rendererData->renderer, vertices[0].position.x, vertices[0].position.y, vertices[i+2].position.x, vertices[i+2].position.y);
|
|
SDL_RenderLine(rendererData->renderer, vertices[0].position.x, vertices[0].position.y, vertices[i+1].position.x, vertices[i+1].position.y);
|
|
SDL_RenderLine(rendererData->renderer, vertices[i+1].position.x, vertices[i+1].position.y, vertices[i+2].position.x, vertices[i+2].position.y);
|
|
}
|
|
#endif
|
|
}
|
|
|
|
static void SDL_Clay_RenderArc(Clay_SDL3RendererData *rendererData, const SDL_FPoint center, const float radius, const float startAngle, const float endAngle, const float thickness, const Clay_Color color) {
|
|
SDL_SetRenderDrawColor(rendererData->renderer, color.r, color.g, color.b, color.a);
|
|
|
|
const float radStart = startAngle * (SDL_PI_F / 180.0f);
|
|
const float radEnd = endAngle * (SDL_PI_F / 180.0f);
|
|
|
|
const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)(radius * 1.5f)); //increase circle segments for larger circles, 1.5 is arbitrary.
|
|
|
|
const float angleStep = (radEnd - radStart) / (float)numCircleSegments;
|
|
const float thicknessStep = 0.4f; //arbitrary value to avoid overlapping lines. Changing THICKNESS_STEP or numCircleSegments might cause artifacts.
|
|
|
|
for (float t = thicknessStep; t < thickness - thicknessStep; t += thicknessStep) {
|
|
SDL_FPoint points[numCircleSegments + 1];
|
|
const float clampedRadius = SDL_max(radius - t, 1.0f);
|
|
|
|
for (int i = 0; i <= numCircleSegments; i++) {
|
|
const float angle = radStart + i * angleStep;
|
|
points[i] = (SDL_FPoint){
|
|
SDL_roundf(center.x + SDL_cosf(angle) * clampedRadius),
|
|
SDL_roundf(center.y + SDL_sinf(angle) * clampedRadius) };
|
|
}
|
|
SDL_RenderLines(rendererData->renderer, points, numCircleSegments + 1);
|
|
}
|
|
}
|
|
|
|
SDL_Rect currentClippingRectangle;
|
|
|
|
void SDL_Clay_RenderClayCommands(Clay_SDL3RendererData *rendererData, Clay_RenderCommandArray *rcommands)
|
|
{
|
|
for (size_t i = 0; i < rcommands->length; i++) {
|
|
Clay_RenderCommand *rcmd = Clay_RenderCommandArray_Get(rcommands, i);
|
|
const Clay_BoundingBox bounding_box = rcmd->boundingBox;
|
|
const SDL_FRect rect = { (int)bounding_box.x, (int)bounding_box.y, (int)bounding_box.width, (int)bounding_box.height };
|
|
|
|
switch (rcmd->commandType) {
|
|
case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
|
|
Clay_RectangleRenderData *config = &rcmd->renderData.rectangle;
|
|
SDL_SetRenderDrawBlendMode(rendererData->renderer, SDL_BLENDMODE_BLEND);
|
|
SDL_SetRenderDrawColor(rendererData->renderer, config->backgroundColor.r, config->backgroundColor.g, config->backgroundColor.b, config->backgroundColor.a);
|
|
if (config->cornerRadius.topLeft > 0 || config->cornerRadius.topRight > 0 || config->cornerRadius.bottomLeft > 0 || config->cornerRadius.bottomRight > 0) {
|
|
SDL_Clay_RenderFillRoundedRect(rendererData, rect, config->cornerRadius, config->backgroundColor);
|
|
} else {
|
|
SDL_RenderFillRect(rendererData->renderer, &rect);
|
|
}
|
|
} break;
|
|
case CLAY_RENDER_COMMAND_TYPE_TEXT: {
|
|
Clay_TextRenderData *config = &rcmd->renderData.text;
|
|
TTF_Font *font = rendererData->fonts[config->fontId];
|
|
TTF_SetFontSize(font, config->fontSize);
|
|
TTF_Text *text = TTF_CreateText(rendererData->textEngine, font, config->stringContents.chars, config->stringContents.length);
|
|
TTF_SetTextColor(text, config->textColor.r, config->textColor.g, config->textColor.b, config->textColor.a);
|
|
TTF_DrawRendererText(text, rect.x, rect.y);
|
|
TTF_DestroyText(text);
|
|
} break;
|
|
case CLAY_RENDER_COMMAND_TYPE_BORDER: {
|
|
Clay_BorderRenderData *config = &rcmd->renderData.border;
|
|
|
|
const float minRadius = SDL_min(rect.w, rect.h) / 2.0f;
|
|
const Clay_CornerRadius clampedRadii = {
|
|
.topLeft = SDL_min(config->cornerRadius.topLeft, minRadius),
|
|
.topRight = SDL_min(config->cornerRadius.topRight, minRadius),
|
|
.bottomLeft = SDL_min(config->cornerRadius.bottomLeft, minRadius),
|
|
.bottomRight = SDL_min(config->cornerRadius.bottomRight, minRadius)
|
|
};
|
|
//edges
|
|
SDL_SetRenderDrawColor(rendererData->renderer, config->color.r, config->color.g, config->color.b, config->color.a);
|
|
if (config->width.left > 0) {
|
|
const float starting_y = rect.y + clampedRadii.topLeft;
|
|
const float length = rect.h - clampedRadii.topLeft - clampedRadii.bottomLeft;
|
|
SDL_FRect line = { rect.x - 1, starting_y, config->width.left, length };
|
|
SDL_RenderFillRect(rendererData->renderer, &line);
|
|
}
|
|
if (config->width.right > 0) {
|
|
const float starting_x = rect.x + rect.w - (float)config->width.right + 1;
|
|
const float starting_y = rect.y + clampedRadii.topRight;
|
|
const float length = rect.h - clampedRadii.topRight - clampedRadii.bottomRight;
|
|
SDL_FRect line = { starting_x, starting_y, config->width.right, length };
|
|
SDL_RenderFillRect(rendererData->renderer, &line);
|
|
}
|
|
if (config->width.top > 0) {
|
|
const float starting_x = rect.x + clampedRadii.topLeft;
|
|
const float length = rect.w - clampedRadii.topLeft - clampedRadii.topRight;
|
|
SDL_FRect line = { starting_x, rect.y - 1, length, config->width.top };
|
|
SDL_RenderFillRect(rendererData->renderer, &line);
|
|
}
|
|
if (config->width.bottom > 0) {
|
|
const float starting_x = rect.x + clampedRadii.bottomLeft;
|
|
const float starting_y = rect.y + rect.h - (float)config->width.bottom + 1;
|
|
const float length = rect.w - clampedRadii.bottomLeft - clampedRadii.bottomRight;
|
|
SDL_FRect line = { starting_x, starting_y, length, config->width.bottom };
|
|
SDL_SetRenderDrawColor(rendererData->renderer, config->color.r, config->color.g, config->color.b, config->color.a);
|
|
SDL_RenderFillRect(rendererData->renderer, &line);
|
|
}
|
|
//corners
|
|
if (config->cornerRadius.topLeft > 0) {
|
|
const float centerX = rect.x + clampedRadii.topLeft -1;
|
|
const float centerY = rect.y + clampedRadii.topLeft - 1;
|
|
SDL_Clay_RenderArc(rendererData, (SDL_FPoint){centerX, centerY}, clampedRadii.topLeft,
|
|
180.0f, 270.0f, config->width.top, config->color);
|
|
}
|
|
if (config->cornerRadius.topRight > 0) {
|
|
const float centerX = rect.x + rect.w - clampedRadii.topRight;
|
|
const float centerY = rect.y + clampedRadii.topRight - 1;
|
|
SDL_Clay_RenderArc(rendererData, (SDL_FPoint){centerX, centerY}, clampedRadii.topRight,
|
|
270.0f, 360.0f, config->width.top, config->color);
|
|
}
|
|
if (config->cornerRadius.bottomLeft > 0) {
|
|
const float centerX = rect.x + clampedRadii.bottomLeft -1;
|
|
const float centerY = rect.y + rect.h - clampedRadii.bottomLeft;
|
|
SDL_Clay_RenderArc(rendererData, (SDL_FPoint){centerX, centerY}, clampedRadii.bottomLeft,
|
|
90.0f, 180.0f, config->width.bottom, config->color);
|
|
}
|
|
if (config->cornerRadius.bottomRight > 0) {
|
|
const float centerX = rect.x + rect.w - clampedRadii.bottomRight;
|
|
const float centerY = rect.y + rect.h - clampedRadii.bottomRight;
|
|
SDL_Clay_RenderArc(rendererData, (SDL_FPoint){centerX, centerY}, clampedRadii.bottomRight,
|
|
0.0f, 90.0f, config->width.bottom, config->color);
|
|
}
|
|
|
|
} break;
|
|
case CLAY_RENDER_COMMAND_TYPE_SCISSOR_START: {
|
|
Clay_BoundingBox boundingBox = rcmd->boundingBox;
|
|
currentClippingRectangle = (SDL_Rect) {
|
|
.x = boundingBox.x,
|
|
.y = boundingBox.y,
|
|
.w = boundingBox.width,
|
|
.h = boundingBox.height,
|
|
};
|
|
SDL_SetRenderClipRect(rendererData->renderer, ¤tClippingRectangle);
|
|
break;
|
|
}
|
|
case CLAY_RENDER_COMMAND_TYPE_SCISSOR_END: {
|
|
SDL_SetRenderClipRect(rendererData->renderer, NULL);
|
|
break;
|
|
}
|
|
case CLAY_RENDER_COMMAND_TYPE_IMAGE: {
|
|
SDL_Texture *texture = (SDL_Texture *)rcmd->renderData.image.imageData;
|
|
const SDL_FRect dest = { rect.x, rect.y, rect.w, rect.h };
|
|
SDL_RenderTexture(rendererData->renderer, texture, NULL, &dest);
|
|
break;
|
|
}
|
|
default:
|
|
SDL_Log("Unknown render command type: %d", rcmd->commandType);
|
|
}
|
|
}
|
|
}
|