在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形。

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的更多相关文章

  1. 解读Unity中的CG编写Shader系列四(unity中的圆角矩形shader)

    转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...

  2. 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形 例3:圆角矩形Shader 好吧我承认在做这个样例的时候走了不少弯路,因 ...

  3. [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...

  4. unity 切圆角矩形 --shader编程

    先上个效果图 制作思路 如上图我们要渲染的就是上图带颜色的部分 步骤: 先获取黄色和蓝绿部分 例如以下图 算法 |U|<(0.5-r)或|V|<(0.5-r) 注意的是模型贴图最大值是1. ...

  5. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  6. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  7. SimpleRoundedImage-不使用mask实现圆角矩形图片

    1.一张图片是如何显示在屏幕上的 一张图片渲染到unity界面中的大致流程. 2.我们要做什么 我们要做的就是在CPU中将图片的矩形顶点数据修改成圆角矩形的顶点信息,之后Unity会将修改后的顶点数据 ...

  8. 用贝赛尔曲线把图片, 按钮, label 绘成圆 或圆角矩形

    //创建圆形遮罩,把用户头像变成圆形 /* *CGPointMake(35, 35)  是绘图的中心点,  如果想把控件居中绘圆, 一般用控件的中心点,   radius 是圆半径   startAn ...

  9. RoundedImageView,实现圆形、圆角矩形的注意事项

    RoundedImageView是gitHub上面的一个开源组件(https://github.com/vinc3m1/RoundedImageView),实现一些圆形或者圆角矩形是很方便的, < ...

随机推荐

  1. Retrieve OpenGL Context from Qt 5.5 on OSX

    In the latest Qt 5.5, the QOpenGLWidget is much better and has less bugs than the QGLWidget, but it ...

  2. Android性能优化问题总结

    性能优化这块,分为UI性能优化.内存优化.数据库优化.网络优化.耗电优化等等.可以从1.如何发现问题,2.怎么解决问题,3.解决效果对比,这几个方面去描述.举个简单例子——UI优化,可以从 UI出现什 ...

  3. 【Spring源码解读】bean标签中的属性(二)你可能还不够了解的 abstract 属性和 parent 属性

    abstract 属性说明 abstract 在java的语义里是代表抽象的意思,用来说明被修饰的类是抽象类.在Spring中bean标签里的 abstract 的含义其实也差不多,表示当前bean是 ...

  4. (后端)SpringBoot中Mybatis打印sql(转)

    原文地址:https://www.cnblogs.com/expiator/p/8664977.html 如果使用的是application.properties文件,加入如下配置: logging. ...

  5. Apache 配置方法(虚拟目录、域名、虚拟主机等)

    基本配置 Define SRVROOT "C:/Apache24"     #宏定义一个主站点目录常量ServerRoot "${SRVROOT}"       ...

  6. weblogic的web.xml报错----Malformed UTF-8 char -- is an XML encoding declaration missing

    weblogic报错: Malformed UTF-8 char -- is an XML encoding declaration missing 把编码修改成utf8,上传到weblogic就报这 ...

  7. 省市区三级联动(附j全国省市区json文件)

    效果如图所示: 首先提供全国所有省份的JS文件 下载地址:https://files.cnblogs.com/files/likui-bookHouse/address.rar 打开js内容如下: h ...

  8. jQuery -- 光阴似箭(四):jQuery 遍历

    jQuery -- 知识点回顾篇(四):jQuery 遍历 通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称 ...

  9. SD寄售-寄售补充

    SD寄售-寄售补充 概述: 寄售就是企业将货物寄放在客户处,或者在自己的仓库为客户保留库存,货物所有权归公司,当客户将库存消耗掉,才算公司的销售.公司才开票给客户. SAP SD寄售涉及4个业务过程, ...

  10. Word中的通配符随意组合进行批量替换或删除某些内容

    长文档需要批量修改或删除某些内容的时候,我们可以利用Word中的通配符来搞定这一切,当然,前提是你必须会使用它.通配符的功能非常强大,能够随意组合替换或删除我们定义的规则内容,下面易老师就分享一些关于 ...