Expalanation about WPF concept in unleashed WPF 4.0 book - wpf

Question

Can anyone expalin what does the point ( 0,0) refers to within the CompositionTarget_Rendering . I could understand that the cube rotates around the Y axis, but what I cannot understand how could it be that the 2D point 0,0 always relates to the same corner of the cube while it's rotating. In terms of objects, we have the big cube, the small cube, and, as per my undesrtanding, we have a button that is interactive but at the end of the day is USED as brush (not as an object in the 3D sense). I envision a space where a cube stands up and rotates around a vertical axis Y, but how the placement of the scaled down purple cube winds up with the same relative position with respect to the big cube, namely, one particular top corner of the big cube. The book says "the Point (0,0) from the Viewport2DVisual3D’s hosted Button
is mapped into 3D space, and a purple cube is drawn where that Point3D lies in 3D space"
and I am confused because the sentence implies that the button is situated somewhere on a 2d layer (supposedly behaind the 3D space) but the button is EVERYWHERE in that it is used to "paint" each of the side of the cubes. What is the best way to envision this 3D space in relation to the 2D layer and the button?
It will also be good to know why the purple small cube revolves around itself, as I could only see the that the trigger rotates the big cube, and the rendering event places the small cube at a fixed position WITHOUT rotating it.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Name="myGrid">
<Viewport3D Panel.ZIndex="0">
<Viewport3D.Camera>
<PerspectiveCamera Position="3,3,4" LookDirection="-1,-1,-1" FieldOfView="60"/>
</Viewport3D.Camera>
<Viewport3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Direction="-0.3,-0.4,-0.5" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D x:Name="Container">
<Viewport2DVisual3D >
<Viewport2DVisual3D.Transform>
<Transform3DGroup>
<TranslateTransform3D OffsetX="1.5" />
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rotationY" Axis="0,1,0" Angle="0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</Viewport2DVisual3D.Transform>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="1,1,-1 1,-1,-1 -1,-1,-1 -1,1,-1 1,1,1 -1,1,1 -1,-1,1 1,-1,1 1,1,-1 1,1,1 1,-1,1 1,-1,-1 1,-1,-1 1,-1,1 -1,-1,1 -1,-1,-1 -1,-1,-1 -1,-1,1 -1,1,1 -1,1,-1 1,1,1 1,1,-1 -1,1,-1 -1,1,1"
TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7 8 9 10 8 10 11 12 13 14 12 14 15 16 17 18 16 18 19 20 21 22 20 22 23"
TextureCoordinates="0,1 0,0 1,0 1,1 1,1 -0,1 0,-0 1,0 1,1 -0,1 0,-0 1,0 1,0 1,1 -0,1 0,-0 -0,0 1,-0 1,1 0,1 1,-0 1,1 0,1 -0,0"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
</Viewport2DVisual3D.Material>
<Button Name="TestButton">
<Button.RenderTransform>
<ScaleTransform ScaleY="-1" />
</Button.RenderTransform>
Hello, 3D
</Button>
</Viewport2DVisual3D>
</ModelVisual3D>
<ModelUIElement3D>
<ModelUIElement3D.Transform>
<Transform3DGroup>
<ScaleTransform3D ScaleX="0.2" ScaleY="0.2" ScaleZ="0.2" />
<TranslateTransform3D x:Name="cube_translation" />
</Transform3DGroup>
</ModelUIElement3D.Transform>
<ModelUIElement3D.Model>
<GeometryModel3D>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Purple" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="1,1,-1 1,-1,-1 -1,-1,-1 -1,1,-1 1,1,1 -1,1,1 -1,-1,1 1,-1,1 1,1,-1 1,1,1 1,-1,1 1,-1,-1 1,-1,-1 1,-1,1 -1,-1,1 -1,-1,-1 -1,-1,-1 -1,-1,1 -1,1,1 -1,1,-1 1,1,1 1,1,-1 -1,1,-1 -1,1,1"
TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7 8 9 10 8 10 11 12 13 14 12 14 15 16 17 18 16 18 19 20 21 22 20 22 23"
TextureCoordinates="0,1 0,0 1,0 1,1 1,1 -0,1 0,-0 1,0 1,1 -0,1 0,-0 1,0 1,0 1,1 -0,1 0,-0 -0,0 1,-0 1,1 0,1 1,-0 1,1 0,1 -0,0"/>
</GeometryModel3D.Geometry>
</GeometryModel3D>
</ModelUIElement3D.Model>
</ModelUIElement3D>
</Viewport3D.Children>
</Viewport3D>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded" >
<BeginStoryboard>
<Storyboard Name="myStoryBoardY">
<DoubleAnimation
Storyboard.TargetName="rotationY"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:12" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
CompositionTarget.Rendering += CompositionTarget_Rendering;
}
static TimeSpan lastRenderTime = new TimeSpan();
void CompositionTarget_Rendering(object sender, EventArgs e)
{
// Ensure we only do this once per frame
if (lastRenderTime == ((RenderingEventArgs)e).RenderingTime)
return;
lastRenderTime = ((RenderingEventArgs)e).RenderingTime;
GeneralTransform2DTo3D transform = TestButton.TransformToAncestor(Container);
Point3D point = transform.Transform(new Point(0, 0));
cube_translation.OffsetX = point.X;
cube_translation.OffsetY = point.Y;
cube_translation.OffsetZ = point.Z;
}
}

Answer 1

The (0,0) here refers to the 2D coordinates in the Button referential. It is the top left corner of the button. There 6 different visualisations of the same button here but it seems that WPF assumes that the real one is on the first triangle that contains this point of the button.
In this case it is actually the first triangle of the first face. This face is pointing to the negative Z direction (1,1,-1 1,-1,-1 -1,-1,-1 -1,1,-1).
To actually see this you can setup the camera to point to the positive direction so you can see this face of the cube:
<PerspectiveCamera Position="0,0,-10" LookDirection="0,0,1" FieldOfView="60"/>
Set the light to point in positive direction:
<DirectionalLight Direction="-0.3,-0.4,0.5" />
Remove the triger to avoid animation and replace (0,0) in with (27, 12) (it is about the center of the button).
You should see the red cube in the middle of the face pointing towards the camera (the neagtive Z face).
You can also try to remove the first triangle (remove just the first 3 triangle indices). In this case the red cube will move to the positive Z face.