Skip to content

feat(Skia): Implement PlaneProjection and Matrix3DProjection #22449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MartinZikmund wants to merge 11 commits into
base: master
Choose a base branch
from
+2,200 −123
Open

feat(Skia): Implement PlaneProjection and Matrix3DProjection #22449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c811dd3
feat(Skia): Implement PlaneProjection and Matrix3DProjection
MartinZikmund Jan 22, 2026
3852c16
test: Add runtime tests and SamplesApp samples for Projection
MartinZikmund Jan 22, 2026
08ecc89
test: Add tests to projitems
MartinZikmund Jan 22, 2026
e06fff2
fix: Build issues
MartinZikmund Jan 22, 2026
c903814
fix: Adjust `PlaneProjection` logic
MartinZikmund Jan 22, 2026
9546d2e
fix: RotationX direction
MartinZikmund Jan 22, 2026
61e3fbc
chore: Show numeric values
MartinZikmund Feb 6, 2026
98f5d9a
chore: Address comments
MartinZikmund Feb 17, 2026
5401de6
chore: Avoid breaking change
MartinZikmund Feb 18, 2026
69ce72c
chore: Adjust test
MartinZikmund Feb 18, 2026
0c49b75
chore: Avoid API diff
MartinZikmund Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/SamplesApp/UITests.Shared/UITests.Shared.projitems
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4852,6 +4852,14 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\PlaneProjection_Basic.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\Matrix3DProjection_Basic.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\BrushesTests\Brushes_ImplicitConvert.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down Expand Up @@ -8797,6 +8805,12 @@
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\LoadedImageSurface\LoadedImageSurfaceTests.xaml.cs">
<DependentUpon>LoadedImageSurfaceTests.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\PlaneProjection_Basic.xaml.cs">
<DependentUpon>PlaneProjection_Basic.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\Matrix3DProjection_Basic.xaml.cs">
<DependentUpon>Matrix3DProjection_Basic.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Geometry\ArcSegmentPage.xaml.cs">
<DependentUpon>ArcSegmentPage.xaml</DependentUpon>
</Compile>
Expand Down
98 changes: 98 additions & 0 deletions src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/Projection/Matrix3DProjection_Basic.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<Page
x:Class="UITests.Shared.Windows_UI_Xaml_Media.Projection.Matrix3DProjection_Basic"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<ScrollViewer>
<StackPanel Spacing="20" Padding="20">
<TextBlock Text="Matrix3DProjection - Custom 3D Matrix" FontSize="24" FontWeight="Bold" />
<TextBlock Text="Matrix3DProjection allows you to apply a custom 4x4 transformation matrix for advanced 3D effects." TextWrapping="Wrap" />

<!-- Identity Matrix -->
<Border Background="#E8F5E9" Padding="15" CornerRadius="8">
<StackPanel>
<TextBlock Text="Identity Matrix (No Transform)" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
<Border Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center">
<Rectangle x:Name="IdentityRect" Fill="#4CAF50" Width="100" Height="100" />
</Border>
<Button Content="Apply Identity Matrix" Click="OnApplyIdentity" Margin="0,10,0,0" HorizontalAlignment="Center" />
</StackPanel>
</Border>

<!-- Translation Matrix -->
<Border Background="#E3F2FD" Padding="15" CornerRadius="8">
<StackPanel>
<TextBlock Text="Translation via Matrix3D" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0" Spacing="5">
<Slider x:Name="TranslateXSlider" Header="Translate X" Minimum="-50" Maximum="50" Value="0" />
<Slider x:Name="TranslateYSlider" Header="Translate Y" Minimum="-50" Maximum="50" Value="0" />
<Slider x:Name="TranslateZSlider" Header="Translate Z" Minimum="-100" Maximum="100" Value="0" />
<Button Content="Apply Translation" Click="OnApplyTranslation" Margin="0,10,0,0" />
</StackPanel>

<Border Grid.Column="1" Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle x:Name="TranslationRect" Fill="#2196F3" Width="80" Height="80" />
</Border>
</Grid>
</StackPanel>
</Border>

