Создание новых Shader-эффектов в Silverlight
Шейдеры создаются на языке High Level Shader Language (HLSL), который был создан как часть DirectX SDK. В шейдерах замечательно то, что их легко создавать, и они пользуются популярностью, поскольку они используются в DirectX и WPF. Вы можете поискать и найти множество классных примеров HLSL.
Я бы рекомендовал использовать для написания HLSL кода инструмент Shazzam Tool, который позволяет редактировать и отлаживать HLSL, а также сразу посмотреть результат. Это гораздо удобнее, чем альтернатива использования командной строки инструмента Effect-Compiler Tool из DirectX SDK.
Итак, вот какие инструменты я использую и какие шаги делаю, чтобы создать новый Pixel Shader-эффект:
(1) Загружаю и устанавливаю DirectX SDK.
(2) Устанавливаю Shazzam.
(3) Запускаю Shazzam. Скорее всего, вам понадобится изменить Настройки Shazzam, поэтому чтобы открыть их кликните на Setting Panel и удостоверьтесь, что параметр «Location of DirectX FX Compiler» указывает на место, где установлен в шаге (1) DirectX SDK. Если вы измените этот путь, то придется перезапустить Shazzam.
(4) Теперь вы можете немного позабавиться создавая Pixel Shader в HLSL! Вы можете представлять себе Pixel Shader как функцию, которая обрабатывает значение каждого пикселя, в результате чего пиксель получает новое значение. Вот очень простой пример Pixel Shader’а, который увеличивает яркость элемента:
sampler2D input : register(s0);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 Color;
Color = tex2D( input , uv.xy)*4;
return Color;
}
Далее, скопируйте этот код в редактор Shazzam и нажмите F5 (или выберите Tools -> Apply Shader). Вы сразу же увидите, что примеры изображений становятся светлее.
(6) Теперь попробуйте более сложный пример, который переводит изображение в черно-белый вариант:
sampler2D implicitInput : register(s0);
float factor : register(c0);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInput, uv);
float gray = color.r * 0.3 + color.g * 0.59 + color.b *0.11;
float4 result;
result.r = (color.r - gray) * factor + gray;
result.g = (color.g - gray) * factor + gray;
result.b = (color.b - gray) * factor + gray;
result.a = color.a;
return result;
}
(7) Обратите внимание, что на Shazzam доступен набор примеров шейдеров. Чтобы увидеть их зайдите на панель «Shader Loader» и нажмите «Sample Shaders».
(8) Теперь давайте посмотрим, как мы можем использовать наши шейдеры в приложении Silverlight 3. В Shazzam откройте Tools -> View Compliled Shaders (*.ps). Перед вами откроется каталог с шейдером, который вы только что скомпилировали. Скопируйте это .ps файл в буфер обмена для следующего шага.
(9) Создайте новое приложение Silverlight 3. Вставьте файл .ps в проект Silverlight и укажите свойству файла Build Action значение Resource.
(10) Добавьте в проект Silverlight новый класс и назовите его MySharedDemo, затем вставьте в него следующий код (не забудьте вместо «temp.ps» указать настоящее имя вашего файла шейдера, а вместо ShaderTest2 -- настоящее имя вашего проекта Silverlight):
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System;
namespace ShaderTest2
{
public class MyShaderDemo : ShaderEffect
{
public MyShaderDemo()
{
Uri u = new Uri(@"/ShaderTest2;component/temp.ps", UriKind.Relative);
PixelShader psCustom = new PixelShader();
psCustom.UriSource = u;
PixelShader = psCustom;
}
}
}
(11) Теперь вы можете использовать ваш Pixel Shader. Откройте MainPage.xaml и добавьте xmlns-ссылку на свою же сборку, после этого вы можете применить эффект к любому UI-элементу:
<UserControl x:Class="ShaderTest2.MainPage"
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"
xmlns:shaderx="clr-namespace:ShaderTest2"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Canvas x:Name="LayoutRoot" Background="White" Margin="0,0,-47,0">
<Image Canvas.Top="38" Source="MoonVenusMars_espenak.jpg" Stretch="Fill">
<Image.Effect>
<shaderx:MyShaderDemo/>
</Image.Effect>
</Image>
</Canvas>
</UserControl>
Оригинал статьи: Silverlight 3: Pixel Shaders and Effects
