Kanzi 倒影效果制作

在kanzi中,倒影效果会经常用到,比如多媒体中。

先来看一下最终的实现效果:

Kanzi 倒影效果制作

在这个效果中,我们的需求是,倒影图与原图一致,透明度和可见范围可以调节。

下面说一下实现的步骤:

1、创建工程后,RootPage->Viewport 2D->Scene下面创建两个Plan,分别命名为Plan和Reflection

Kanzi 倒影效果制作

2、将Plan的Material设置为TextureMaterial,同时为Plan添加Texture属性,将图片放进去:

Kanzi 倒影效果制作

3、原图做好了,现在我们要实现倒影图的效果。

在Library里面选择Material Types 下面的Textured, ctrl+d 复制一个,命名为TexturedMirror,右击TexturedMirror创建一个Material, 命名为TexturedMirrorMaterial。

展开TexturedMirror, 双击它的Fragment Shader,将它的代码修改为:

Kanzi 倒影效果制作

uniform sampler2D Texture;

uniform lowp float BlendIntensity;

uniform lowp float BlendOffset;

varying mediump vec2 vTexCoord;



void main()

{

    precision lowp float;

    float intensity =1.0 -  smoothstep(0.0,BlendOffset,vTexCoord.y);

    vec4 color = texture2D(Texture, vTexCoord);

    gl_FragColor.rgba = color.rgba * BlendIntensity*intensity;

}

修改完后,保存。选择TexturedMirror, 在右边的属性框内点击Sync with Uniforms,不然的话,你先加的这个材质是没有作用的。

Kanzi 倒影效果制作

接下来,修改reflection下面几个地方

Kanzi 倒影效果制作

Invert V是将图片倒置过来。

倒影实现的方法就是这样,第一次发博,写得不是太好,如果有什么不明白的话,可以告诉我。

自学kanzi的话,装完kanzi studio后,按F1可以打开帮忙文档,目前kanzi就只有这一份英文的文档是最全的,想学习的话只能看它了。跟着里面Tutorial几个例子做一遍,就能对kanzi有个大概的了解了。

上一篇:Android Volley获取json格式的数据


下一篇:玩转iOS开发 - JSON 和 Xml 数据解析