使用shader去显示一个图片的圆形部分,在.fsh文件里硬编码都没问题。
但是使用js去设置u_radius 和u_center 就是不能生效,也不报错。。。
js代码如下:
// 创建背景图片精灵
self.imgBg = new cc.Sprite("res/panel/panel_loading/bg.png");
self.setAnchorPoint(0.5, 0.5);
self.imgBg.setPosition(cc.visibleRect.center);
self.addChild(self.imgBg);
// 加载并使用顶点着色器和片段着色器
var vertexShaderPath = "res/zoom_cycle.vsh";
var fragmentShaderPath = "res/zoom_cycle.fsh";
var glProgram = new cc.GLProgram();
glProgram.retain();
glProgram.init(vertexShaderPath, fragmentShaderPath);
glProgram.link();
glProgram.updateUniforms();
// 设置 uniform 变量
glProgram.use();
// 获取 uniform 变量的 location 索引:
var location_of_u_center = glProgram.getUniformLocationForName("u_center");
var location_of_u_radius = glProgram.getUniformLocationForName("u_radius");
//这里不生效 location_of_u_center 和 location_of_u_radius 大于0
glProgram.setUniformLocationWith2f(location_of_u_center, 0.5, 0.5); // 中心点坐标
glProgram.setUniformLocationWith1f(location_of_u_radius, 0.5); // 初始半径
// 应用着色器到精灵
self.imgBg.setShaderProgram(glProgram);
zoom_cycle.fsh:
// Fragment Shader
#ifdef GL_ES
precision mediump float;
#endif
// 定义 uniform 变量
uniform vec2 u_center; // 中心点坐标
uniform float u_radius; // 圆形区域的半径
// 定义 varying 变量
varying vec2 cc_FragTexCoord1; // 纹理坐标
void main() {
// 计算当前片段的纹理坐标与中心点的距离
float dist = distance(cc_FragTexCoord1, u_center);
// 判断片段是否在圆形区域内
if (dist < u_radius) {
// 在圆形区域内,显示原始颜色
gl_FragColor = texture2D(CC_Texture0, cc_FragTexCoord1);
} else {
// 在圆形区域外,设置为透明
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}
}