Sergii Liebodkin
5ba19a8a7f
wg_engine: shape bbox based rendering (optimization)
...
Before the current changes, all surfaces were painted using a full-screen overlay, no matter how large the object was rendered. This approach is redundant and required reorganization. At the moment, all objects are rendered using an overlay equal to the box of the object itself, which reduces the cost of filling the surface.
Also surfaces and images were divided into different entities, which reduces the pressure on memory.
Also geometry data for rendering and geometry data for calculations in system memory were logically separated.
2024-01-02 20:34:11 +09:00
Sergii Liebodkin
4164b36c8a
wg_engine: Added shape opacity value usage
...
[issues 1479: Opacity](#1479 )
Usage example:
// prepare a shape (Rectangle + Rectangle + Circle + Circle) with opacity
auto shape1 = tvg::Shape::gen();
shape1->appendRect(0, 0, 200, 200); //x, y, w, h
shape1->appendRect(100, 100, 300, 300, 100, 100); //x, y, w, h, rx, ry
shape1->appendCircle(400, 400, 100, 100); //cx, cy, radiusW, radiusH
shape1->appendCircle(400, 500, 170, 100); //cx, cy, radiusW, radiusH
shape1->fill(255, 255, 0); //r, g, b
shape1->opacity(128) //opacity
canvas->push(std::move(shape1));
2024-01-02 20:34:11 +09:00
Sergii Liebodkin
003464b7e5
wg_engine: refactor context handles
...
New approach provide:
- instance, adaptor, device and default queue
- device capabilitieas
- command buffer executor
- error handling
2024-01-02 20:34:11 +09:00
Sergii Liebodkin
e797cf63f4
wg_engine: refactor render targets handling
...
For further development of features, we need to create off-screen buffers that will allow us to implement functionality related to composition and blending, as well as for loading data to system memory from the framebuffer. Separating the framebuffer into a separate entity allows you to create several instances of them, switch between them, and blend them according to given rules.
For current time we have only a single render target instance, that have a handle to drawing into surface surface, like a native window.
New approach allows:
- offscreen rendering
- render pass handling
- switching between render targets
- ability to render images, strokes and shapes into independent render targets
2024-01-02 20:34:11 +09:00
Hermet Park
a6378fc673
wg_engine: apply tvg coding style.
2024-01-02 20:34:11 +09:00
Sergii Liebodkin
9742cfe293
wg_engine: pipelines and bind groups refactoring
...
- shader and system types synchronized
- pipelens and bind groups description separated
- pipelines description simplified
2024-01-02 20:34:11 +09:00
Sergii Liebodkin
51e98eebdb
Add support for textures color space formats
...
[Issues 1479: pictures](https://github.com/thorvg/thorvg/issues/1479 )
Formats supported:
ABGR8888
ARGB8888
ABGR8888S
ARGB8888S
2024-01-02 20:34:10 +09:00
Sergii Liebodkin
c5b642e3e7
wg_engine: introduced images drawing support
...
[issues 1479: pictures](https://github.com/thorvg/thorvg/issues/1479 )
auto picture = tvg::Picture::gen();
picture->load("images/test.png");
picture->translate(0, 0);
picture->size(100, 100);
picture->opacity(255);
canvas->push(std::move(picture));
2023-12-26 18:36:45 +09:00
Sergii Liebodkin
bad02c7de0
Added ability to draw solid strokes with dashes
...
[issues 1479: Shape](https://github.com/thorvg/thorvg/issues/1479 )
In order to build you need third party libraries. Before you start please read this: [LearnWebGPU](https://eliemichel.github.io/LearnWebGPU/getting-started/hello-webgpu.html )
Usage example:
// init glfw
glfwInit();
// create a windowed mode window and its opengl context
glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
GLFWwindow* window = glfwCreateWindow(800, 800, "WebGPU base app", nullptr, nullptr);
// get window size
int width{}, height{};
glfwGetWindowSize(window, &width, &height);
// init engine webgpu
tvg::Initializer::init(tvg::CanvasEngine::Wg, 0);
// create wg canvas
auto canvasWg = tvg::WgCanvas::gen();
canvas_wg->target(glfwGetWin32Window(window), width, height);
//Test for Stroke Dash for Arc, Circle, Rect
auto shape = tvg::Shape::gen();
shape->appendArc(70, 600, 160, 10, 30, true);
shape->appendCircle(70, 700, 20, 60);
shape->appendRect(130, 710, 100, 40);
shape->strokeFill(255, 0, 0);
shape->strokeWidth(5);
shape->strokeJoin(tvg::StrokeJoin::Round);
shape->strokeCap(tvg::StrokeCap::Round);
float dashPattern[2] = {20, 10};
shape->strokeDash(dashPattern, 2);
if (canvas_wg->push(std::move(shape)) != tvg::Result::Success) return;
while (!glfwWindowShouldClose(window)) {
// webgpu
canvas_wg->draw();
canvas_wg->sync();
// pull events
glfwPollEvents();
}
// terminate engine and window
tvg::Initializer::term(tvg::CanvasEngine::Wg);
glfwDestroyWindow(window);
glfwTerminate();
2023-12-26 18:18:48 +09:00
Sergii Liebodkin
41ea198a5e
Added ability to draw solid strokes
...
[issues 1479: Shape](https://github.com/thorvg/thorvg/issues/1479 )
In order to build you need third party libraries. Before you start please read this: [LearnWebGPU](https://eliemichel.github.io/LearnWebGPU/getting-started/hello-webgpu.html )
Usage example:
// init glfw
glfwInit();
// create a windowed mode window and its opengl context
glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
GLFWwindow* window = glfwCreateWindow(800, 800, "WebGPU base app", nullptr, nullptr);
// get window size
int width{}, height{};
glfwGetWindowSize(window, &width, &height);
// init engine webgpu
tvg::Initializer::init(tvg::CanvasEngine::Wg, 0);
// create wg canvas
auto canvasWg = tvg::WgCanvas::gen();
canvas_wg->target(glfwGetWin32Window(window), width, height);
//Test for Stroke Dash for Arc, Circle, Rect
auto shape = tvg::Shape::gen();
shape->appendArc(70, 600, 160, 10, 30, true);
shape->appendCircle(70, 700, 20, 60);
shape->appendRect(130, 710, 100, 40);
shape->strokeFill(255, 0, 0);
shape->strokeWidth(5);
shape->strokeJoin(tvg::StrokeJoin::Round);
shape->strokeCap(tvg::StrokeCap::Round);
if (canvas_wg->push(std::move(shape)) != tvg::Result::Success) return;
while (!glfwWindowShouldClose(window)) {
// webgpu
canvas_wg->draw();
canvas_wg->sync();
// pull events
glfwPollEvents();
}
// terminate engine and window
tvg::Initializer::term(tvg::CanvasEngine::Wg);
glfwDestroyWindow(window);
glfwTerminate();
2023-12-26 18:18:42 +09:00
SergeyLebedkin
4f0fbc459c
wg_engine: Added a feature to draw multiple radial gradient filled shapes
2023-12-26 17:51:59 +09:00
Sergii Liebodkin
db1f171d2a
wg_engine: Added ability to draw multiple linear gradient filled shapes
...
[issues 1479: LinearGradient](thorvg#1479)
In order to build you need third party libraries. Before you start please read this: [LearnWebGPU](https://eliemichel.github.io/LearnWebGPU/getting-started/hello-webgpu.html )
Usage example:
// init glfw
glfwInit();
// create a windowed mode window and its opengl context
glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
GLFWwindow* window = glfwCreateWindow(800, 800, "WebGPU base app", nullptr, nullptr);
// get window size
int width{}, height{};
glfwGetWindowSize(window, &width, &height);
// init engine webgpu
tvg::Initializer::init(tvg::CanvasEngine::Wg, 0);
// create wg canvas
auto canvasWg = tvg::WgCanvas::gen();
canvas_wg->target(glfwGetWin32Window(window), width, height);
// gradient color stops
tvg::Fill::ColorStop colorStops[2];
colorStops[0] = {0, 0, 0, 0, 255};
colorStops[1] = {1, 255, 255, 255, 255};
// linear gradient
auto fill = tvg::LinearGradient::gen();
fill->linear(0, 0, 400, 400);
fill->colorStops(colorStops, 2);
// prepare rectangle
auto shape1 = tvg::Shape::gen();
shape1->appendRect(0, 0, 400, 400); //x, y, w, h
shape1->fill(std::move(fill));
canvas_wg->push(std::move(shape1));
// gradient color stops
tvg::Fill::ColorStop colorStops2[3];
colorStops2[0] = { 0, 255, 0, 0, 255 };
colorStops2[1] = { 0.5, 255, 255, 0, 255 };
colorStops2[2] = { 1, 255, 255, 255, 255 };
// linear gradient
auto fill2 = tvg::LinearGradient::gen();
fill2->linear(400, 200, 400, 600);
fill2->colorStops(colorStops2, 3);
// prepare circle
auto shape2 = tvg::Shape::gen();
shape2->appendCircle(400, 400, 200, 200); //cx, cy, radiusW, radiusH
shape2->fill(std::move(fill2));
canvas_wg->push(std::move(shape2));
// gradient color stops
tvg::Fill::ColorStop colorStops3[4];
colorStops3[0] = { 0, 0, 127, 0, 127 };
colorStops3[1] = { 0.25, 0, 170, 170, 170 };
colorStops3[2] = { 0.5, 200, 0, 200, 200 };
colorStops3[3] = { 1, 255, 255, 255, 255 };
// linear gradient
auto fill3 = tvg::LinearGradient::gen();
fill3->linear(450, 600, 750, 600);
fill3->colorStops(colorStops3, 4);
// prepare ellipse
auto shape3 = tvg::Shape::gen();
shape3->appendCircle(600, 600, 150, 100); //cx, cy, radiusW, radiusH
shape3->fill(std::move(fill3));
canvas_wg->push(std::move(shape3));
while (!glfwWindowShouldClose(window)) {
// webgpu
canvas_wg->draw();
canvas_wg->sync();
// pull events
glfwPollEvents();
}
// terminate engine and window
tvg::Initializer::term(tvg::CanvasEngine::Wg);
glfwDestroyWindow(window);
glfwTerminate();
2023-12-26 17:51:39 +09:00
Sergii Liebodkin
938b69688d
wg_engine: Added ability to draw multiple solid color filled shapes
...
[issues 1479: Shape](https://github.com/thorvg/thorvg/issues/1479 )
In order to build you need third party libraries. Before you start please read this: [LearnWebGPU](https://eliemichel.github.io/LearnWebGPU/getting-started/hello-webgpu.html )
Usage example:
// init glfw
glfwInit();
// create a windowed mode window and its opengl context
glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
GLFWwindow* window = glfwCreateWindow(800, 800, "WebGPU base app", nullptr, nullptr);
// get window size
int width{}, height{};
glfwGetWindowSize(window, &width, &height);
// init engine webgpu
tvg::Initializer::init(tvg::CanvasEngine::Wg, 0);
// create wg canvas
auto canvasWg = tvg::WgCanvas::gen();
canvas_wg->target(glfwGetWin32Window(window), width, height);
// prepare a shape (Rectangle + Rectangle + Circle + Circle)
auto shape1 = tvg::Shape::gen();
shape1->appendRect(0, 0, 200, 200); //x, y, w, h
shape1->appendRect(100, 100, 300, 300, 100, 100); //x, y, w, h, rx, ry
shape1->appendCircle(400, 400, 100, 100); //cx, cy, radiusW, radiusH
shape1->appendCircle(400, 500, 170, 100); //cx, cy, radiusW, radiusH
shape1->fill(255, 255, 0); //r, g, b
canvas_wg->push(std::move(shape1));
while (!glfwWindowShouldClose(window)) {
// webgpu
canvas_wg->draw();
canvas_wg->sync();
// pull events
glfwPollEvents();
}
// terminate engine and window
tvg::Initializer::term(tvg::CanvasEngine::Wg);
glfwDestroyWindow(window);
glfwTerminate();
2023-12-26 17:51:17 +09:00
SergeyLebedkin
35b03c826e
wg_engine: introduce a webgpu canvas(engine)
...
WebGPU is a Render Hardware Interface built on top of the various APIs
provided by the driver/OS depending on your platform.
WebGPU exposes an API for performing operations,
such as rendering and computation, on a Graphics Processing Unit.
WebGPU official documentation: https://www.w3.org/TR/webgpu/
The new engine type introduced: tvg::CanvasEngine::Wg
The new canvas type introduced: tvg::WgCanvas
Example:
$meson setup build -Dengines=wg_beta
`
// init engine webgpu
tvg::Initializer::init(tvg::CanvasEngine::Wg, 0);
// create wg canvas
auto canvasWg = tvg::WgCanvas::gen();
canvas_wg->target(glfwGetWin32Window(window), width, height);
// ...
// terminate engine and window
tvg::Initializer::term(tvg::CanvasEngine::Wg);
`
Still this feature is under the beta
Issue: https://github.com/thorvg/thorvg/issues/1479
2023-12-26 17:49:16 +09:00