Win2D CanvasBitmap vs Microsoft.UI.Composition CompositionImage - c#

EDIT:
They removed the CompositionImage in the last build ...
I would like to know the difference between Win2D CanvasBitmap and Microsoft.UI.Composition CompositionImage.
In both case I was able to display images but I don't really know/understand the difference between the two approach.
The CanvasBitmap approach:
XAML:
<xaml:CanvasControl Draw="OnDraw" />
Code:
private void Onraw(CanvasControl sender, CanvasAnimatedDrawEventArgs e)
{
var image = await CanvasBitmap.LoadAsync(...);
e.DrawingSession.DrawImage(...);
}
The CompositionImage approach:
XAML:
<Grid x:Name="Host" />
Code:
ContainerVisual rootVisual =
(ContainerVisual)ElementCompositionPreview.GetContainerVisual(this.Host);
Compositor compositor = rootVisual.Compositor;
CompositionGraphicsDevice device = compositor.DefaultGraphicsDevice,
CompositionImage image = device.CreateImageFromUri(...);
ImageVisual content = Compositor.CreateImageVisual();
content.Image = image;
rootVisual.Children.InsertAtTop(content);
What's the difference? What is the best approach?
To put thing in the context, I have an application that displays a lot of small images. I need the app to be low on memory and to draw fast the images.
Thanks,
Adrien.

Win2D is basically a simple 2D wrapper over directx - if you create a canvas you have a directx context where you can draw in.
The composition APIs let you mingle with the layer between XAML and DirectX - this is a bit higher level than Win2D, and also the "canvas" is the app itself :)
So the Win2D CanvasBitmap is like Image in XAML, while the CompositionImage is more like ImageSource, because you can only use it in a visual or as an effect source.
Technically you can use whichever you want or is easier for you. Keep in mind that the Composition APIs are only available in Windows 10 after TH2 (1511) version, so if you want to support RTM (build 10240) use a Win2D solution.

It depends...
A CanvasControl and a ImageVisual are extremely similar in terms of rendering cost. In terms of CPU cost the ImageVisual is more lightweight.
However, you can display large numbers of CanvasBitmaps inside a single CanvasControl (or CanvasAnimatedControl) - so if you're looking to display something like a 2D game made up of many hundreds of bitmaps then Win2D is probably the way to go.
If you want to take advantage of Composition's animation system and mix images with XAML components then Composition is probably the way to go.

Related

C#, display and navigate structural 3D FEM model (helix-toolkit, SharpDX?)

Hello! I am trying to implement a simple way to display the deformed shape of a beam. I found HelixToolkit that offers perfect tools, but I can't find the way to display different tiles of the same mesh with a different colour, or gradient. I found this: https://github.com/helix-toolkit/helix-toolkit/issues/885 that is the adding of the VertColorMaterial property, but it looks like it is for SharpDX library, but I started with HelixToolkit wpf (don't understand if in HelixToolkit is also available).
I can't even find a way to do it with SharpDX: it looks that there is almost no doc in internet.
Additionaly, SharpDX stopped its developement.
So:
do you know any example?
do you suggest me another library, which is fast/offers the ability of navigate the model, and it is compatible/use the wpf framework?
I also would like the ability to refine and subdivide a mesh.
Any kind of advice would be useful, I am new to the world of computer 3d graphic.
Thanks
EDIT 1:
I followed JonasH hint applying a texture, but it apply the texture for each tile. (See image).
I can only dinstict by out materian and in materia (set in the picture as Hue and the arrow Texture).
I need to apply one color for each polygon to give to the mesh a "FEM" style. Do you know how is it possibile with HelixToolkit?
You might consider using Kitware VTK instead of HelixToolkit. It’s extremely powerful library for scientific data visualization, well documented, perfect for finite element pre and post processing. You can take a look on my app, unfortunately it has not been documented yet, but just as an example:
https://github.com/galuszkm/STAN
I assume you have a color per vertex you want to use. I would recommend using wpf or helixToolkit wpf since they are quite easy to use. But as far as I'm aware they do not support vertex coloring.
A workaround would be to use a texture. I would assume you want to visualize some scalar property as a color. You would first need to create your MeshGeometry and assign the TextureCoordinates, simply assign the value you want to visualize to one of the texture coordinates in the 0-1 range. You would also need to create a gradient texture, either a gradientBrush or create an image. You would then assign the brush like:
var brush = new ImageBrush()
{
ImageSource = new BitmapImage(new Uri("gradient.png", UriKind.Relative))
};
var material = new DiffuseMaterial(brush);
GeometryModel3D model = new GeometryModel3D(mesh, material);

Windows phone - draw graphics

