圆角矩形shader
在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形。
circelrect.vert
attribute vec4 a_position;
attribute vec4 a_normal;
attribute vec4 a_color;
attribute vec2 a_texCoord0; uniform mat4 u_projTrans; varying vec4 v_color;
varying vec2 v_texCoords; void main() {
v_color = vec4(, , , );
v_texCoords = a_texCoord0;
gl_Position = u_projTrans * a_position;
}
circlerect.frag
#ifdef GL_ES
precision mediump float;
#endif varying vec2 v_texCoords;
uniform sampler2D u_texture; varying vec4 v_color; uniform float r; bool isOut(float x, float y, float cx, float cy, float r){
bool flag1 = (cx<0.5f && x<cx) || (cx>0.5f && x>cx);
bool flag2 = (cy<0.5f && y<cy) || (cy>0.5f && y>cy);
float dis = (x-cx)*(x-cx) + (y-cy)*(y-cy);
if(flag1 && flag2 && dis>r*r){
return true;
}
return false;
} void main() {
vec4 texColor = texture2D(u_texture, v_texCoords); float x = v_texCoords.x;
float y = v_texCoords.y; float rate = 1f; if(isOut(x, y, r, r, r)) rate = 0f;
if(isOut(x, y, r, -r, r)) rate = 0f;
if(isOut(x, y, -r, r, r)) rate = 0f;
if(isOut(x, y, -r, -r, r)) rate = 0f; gl_FragColor = vec4(texColor.rgb, rate*texColor.a);
}
gdx程序
package com.fxb.gdx.example; import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputAdapter;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShaderProgram; public class Test014_MaskShader extends ApplicationAdapter{ SpriteBatch batch;
Texture texture;
ShaderProgram shader; int[][] maskss;
int[] masks; public void create() {
super.create();
batch = new SpriteBatch();
texture = new Texture(Gdx.files.internal("data/pic.jpg")); // shader = new ShaderProgram( Gdx.files.internal("shader/mask.vert").readString(),
// Gdx.files.internal("shader/mask.frag").readString() ); shader = new ShaderProgram( Gdx.files.internal("shader/circlerect.vert").readString(),
Gdx.files.internal("shader/circlerect.frag").readString() ); batch.setShader(shader); maskss = new int[10][10];
for(int i=0; i<maskss.length; ++i){
for(int j=0; j<maskss[i].length; ++j){
maskss[i][j] = 0;
}
} maskss[1][2] = 1;
maskss[5][6] = 1; masks = new int[100];
setMask(1, 2);
setMask(5, 6); // shader.setUniformf("maskX", 0.2f);
// shader.setUniformf("maskY", 0.3f); Gdx.input.setInputProcessor(adapter);
} private void setMask(int xIndex, int yIndex){
maskss[xIndex][yIndex] = 1; masks[yIndex*10+xIndex] = 1;
} // float maskX = 0.3f, maskY = 0.4f;
// float[] maskXs = {0.3f, 0.9f};
// float[] maskYs = {0.4f, 0.9f}; float[] maskXs = new float[10];
float[] maskYs = new float[10]; float r = 0.05f;
float step = 0.01f;
float rate = 1f;
public void render() {
super.render();
// Gdx.gl.glClearColor(0.3f, 0.3f, 0.3f, 1f);
Gdx.gl.glClearColor(0f, 0f, 0f, 1f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); // uniform float maskX;
// uniform float maskY; batch.setShader(shader);
batch.begin();
// shader.setUniformf("maskX", maskX);
// shader.setUniformf("maskY", maskY); // shader.setUniform1fv("maskXs", maskXs, 0, 10);
// shader.setUniform1fv("maskYs", maskYs, 0, 10); shader.setUniformf("r", r);
batch.draw(texture, 100, 100);
batch.end(); r += step*rate;
if(r >=0.45f){
rate = -1f;
}
else if(r <= 0f){
rate = 1f;
}
} public void dispose() {
super.dispose(); // uniform float[] maskXs;
// uniform float[] maskYs;
//
// void main() {
// vec4 texColor = texture2D(u_texture, v_texCoords);
//
// float x = v_texCoords.x;
// float y = 1f - v_texCoords.y;
//
// float rate = 1f;
// for(GLint i=0; i<2; ++i){
// float maskX = maskXs[i];
// float maskY = maskYs[i];
// if(x>maskX-0.02f && x<maskX+0.02f && y>maskY-0.02f && y<maskY+0.02f){
// rate = 0f;
// }
// }
//
//
// gl_FragColor = vec4(texColor.rgb, texColor.a*rate);
// } } private InputAdapter adapter = new InputAdapter(){ public int changeY(int screenY){
return 480-screenY;
} public boolean touchDown(int screenX, int screenY, int pointer,int button) {
screenY = changeY(screenY); float curX = screenX-100, curY = screenY-100;
if(curX>0 && curX<texture.getWidth() && curY>0 && curY<texture.getHeight()){
// maskX = curX/texture.getWidth();
// maskY = curY/texture.getHeight(); // maskXs[0] = maskXs[1];
// maskYs[0] = maskYs[1]; for(int i=0; i<maskXs.length-1; ++i){
maskXs[i] = maskXs[i+1];
maskYs[i] = maskYs[i+1];
} maskXs[maskXs.length-1] = curX/texture.getWidth();
maskYs[maskYs.length-1] = curY/texture.getHeight(); } return super.touchDown(screenX, screenY, pointer, button);
} public boolean touchUp(int screenX, int screenY, int pointer, int button) {
return super.touchUp(screenX, screenY, pointer, button);
} public boolean touchDragged(int screenX, int screenY, int pointer) {
return super.touchDragged(screenX, screenY, pointer);
} };
}
运行结果:

