paintlab / pixelfarm Goto Github PK

View Code? Open in Web Editor NEW

155.0 15.0 19.0 198.41 MB

From Vectors to (sub) Pixels, C# 2D Rendering Library

License: Other

C# 99.80% GLSL 0.01% Tcl 0.03% Ruby 0.10% Python 0.07% CSS 0.01% HTML 0.01%

rendering-engine csharp canvas svg painting drawing rasterizer gles vector-graphics gpu

pixelfarm's Introduction

PixelFarm

Hardware and Software 2D Rendering Library

Hardware Rendering Technology:

The library uses OpenGL ES2+ and its Shading Langauge (GLSL) as its hardware-renderer backend.

a lion cup below is read from svg file=> tessellated and rendered with GLES Painter

GLES backend Painter

Software Rendering Technology:

The library also provides a 'classic' (pure) software renderer.

It uses a forked version of Agg-Sharp, in side this lib it is called MiniAgg

Agg-Sharp is the C# port of Anti-Grain Geometry (AGG) version (version 2.4, BSD license)

and Big thanks go to https://github.com/MatterHackers/agg-sharp

Left: MiniAgg backend Painter vs Right: Gdi+

Agg-based Painter provides a high quality graphics output.

PixelFarm's Agg (1) vs Chrome (2), Ghost script's Tiger.svg(https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg)

Agg's result, bitmap zoom-in to see fine details

