实现思路

可以使用一张圆的图片，然后配合mask的反向遮罩来实现，但是这种实现的效果会有锯齿，所以一般会写一个shader。异名上篇文章中追光效果中那个shader刚好直接就可以使用了，这系列的定位是常用功能集锦，圆形头像又是高频应用，因此异名就再单独拿出来再水一篇，方面后面查看使用。

光圈是一个圆，假设圆心在纹理的中间，它的坐标是vec2(0.5,0.5)，我们只需让到圆心的距离大于半径的像素丢弃或者透明度为0，代码如下：

void main () {vec4 color = vec4(1, 1, 1, 1);color *= texture(texture, v_uv0);color *= v_color;color.a = step(length(v_uv0 - vec2(0.5,0.5)), 0.1);gl_FragColor = color;
}

ellipse

其中step 是内置的规整函数 step(a, x) = x >= a? 1 : 0，length是取模。上面的代码段应用在可以在正方形的纹理中可以得出一个正圆，但是如果纹理不是正方形，上面出来的效果会是一个椭圆，因为在shader无论纹理的真实宽高是多少，它的x,y变化范围都是0~1，是比例的变化。如果需要产生一个正圆，还是得通过获取纹理的真实宽高，来计算真实的宽高比例，异名选择的方式是在在组件初始化的时候，输入一个wh_ratio比例来获取，圆的真实半径通过勾股定理来计算，异名这里就没有开方了，直接通过半径平方的比较来舍去圆外的点。

void main () {vec4 o = vec4(1, 1, 1, 1);o *= texture(texture, v_uv0);o *= v_color;float circle = radius * radius;float rx = center.x * wh_ratio;float ry = center.y;float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y  - ry) * (v_uv0.y - ry);o.a = step(dis, 0.1);gl_FragColor = o;
}

这样子就能在一个不同宽高比的纹理中都能够画出一个正圆。

circle

但是这样的圆的边缘是有锯齿的，所以我们需要借助另外一个内置插值函数smoothstep(min, max, x)，它能够返回一个在输入值之间平稳变化的插值，以此来达到边缘羽化的效果。

void main () {vec4 o = vec4(1, 1, 1, 1);o *= texture(texture, v_uv0);o *= v_color;float circle = radius * radius;float rx = center.x * wh_ratio;float ry = center.y;float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y  - ry) * (v_uv0.y - ry);o.a = smoothstep(circle, circle - blur, dis);gl_FragColor = o;
}

circle

效果预览

源码获取请点击查看原文，长按二维码查看效果????

ewm

详解圆形头像Shader相关推荐

自定义view(二) Path绘画详解圆形进度条
目录简介基础api 圆形进度条总结简介 view的绘制可以由无数个形状组成,在canvas基础图形绘制中,我们已经把api提供好的基本图形讲过了.Path之所以单独一章出来是因为path可以由 ...
php论坛思路,PHP论坛实现积分系统的思路代码详解
PHP论坛实现积分系统的思路代码详解,积分,头像,等级,用户,字段 PHP论坛实现积分系统的思路代码详解易采站长站,站长之家为您整理了PHP论坛实现积分系统的思路代码详解的相关内容. 首先在用户表定 ...
Android 圆形头像/有外边框的圆形头像CircleImageView自定义控件使用详解
现在很主流使用圆形头像,还要带边框的一个圆圈圈,自己做的项目里就有这样的需求,大大小小好多地方. 本着能懒则懒的原则,把使用详解总结出来,(PS:不是控件详解). 基本上可以拿来就用,注释我也添加的比 ...
php 微信头像圆形,详解iOS 裁剪圆形图像并显示(类似于微信头像)
本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式. 本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述. 本文主要是在ios 10环境下使用,此时如果要 ...
ios 裁剪圆形头像_详解iOS 裁剪圆形图像并显示(类似于微信头像)
本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式. 本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述. 本文主要是在iOS 10环境下使用,此时如果要 ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
Android绘图Canvas十八般武器之Shader详解及实战篇(上)
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布前言 Android中绘图离不开的就是Canvas了,Canvas是一个庞大的知识体系,有java层的,也有jni层深入到Frame ...
【OpenCV 4开发详解】圆形检测
本文首发于"小白学视觉"微信公众号,欢迎关注公众号本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
圆形界面开启相机_「基础篇三」手机摄影拍照界面详解
[基础篇三]手机摄影拍照界面详解手机拍照对我们来说已习以为常,每天我们都会用手机相机功能或多或少的拍出几张照片.故手机拍照界面对我们来说也不陌生,但手机拍照界面上的那些按钮,那些功能你都用过吗?你 ...
html5 游戏算法,JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】...
JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解[圆形情况] 发布时间:2020-10-10 13:42:43 来源:脚本之家阅读:95 作者:krapnik 本文实例讲述了JS/HTML ...

详解圆形头像Shader

实现思路

效果预览

详解圆形头像Shader相关推荐

最新文章

热门文章