圆角矩形shader的更多相关文章
- 解读Unity中的CG编写Shader系列四(unity中的圆角矩形shader)
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...
- 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形 例3:圆角矩形Shader 好吧我承认在做这个样例的时候走了不少弯路,因 ...
- [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...
- unity 切圆角矩形 --shader编程
先上个效果图 制作思路 如上图我们要渲染的就是上图带颜色的部分 步骤: 先获取黄色和蓝绿部分 例如以下图 算法 |U|<(0.5-r)或|V|<(0.5-r) 注意的是模型贴图最大值是1. ...
- [BOT] 一种android中实现“圆角矩形”的方法
内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
- SimpleRoundedImage-不使用mask实现圆角矩形图片
1.一张图片是如何显示在屏幕上的 一张图片渲染到unity界面中的大致流程. 2.我们要做什么 我们要做的就是在CPU中将图片的矩形顶点数据修改成圆角矩形的顶点信息,之后Unity会将修改后的顶点数据 ...
- 用贝赛尔曲线把图片, 按钮, label 绘成圆 或圆角矩形
//创建圆形遮罩,把用户头像变成圆形 /* *CGPointMake(35, 35) 是绘图的中心点, 如果想把控件居中绘圆, 一般用控件的中心点, radius 是圆半径 startAn ...
- RoundedImageView,实现圆形、圆角矩形的注意事项
RoundedImageView是gitHub上面的一个开源组件(https://github.com/vinc3m1/RoundedImageView),实现一些圆形或者圆角矩形是很方便的, < ...
随机推荐
- github上传流程图记录
参考文章 http://blog.csdn.net/laozitianxia/article/details/50682100 首先你得先创建仓库 为仓库取一个名字,然后点击创建就会有一个仓库了, g ...
- Docker EE 安装 on centos7
本文演示如何在CentOS7上安装Docker EE. 1 安装方式 有两种方法可以 在Centos上安装和升级Docker企业版(Docker EE): YUM存储库:设置Docker存储库并从中安 ...
- 【redis专题(10)】KEY设计原则与技巧
对比着关系型数据库,我们对redis key的设计一般有以下两种格式: 表名:主键名:主键值:列名 表名:主键值:列名 在所有主键名都是id的情况下(其实我个人不喜欢这种情况,比如user表,它的主键 ...
- 验证对Random的两个猜想
猜想1:Random.Next()产生的随机数不会有重复. 猜想2:大量级执行Random.Next(int i)分布在各个数值上的概率是均匀的. 验证猜想1 /*如果Random.Next()产生的 ...
- ELK 处理 Percona 审计日志(填坑)
前提 1.有强烈的审计需求. 2.能允许10%-15%左右的性能损失. 3.有强烈的对数据库操作实时查看需求(一般都是为了领导要求). Logstash 比较坑的配置 1 2 3 4 5 6 7 ...
- 转:RowVersion 用法
在数据表更新时,如何表征每个数据行更新时间的先后顺序?最简单的做法是使用RowVersion(行版本)字段,它和时间戳(TimeStamp)类型的功能相似,只不过TimeStamp 已过时,应避免用于 ...
- Java入门(三):变量和运算符
上次谈到了Java的基本数据类型,今天接着聊Java的变量.运算符. 一.变量 1.变量的分类 变量分为成员变量.局部变量和常量,其中成员变量又分为实例变量.类变量. 2.变量的定义 语法:变量类型( ...
- Java strictfp
strictfp关键字 用于强制Java中的浮点计算(float或double)的精度符合IEEE 754标准. 不使用strictfp:浮点精度取决于目标平台的硬件,即CPU的浮点处理能力. 使用s ...
- 17秋 软件工程 第六次作业 Beta冲刺
题目:团队作业--Beta冲刺 Scrum Beta Scrum1 Beta Scrum2 Beta Scrum3 Beta Scrum4 Beta Scrum5 总结博客 总结博客
- Java-Socket实现文件的断点续传
前段时间因为任务需要本人这个java渣渣开始研究如何用java实现简单的文件断点续传.所谓的文件断点续传,我的理解是文件在传输过程中因为某些原因程序停止运行文件终止传输,下一次重新传输文件的时候还能从 ...