The Agg has various customizable scanline rasterizers. You can use its scanline technique it many ways. In this library, for example, It customize the scanline rasterizer to create
lcd-effect subpixel rendering effect (see below), msdf3 texture (see #55) etc.

PixelFarm's Lcd-effect Subpixel Rendering

The library provides a special scanline rasterizer that produces lcd-effect subpixel rendering output. You may need this when you want to make a font-glyph look sharper/easy to read on general computer monitor (96 dpi).

If you look closely, It not just an anti-alias line, it is lcd-effect subpixel rendering antialias line.

zoom view of above picture

lcd effect subpixel rendering blends a single color to nearby pixels you can see it not just a simple red or blue line

black on white, lcd-effect

With black line on white background, the output is not just black color, It has many color inside it. Not only line but curves too, below images are lcd-effect on curves of font glyphs.

The core library does not provide a text-rendering functions directly.
It provide a 'blank text printer' (abstract) for you.

The library has one example of text printer, see=> PixelFarm.Typography

How to read a font file, layout the glyphs, print to text are special topics. If you are interested, please visit Typography (https://github.com/LayoutFarm/Typography).

The HtmlRenderer example!

Now we can render a high quality graphics, we have a high quality font output too.

Why don't we try to render a Web?

HtmlRenderer on GLES2 surface, text are renderered with the Typography, please note the text selection on the Html Surface.

If you are interested in HtmlRenderer, visit here => https://github.com/LayoutFarm/HtmlRenderer,

HOW TO BUILD

see #37

SUB PROJECT ARRANGMENT

see https://github.com/PaintLab/PixelFarm/tree/master/src

License:

The project is based on multiple open-sourced projects (listed below) all using permissive licenses.

A license for a whole project is MIT.

but if you use some part of the code please check each source file's header for the licensing info.

Geometry

BSD, 2002-2005, Maxim Shemanarev, Anti-Grain Geometry - Version 2.4, http://www.antigrain.com

BSD, 2007-2014, Lars Brubaker, agg-sharp, https://github.com/MatterHackers/agg-sharp

ZLIB, 2015, burningmine, CurveUtils. https://github.com/burningmime/curves

Boost, 2010-2014, Angus Johnson, Clipper.

BSD, 2009-2010, Poly2Tri Contributors, https://github.com/PaintLab/poly2tri-cs

SGI, 2000, Eric Veach, Tesselate.

MS-PL, 2018, SVG.NET, https://github.com/vvvv/SVG

MIT, 2018, Rohaan Hamid, https://github.com/rohaanhamid/simplify-csharp

Image Processing

MIT, 2008, dotPDN LLC, Rick Brewster, Chris Crosetto, Tom Jackson, Michael Kelsey, Brandon Ortiz, Craig Taylor, Chris Trevino, and Luke Walker., OpenPDN v 3.36.7 (Paint.NET), https://github.com/rivy/OpenPDN

BSD, 2002-2005, Maxim Shemanarev, Anti-Grain Geometry - Version 2.4, http://www.antigrain.com

MIT, 2016, Viktor Chlumsky, https://github.com/Chlumsky/msdfgen

MIT, 2009-2015, Bill Reiss, Rene Schulte and WriteableBitmapEx Contributors, https://github.com/teichgraf/WriteableBitmapEx

Apache2, 2012, Hernán J. González, https://github.com/leonbloy/pngcs

Apache2, 2010, Sebastian Stehle, .NET Image Tools Development Group. , https://imagetools.codeplex.com/

MIT, 2018, Tomáš Pažourek, Colourful, https://github.com/tompazourek/Colourful

MIT, 2011, Inedo, https://github.com/Inedo/iconmaker

Font

Apache2, 2016-2017, WinterDev, Samuel Carlsson, Sam Hocevar and others, https://github.com/LayoutFarm/Typography

Apache2, 2014-2016, Samuel Carlsson, https://github.com/vidstige/NRasterizer

MIT, 2015, Michael Popoloski, https://github.com/MikePopoloski/SharpFont

The FreeType Project LICENSE (3-clauses BSD style),2003-2016, David Turner, Robert Wilhelm, and Werner Lemberg and others, https://www.freetype.org/

Platforms

MIT, 2015-2015, Xamarin, Inc., https://github.com/mono/SkiaSharp

MIT, 2006-2009, Stefanos Apostolopoulos and other Open Tool Kit Contributors, https://github.com/opentk/opentk

MIT, 2013, Antonie Blom, https://github.com/andykorth/Pencil.Gaming

Demo

MIT, 2017, Wiesław Šoltés, ColorBlender, https://github.com/wieslawsoltes/ColorBlender

BSD, 2015, Darren David [email protected], https://github.com/nobutaka/EasingCurvePresets

pixelfarm's People

Contributors

Stargazers

Watchers

Forkers

asmboom qcjxberin cs-phillips gpaluk dhilip89 happypig375 biduc heruix 52chasedream brezza92 erisonliang danieloff marcelomml zahhar-ismail insinfo bubdm kns98 alexandersemenyak tazdij

pixelfarm's Issues

SVG implementation

Oblique Glyph Simulation

move to LayoutFarm/Typography#141

[INFO] Excerp from Agg

Maxim's note on C++ version:

see https://pdfium.googlesource.com/pdfium/+/master/third_party/agg23/agg_rasterizer_scanline_aa.cpp#35

...
The author gratefully acknowleges the support of David Turner,
Robert Wilhelm, and Werner Lemberg - the authors of the FreeType
libray - in producing this work. See http://www.freetype.org for details.

Initially the rendering algorithm was designed by David Turner and the
other authors of the FreeType library - see the above notice. I nearly
created a similar renderer, but still I was far from David's work.
I completely redesigned the original code and adapted it for Anti-Grain
ideas. Two functions - render_line and render_hline are the core of
the algorithm - they calculate the exact coverage of each pixel cell
of the polygon. I left these functions almost as is, because there's
no way to improve the perfection - hats off to David and his group!

All other code is very different from the original.

Agg

from http://www.antigrain.com/doc/introduction/introduction.agdoc.html

...
Yet Another Invention of the Wheel
Anti-Grain Geometry is not a solid graphic library and it's not very easy to use. I consider AGG as a “tool to create other tools”. It means that there's no “Graphics” object or something like that, instead, AGG consists of a number of loosely coupled algorithms that can be used together or separately. All of them have well defined interfaces and absolute minimum of implicit or explicit dependencies.

Anti-Aliasing and Subpixel Accuracy

Anti-Aliasing is a very well known technique used to improve the visual quality of images when displaying them on low resolution devices. It's based on the properties of the human vision. Look at the following picture and try to guess what it means.
..

Anti-Aliasing doesn't make you see better, it basically makes you brain work better and reconstruct missing details. The result is great. It allows us to draw much more detailed maps for example.

...

Implement System.Drawing !

Not hurry,
for study and just a fun task :)

see : comments in https://github.com/dotnet/corefx/issues/20325
esp this https://github.com/dotnet/corefx/issues/20325#issuecomment-329292891

then

use some C# => C/C++ tool
to convert it to native C/C++ code.

About subpixel rendering

Do I need to use the agg-sharp backend for subpixel rendering? Is any other backend unable to do this? Is the agg-sharp backend inside the Backend.Paintfx project?

Developing Documentation

see:
http://www.songho.ca/opengl/gl_pipeline.html
https://openglinsights.com/pipeline.html

snapshot

PixelFarm's Agg (pure software)

2. GDI+

3. PixelFarm's GLES2 + AA shader

4. SkiaSharp Memory Backend

5. SkiaSharp GLES Backend

Feb 2017, 2000 commits

pic 1: TestGLES_GLFW_Basic
(https://github.com/prepare/PixelFarm-dev/tree/master/a_mini/projects/Tests/TestGLES_GLFW_Basic)

pic 1: WinForm, Skia GL Canvas surface
(https://github.com/prepare/PixelFarm-dev/tree/master/a_mini/projects/Tests/TestSkia1)

pic 2: WinForm, Skia Memory surface
(https://github.com/prepare/PixelFarm-dev/tree/master/a_mini/projects/Tests/TestSkia1)

pic 1: GLFW +SKIA (Native Windows / No WinForm/ No System.Drawing)

(https://github.com/prepare/PixelFarm-dev/tree/master/a_mini/projects/Tests/TestGLES_SKIA_GLFW)

pic 2: GLFW +GLES2 (Native Windows / No WinForm/ No System.Drawing)

(1) load img with managed loader(https://github.com/PaintLab/ImgCodec), render to GL canvas
(2) load img, pass to GLES2 shader (Blur shader) then render to GL canvas

(https://github.com/prepare/PixelFarm-dev/tree/master/a_mini/projects/Tests/TestGLES_SKIA_GLFW)

Angle's GLES2 (https://github.com/google/angle)

[INFO] Tesselation Note

OpenGL Tess/ Winding Rule Type Note:

from https://www.glprogramming.com/red/chapter11.html

see more => http://what-when-how.com/opengl-programming-guide/polygon-tessellation-tessellators-and-quadrics-opengl-programming-part-2/

[INFO] GLCanvas Coordinate note

GLCanvas

This note is about coordinate of our GLCanvas implementation.

I use GLES2 or GLES3. (Angle on Windows)
Original GL, (0,0) is left-bottom
Html5 Canvas/ SVG Canvas, (0,0) is left-top

on GLRenderSurface

we have orthoView (transformation) matrix and orthoFlipYandPullDown matrix

pic 1: orthoView and orthoFlipYandPullDown transformation matrix

Before FlipY
I draw red rects from (0,0)-> (5,5) -> (10,10)....

pic 2: Before FlipY, original GL, small red rectangles run from left-bottom to right-top

After FlipY and Pull-down

pic 3: after FlipY and Pull down , mimic Html5/SVG/UI canvas, small red rects run from left-top to right-bottom

Before FlipY

pic 4: Before FlipY, lion.svg

After FlipY and Pull-down

pic 5: After FlipY and pull-down, lion.svg

[INFO] Stroke Generator Notes

SoftEngine license?

Hello @davrous,

I downloaded the original code from the link (https://www.davrous.com/2013/06/13/tutorial-series-learning-how-to-write-a-3d-soft-engine-from-scratch-in-c-typescript-or-javascript),

and modify it to make it runs on WindowForms. (here => https://github.com/PaintLab/PixelFarm.External/tree/master/src/SoftEngineGdiPlus)

step 6,WinForms, un-optimized, avg 19ms per frame, 52 fps

compare with the original js version on FireFox 58

@davrous

Which license for your SoftEngine project ?
Is it permissive ?

[INFO] Mask

Before and After apply Mask

some svg 'clip region', so we implement that effect with mask.

1. Agg/CpuBlit
see => https://github.com/PaintLab/PixelFarm/blob/dev/src/PixelFarm/PixelFarm.Drawing/7_CpuBlitPainter/DrawBoard/AggPainter.cs#L89

volcano.svg, rendered with Agg, left (no mask), right (with mask)

2. GLES2
see =>https://github.com/PaintLab/PixelFarm/blob/dev/src/PixelFarm/PixelFarm.Drawing.GLES/Painter/GLPainter.cs#L61

volcano.svg, rendered with GLES2 (disable line-smooth-shader), left (no mask), right (with mask)

Clean build fails - many missing files in Typography project

I have the latest versions of PixelFarm and Typograhy projects, but when building PixelFarm I get many errors about missing files in the Typography projects eg:

Typography\PixelFarm.Typography\1.1_Drawing_Fonts\GlyphSvgStore.cs' could not be found.
Typography\Typography.OpenFont\Tables.BitmapAndSvgFonts\EBSC.cs' could not be found.

It seems like the latest versions of the projects are not aligned. Any suggestions for getting a working build?

Alternatively, is there anywhere I can get binaries of PixelFarm that will work with HtmlRenderer, as that's what I'm really wanting.

GPU-based Glyph Rendering

see ...
https://pdfs.semanticscholar.org/9f2b/e13f74ad153de8052864317e887faaba6989.pdf

http://www.mdk.org.pl/2007/10/27/curvy-blues

https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html

https://www.reddit.com/r/opengl/comments/1a1vai/loop_and_blinn_quadratic_curves/

http://www.rpenalva.com/blog/?p=107#more-107

https://stackoverflow.com/questions/15519142/resolution-independent-cubic-bezier-drawing-on-gpu-blinn-loop

https://stackoverflow.com/questions/20970673/how-to-solve-rendering-artifact-in-blinn-loops-resolution-independent-curve-ren

https://github.com/hansent/lbfont

https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac

http://gaps-zju.org/pathrendering/GPUpathrendering.pdf

other interesting path rendering

http://on-demand.gputechconf.com/gtc/2015/presentation/S5578-Diego-Nehab.pdf

http://josiahmanson.com/research/scanline_rasterization/scanline_rasterization.pdf

http://jcgt.org/published/0006/02/02/paper.pdf

from
http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

https://en.wikipedia.org/wiki/Green%27s_theorem

Glyph Analysis

Now, You can imagine "How to implement Font Variation" (LayoutFarm/Typography#37).

This issue is designed for documentation project.
If you want to comment, just create a new issue and link back.

[NOTES] Premultiplied alpha

Premultiplied alpha

from from https://microsoft.github.io/Win2D/html/PremultipliedAlpha.htm

...

Alpha in Win2D

Win2D uses straight alpha in its API surface, but premultiplied alpha for internal rendering operations.

Windows.UI.Color values use straight alpha. Whenever you pass a color to a Draw* or Fill* method, set the color of a brush, or clear to a color value, this color is specified using straight alpha.

The pixel values stored in a bitmap or rendertarget, and the drawing or blending operations that operate on these surfaces, use premultiplied alpha. When bitmaps are loaded from a file their contents are automatically converted into premultiplied format. When you call a Win2D drawing method, its color parameter is converted from straight to premultiplied before the actual drawing takes place. ....

see more at
https://blogs.msdn.microsoft.com/shawnhar/2009/11/06/premultiplied-alpha/

https://blogs.msdn.microsoft.com/shawnhar/2009/11/07/premultiplied-alpha-and-image-composition/

http://ssp.impulsetrain.com/gamma-premult.html

.NET Standard version of PixelFarm

Curve Intersect

see https://github.com/Morhaus/curve-intersection

[INFO] Brushes Notes

[NOTES]: Big and Little Endian

from https://www.cs.umd.edu/class/sum2003/cmsc311/Notes/Data/endian.html

development snapshot

SubPixel Rendering Developement Snapshot

pic 1: GLES2 glyph texture with subpixel rendering., (top) use color component1. (middle) use color component2, (bottom) use color component3.

pic 2: Agg (left) vs GLES2 subpix rendering(right), Agg image look shaper than GLES version. In this version, still not correct (dev in progress ...).

[INFO] Agg Render Surface + WriteableBitmapEx

On the same AggRender Surface, Now we have another render choice => WriteableBitmapEx (https://github.com/teichgraf/WriteableBitmapEx)

(1) agg, (2) WriteableBitmapEx (FastMode, no AA)

Msdf3, Font TextureAtlas Development

Preview

I have a modified version of the originalMsdf gen.

I call it Msdf3

I optimize 'Closest edge search' by using 'closet edges lookup table bitmap'

I have implement it here...

please note that now we are in debug mode,
it should be faster on release mode

All tests use Roboto font, 26 pts

1. PixelFarm's LcdEffect SubPixelRendering Atlas texture

(click on the image to see detail)

PixelFarm's LcdEffectSubPixelRendering Atlas Texture, built-time about 220ms

2. Msdf gen,C# port from original

Msdf, C# version, built-time about 7,101ms

3. a Modified version, (I call it 'Msdf3')

Msdf3, C# version, built-time about 1,096ms

Event the result images are different, but it give the acceptable glyph image,
(see later)

Update latest Typography

Finish :)

Add AsmJit, SSE, AVX support!

see

also

https://www.codeproject.com/Tips/855149/Csharp-Fast-Memory-Copy-Method-with-x-Assembly-Usa

https://blogs.msdn.microsoft.com/devinj/2005/07/13/dynamically-writing-and-executing-native-assembly-in-c/

https://blogs.msdn.microsoft.com/dotnet/2018/10/10/using-net-hardware-intrinsics-api-to-accelerate-machine-learning-scenarios/?utm_source=vs_developer_news&utm_medium=referral

https://github.com/google/swiftshader

https://github.com/john-h-k/MathSharp

https://github.com/ispc/ispc

PostScript and Pdf

https://github.com/apple/cups

https://www.cups.org/doc/postscript-driver.html

https://www.adobe.com/content/dam/acom/en/devnet/actionscript/articles/PLRM.pdf

https://www-cdf.fnal.gov/offline/PostScript/5003.PPD_Spec_v4.3.pdf

https://www-cdf.fnal.gov/offline/PostScript/PLRM2.pdf

http://www.tailrecursive.org/postscript/postscript.html

How to deal with 3 repo?, Submodules consideration

Here are the errors (too many to put in here)
https://docs.google.com/document/d/1OYyfHqRinmgp1Fnz4UJBTY2lIj0Wvecc7TuQO-mvtH0/edit?usp=sharing
And could you please release NuGet packages for this amazing project

Fixing SmoothLineAA shader

before and after fixing =>
59e4a30

more info see => https://github.com/PaintLab/PixelFarm/wiki/Drawing-LineAA-with-OpenGL

pic 1: (1) before update weight, (2) weight = 0.625, (3) original Agg, reference , (4) weight= 0.55

From pic 1
(1), (2), (4) were rendered with GLES2 (hardware rendering).

(3) was rendered with Agg

Another errors:

Red rectangles show missing svg part => Tess problem?

HAPPY NEW YEAR 2020 :)

Time is too short.
Don't be negligent

simulate some italic glyph font (if not found)

Loading dll issue in TestGLES_SKIA_GLFW Example

1- TestGLES_SKIA_GLFW has the dependency of PixelFarm.Drawing.GLES2.dll
2- PixelFarm.Drawing.GLES2 has the dependency of PixelFarm.Typography.dll
3- PixelFarm.Typography hasthe dependency of Typography.Contours.dll
4- Typography.Contours has the dependency of Typography.OpenFont.dll
5- Typography.OpenFont has some kind of syntex error and unable to build

HAPPY NEW YEAR 2019

BRAVE and FOCUS

Implement Evan Wallace's Rendering Technique

see=> Easy Scalable Text Rendering on the GPU (https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac)

BUT the original code (https://github.com/evanw/theta/blob/master/LICENSE.md) is GPL.

I can't look at the code => so I will implement it from his description.

Getting Started for Newcomers?

Hi. I am extremely interested in your work here, and am extremely grateful for the dedication to permissive licenses only. However, I am having trouble getting started with your code. How would I use your library in the development of a new application? How would I dig through it, to learn about it and understand it? How is it organized? How would I add to it? Please don't take offense, but there is very little documentation that I can find on how to get started with your code.

I am very interested in using your work in a project of mine, but I am at a loss of where to start.

Thank you for all of your time and effort, and happy coding!

Please give me some ideas about tools that convert C# to C / C++

Always Develop in C# :)

But I need some tools to convert all source to C/C++ code

GLES3

update angle
update opentk

This will be implemented soon.
see latest opentk and angle

porting ImageTracer to C#

original license => un-license/ public domain

A license with no conditions whatsoever which dedicates works to the public domain. Unlicensed works, modifications, and larger works may be distributed under different terms and without source code.

from https://github.com/jankovicsandras/imagetracerjava
and https://github.com/jankovicsandras/imagetracerjs

Skia and Xamarin Form Revisit

VBO revisit

see http://www.learnopengles.com/tag/vertex-buffer-object/
and https://developer.apple.com/library/content/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/TechniquesforWorkingwithVertexData/TechniquesforWorkingwithVertexData.html

http://www.learnopengles.com/android-lesson-seven-an-introduction-to-vertex-buffer-objects-vbos/

CosmosOS RenderSurface Developing

CosmosOS Render Surface

1st thing, Thank you to all developers of the CosmosOS for their C# OS.

2nd , It would be 'another way' to help its GUI system with our 'Rendering Tech'.

AIMS :

To Bring the PixelFarm (pure C# software part) + Typography + HtmlRenderer to the CosmosOS.

I create a project that track some problems to visit it again =>here

Hello @jp2masa, @fanoI

since I'm very new to the CosmosOS,

I may ask you something that look easy to you, but please help me too.

I create an issue here since this is in early development stage.
=> so this will not interrupt your Github issue panel.

(I have to modify some parts of current PixelFarm)

This is a snapshot with bugs

This is a red polygon that is 'painted' with a MiniAggPainter (pure C# software renderer).
(a blue rect is painted with original cosmos)

pic 1: a MiniAggPainter paints a red polygon on left-upper corner, Cosmos, SVGAII

Yes with Antialias side and another side still has bug (no AA)

pic 2: Zoom in,with AA and Bugs

Compare with PixelFarm on Win7

This is a reference img.

pic 3: same code, on Win7, and zoom pic

2 pictures (pic 1 and 3) are generated with the 'same' PixelFarm code.

I will analyze the bug later.

I think it may not too long way :)

From today, I have a busy job for 3-4 weeks!

sorry for any late reply

GLES2 Glyph SubPixel Rendering - Developing

GLES2 based-HtmlRenderer, early preview

pic 1: render with OpenGLES2, Text is rendering with PixelFarm's MiniAgg+ the Typography.

pic 2: render with GDI+ (System.Drawing)

see more about lcd technique =>https://www.grc.com/cttech.htm

[INFO] Glyph Textures

GLES2 surface with Text from Glyph Texture Atlas

pic 1, TextureKind.StencilGreyScale

(1) not snap (to integer grid) the glyph to x and y axis => Blur Glyph both axis
(2) snap (to integer) only on y axis=> Blur Glyph only in X axis
(3) snap both x and y axis => Clearer glyphs, improper inter-glyph space, eg. glyph 1 and 2