『openframeworks』shader制作三角形马赛克效果
来源:互联网 发布:小米4为何没有4g网络 编辑:程序博客网 时间:2024/05/01 21:46
不久前做了六边形马赛克的效果,很有意思,乘热打铁,弄了个三角形马赛克。
首先肯定是等边三角形,这样才能真正的无缝拼接。观察发现,三角形可以拼接成之前做个的六边形。
如下图:
我们可以发现6个三角形正好组成了一个六边形。
我们要判断一个点属于哪个三角形,必须先判断它属于那个六边形,这个在之前的博文中已经提到了。
OK,我们知道在那个六边形了,也就是我们知道了上面O点的坐标。我们开始想怎么判断它在哪个三角形。
嗯,我想大家都能想到,根据点与中心点O的夹角判断在那个三角形,调用atan就OK了:
float a = atan((x-O.x)/(y-O.y));//夹角然后根据各自的角度就能判断是属于哪一个三角形的了,这里注意一下atan算出的范围是-180至180度,对应的数值是-PI至PI。
然后算出6个三角形的中心点坐标,属于哪一个三角形就去哪一个坐标点的像素值。
碎片着色器frag shader如下:
#version 400#extension GL_ARB_texture_rectangle : enableuniform float len;uniform sampler2DRect colorTex0;void main (void){float TR = 0.866025f;float PI6 = 0.523599f; //PI/6float x = gl_TexCoord[0].x;float y = gl_TexCoord[0].y;int wx = int(x/1.5f/len);int wy = int(y/TR/len);vec2 v1, v2, vn;if(wx/2 * 2 == wx) {if(wy/2 * 2 == wy) {v1 = vec2(len*1.5f*wx, len*TR*wy);v2 = vec2(len*1.5f*(wx+1), len*TR*(wy+1));} else {v1 = vec2(len*1.5f*wx, len*TR*(wy+1));v2 = vec2(len*1.5f*(wx+1), len*TR*wy);}} else {if(wy/2 * 2 == wy) {v1 = vec2(len*1.5f*wx, len*TR*(wy+1));v2 = vec2(len*1.5f*(wx+1), len*TR*wy);} else {v1 = vec2(len*1.5f*wx, len*TR*wy);v2 = vec2(len*1.5f*(wx+1), len*TR*(wy+1));}}float s1 = sqrt( pow(v1.x-x, 2) + pow(v1.y-y, 2) );float s2 = sqrt( pow(v2.x-x, 2) + pow(v2.y-y, 2) );if(s1 < s2)vn = v1;elsevn = v2;vec4mid = texture2DRect(colorTex0, vn);float a = atan((x-vn.x)/(y-vn.y));//夹角vec2 area1 = vec2(vn.x, vn.y-len/TR/2);vec2 area2 = vec2(vn.x+len/2, vn.y-len/TR/4);vec2 area3 = vec2(vn.x+len/2, vn.y+len/TR/4);vec2 area4 = vec2(vn.x, vn.y+len/TR/2);vec2 area5 = vec2(vn.x-len/2, vn.y+len/TR/4);vec2 area6 = vec2(vn.x-len/2, vn.y-len/TR/4);if(a>=PI6 && a<PI6*3)vn = area1;else if(a>=PI6*3 && a<PI6*5)vn = area2;else if((a>=PI6*5 && a<=PI6*6) || (a<-PI6*5 && a>-PI6*6))vn = area3;else if(a<-PI6*3 && a>=-PI6*5)vn = area4;else if(a<=-PI6 && a>-PI6*3)vn = area5;else if(a>-PI6 && a<PI6)vn = area6;vec4 color = texture2DRect(colorTex0, vn);gl_FragColor = color;}其中len为传入到shader中六边形的单边长,也是三角形的单边长。TR其实是√3/2。而PI6明显就是PI/6,对应的是30度。
其实核心思想就是判断属于哪个三角形。
效果如下:
同样的,实时改变len的值,图就能动起来:
依旧很炫,^_^.
openframeworks中主要代码:
#include "testApp.h"//--------------------------------------------------------------void testApp::setup(){img.loadImage("bg.jpg");fbo.allocate(640, 480);shader.load("triangle.vert", "triangle.frag");len = 100.0f;bAdd = false;}//--------------------------------------------------------------void testApp::update(){if(len < 10.0f)bAdd = true;if(len > 100.0f)bAdd = false;len += bAdd ? (0.05f):(-0.05f);}//--------------------------------------------------------------void testApp::draw(){ofEnableAlphaBlending();fbo.begin();img.draw(0, 0, 640, 480);fbo.end();shader.begin();shader.setUniform1f("len", len);shader.setUniformTexture("colorTex0", fbo.getTextureReference(), 0);fbo.draw(0, 0, 640, 480);shader.end();ofDisableAlphaBlending();}
源码地址
- 『openframeworks』shader制作三角形马赛克效果
- 『openframeworks』shader制作六边形马赛克效果
- 『openframeworks』动物眼中的你-shader初试
- openframeworks制作测试物理效果类似黏黏世界
- 『openframeworks』天气预报查询
- 马赛克效果
- 教你如何制作漂亮的马赛克效果
- 三角形马赛克简单教程
- 『openframeworks』利用vlc播放视频文件
- 『openframeworks』批量修改文件名
- cocos shader 之 马赛克滤镜
- openframeworks 使用glslsandbox里面的shader
- PS:马赛克效果
- 图片马赛克效果
- Photoshop马赛克效果
- 马赛克滤镜效果
- Android马赛克效果MosaicView
- 【openFrameworks】
- deb 安装时提示有系统DS_Store 文件 ,删除
- java对象转换成为json数据
- 在ubuntu12.04中安装中文输入法fcitx
- LUA脚本
- Objective-C中使用@try处理异常
- 『openframeworks』shader制作三角形马赛克效果
- 一个奇葩的存储过程
- myeclipse debug模式提示 source not found
- OBJC依赖库管理利器cocoapods 安装及使用详细图解
- 户曝iPhone 5S指纹识别灵敏度大幅下降
- 言不出
- win7无法自由调整cmd窗口大小的解决办法
- Linux中cp和scp命令的使用方法
- tar:invalid compressed data--format violated