Shader
__三思而先行
每一行代码,只为取悦自己
展开
-
CocosCreator Shader学习(五):图片圆形裁剪
圆形裁剪效果顶点着色器代码不用修改。片元着色器代码如下:CCProgram fs %{ precision highp float; #include <alpha-test> #include <texture> in vec4 v_color; #if USE_TEXTURE in vec2 v_uv0; uniform sampler2D texture; #endif uniform InputData{原创 2020-07-30 15:26:26 · 2475 阅读 · 0 评论 -
cocos2dx 使用shader实现圆形裁剪
最近在做联网象棋游戏,需要将在线获取的图形裁剪成圆形图片,由于之前了解过shader相关知识,所以就想试试用shader来实现圆形裁剪,代码如下:顶点着色器代码:attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;#ifdef GL_ESvarying mediump vec2 v_texCoord;varying lowp vec4 v_fragmentColor;#elsevary原创 2020-07-19 22:46:00 · 1136 阅读 · 0 评论 -
CocosCreator Shader学习(四):花草摆动效果
花草摆动效果原理:根据时间的推移计算出x轴方向上的偏移量,然后把纹理中的每个点的颜色修改成发生偏移之后点的颜色。先放一张静止状态的画草图顶点着色器代码不用修改。片元着色器代码如下:CCProgram fs %{ precision highp float; #include <alpha-test> in vec4 v_color; ...原创 2020-04-09 22:18:45 · 3162 阅读 · 1 评论 -
CocosCreator Shader学习(三):放大镜缩小镜效果
定点缩放效果原理:根据缩放比例,判断镜面范围内的点实际应该显示哪个点的颜色值,问题就变成怎么根据缩放比例进行坐标转换!顶点着色器代码不用修改。片元着色器代码如下:CCProgram fs %{ precision highp float; #include <alpha-test> in vec4 v_color; #if USE_TEXTU...原创 2020-04-08 20:47:45 · 2386 阅读 · 0 评论 -
CocosCreator Shader学习(二):流光效果
流光效果原理:在以图片左下角为原点的坐标系中, 假设流光就是一条直线(斜截式:y=kx+b),那么只需要把直线和图片所在矩形的交点全部找出来即可。顶点着色器代码不用修改。片元着色器代码如下:CCProgram fs %{ precision highp float; #include <alpha-test> in vec4 v_color; ...原创 2020-04-08 20:28:00 · 3964 阅读 · 6 评论 -
CocosCreator Shader学习(一):描边效果
最近研究了一下CocosCreator的shader使用方法,并把自己学习期间写的一些效果分享出来。CocosCreator版本:v2.3.2官方学习链接:Material 材质介绍、Effect介绍(官方文档是最好的学习文档,一定要反复多看)描边效果原理:1.判断图片中的某个点周围8个点的alpha值。2.判断某点是否处于图片边缘。如上3图就是给精灵换材质并选定自...原创 2020-04-07 21:46:05 · 10513 阅读 · 5 评论