Keyframes are gpu backed

src/PixiEditor/Models/Rendering/MemberPreviewUpdater.cs

@@ -562,45 +562,43 @@ internal class MemberPreviewUpdater
     {
         PostRender(() =>
         {
-            
-        
-        memberVM.PreviewSurface.Surface.Canvas.Save();
-        memberVM.PreviewSurface.Surface.Canvas.Scale(scaling);
-        memberVM.PreviewSurface.Surface.Canvas.Translate(-position);
-        memberVM.PreviewSurface.Surface.Canvas.ClipRect((RectD)area.GlobalArea);
-        foreach (var chunk in area.Chunks)
-        {
-            var pos = chunk * ChunkResolution.Full.PixelSize();
-            // drawing in full res here is kinda slow
-            // we could switch to a lower resolution based on (canvas size / preview size) to make it run faster
-            var contentNode = folder.Content.Connection?.Node;
+            memberVM.PreviewSurface.Surface.Canvas.Save();
+            memberVM.PreviewSurface.Surface.Canvas.Scale(scaling);
+            memberVM.PreviewSurface.Surface.Canvas.Translate(-position);
+            memberVM.PreviewSurface.Surface.Canvas.ClipRect((RectD)area.GlobalArea);
+            foreach (var chunk in area.Chunks)
+            {
+                var pos = chunk * ChunkResolution.Full.PixelSize();
+                // drawing in full res here is kinda slow
+                // we could switch to a lower resolution based on (canvas size / preview size) to make it run faster
+                var contentNode = folder.Content.Connection?.Node;
 
-            OneOf<Chunk, EmptyChunk> rendered;
+                OneOf<Chunk, EmptyChunk> rendered;
 
-            if (contentNode is null)
-            {
-                rendered = new EmptyChunk();
-            }
-            else
-            {
-                rendered = doc.Renderer.RenderChunk(chunk, ChunkResolution.Full, contentNode,
-                    doc.AnimationHandler.ActiveFrameBindable);
-            }
+                if (contentNode is null)
+                {
+                    rendered = new EmptyChunk();
+                }
+                else
+                {
+                    rendered = doc.Renderer.RenderChunk(chunk, ChunkResolution.Full, contentNode,
+                        doc.AnimationHandler.ActiveFrameBindable);
+                }
 
-            if (rendered.IsT0)
-            {
-                memberVM.PreviewSurface.Surface.Canvas.DrawSurface(rendered.AsT0.Surface.DrawingSurface, pos,
-                    scaling < smoothingThreshold ? SmoothReplacingPaint : ReplacingPaint);
-                rendered.AsT0.Dispose();
-            }
-            else
-            {
-                memberVM.PreviewSurface.Surface.Canvas.DrawRect(pos.X, pos.Y, ChunkResolution.Full.PixelSize(),
-                    ChunkResolution.Full.PixelSize(), ClearPaint);
+                if (rendered.IsT0)
+                {
+                    memberVM.PreviewSurface.Surface.Canvas.DrawSurface(rendered.AsT0.Surface.DrawingSurface, pos,
+                        scaling < smoothingThreshold ? SmoothReplacingPaint : ReplacingPaint);
+                    rendered.AsT0.Dispose();
+                }
+                else
+                {
+                    memberVM.PreviewSurface.Surface.Canvas.DrawRect(pos.X, pos.Y, ChunkResolution.Full.PixelSize(),
+                        ChunkResolution.Full.PixelSize(), ClearPaint);
+                }
             }
-        }
 
-        memberVM.PreviewSurface.Surface.Canvas.Restore();
+            memberVM.PreviewSurface.Surface.Canvas.Restore();
         });
     }
 

src/PixiEditor/Styles/Templates/KeyFrame.axaml

@@ -33,8 +33,8 @@
                                 </ImageBrush.Transform>
                             </ImageBrush>
                         </Border.Background>
-                        <visuals:SurfaceControl
-                            Surface="{Binding Item.PreviewSurface, RelativeSource={RelativeSource TemplatedParent}}"
+                        <visuals:TextureControl
+                            Texture="{Binding Item.PreviewSurface, RelativeSource={RelativeSource TemplatedParent}}"
                             Stretch="Uniform" Width="60" Height="60">
                             <ui:RenderOptionsBindable.BitmapInterpolationMode>
                                 <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
@@ -43,7 +43,7 @@
                                     <Binding RelativeSource="{RelativeSource Mode=Self}" Path="Bounds.Width" />
                                 </MultiBinding>
                             </ui:RenderOptionsBindable.BitmapInterpolationMode>
-                        </visuals:SurfaceControl>
+                        </visuals:TextureControl>
                     </Border>
                 </Grid>
             </ControlTemplate>

src/PixiEditor/Styles/Templates/TimelineGroupHeader.axaml

@@ -23,8 +23,8 @@
                                     </ImageBrush.Transform>
                                 </ImageBrush>
                             </Border.Background>
-                            <visuals:SurfaceControl
-                                Surface="{Binding Item.PreviewSurface, RelativeSource={RelativeSource TemplatedParent}}"
+                            <visuals:TextureControl
+                                Texture="{Binding Item.PreviewSurface, RelativeSource={RelativeSource TemplatedParent}}"
                                 Stretch="Uniform" Width="60" Height="60">
                                 <ui:RenderOptionsBindable.BitmapInterpolationMode>
                                     <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
@@ -33,7 +33,7 @@
                                         <Binding RelativeSource="{RelativeSource Mode=Self}" Path="Bounds.Width" />
                                     </MultiBinding>
                                 </ui:RenderOptionsBindable.BitmapInterpolationMode>
-                            </visuals:SurfaceControl>
+                            </visuals:TextureControl>
                         </Border>
                         <TextBlock Margin="5 0 0 0" VerticalAlignment="Center" Text="{Binding Item.LayerName, RelativeSource={RelativeSource TemplatedParent}}" />
                         <ToggleButton Name="PART_CollapseButton" Margin="0 0 5 0" DockPanel.Dock="Right" Classes="ExpandCollapseToggleStyle" HorizontalAlignment="Right" VerticalAlignment="Center" />