Sergii Liebodkin
02ebfc1332
wg_engine: wrong gradient transformation fixed
...
issue: https://github.com/thorvg/thorvg/issues/2620
2024-09-30 16:44:22 +09:00
Hermet Park
371139e220
renderer: blending refactoring++
...
- reordered the blending types to align with lottie spec.
- removed source over.
2024-09-30 16:44:22 +09:00
Sergii Liebodkin
adbb6be504
wg_engine: scene blending optimization
...
- used hardware blending stage for scene blending
- used AABB for scene blending
- reduced number of offfscreen buffers coping
- reduced number of render pass switching
- used render pipelines abilities to convert offscreen pixel format to screen pixel format
- removed unused shaders
2024-09-30 16:44:22 +09:00
Sergii Liebodkin
356cae5e8a
wg_engine: aabb based masking optimization
...
* used fragment shaders for mask applience instead of compute shaders
* less render targets swithing
* shape aabb based on transformed shape bbox
2024-09-30 16:44:21 +09:00
Sergii Liebodkin
9efab30b00
webgpu: shaders refactoring
...
Deep shader refactoring for the following purposes:
* used pre-calculated gradient texture instead of per-pixel gradient map computation
* used HW wrap samples for fill spread setting
* unified gradient shader types
* used single shader module for composition instead of signle module per composition type
* used single shader module for blending for each of fill type (solid, gradient, image) instaed of signle module per blend type
* much easier add new composition and blend equations
* get rided std::string uasge
* shaders code is more readable
2024-09-30 16:44:21 +09:00
Sergii Liebodkin
55d248a31d
webgpu: light/dark mask mode support
...
[issues 2608: light/dark mask](#2608 )
* CompositeMethod::LightMask
* CompositeMethod::DarkMask
2024-09-30 15:52:50 +09:00
Sergii Liebodkin
f281cc9e92
wg_engine: composition and blend optimization
...
* bind groups creation in real time removed - performance boost
* blend and composition shaders decomposed - performance boost
* shader modules and pipeline layouts generalized - less memory usage
* shared single stencil buffer used - less memory usage
* bind groups usage simplified
* general context API simplified and generalized
* all rendering logic moved into new composition class
* ready for hardware MSAA (in next steps)
* ready for direct mask applience (in next steps)
2024-09-30 15:52:44 +09:00
Sergii Liebodkin
cff78dc067
wg_engine: emscripten and browser support
...
[issues 2410: emscripten support](https://github.com/thorvg/thorvg/issues/2410 )
- Research and prototype the Emscripten build with WebGPU.
meson setup script:
meson setup builddir -Ddefault_library=static -Dloaders=all -Dsavers="all" -Dbindings="wasm_beta" -Dengines="wg_beta" --cross-file ./cross/wasm_webgpu.txt
2024-09-30 15:48:18 +09:00
Sergii Liebodkin
8d150a17b4
wg_engine: fix fill spread artifacts
...
[issues 2435: ](FillSpread) example
Fixed range selector edged cases
2024-09-30 15:35:22 +09:00
Sergii Liebodkin
03b36cea7b
wg_engine: ClipPath support
...
[issues 1479: ClipPath](#1479 )
Supports ClipPath composition.
Clip path composition is an only composition type who doesn't ignore blend method.
Clip path is a combination of composition approach and blend approach using compute shader
2024-09-30 15:35:10 +09:00
Sergii Liebodkin
aae722e7ba
wg_engine: fix masking methods support
...
See Masking, InvMasking, LumaMasking, InvLumaMasking, MaskingMethods examples
sw/webgpu
2024-09-30 15:21:20 +09:00
Sergii Liebodkin
e27ce23d4b
wg_engine: fix blend methods support
...
Full review of blending support.
Support Solid color, Gradient fill and Image blending workflows
See Blending, SceneBlending, Opacity examples
2024-09-30 12:51:02 +09:00
Sergii Liebodkin
21286f679d
wg_engine: fix scene opacity usage
...
Changed blend equation to make it the same as for referenced sw renderer.
2024-09-30 12:48:58 +09:00
Josh Soref
e3c66db301
common: fix 178+ spelling errors
2024-09-30 12:41:38 +09:00
Sergii Liebodkin
9c9999169e
wg_engine: fix scene rendering with blend
...
Fix allplience of the blend method, that setuped for scene, but not for a shape
Overlay blend func changed to be close to spec
2024-06-24 14:56:14 +09:00
Sergii Liebodkin
596845d1cf
wg_engine: fix composition math
...
Fix AlphaMask, InvAlphaMask, LumaMask and InvLumaMask math
Fix double apllience of opacity value
2024-06-24 14:52:21 +09:00
Sergii Liebodkin
47b9866f8b
wg_engine: cross-platform support
...
it provide changes public API for webgpu canvas interface to provide nessessary handles to native window for different platforms:
API Change:
- Result target(void *instance, void *surface, uint32_t w, uint32_t h) noexcept;
2024-06-24 14:50:28 +09:00
Sergii Liebodkin
eadf66e178
wg_engine: fix color buffer corruption with wgpu-opengl wrapper (linux)
...
In a case of usage stencil buffer only we need to turn off an color target writes. In other case color buffer fill be filled by unxepcted color if fragment shader did not return any value.
It happens in a case on OpenGL realization of webgpu, that used in linux
Befire:
After:
2024-06-24 14:37:15 +09:00
Sergii Liebodkin
ddc6fc7f0b
wg_engine: blending and composition optimization
...
[issues 1479: Masking, InvMasking, LumaMasking, InvLumaMasking](#1479 )
Computes composition and blending using simgle pass istead of two full screen passes
2024-06-24 12:24:53 +09:00
Sergii Liebodkin
4f204b5e13
wg_engine: Lottie extensions
...
[issues 1479: LottieExtensions](#1479 )
LottieExtensions example supports
Supports multiple color stops for gradient fill (redial and linear)
2024-04-06 12:48:30 +09:00
Sergii Liebodkin
80d454e2d6
wg_engine: fill spread
...
[issues 1479: LinearGradient, RadialGradient](#1479 )
Introduced fill spreads: Pad, Reflect, Repeat
Pad:
Reflect:
Repeat:
2024-04-06 12:08:21 +09:00
Sergii Liebodkin
850e6ef466
wg_engine: antialiasing
...
[issues 1479: antialiasing](#1479 )
Anti-aliasing implementation
Implements antialiasing as a post process on cimpute shaders and original render target with scale of 2x.
Can be modified as an external settings
2024-04-06 12:08:21 +09:00
Sergii Liebodkin
8f3b822f18
wg_engine: clenup shader sources
...
Remove unused composition/blending shader sources
2024-04-05 17:48:22 +09:00
Sergii Liebodkin
9e0cc0298c
wg_engine: introduced blending
...
[issues 1479: blending](#1479 )
Supported blend settings:
Normal
Add
Screen
Multiply
Overlay
Difference
Exclusion
SrcOver
Darken
Lighten
ColorDodge
ColorBurn
HardLight
SoftLight
2024-04-05 17:41:44 +09:00
Sergii Liebodkin
84d3ef7184
wg_engine: introduced compute pipeline entities
...
introduces posibility to create compute pipelines
does not affect functionality
2024-04-05 17:37:49 +09:00
Sergii Liebodkin
96e0794a67
wg_engine: introduced scene opacity
...
[issues 1479: opacity](#1479 )
Supported opacity value for scene
Usage example:
//Create a Scene
auto scene = tvg::Scene::gen();
scene->opacity(100);
//Prepare Circle
auto shape1 = tvg::Shape::gen();
shape1->appendCircle(400, 400, 250, 250);
shape1->fill(255, 255, 0);
shape1->opacity(100);
scene->push(std::move(shape1));
//Round rectangle
auto shape2 = tvg::Shape::gen();
shape2->appendRect(450, 100, 200, 200, 50, 50);
shape2->fill(0, 255, 0);
shape2->strokeWidth(10);
shape2->strokeFill(255, 255, 255);
scene->push(std::move(shape2));
canvas->push(std::move(scene));
2024-04-05 17:28:34 +09:00
Sergii Liebodkin
af6969e15e
wg_engine: introduced composition ability
...
[issues 1479: Masking](#1479 )
Supported composition methods:
AlphaMask
InvAlphaMask
LumaMask
InvLumaMask
AddMask
SubtractMask
IntersectMask
DifferenceMask
Usage example:
//Solid Rectangle
auto shape = tvg::Shape::gen();
shape->appendRect(0, 0, 400, 400);
shape->fill(0, 0, 255);
//Mask
auto mask = tvg::Shape::gen();
mask->appendCircle(200, 200, 125, 125);
mask->fill(255, 255, 255); //AlphaMask RGB channels are unused.
//Nested Mask
auto nMask = tvg::Shape::gen();
nMask->appendCircle(220, 220, 125, 125);
nMask->fill(255, 255, 255); //AlphaMask RGB channels are unused.
mask->composite(std::move(nMask), tvg::CompositeMethod::AlphaMask);
shape->composite(std::move(mask), tvg::CompositeMethod::AlphaMask);
canvas->push(std::move(shape));
//Star
auto star = tvg::Shape::gen();
star->fill(80, 80, 80);
star->moveTo(599, 34);
star->lineTo(653, 143);
star->lineTo(774, 160);
star->lineTo(687, 244);
star->lineTo(707, 365);
star->lineTo(599, 309);
star->lineTo(497, 365);
star->lineTo(512, 245);
star->lineTo(426, 161);
star->lineTo(546, 143);
star->close();
star->strokeWidth(30);
star->strokeJoin(tvg::StrokeJoin::Miter);
star->strokeFill(255, 255, 255);
//Mask3
auto mask3 = tvg::Shape::gen();
mask3->appendCircle(600, 200, 125, 125);
mask3->fill(255, 255, 255); //AlphaMask RGB channels are unused.
mask3->opacity(200);
star->composite(std::move(mask3), tvg::CompositeMethod::AlphaMask);
if (canvas->push(std::move(star)) != tvg::Result::Success) return;
2024-04-05 17:28:08 +09:00
Jinny You
92288c8291
updated copyright date ( #1866 )
2024-01-02 20:34:12 +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
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
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
