一.效果
2.原理
计算每个uv的点距离点击屏幕的uv点的距离,根据已知的宽度计算显示的区域。
3.代码
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
center_point: {
value: [0.3,0.3],
editor: {
tooltip: "显示的中心点"
}
}
textureSize: {
vaule: [1.0,1.0],
editor: {
tooltip: '图片的宽'
}
}
textureWidth: {
vaule: 1.0,
editor: {
tooltip: '图片的宽'
}
}
textureHeight: {
vaule: 1.0,
editor: {
tooltip: '图片的高'
}
}
show_width: {
value: 0.5,
editor: {
tooltip: "显示的宽度"
}
}
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
#include <texture>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
#if USE_FLASHLIGHT
uniform Light{
vec2 center_point;
vec2 textureSize;
float textureWidth;
float textureHeight;
float show_width;
};
#endif
/**
* 计算显示的区域
*/
vec4 addLight(vec4 oldColor){
#if USE_FLASHLIGHT
if(oldColor.a == 0.0){
return oldColor;
}
//计算向量差
vec2 distance_vec = center_point - v_uv0;
//将向量差正常化(因为图片不是标准的正方形)
distance_vec = distance_vec * vec2(textureWidth / textureHeight,1.0);
//三角函数 计算距离
float distance_center = sqrt(distance_vec.x * distance_vec.x + distance_vec.y * distance_vec.y);
//利用smoothstep函数得到一个渐变的过度因子
float distance_factor = smoothstep(0.0,show_width,distance_center);
oldColor *= (1.0 - distance_factor);
#endif
return oldColor;
}
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
CCTexture(texture, v_uv0, o);
#endif
o *= v_color;
ALPHA_TEST(o);
o = addLight(o);
gl_FragColor = o;
}
}%