`
jiasongmao
  • 浏览: 670540 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

HLSL自定义渲染特效之完美攻略(上)

    博客分类:
  • WPF
阅读更多

Shader Effect中文名称为“渲染特效”或“滤镜”,WPF中自带有5种位图特效及2种渲染特效,而Silverlight中仅有这2种渲染特效: BlurEffect(模糊渲染)和 DropShadowEffect(投影渲染)。由于目前WPF/Silverlight被应用的领域还不是很多,大多数开发者仅仅是将之作为Winform/Webform的替代品,那么现成的这几种渲染特效已足够应付大多数的场合需要。但是如果您打算利用WPF/Silverlight进行更高端的开发,例如动画制作及游戏设计,那么没有少则数十种的自定义渲染特效库是无法满足绚丽多彩的画面需求的。本节我将以Silverlight平台为例,向大家介绍如何制作及实现HLSL自定义渲染特效。

3.0是Silverlight具有里程碑意义的一个版本,因为从此版本开始,您将能够通过HLSL 高级着色器语言(High Level Shader Language,简称HLSL)为Silverlight中的UIElement对象制作自定义渲染特效,并且这些特效均为快速而有效率地通过显卡来完成。举个简单的例子,如果您想让一个动画的系列帧图片在显示的时候去掉无用的黑色(或其他某种颜色)像素(这在游戏开发中再常见不过了,俗称:去背),用代码来实现则必须循环编历图片中的每个像素点,判断为黑色时修改该点为透明(或忽略所有黑色点),这无形中饶了很大一个弯子。其实我们只需创建一个简单的HLSL渲染特效(HLSL Shader Effect)就可以轻松的实现之,并且可以随意的选择附加或是移除。您此时不禁要问:这么神奇的HLSL渲染特效该如何制作和使用呢?嘿嘿,下面且听我慢慢道来。

 

1)架设开发环境

 

首先需要安装DirectX SDK,接下来在编辑器的选择上有很多种,例如FX ComposerRenderMonkey都很好很强大,这里我个人特别推荐安装专门为WPF/Silverlight开发的小而精悍的Shazzam作为入门级HLSL渲染特效编辑器。需要注意的是,Shazzam在首次运行时需要指定DirectX SDK中的fxc文件路径,该文件存在于DirectX SDK安装目录\Microsoft DirectX SDK (November 2008)\Utilities\bin\x86\下。

 

 2)制作HLSL渲染特效

 

打开Shazzam,我将该编辑器分为4个部分:工具菜单,特效库,预览区域,代码区域:

 

 

Shazzam本身已经自带了一些很棒的特效,大家看上图中的特效库中的*.fx文件即为已经包装好的特效,此时我选择了名为Swirl(旋涡纹)的特效,然后点击菜单栏Tools里的Apply Shader或直接按F5看到的渲染结果即为预览区域中的图象;并且该Swirl渲染特效的HLSL代码我们可以从代码区域中的Swirl.fx中查看到,用过Photoshop的朋友都清楚很多滤镜特别是功能强大的滤镜都是带有参数的,同样的,我们在书写HLSL时通过定义全局变量来作为参数。那么这些参数我们可以通过代码区域中的Change Shader Settings进行修改,并且修改后的效果均会时时的呈现在预览区域中。

掌握了Shazzam编辑器的使用后,制作渲染特效就再简单不过了。如果您不熟悉如何编写HLSL语言,那么您可以尝试从网上查找些现成的HLSL渲染特效或是直接使用自带的这些特效作为起步练习。这里我以实现“灰度”特效为例为大家详细讲解一个渲染特效的整个制作和使用流程。

首先编写出“灰度”特效的HLSL代码:

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;

}

然后将这段代码粘贴进代码区域后按F5运行,如果编译通过则预览图片将变成黑白色:

 

接下来我们需要将此特效保存为*.ps格式以供Silverlight使用,具体操作为点击工具菜单Tools里的Compile Shader(F7)生成ps文件,然后再点击View Compile Shaders会打开编辑器的特效库文件夹路径,此时我们刚才制作的“灰度”渲染特效将保存在此目录中,分别为temp.fxtemp.ps

 

 

3)使用HLSL渲染特效

新建一个Silverlight3项目,在项目中添加两个文件夹分别命名为:ShaderSourceShaderClass,顾名思义ShaderSource用于存放ps文件,那么我们将Gray.ps添加进来,并设置其属性如下:

 

至此,虽然已经可以直接对ps文件进行使用了,但是为了能够更好的拓展延伸及规范管理,我们还必须为每个ps渲染特效编写一个实体驱动类,该类包含有渲染特效的所有参数(关联属性)定义等。非常幸运的,Shazzam编辑器已经为我们提供了现成的代码供参考:

 

我们可以通过代码区域中的选项卡选择显示C#或VB的自动生成代码,然后在ShaderClass文件夹中新建一个名为Gray.cs的类,并将代码粘贴进去。此时如果无法编译通过的,则必须将之Silverlight化修改,因为这些自动生成的代码是针对WPF的(例如将UIPropertyMetadata改为PropertyMetadata)。那么修改后的Gray.cs完整代码如下:

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Effects;

namespace Silverlight.Shader {

    public class Gray : ShaderEffect {

        public static DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(Gray), 0);

 

        public static DependencyProperty FactorProperty = DependencyProperty.Register(

"Factor", typeof(double), typeof(Gray), new PropertyMetadata(new double(), PixelShaderConstantCallback(0)));

 

        public Gray(PixelShader shader) {

            PixelShader = shader;

            this.UpdateShaderValue(InputProperty);

            this.UpdateShaderValue(FactorProperty);

        }

 

        public virtual System.Windows.Media.Brush Input {

            get {

                return ((System.Windows.Media.Brush)(GetValue(InputProperty)));

            }

            set {

                SetValue(InputProperty, value);

            }

        }

 

        public virtual double Factor {

            get {

                return ((double)(GetValue(FactorProperty)));

            }

            set {

                SetValue(FactorProperty, value);

            }

        }

    }

}

接下来就是在主窗体中实现此Gray灰度特效。以第五节的源码为例,我们首先需要加载ps文件作为像素渲染对象:

            PixelShader pixelShader = new PixelShader() {

                UriSource = new Uri(

string.Format("/Silverlight;component/ShaderSource/Gray.ps"), UriKind.Relative)

            };

接着以pixelShader作为参数创建Gray实例,其中的Factor为灰度深度:

     Gray gray = new Gray(pixelShader) {

          Factor = 0

};

最后将此渲染特效赋值给精灵的特效属性:

    Spirit.Effect = gray;

    嘿嘿,完成了~呼呼,还是挺累的呢,来张截图吧:

 

图中的精灵在灰度模式下同样可以毫无破绽的切换装备,嘿嘿~相当的Cool哦,额外的,我还以同样的方法增加了浮雕、去背、卡通材质、反色等几个特效.

 

 

 

 

 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/alamiye010/archive/2009/09/28/4603428.aspx

分享到:
评论

相关推荐

    HLSL自定义渲染特效之完美攻略(中)

    "第7节"的内容可能会提供具体的示例代码和步骤,帮助你进一步掌握HLSL自定义渲染特效的技巧和方法。在阅读和实践过程中,结合标签中的"源码"和"工具",你可以找到实现这些特效的具体代码片段,并通过实际操作加深...

    HLSL实现卡通渲染茶壶

    本文将深入探讨如何在VS2005平台上使用DirectX 9.0c和HLSL(High-Level Shader Language)来实现卡通渲染效果,特别是针对茶壶模型的处理。卡通渲染是一种将3D模型转化为具有鲜明色彩和线条的卡通风格图像的技术,它...

    HLSL特效(高级特效)

    HLSL支持许多高级特效,如法线贴图、置换贴图、环境光遮蔽、屏幕空间反射、动态模糊、全局光照、物理渲染等。这些特效通过HLSL的强大计算能力,使得游戏和应用的画面更加真实。 **8. 混合和Alpha测试** HLSL提供了...

    HLSL特效 详细讲解shade

    HLSL(High-Level Shader Language)是微软为Direct3D开发的一种高级着色语言,用于GPU编程,特别是在图形渲染和图像处理中。它允许开发者创建复杂的光照、纹理和动画效果,提升图形表现力。 1: HLSL概述 HLSL是专...

    Unity屏幕特效之Bloom

    Unity Shader是控制游戏画面渲染的关键,通过编写Shader语言(如CG或HLSL)来定制光照、纹理、颜色等视觉元素。在Unity中,Shader脚本通常与材质(Material)配合使用,为游戏对象赋予特定的外观。 二、Bloom特效原理...

    XNA中的HLSL简单应用

    然而,当我们要实现更复杂的渲染效果时,就需要使用HLSL自定义着色器。这通常涉及到创建一个`.fx`文件,其中包含着色器程序,然后在XNA项目中加载和应用这个文件。在`LoadContent()`方法中,`Content.Load("effe")`...

    使用HLSL实现景深

    HLSL是微软为Direct3D设计的一种着色语言,它允许开发者编写自定义的顶点和像素着色器,以实现复杂的图形效果。在实现景深时,我们通常会用到像素着色器,因为该效果主要是在像素级别上计算的。 1. **景深基本原理*...

    《DirectX3D HLSL 高级实例精讲》目录和程序截图1

    HLSL是一种专为微软DirectX设计的着色语言,用于编写图形处理单元(GPU)上的着色器程序,实现复杂的图形效果。 在书中的第一章,作者首先引导读者进入DirectX 3D编程的世界。入门程序的讲解涵盖了程序的基本结构,...

    hlsl流动云彩效果

    hlsl是DirectX的一部分,专为图形处理单元(GPU)设计,允许开发者编写自定义的着色器程序,以实现更精细、更复杂的图形渲染效果。 在这个特定的案例中,描述提到的效果是“流动云彩”,这是通过hlsl编写的着色器来...

    HLSL初步知识讲解

    作为DirectX系列组件之一,Direct3D允许开发者直接访问图形硬件,从而实现高效的图形渲染。 ##### 1.2 HLSL - **定义**: HLSL (High-Level Shading Language) 是微软在Direct3D 9中引入的一种高级着色语言。它提供...

    HLSL Development Cookbook源代码

    10. **特效实现**:例如雾效、粒子系统、后处理效果(比如模糊、锐化、色调映射)等,这些都可以通过HLSL来实现,源代码会提供具体实现方法。 通过研究和实践这些源代码,读者不仅可以加深对HLSL的理解,还能掌握...

    HLSL初级教程.pdf

    总之,HLSL作为一种强大的图形编程工具,为开发者提供了丰富的可能性,不仅可以用于游戏特效开发,还可以应用于各种图形渲染领域。通过深入学习HLSL及其相关概念和技术,可以实现高质量的视觉效果。

    HLSL Pixel Shader

    总之,HLSL Pixel Shader是游戏开发、图形设计、影视特效等领域不可或缺的工具,通过它可以实现各种视觉效果,从简单的色彩转换到复杂的物理模拟。掌握HLSL编程不仅能够提升图形质量,也能为开发者打开创新的大门。...

    网络游戏开发-HLSL

    通过编写HLSL代码,开发者可以创建自定义的光照模型、纹理贴图、动态阴影和各种高级视觉特效。 2. HLSL与游戏编程: 在游戏中,HLSL主要用于实现图形渲染的计算密集部分。例如,它可以用来计算角色的表面光照、...

    DirectX_and_HLSL.rar

    在Direct3D中,开发者可以通过HLSL自定义每个阶段的行为,以实现特定的视觉效果。 1. **顶点处理**:在这个阶段,开发者使用顶点着色器来处理模型的顶点数据,进行坐标变换(平移、旋转、缩放)、视锥体裁剪和屏幕...

    HLSL初级教程HLSL初级教程

    随着技术的发展,可编程管道(programmable pipeline)被引入,允许开发者在GPU上编写自定义的程序来处理顶点和像素。着色器(shader)就是在这一背景下诞生的,用于替代固定功能管道中的Vertex Processing和Pixel ...

    2D HLSL简单范例

    这个例子中的"2d HLSL"文件可能包含了上述步骤中的HLSL源代码,以及相关的C#代码片段,展示了如何将自定义的2D着色器应用到XNA的SpriteBatch上。通过不断试验和调整HLSL代码,开发者可以创造出各种独特的视觉效果,...

    UE4的自定义ScreenPass和MRT输出

    在UE4(Unreal Engine 4)中,自定义ScreenPass和MRT(Multiple Render Targets,多重渲染目标)输出是图形编程和渲染管线中的高级技术,它们允许开发者扩展引擎的默认渲染流程,实现独特的视觉效果。本文将深入探讨...

    wuhua.rar_HLSL

    这两种方法都可以通过HLSL来实现,通过对像素着色器的自定义编写,调整雾的颜色、密度、起始距离和结束距离等参数。 HLSL中的雾化通常涉及以下几个关键步骤: 1. **输入结构体**:在HLSL着色器中,我们需要定义一...

Global site tag (gtag.js) - Google Analytics