圆角矩形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),实现一些圆形或者圆角矩形是很方便的, < ...
随机推荐
- Android 打包混淆
将项目改成Module //项目build.gradle的applicationId注释掉 修改apply plugin: 'com.android.library' 打包混淆脚本 //在项目的bui ...
- Velodyne VLP-16 gmapping 建图
1. 测试环境 Ubuntu 16.04 x64.ROS Kinetic.Velodyne VLP-16.RoboWare Studio 2. 安装 ROS 功能包 sudo apt-get inst ...
- MSSQL-sql server-视图简介
转自:http://www.maomao365.com/?p=4511 一.视图简介 视图在MSSQL中是一张虚拟表. 视图的数据由sql语句定义生成,视图中指定新生成数据的列名称和数据格式,视图中的 ...
- sql-server的添加数据库文件(日志数据)以及收缩数据库文件(日志数据)
环境: SSMS sql-server2016 一.为数据库添加数据文件 添加日志数据文件 以下是添加数据文件和日志文件的代码 ALTER DATABASE [joinbest] ADD FILE ( ...
- SQLServer数据表用法
数据表定义 数据表(或称表)是数据库最重要的组成部分之一,数据库中以表为组织单位存储数据,数据库只是一个框架,数据表才是其实质内容.数据库管理工具中可以显示数据库中的所有数据表,数据表是数据库中一个非 ...
- 【技术与商业案例解读笔记】095:Google大数据三驾马车笔记
1.谷歌三驾马车地位 [关键词]开启时代,指明方向 聊起大数据,我们通常言必称谷歌,谷歌有“三驾马车”:谷歌文件系统(GFS).MapReduce和BigTable.谷歌的“三驾马车”开启了大数据时 ...
- 为什么react的组件要super(props)
https://segmentfault.com/q/1010000008340434
- Gulp的简单使用
我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...
- ES5-ES6-ES7_class类
传统创建对象模板的方式 JavaScript 语言中,生成实例对象的传统方法是通过构造函数 //JavaScript 语言中,生成实例对象的传统方法是通过构造函数 function Point(x, ...
- C#中Request.ServerVariables详细说明及代理
Request.ServerVariables("Url") 返回服务器地址 Request.ServerVariables("Path_Info") 客户端提 ...