圆角矩形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),实现一些圆形或者圆角矩形是很方便的, < ...
随机推荐
- Python高级特性:迭代
迭代的目的是实现遍历出一个可迭代对象的元素,即for循环 基本语法 : for ... in ... 首先只有可迭代对象才可以迭代,判断一个对象是不是可以迭代的方法如下: >>> f ...
- git 入门教程之1分钟快速了解 git
git 入门教程 git 是分布式版本控制系统,是文本文档管理的利器,是帮助你管理文件动态的好帮手. 如果你曾经手动管理过文档,一定有这样的经历,比如你正在编辑文档,想删除某段落,又担心不久后可能会恢 ...
- (后端)根据查询语句修改的update语句
UPDATE A SET a.name = m.name FROM item A INNER JOIN table M ON A.id=M.id WHERE a.xx <> M.xx
- js 时间转字符串,转成yyyy-MM-dd HH:mm:SS格式
// 时间转字符串,转成yyyy-MM-dd HH:mm:SS格式 function dateToStr(datetime){ var dateTime = new Date(datetime); v ...
- MySQL 5.7忘记root密码如何修改?
一直以来,MySQL的应用和学习环境都是MySQL 5.6和之前的版本,也没有去关注新版本MySQL 5.7的变化和新特性.今天帮人处理忘记root密码的时时候,发现以前的方法不奏效了.具体情况如下所 ...
- 深入理解C语言内存管理
之前在学Java的时候对于Java虚拟机中的内存分布有一定的了解,但是最近在看一些C,发现居然自己对于C语言的内存分配了解的太少. 问题不能拖,我这就来学习一下吧,争取一次搞定. 在任何程序设计环境及 ...
- IE6浏览器无法打开QQ邮箱
原因:未启用TLS1.0 解决方法: 打开IE浏览器,依次打开 [Internet]→[高级],在 设置 选项卡中,勾选[使用TLS1.0],然后点击[确定]保存修改,重启浏览器即可.
- windowsserver2019系统下载
windowsserver2019系统分为标准版和数据中心版,两个版本和windows2012,2016一样没有64位系统,点击下载windowsserver2019系统.
- 【算法】LeetCode算法题-Count And Say
这是悦乐书的第153次更新,第155篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第12题(顺位题号是38).count-and-say序列是整数序列,前五个术语如下: ...
- March 07th, 2018 Week 10th Wednesday
Better later than never. 亡羊补牢,时犹未晚. Time and again all of us are told to complete the tasks assigned ...