[小白自学]Shader-11-实现雷达扫描动态效果

功能描述:
实现类似雷达扇形扫描的程序化纹理效果及其扩展应用。
效果:


此外还可以作为动态边框或者进度条

参数:

//主纹理
mainTexture:    { value: white }
//边框颜色
mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
//边框尺寸
borderSize:     { value: 0.05, editor: { slide : true, range : [0.01,0.3], step: 0.01 } }
//周期
period :       { value: 1.0, editor: { slide : true, range : [1.0,3.0], step: 0.1 } }

核心思路:
以纹理中心点为极坐标原点计算极角,然后根据极角映射每个像素对应的灰度,最后再根据时间变量覆盖区域颜色达到扫描的效果。

#define PI 3.14159

  vec4 frag () {
    vec2 center = vec2(0.5, 0.5);
    //计算极坐标
    float angle = atan(v_uv.x - center.x,v_uv.y - center.y);
    
    //根据极坐标计算颜色梯度
    float gradient = (angle + PI) / (PI * 2.0);

    float smplColor = 1.0 - gradient; 
    vec4 col = vec4(smplColor, smplColor, smplColor, 1.0);
    
    float timethresh = mod(cc_time.x, period);
    if (smplColor < timethresh) {
      col = mainColor;
    }

#if USE_MAIN_TEXTURE
    if(abs(v_uv.x - 0.5) < 0.5 - borderSize && abs(v_uv.y - 0.5) < 0.5 - borderSize) {
      col = texture(mainTexture,v_uv);
    }
#endif

    return CCFragOutput(col);
  }

扩展阅读:了解极坐标
根据此思路可以派生制作出许多有趣的程序化纹理效果。

5赞

大佬多更,五一把你的设计思路都全看一下,感觉写shader核心就是设计思路。到时候整个shader笔记,哈哈

精简实用,太棒了

1赞

很开心能有所帮助,一起加油!

谢谢关注!一起加油!

image 这个东西引擎自带的

之前我看到过一种心跳图的shader效果,和这个类似,也是走的进度条。不过是只用一张透明渐变的折线图。线条会随时间变化沿着折线路线前进。找不到原帖了,不造啥原理

原理应该是给shader传入progress值,某一通道比如g, 小于progress就展示,能达到你说的效果

2025-04-30T02_19_11.393Z-253127
分享一个龙珠雷达
DragonBallRadar.zip (1.5 KB)

4赞

[小不溜] 用shader做一条流动的线条 - Creator 3.x - Cocos中文社区 你可能说的这个?

1赞

对,就是这个,之前研究到一半没搞懂,后面事情多给忘了 :rofl:

是下面那个,看着很灵动 :rofl:

高产啊 大佬 :pray:

嗯,这个是取r通道中的动态范围

这个是cocos那个版本的,放到工程报错

package.json里,可以看cocos版本

2.4.13

又更新了 :smiley:

1赞