1. Composition Lighting

Composition Light in UWP is a set of apis for creating 3D lighting. It’s obviously fun and powerful, but there are few posts on the blog (I can only find my own posts using UWP or Pointlight as keywords). This article is an introduction to Composition Lighting.

There are four types of Composition Light:

  • AmbientLight, a light source that emits an undirected light source that reflects everything in the scene.
  • DistantLight, the direction in which a DistantLight source emits light. As the sun.
  • PointLight, the point source of all the emitted light. Such as light bulbs.
  • “SpotLight,” an internal and external cone of light that emits light. Such as a flashlight.

The Composition Light of the four types is created using the Compositor CreateXXXXXLight() function, for example:

var pointLight = compositor.CreatePointLight();
Copy the code

Above are the SpotLight and PointLight effects (the other two screenshots aren’t very interesting).

2. Use the PointLight

Is the most basic example using PointLight WindowsCompositionSamples TextShimmer example, use the code example below shows how to use PointLight.

Start by adding the TextBlock that you want to apply PointLight to the UI with the color DimGray.

<TextBlock Name="TextBlock" FontSize="100" Foreground="DimGray" FontFamily="SegoeUI" FontWeight="Thin"
   TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"> 
      Text Shimmer
</TextBlock>
Copy the code

Then get the TextBlock Visual object, use Compositor. CreatePointLight create PointLight (), and set the CoordinateSpace and the Targets, These two properties are used to associate Visual objects with PointLight. TextBlock becomes all black unless PointLight is applied to its location.

_compositor = ElementCompositionPreview.GetElementVisual(TextBlock).Compositor;

//get interop visual for XAML TextBlock
var text = ElementCompositionPreview.GetElementVisual(TextBlock);

_pointLight = _compositor.CreatePointLight();
_pointLight.Color = Colors.White;
_pointLight.CoordinateSpace = text; //set up co-ordinate space for offset
_pointLight.Targets.Add(text); //target XAML TextBlock
Copy the code

The main PointLight properties are Color and Offset, Color is white by default, and the following code animates Offset.

Offset is a Vector3 property, where X, Y, and Z represent the three-dimensional coordinates of PointLight’s light source. Start by setting the PointLight Offset to the left of the TextBlock, vertically centered, and Z to the FontSize of the TextBlock. Then launch an animation that keeps repeating, moving horizontally to the right of the TextBlock.

//starts out to the left; vertically centered; light's z-offset is related to fontsize
_pointLight.Offset = new Vector3(-(float)TextBlock.ActualWidth, (float)TextBlock.ActualHeight / 2, (float)TextBlock.FontSize);

//simple offset.X animation that runs forever
var animation = _compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(1.2 * (float)TextBlock.ActualWidth);
animation.Duration = TimeSpan.FromSeconds(3.3f);
animation.IterationBehavior = AnimationIterationBehavior.Forever;

_pointLight.StartAnimation("Offset.X", animation);
Copy the code

The running effect is as follows:

3. Add Composition Light

“Composition Light” can be composed, and it works the same way as optics, where red and blue make purple, and so on. Note, however, that except for AmbientLight, only two lights can be combined.

This makes it very playable, as in the following animation:

4. Conclusion

The above animation can be installed to try out my Tomato clock application, installation address:

A tomato clock

Composition Light really gets out of hand, and you can download Windows Composition Samples for more examples.

Reference 5.

Combined Lighting – Windows UWP Applications Microsoft Docs

XAML Lighting – Windows UWP Applications Microsoft Docs

PointLight Class (Windows.UI.Composition) – Windows UWP applications Microsoft Docs

XamlLight Class (Windows.UI.Xaml.Media) – Windows UWP applications Microsoft Docs

6. The source code

OnePomodoro_TheBigOne.xaml.cs at master