I seem to be unable to figure out how to Draw graphics in a Windows phone app in C#.
I want to Draw e.g. a line. In old school Windows forms i add an event handler to the Windows paint event. And then use a GDI+ Graphics object. But there is no paint event in any controls?
So how do i draw a line on a canvas in a Windows phone app?
I think I need to clarify.
I want to create dynamic graphics and I want to use C#.
I want an update frequency arround 30 fps and I only need a few graphics elements approximately 100.
if you need a line, use the Line class:
<Page xmlns="whatever">
<Grid>
<Line X1="0" Y1="0" X2="10" Y2="10" Stroke="Blue" StrokeThickness="2"/>
</Grid>
</Page>
Other than that, refer to MSDN.
Forget whatever procedural paradigms you might have learned in archaic technologies. Modern technologies are declarative.
You start by adding Canvas to the form and then .Add() graphical objects to the canvas children - it makes the object scaled for you by the engine, which is kind of neat. Usually looks like this:
line = new **Line**();
line.Stroke = Brushes.Yellow;
line.X1 = 0;
line.Y1 = 0;
line.X2 = 100;
line.Y2 = 100;
line.StrokeThickness = 2;
yourCanvas.Children.**Add(line)**;
Just drop the **s from the code - they are for attention grabbing.
Actually, as I drew dynamic hypercubes, I have never used the XAML version, but if you need a static structure or even substructure XAML is the way to go. As I understand, Children.Add() dynamically creates node in the parsed XAML tree, that .NET keeps in memory. If you can not take slight performance hit for dynamicly positioned graphics that WPF imposes, you will have to stick with DirectX or OpenGL for better performance.
If you want low level access to draw 2D or 3D like when using DirectX you can take a look to SharpDX
There are some samples for Windows Phone in Github like:
MiniCube: Display a rotating cube in a DrawingSurfaceBackgroundGrid

PixelShading in C#

I hope I do not make my first mistake with my first post.
I am writing a library for several graphical effects and filters (for example Sobel or Gauß mask).
Because of the low Speed, doing this on the CPU, I wrote some shaders with the Shazzam tool.
My concret Problem is, that I am not able to use this shader in C#.
In the Internet I found only advice how to apply a pixelshader as a effect in XAML directly to a element, which is not usable for my application, because this makes it impossible to apply several shaders on one Image, which is needed, for example the Canny Edge Detector.
To illustarte this issue a Little pseudo-code, which should Show, what I expect from the method.
PixelShader somePixelShader = new PixelShader(pixelshader.ps);
somePixelShader.Input = Bitmap;
somePixelShader.Height = 200;
somePixelShader.Width = 800;
somePixelShader.Execute();
Bitmap = somePixelShader.Result;
As you see, everything should be done in C#.
Perhaps you can help me with my issue.
You can make a copy of the current effect output as a bitmap with RenderTargetBitmap, then submit this outputted image as the new input for the next effect, rinse, repeat.
Update : after a small (and inconclusive) test, this will not work : Can't render pixel shader to RenderTargetBitmap! Please help!
Check out these white papers for step-by-step instructions + examples on how to compile and use a pixel shader in WPF or SL.
You may also want to check out the WPF Pixel Shader Effects Library here.

Setting the transparency of a WPF ImageSource (equivalent to GDI Matrix33 = 0.5f)?

