\n
![](\"https:\/\/jirak.net\/wp\/wp-content\/uploads\/2017\/08\/e528c6ace39235d9633de5a7104945ba.gif\")
<\/p>\nCreating Materials and Lights in the Visual Layer
\n<\/p>\n
In today\u2019s post, we\u2019re going wrap up this series by combining everything we\u2019ve learned so far and take you through the steps in creating a custom material. We also have an amazing new tool to show you that empowers anyone to design a custom material. To see how you can use these custom materials in your XAML app, be sure to check out the last two posts in this series; XAML and Visual Layer Interop<\/strong>, part one<\/strong><\/a> and part two<\/strong><\/a>.<\/p>\n The Fluent Design Language<\/a> is an evolving concept, rather than a one-time design language release like MDL and MDL2. It was designed to expand and grow as Microsoft\u00a0and the community of creators (developers and designers), adds to what it could be. We\u2019ll show you that anything is possible, as designers, developers and the Windows community have common ground to share their creations and create amazing materials.<\/p>\n Let\u2019s get started by first showing you how a material is created by chaining effects, then we’ll explore using the new Material Creator<\/strong><\/a> to easily and quickly create materials.<\/p>\n Whether we’ll be using the effect in a XamlCompositionBrushBase or painting a SpriteVisual, the construction of the effect graph is the core of the approach. In order to create the material we want, we’ll need the following components:<\/p>\n Let’s start with the first source, a SurfaceBrush. This will be provided by using LoadedImageSurface to load a NormalMap.<\/p>\n If you\u2019ve had any experience with 3D computer graphics, maybe as a game developer, you may already know what a normal map is and the image above looks familiar. If you\u2019ve never worked with one before, Normal mapping is a technique that determines the reflectance of light at every pixel (read more about Normal mapping here<\/a>). The Visual Layer in Windows 10 gives you a choice of industry standard reflectance models; Blinn-Phong and Physically Based Blinn-Phong.\u00a0Go here<\/a> to read more about the math behind how this is done.<\/p>\n For today\u2019s demo, we used a 2D picture of a textured surface and transformed it into a Normal map image using an image editor. There are many image editing tools that let you do this. You can use any one you prefer to create your image.<\/p>\n To get started, we can load the image using the new LoadedImageSurface<\/a> API. Let\u2019s add a private field for the LoadedImageSurface, load the image and create a CompositionSurfaceBrush with it.<\/p>\n Now we\u2019re ready to move on to creating and chaining effects.<\/p>\n For our material, we are going to create a chain of effects that leverages the Win2D\u2019s ArithmeticCompositeEffect<\/a> (note: be sure to add the Win2D NuGet package<\/a> to your project). All effects can be used as input sources for other effects, thus enabling you to allow a chain of effects to one or more inputs.<\/p>\n ArithmeticCompositeEffect lets you assign two sources for the composite, giving each one a weight toward the final effect. For example, Source1 at 0.75 (75%) and Source2 at 0.25 (25%). You can also use an additional ArithmeticCompositeEffect as one of the sources to add more effects in the composite chain.<\/p>\n Let\u2019s step back for a minute and think about how we want create the composite:<\/p>\n For source 1, we\u2019ll combine a ColorSourceEffect<\/a> and GaussianBlurEffect<\/a> (from Win2D) with a nested ArithmeticSourceEffect. For Source 2, we’ll use a SceneLightingEffect<\/a> (from Windows.UI.Composition.Effects). This will manipulate the reflective properties of the effect’s source when a CompositionLight, from a XamlLight for example, is applied.<\/p>\n Note that the SceneLightingEffect is used to modify the default lighting applied to the contents of a SpriteVisual<\/a> targeted by a CompositionLight<\/a>. In today\u2019s example, we are going to create SurfaceBrush using a NormalMap (loaded by LoadedImageSurface<\/a>) to define dents and bumps that the light reflects off of.<\/p>\n Furthermore, in order to use the SceneLightingEffect, the content being modified must be defined as one of the sources into a multi-input effect graph, with the other input being the SceneLightingEffect. For example, above, the content whose lighting properties are being modified is defined by Source1 of the parent ArithmeticCompositeEffect.<\/p>\n Here’s what the code looks like for the effect graph:<\/p>\n Notice the SceneLightingEffect’s NormalMapSource <\/strong>property and the GaussianBlurEffect’s Source;\u00a0<\/strong>these are parameter provided sources. We will set what these parameters are as we pull everything together to create the CompositionEffectBrush<\/strong>:<\/p>\n With the CompositionEffect completed, we can now use it to paint a SpriteVisual<\/strong>, like this:<\/p>\n If you’re primarily a XAML dev, you can use this effect in a XamlCompositionBrushBase. Let’s take a look.<\/p>\n As I mentioned earlier, we can also create this effect graph in XamlCompositionBrushBase <\/strong>and set the XamlCompositionBrushBase’s CompsositionBrush <\/strong>property. If you haven’t read the post in this series on how to create a XamlCompositionBrushBase, go here to catch up<\/a>.<\/p>\n As with the other XamlCompositionBrushBase implementations, we build the effect graph in the OnConnected <\/strong>method and make sure that the user\u2019s device supports effects. This can be done using the AreEffectsSupported<\/strong> method of the CompositionCapabilities API<\/a>.<\/p>\n Here’s the full class:<\/p>\n To see this in action, let\u2019s create a Grid to put in the middle of our page\u2019s root Grid and set an instance of our MaterialBrush to that Grid\u2019s Background brush:<\/p>\n Here\u2019s what it would look like if you ran the app now:<\/p>\n This is because you\u2019re missing the second part of the approach, the lighting!<\/p>\n In the last post<\/a>, we created two lights (an AmbientLight<\/a> \u201cAmbLight\u201d and the SpotLight<\/a> \u201cHoverLight\u201d). We\u2019ll use them today to apply lighting to the UIElement that is using our custom material.<\/p>\n Since our MaterialBrush uses the new SceneLightingEffect with a Normal map, any lights applied will enhance the material per the SceneLightingEffect\u2019s configuration. Note that this isn’t necessary, but can greatly enhance your material. For example, if you’re using an Acrylic material in your app, adding Reveal will enhance the Acrylic.<\/p>\n Let\u2019s now add the two XamlLights to the Grid:<\/p>\n Now, this is what you\u2019ll see at runtime:<\/p>\n What if it were easier to create and experiment with new materials? What if there were a tool that anyone can use? Let\u2019s take a look at what\u2019s coming to the WindowsUIDevLabs GitHub repo<\/a>, the Material Creator tool.<\/p>\n Introducing availability of the new Material Creator <\/strong>tool!<\/p>\n Creating custom materials may sometimes requires a bit of experimentation and tweaking to get the effect\u2019s property configuration just right. This would take time if you had to constantly tweak and redeploy your app. What if there were a way that you could change effect properties and material layers in real time?<\/p>\n The Material Creator can be found on the WindowsUIDevLabs GitHub repo in the demos folder here<\/a>. (Note<\/strong>: you need to be running Windows 10, build 16225 or higher to use the Material Creator).<\/p>\n One of the great features of the tool is being able to see the effect graph after you\u2019re done creating the material. Click the ellipsis next to the save button and select \u201cview effect graph\u201d to see the C# code for the SceneLightingEffect.<\/strong> You can then copy and use this code directly in your custom material class.<\/p>\n If you go back up to the part of this article where we created the ArithemticCompositeEffect that contains a SceneLightingEffect, that\u2019s where you can use this code!<\/p>\n The Material Editor can also save and load materials! If you want to save your current progress on a material, or share a completed material with another developer, just click the Save button and it will create a json file containing all the layers and effect configurations. To load an existing material or edit a material shared with you, just click Load<\/strong> and select the json file.<\/p>\n The key takeaway is that you don\u2019t need to be a developer to create materials<\/strong>. A designer can create a material and then share the saved json file with a developer for implementation in a XamlCompositionBrushBase. Even Windows enthusiasts, like the Windows Insiders, can start building out a universe of materials to drive the evolution of Fluent Design.<\/p>\n Acrylic and Reveal are stunning examples of how using Material with Lights can alter the Windows experience, but they\u2019re just the beginning of what is possible. The vision for the Fluent Design Language going forward is that developers and designers can easily build custom materials, innovate and share as well.<\/p>\n The message we want you to walk away with is that you can build new Materials, for a couple primary reasons:<\/p>\n We look forward to seeing what kinds of materials you create for your Windows apps! If you\u2019ve already built your own material, feel free to share in the comments below.<\/p>\n Source: Creating Materials and Lights in the Visual Layer<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Creating Materials and Lights in the Visual Layer In today\u2019s post, we\u2019re going wrap up this series by combining everything we\u2019ve learned so far and take you through the steps in creating a custom material. We also have an amazing new tool to show you that empowers anyone to design a custom material. To see how you can use these custom materials in your XAML app, be sure to check out the last two posts in this series; XAML and Visual Layer Interop, part one and part two. The Fluent Design Language is an evolving concept, rather than a one-time design language release like MDL and MDL2. It was designed to expand and grow as Microsoft\u00a0and the community of creators (developers and designers), adds to what it could be. We\u2019ll show you that anything is possible, as designers, developers and [ more… ]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":18012,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[169],"tags":[201],"class_list":["post-18011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-windows"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts\/18011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/comments?post=18011"}],"version-history":[{"count":1,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts\/18011\/revisions"}],"predecessor-version":[{"id":18013,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts\/18011\/revisions\/18013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/media\/18012"}],"wp:attachment":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/media?parent=18011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/categories?post=18011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/tags?post=18011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/winblogs.azureedge.net\/win\/2017\/08\/e528c6ace39235d9633de5a7104945ba.gif\")
<\/a><\/p>\nCreating Material with the Visual Layer<\/h2>\n
CompositionEffectBrush<\/h3>\n
\n
NormalMap and LoadedImageSurface<\/h3>\n
![\"\"](\"https:\/\/winblogs.azureedge.net\/win\/2017\/08\/39d3fac116981508b4c2ea87a26eab74.png\")
<\/a><\/p>\n\r\n\r\n\/\/ Load NormalMap onto an ICompositionSurface using LoadedImageSurface\r\nLoadedImageSurface _surface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:\/\/\/Images\/NormalMap.jpg"), new Size(512,384));\r\n\r\n\/\/ Load Surface onto SurfaceBrush\r\nCompositionSurfaceBrush normalMap = compositor.CreateSurfaceBrush(_surface);\r\nnormalMap.Stretch = CompositionStretch.Uniform;\r\n\r\n<\/pre>\n
Chaining Effects to create the effect graph<\/h2>\n
\n
\n
\n
\r\n\r\n\/\/ Define Effect graph\r\nconst float glassLightAmount = 0.5f;\r\nconst float glassBlurAmount = 0.95f;\r\nColor tintColor = Color.FromArgb(255, 128, 128, 128);\r\n \r\nvar graphicsEffect = new ArithmeticCompositeEffect\r\n{\r\n Name = "LightComposite",\r\n Source1Amount = 1,\r\n Source2Amount = glassLightAmount,\r\n MultiplyAmount = 0,\r\n \/\/ Nested Composite to combine the Blur and Color tint effects\r\n Source1 = new ArithmeticCompositeEffect\r\n {\r\n Name = "BlurComposite",\r\n Source1Amount = 1 - glassBlurAmount,\r\n Source2Amount = glassBlurAmount,\r\n MultiplyAmount = 0,\r\n Source1 = new ColorSourceEffect\r\n {\r\n Name = "Tint",\r\n Color = tintColor,\r\n },\r\n Source2 = new GaussianBlurEffect\r\n {\r\n BlurAmount = 20,\r\n Source = new CompositionEffectSourceParameter("Backdrop"),\r\n Optimization = EffectOptimization.Balanced,\r\n BorderMode = EffectBorderMode.Hard,\r\n },\r\n },\r\n \/\/ The SceneLighting effect, which will use a NormalMap\r\n Source2 = new SceneLightingEffect\r\n {\r\n AmbientAmount = 0.15f,\r\n DiffuseAmount = 1,\r\n SpecularAmount = 0.1f,\r\n NormalMapSource = new CompositionEffectSourceParameter("NormalMap")\r\n }\r\n};\r\n\r\n<\/pre>\n\r\n\r\n\/\/ Create EffectFactory and the CompositionEffectBrush\r\nCompositionEffectFactory effectFactory = Window.Current.Compositor.CreateEffectFactory(graphicsEffect);\r\nCompositionEffectBrush effectBrush = effectFactory.CreateBrush();\r\n \r\n\/\/ Create BackdropBrush, this is used by the GaussianBlurEffect\r\nCompositionBackdropBrush backdrop = Window.Current.Compositor.CreateBackdropBrush();\r\n \r\n\/\/ Set Sources to Effect\r\neffectBrush.SetSourceParameter("NormalMap", _normalMap);\r\neffectBrush.SetSourceParameter("Backdrop", backdrop);\r\n\r\n<\/pre>\n
\r\n\r\nSpriteVisual spriteVisual = Window.Current.Compositor.CreateSpriteVisual();\r\nspriteVisual.Brush = effectBrush;\r\n\r\n<\/pre>\n
Using the CompositionEffectBrush in a XamlCompositionBrushBase<\/h2>\n
\r\n\r\npublic sealed class MaterialBrush : XamlCompositionBrushBase\r\n{\r\n private LoadedImageSurface _surface;\r\n\r\n protected override void OnConnected()\r\n {\r\n if (DesignMode.DesignModeEnabled) return;\r\n\r\n Compositor compositor = Window.Current.Compositor;\r\n\r\n \/\/ CompositionCapabilities: Are Effects supported?\r\n bool usingFallback = !CompositionCapabilities.GetForCurrentView().AreEffectsSupported();\r\n FallbackColor = Color.FromArgb(100, 60, 60, 60);\r\n\r\n if (usingFallback)\r\n {\r\n \/\/ If Effects are not supported, use Fallback Solid Color\r\n CompositionBrush = compositor.CreateColorBrush(FallbackColor);\r\n return;\r\n }\r\n \r\n \/\/ Load NormalMap onto an ICompositionSurface using LoadedImageSurface\r\n _surface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:\/\/\/Images\/NormalMap.jpg"), new Size(512, 384));\r\n\r\n \/\/ Load Surface onto SurfaceBrush\r\n CompositionSurfaceBrush normalMap = compositor.CreateSurfaceBrush(_surface);\r\n normalMap.Stretch = CompositionStretch.Uniform;\r\n\r\n \/\/ Define Effect graph\r\n const float glassLightAmount = 0.5f;\r\n const float glassBlurAmount = 0.95f;\r\n Color tintColor = Color.FromArgb(255, 128, 128, 128);\r\n\r\n var graphicsEffect = new ArithmeticCompositeEffect()\r\n {\r\n Name = "LightComposite",\r\n Source1Amount = 1,\r\n Source2Amount = glassLightAmount,\r\n MultiplyAmount = 0,\r\n Source1 = new ArithmeticCompositeEffect()\r\n {\r\n Name = "BlurComposite",\r\n Source1Amount = 1 - glassBlurAmount,\r\n Source2Amount = glassBlurAmount,\r\n MultiplyAmount = 0,\r\n Source1 = new ColorSourceEffect()\r\n {\r\n Name = "Tint",\r\n Color = tintColor,\r\n },\r\n Source2 = new GaussianBlurEffect()\r\n {\r\n BlurAmount = 20,\r\n Source = new CompositionEffectSourceParameter("Backdrop"),\r\n Optimization = EffectOptimization.Balanced,\r\n BorderMode = EffectBorderMode.Hard,\r\n },\r\n },\r\n Source2 = new SceneLightingEffect()\r\n {\r\n AmbientAmount = 0.15f,\r\n DiffuseAmount = 1,\r\n SpecularAmount = 0.1f,\r\n NormalMapSource = new CompositionEffectSourceParameter("NormalMap")\r\n },\r\n };\r\n\r\n \/\/ Create EffectFactory and EffectBrush\r\n CompositionEffectFactory effectFactory = compositor.CreateEffectFactory(graphicsEffect);\r\n CompositionEffectBrush effectBrush = effectFactory.CreateBrush();\r\n\r\n \/\/ Create BackdropBrush\r\n CompositionBackdropBrush backdrop = compositor.CreateBackdropBrush();\r\n\r\n \/\/ Set Sources to Effect\r\n effectBrush.SetSourceParameter("NormalMap", normalMap);\r\n effectBrush.SetSourceParameter("Backdrop", backdrop);\r\n\r\n \/\/ Set EffectBrush as the brush that XamlCompBrushBase paints onto Xaml UIElement\r\n CompositionBrush = effectBrush;\r\n }\r\n\r\n protected override void OnDisconnected()\r\n {\r\n \/\/ Clean up resources\r\n _surface?.Dispose();\r\n _surface = null;\r\n\r\n CompositionBrush?.Dispose();\r\n CompositionBrush = null;\r\n }\r\n}\r\n\r\n<\/pre>\n\r\n\r\n<Grid Background="Gray">\r\n <Grid Width="580"\r\n Height="387"\r\n HorizontalAlignment="Center"\r\n VerticalAlignment="Center">\r\n\r\n <!-- Our new MaterialBrush -->\r\n <Grid.Background>\r\n <brushes:MaterialBrush \/>\r\n <\/Grid.Background>\r\n <\/Grid>\r\n<\/Grid>\r\n\r\n<\/pre>\n
![\"\"](\"https:\/\/winblogs.azureedge.net\/win\/2017\/08\/28563c99b36c15109115209eb802f63d.png\")
<\/a><\/p>\nIlluminating the Material with Lights<\/h2>\n
\r\n\r\n<Grid Background="Gray">\r\n <Grid Width="580"\r\n Height="387"\r\n HorizontalAlignment="Center"\r\n VerticalAlignment="Center">\r\n <Grid.Background>\r\n <brushes:MaterialBrush \/>\r\n <\/Grid.Background>\r\n\r\n <!-- Added lights -->\r\n <Grid.Lights>\r\n <lights:HoverLight \/>\r\n <lights:AmbLight \/>\r\n <\/Grid.Lights>\r\n <\/Grid>\r\n<\/Grid>\r\n\r\n<\/pre>\n
![\"\"](\"https:\/\/winblogs.azureedge.net\/win\/2017\/08\/8fee210963b95d08be7aebce0e085850.gif\")
<\/a><\/p>\nUsing the new Material Creator<\/h2>\n
![\"\"](\"https:\/\/winblogs.azureedge.net\/win\/2017\/08\/5191ee38b110eced0032c50989ef8c61.gif\")
<\/a><\/p>\nGenerating the SceneLightingEffect code<\/h3>\n
![\"\"](\"https:\/\/winblogs.azureedge.net\/win\/2017\/08\/e007fc366f39bdd1b14225a69acb17b5.gif\")
<\/a><\/p>\nSaving and Loading Materials<\/h3>\n
Blog Series Wrap up: The future of Fluent Design materials<\/h2>\n
\n
Resources<\/h2>\n
\n
\n
\n