在kanzi中,倒影效果会经常用到,比如多媒体中。
先来看一下最终的实现效果:
在这个效果中,我们的需求是,倒影图与原图一致,透明度和可见范围可以调节。
下面说一下实现的步骤:
1、创建工程后,RootPage->Viewport 2D->Scene下面创建两个Plan,分别命名为Plan和Reflection
2、将Plan的Material设置为TextureMaterial,同时为Plan添加Texture属性,将图片放进去:
3、原图做好了,现在我们要实现倒影图的效果。
在Library里面选择Material Types 下面的Textured, ctrl+d 复制一个,命名为TexturedMirror,右击TexturedMirror创建一个Material, 命名为TexturedMirrorMaterial。
展开TexturedMirror, 双击它的Fragment Shader,将它的代码修改为:
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,不然的话,你先加的这个材质是没有作用的。
接下来,修改reflection下面几个地方
Invert V是将图片倒置过来。
倒影实现的方法就是这样,第一次发博,写得不是太好,如果有什么不明白的话,可以告诉我。
自学kanzi的话,装完kanzi studio后,按F1可以打开帮忙文档,目前kanzi就只有这一份英文的文档是最全的,想学习的话只能看它了。跟着里面Tutorial几个例子做一遍,就能对kanzi有个大概的了解了。