Does WPF have an equivalent to this?
ImageAttributes ia = new ImageAttributes();
ia.SetColorMatrix(new ColorMatrix { Matrix33 = 0.5f }, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
In other words, can I adjust the transparency of a WPF ImageSource (or any other drawing related class e.g. BitmapImage), or is GDI the best choice here?
I don't intend to draw the image onto a window, so I think that rules out using the Image class(?)
(My line of thought with trying to use WPF instead of GDI is primarily because I'm under the impression that with WPF I can have hardware acceleration, but from what I've seen so far, it seems that it's only applying to a very limited subset of image manipulation)
check out WriteableBitmapEx, which provides a set of extension methods for manipulating bitmaps in memory with WPF and Silverlight.
There is nothing in WPF per-se that will allow you to do want, but the WPF/Silverlight class WriteableBitmap provides a fast, low-level API to drawing/manipulating and is native to WPF.
WriteableBitmapEx then builds on this by providing extension methods to do GDI-like operations. There is a Convolute function which allows convolving an image with a matrix, so you could do the above. Note WB-Ex is a silverlight library but they also provide an unmaintained WPF version which although incomplete, can be extended to keep up to date with the Silverlight version.
Other than that I'd suggest rolling your own. If all you wish to do is modify the opacity to 0.5f then rather than convolve I'd suggest writing a specific function to do that based on the above examples
An image has an opacity field, which is a value between 1.0 (completely opaque) to 0.0 (invisible)
For example:
<Image
Height="107"
Margin="367,0,473,83"
Source="Images/4.png"
Stretch="Fill"
VerticalAlignment="Bottom" Opacity="0.5"/>
Following your comments I created a sample project which can modify the alpha channel quickly using WriteableBitmapEx as a basis and uploaded to my Company Blog. You'll have to forgive the formatting, its a new website and still has some glitches to be ironed out! The download link is on the page titled BitmapAlphaChannel
You're correct in saying WPF's hardware acceleration is only applied to a limited subset of features. For instance, all layout is done on the CPU, tessellation on the CPU, only the final rendering is done on the GPU. The result is WPF in my experience is slower than GDI+, certainly GDI. However it can be pushed in the right direction to do what you want, in the speed you want it to!

How to draw graphics as efficiently as possible in WPF

I am creating a tool which relies heavily on graph-node trees. The current implementation is done in Java and I'm porting it to a generic code-base on C#, so it can be used by various rendering implementations and also because I want to use the power of WPF for a user-friendly interface.
After browsing around for a day, I came across various methods to draw Vector-graphics through WPF.
This guy speaks about different layers within WPF developers can choose from. As I want to use WPF PURELY for his rendering at first, I want to work on the "Visual Layer".
I then came across things like:
DrawingVisual,
GeometryDrawing,
FrameworkElement / UIElement / Shapes
So, I'm a bit overwhelmed by all the different implementations that do eventually the same in totally different ways.
The Graph-Node library has been ported to C# already with all it's logic (including collision detection and dragging with mouse). As it is made with graphic-renderers in mind (like XNA, SlimDX, OpenTK, etc.), what would be the best way in terms of performance to implement a WPF renderer (as in, it will draw whatever the graph library tells it to draw?
Basically, the resulting WPF control acts as a canvas, but it has to be SUPER lightweight and not have any neat WPF features besides providing me a way to draw my circles, lines and other shapes :)
EDIT:
I basically want to know: What is the way to go? Do I extend Canvas as "Host" for my graphics and then add my custom implementation of a UIElement? Or can I have one class which can draw EVERYTHING (as in, one mega super ultra graphic). Much like overriding OnPaint in GDI or Paint-method in Java (which gives a Graphics object to do everything with).
I'd recommend reading Optimizing Performance: 2D Graphics and Imaging.
Basically, Drawing objects will be lighter weight than Shapes, in general. This is probably what you want to use.
Generally, better performance is obtained with lower-level services. In WPF, this means the Drawing family of objects. All you get are: Drawing, DrawingGroup, GeometryDrawing, GlyphRunDrawing, ImageDrawing, and VideoDrawing. However, they are sufficient for all needs. Using these types is very friendly with WPF because Drawing is the conceptual unit that WPF exchanges with your GPU accelerator, possibly retaining and managing it there if possible. This works because the Drawing is expressed in terms of portable vector drawing primitives.
Once you start re-architecting your app around Drawings however, you might need some interop with your higher-level code which is still based on UIElement, FrameworkElement, etc. One thing that I haven't found built-in to WPF is a simple way to wrap a Drawing as a FrameworkElement in the lowest-overhead way possible. DrawingVisual isn't a complete solution, because it only derives from Visual--meaning it still requires a hosting element.
The following class will host any WPF Drawing directly without using an intermediate DrawingVisual. I added support for FrameworkElement's Margin property (with no performance penalty if unused) but little else. Because of WPF's single rendering thread it's safe and easy to cache a single TranslateTransform object to implement the margin. I'd recommend that you supply only drawings which have been Frozen; in fact, in the version that I use, I have an assert to that effect in the constructor.
public class DrawingElement : FrameworkElement
{
static readonly TranslateTransform tt_cache = new TranslateTransform();
public DrawingElement(Drawing drawing)
{
this.drawing = drawing;
}
readonly Drawing drawing;
TranslateTransform get_transform()
{
if (Margin.Left == 0 && Margin.Top == 0)
return null;
tt_cache.X = Margin.Left;
tt_cache.Y = Margin.Top;
return tt_cache;
}
protected override Size MeasureOverride(Size _)
{
var sz = drawing.Bounds.Size;
return new Size
{
Width = sz.Width + Margin.Left + Margin.Right,
Height = sz.Height + Margin.Top + Margin.Bottom,
};
}
protected override void OnRender(DrawingContext dc)
{
var tt = get_transform();
if (tt != null)
dc.PushTransform(tt);
dc.DrawDrawing(drawing);
if (tt != null)
dc.Pop();
}
};
[edit:] This is also useful for inserting a WPF Drawing into the InlineUIContainer.Child property (i.e. using TextBlock.InlinesCollection to format the contents of the TextBlock more richly).
the DrawingVisual seems to be a valid choice:
The DrawingVisual is a lightweight drawing class that is used to
render shapes, images, or text. This class is considered lightweight
because it does not provide layout or event handling, which improves
its performance. For this reason, drawings are ideal for backgrounds
and clip art.
source: Using DrawingVisual Objects
so this seems to be absolutely what you ask, a Canvas SUPER lightweight.

Categories