滚动网页时出现水波浪纹怎么办

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动网页时出现水波浪纹怎么办相关的知识,希望对你有一定的参考价值。

滚动网页时出现水波浪纹怎么办

建议你下个驱动精灵,安装试试,出现这个问题估计是显卡驱动没装或是不小心卸载了 参考技术A 显卡问题吧

shader 动画之旗子/水纹波浪 !Cocos Creator !

顶点动画、正弦、波长、振幅、周期。

效果预览

技术图片

使用步骤

新建材质 Material , 选择对应的 Effect ,调整参数。

技术图片

在场景中新建一个精灵(Sprite) , SpriteFrame 选取一个超小的图片。渲染模式选择平铺(TILED),修改节点大小。材质选择上面创建的材质。

技术图片

预览就能看到这张图片动起来了。

实现原理

为什么选择平铺模式可以实现这个效果呢?

简单的 Sprite 通常是4个顶点。

而通过 Cocos 源码中发现,Sprite 的平铺渲染模式的 webgl 实现是平铺顶点网格。平铺的数量越多,顶点越多。

所以,只要这张图片足够小的话,这个网格就越密集。

技术图片

如何产生波动效果?

这里用到正弦波公式 y = A sin{ 2π ( t/T - x/λ ) } ,就能实现波动效果。

技术图片

所以,使用 sin 函数,对每一个顶点的位置坐标做一次偏移,就能达到波动效果啦~

顶点着色器主要代码如下。

void main () {
    vec4 pos = vec4(a_position, 1);
    // y = A sin{ 2π ( t/T - x/λ ) }
    pos.y = pos.y + sin_A*sin(2.0*3.141592653*(cc_time.x/sin_T - pos.x/sin_lamda));
    // 省略代码
}

使用 Sprite 的平铺渲染模式有一个限制条件就是这个纹理要比较简单且可以重复使用,例如这种纯色的波动效果。

如果要使用复杂的纹理波动可以用以下几种方法。

  1. 使用 Sprite 的网格(Mesh)渲染模式,自定义顶点数据,可以参考 初探精灵中的网格渲染模式
  2. 使用 cc.MeshRenderer 组织顶点数据,参考 飘扬的旗帜!shader 编程实战!

技术图片

更多精彩

█ 物理挖洞之分块 █ █ 渐变色的实现 █ █ 画线纹理之绳子 █ █ 精灵之网格模式 █ █ shader动画 之loading █ █ js的三位一体 █ █ shader 之攻击闪白 █ █ 物理流体(欢乐水杯) █ █ 瞄准线之抛物线 █ █ 随机(正态分布)飞溅运动 █ █ 贪吃蛇之平滑移动 █ █ 雷达图的实现 █ █ 分形着色器 █ █ shader 之过渡 █ █ 初探 gizmo 使用 █ █ shader 之卷积滤镜 █ █ 旗帜效果(meshRenderer) █ █ 多边形裁剪(meshRenderer) █ █ 高抛平抛发射 █ █ 水纹效果(片元着色器) █ █ 2019年原创(黑历史) █

小结

y = A sin{ 2π ( t/T - x/λ ) }

以上为白玉无冰使用 Cocos Creator v2.3.3 开发" shader 动画之旗子/水纹波浪效果!"的技术分享。如果对你有点帮助,欢迎分享给身边的朋友。

每个人都必定在某一方面胜于我,因此我向所有人学习。 -- 《人性的弱点》


技术图片


完整代码(见readme)
原创文章导航


以上是关于滚动网页时出现水波浪纹怎么办的主要内容,如果未能解决你的问题,请参考以下文章

鼠标上下滑动网页上的内容像波浪一样翻滚是神马原因导致的?我想要调回网页随着鼠标静静的流动,请求各位

显示器有水波浪是啥问题

网页中如何让DIV在网页滚动到特定位置时出现

如何在实现在网页中,鼠标经过超连接时出现下划线效果

为啥我拉滚动条的时候屏幕抖动的厉害,象波浪一样的?

Zrender:实现波浪纹效果