<!-- Scale Matrix -->
<Border Background="#FFF3E0" Padding="15" CornerRadius="8">
<StackPanel>
<TextBlock Text="Scale via Matrix3D" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0" Spacing="5">
<Slider x:Name="ScaleXSlider" Header="Scale X" Minimum="0.5" Maximum="2" Value="1" StepFrequency="0.1" />
<Slider x:Name="ScaleYSlider" Header="Scale Y" Minimum="0.5" Maximum="2" Value="1" StepFrequency="0.1" />
<Button Content="Apply Scale" Click="OnApplyScale" Margin="0,10,0,0" />
</StackPanel>

<Border Grid.Column="1" Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle x:Name="ScaleRect" Fill="#FF9800" Width="80" Height="80" />
</Border>
</Grid>
</StackPanel>
</Border>

<!-- Perspective Matrix -->
<Border Background="#F3E5F5" Padding="15" CornerRadius="8">
<StackPanel>
<TextBlock Text="Perspective Effect" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
<TextBlock Text="Adjusting M34 creates a perspective effect" TextWrapping="Wrap" Margin="0,0,0,10" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0" Spacing="5">
<Slider x:Name="PerspectiveSlider" Header="Perspective (M34)" Minimum="-0.005" Maximum="0" Value="-0.001" StepFrequency="0.0001" />
<Slider x:Name="PerspectiveRotationY" Header="Rotation Y" Minimum="-60" Maximum="60" Value="30" />
<Button Content="Apply Perspective" Click="OnApplyPerspective" Margin="0,10,0,0" />
</StackPanel>

<Border Grid.Column="1" Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle x:Name="PerspectiveRect" Fill="#9C27B0" Width="80" Height="80" />
</Border>
</Grid>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Page>
84 changes: 84 additions & 0 deletions ...mplesApp/UITests.Shared/Windows_UI_Xaml_Media/Projection/Matrix3DProjection_Basic.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
using System;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Media.Media3D;
using Uno.UI.Samples.Controls;

namespace UITests.Shared.Windows_UI_Xaml_Media.Projection;

[Sample("Projection", Name = "Matrix3DProjection_Basic", Description = "Matrix3DProjection with custom 4x4 transformation matrix")]
public sealed partial class Matrix3DProjection_Basic : Page
{
public Matrix3DProjection_Basic()
{
this.InitializeComponent();
}

private void OnApplyIdentity(object sender, RoutedEventArgs e)
{
IdentityRect.Projection = new Matrix3DProjection
{
ProjectionMatrix = Matrix3D.Identity
};
}

private void OnApplyTranslation(object sender, RoutedEventArgs e)
{
var translateX = TranslateXSlider.Value;
var translateY = TranslateYSlider.Value;
var translateZ = TranslateZSlider.Value;

// Create a translation matrix
var matrix = new Matrix3D(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
translateX, translateY, translateZ, 1);

TranslationRect.Projection = new Matrix3DProjection
{
ProjectionMatrix = matrix
};
}

private void OnApplyScale(object sender, RoutedEventArgs e)
{
var scaleX = ScaleXSlider.Value;
var scaleY = ScaleYSlider.Value;

// Create a scale matrix
var matrix = new Matrix3D(
scaleX, 0, 0, 0,
0, scaleY, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);

ScaleRect.Projection = new Matrix3DProjection
{
ProjectionMatrix = matrix
};
}

private void OnApplyPerspective(object sender, RoutedEventArgs e)
{
var perspective = PerspectiveSlider.Value;
var rotationY = PerspectiveRotationY.Value * Math.PI / 180.0;

// Create rotation Y matrix
var cosY = Math.Cos(rotationY);
var sinY = Math.Sin(rotationY);

// Combine rotation with perspective
var matrix = new Matrix3D(
cosY, 0, sinY, 0,
0, 1, 0, 0,
-sinY, 0, cosY, perspective,
0, 0, 0, 1);

PerspectiveRect.Projection = new Matrix3DProjection
{
ProjectionMatrix = matrix
};
}
}
Loading
Loading