// 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 } u_arc_color: { value: [1.0, 1.0, 1.0, 1.0], editor: { type: color, tooltip: "圆弧线颜色" } } u_arc_radius: { value: 0.3, editor: { tooltip: "圆弧半径" } } u_arc_line_width: { value: 0.1, editor: { tooltip: "圆弧线宽" } } u_ball_color: { value: [1.0, 1.0, 0.0, 1.0], editor: { type: color, tooltip: "小球颜色" } } u_ball_angle: { value: 30.0, editor: { tooltip: "小球所在角度" } } u_ball_angle_range: { value: 30.0, editor: { tooltip: "小球所在角度的夹角范围" } } u_ball_radius: { value: 0.05, editor: { tooltip: "小球半径" } } }% CCProgram vs %{ precision highp float; #include #include 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 in vec4 v_color; #if USE_TEXTURE in vec2 v_uv0; uniform sampler2D texture; #endif #if USE_ANTI_ALIAS #endif #if USE_LOADING_STYLE uniform style{ // 圆弧线颜色 vec4 u_arc_color; // 小球颜色 vec4 u_ball_color; // 圆弧线宽 float u_arc_line_width; // 圆弧半径 float u_arc_radius; // 小球所在角度 float u_ball_angle; // 小球所在角度的夹角范围 float u_ball_angle_range; // 小球半径 float u_ball_radius; }; /** * 获取 v_uv0 映射后的坐标 */ vec2 getUv0Shadow() { // 1. 将 v_uv0 映射到 以 (0.5, 0.5) 为圆心,Y轴向下,X轴向右的坐标系的坐标 uv0 vec2 uv0 = v_uv0 - vec2(0.5, 0.5); // 2. 将映射后的 uv0 的坐标逆时针旋转一定角度(实际等同于旋转画布) // 这里应用 cc-global.chunk 的 cc_time 参数,实现根据时间不断旋转的功能 float rotation_angle = u_ball_angle + cc_time.x * 200.0; // * 200 是加快旋转速度 float rotation_radians = radians(rotation_angle); // 角度转弧度 vec2 uv0_after_rotation = vec2( // 矩阵旋转 uv0.x * cos(rotation_radians) - uv0.y * sin(rotation_radians), uv0.x * sin(rotation_radians) + uv0.y * cos(rotation_radians) ); return uv0_after_rotation; } /** * 画圆弧 * * 原理基于纹理中心,并且0角度先画圆弧,然后在旋转画布 */ vec4 getArcColor() { vec2 uv0 = getUv0Shadow(); // 求圆边范围 float len = length(uv0); float min_radius = u_arc_radius - u_arc_line_width * 0.5; float max_radius = u_arc_radius + u_arc_line_width * 0.5; if (len >= min_radius && len <= max_radius) { // 求(圆)缺口范围 float radian = acos(uv0.x / len); float radian_range = radians(u_ball_angle_range * 0.5); if (radian >= radian_range) { float alpha = 1.0; // 抗锯齿 #if USE_ANTI_ALIAS alpha = smoothstep(0.0, 0.05, 1.0 - abs(len - u_arc_radius) / (u_arc_line_width * 0.5)); #endif // 非缺口范围内画圆弧 return u_arc_color * alpha; } } return vec4(0.0, 0.0, 0.0, 0.0); } /** * 画小球 */ vec4 getBallColor() { vec2 uv0 = getUv0Shadow(); vec2 ball_center_point = vec2(u_arc_radius, 0); // cos 控制小球半径不断缩放 float ball_radius = u_ball_radius + u_ball_radius * 0.3 * cos(radians(cc_time.x * 200.0)); float dis = distance(uv0, ball_center_point); if (dis <= ball_radius) { float alpha = 1.0; // 抗锯齿 #if USE_ANTI_ALIAS alpha = smoothstep(0.0, 0.01, ball_radius - dis); #endif return u_ball_color * alpha; } else{ return vec4(0.0, 0.0, 0.0, 0.0); } } #endif void main () { vec4 o = vec4(1, 1, 1, 1); gl_FragColor = o; #if USE_LOADING_STYLE vec4 arc_color = getArcColor(); vec4 ball_color = getBallColor(); gl_FragColor = ball_color * ball_color.a + arc_color; #endif } }%