Framebuffer Get知識點(diǎn)
- 1条获、給定的模型坐標(biāo)可能只占有屏幕的一般或者一部分牌柄，可以通過平移縮放等操作讓他占滿全屏。
- 2歧蕉、渲染紋理圖像倒立灾部，可以通過旋轉(zhuǎn)操作使他正常。
- 3惯退、綁定framebuffer后記得清理緩沖區(qū)
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
glDisable(GL_DEPTH_TEST);
glClearColor(1.0f, 0, 0, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
- 4赌髓、創(chuàng)建framebuffer 步驟及代碼，注意renderbuffer和紋理的尺寸要對應(yīng)催跪，否則會采樣錯(cuò)誤锁蠕。
- (GLuint)createCustomFrameBuffer{
GLuint frameBuffer;
glGenFramebuffers(1, &frameBuffer);
glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);
//1、綁定顏色緩沖 用于離屏渲染
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
CGSize screenSize = [UIScreen mainScreen].bounds.size;
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, screenSize.width*[UIScreen mainScreen].scale, screenSize.height*[UIScreen mainScreen].scale, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);
self.frameTexture = texture;
//2懊蒸、綁定深度緩沖和模板緩沖（使用renderbuffer）注意renbuderbuffer和texture 傳遞內(nèi)存空間時(shí)荣倾，都乘了屏幕比例
GLuint renderbuffer;
glGenRenderbuffers(1, &renderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, renderbuffer);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, screenSize.width*[UIScreen mainScreen].scale, screenSize.height*[UIScreen mainScreen].scale);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, renderbuffer);
self.frameRenderBuffer = renderbuffer;
//GL_FRAMEBUFFER_COMPLETE
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
NSLog(@"frambuffer 出錯(cuò)---");
return 0;
}
glBindFramebuffer(GL_FRAMEBUFFER, renderbuffer);
return frameBuffer;
}
- 5、自定義framebuffer使用步驟：
a骑丸、創(chuàng)建framebuffer舌仍，并綁定自定義的framebuffer.
glUseProgram(self.grassProgram);
//glViewport(0, 0, screenSize.width*3, screenSize.height*3);
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
glDisable(GL_DEPTH_TEST);
glClearColor(1.0f, 0, 0, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
}
b妒貌、設(shè)置清屏
c、繪制物體 在frambuffer上glBindTexture(GL_TEXTURE_2D, self.frameTexture);
d1铸豁、后期處理及效果
- 邊檢測
void main(){
lowp float offset = 1.0 / 300.0;
lowp vec2 v[9];
v[0] = vec2(-offset,offset);
v[1] = vec2(0.0,offset);
v[2] = vec2( offset, offset);
v[3] = vec2(-offset, 0.0);
v[4] = vec2( 0.0, 0.0);
v[5] = vec2( offset, 0.0);
v[6] = vec2(-offset, -offset);
v[7] = vec2( 0.0, -offset);
v[8] = vec2( offset, -offset);
lowp float kernel[9] ;
//邊緣檢測
kernel[0] = 1.0 ;
kernel[1] = 1.0;
kernel[2] = 1.0 ;
kernel[3] = 1.0;
kernel[4] = -8.0;
kernel[5] = 1.0;
kernel[6] = 1.0 ;
kernel[7] = 1.0 ;
kernel[8] = 1.0 ;
lowp vec3 sampleTex[9];
for (int i=0 ; i < 9; i++){
sampleTex[i] = vec3(texture2D(boxTexture,outTextCoord.st+v[i]));
}
lowp vec3 col = vec3(0.0);
for(int i = 0; i < 9; I++)
col += sampleTex[i] * kernel[I];
gl_FragColor = vec4(col,1.0);
邊檢測效果：
Snip20200315_2.png
核效果：
void main(){
lowp float offset = 1.0 / 300.0;
lowp vec2 v[9];
v[0] = vec2(-offset,offset);
v[1] = vec2(0.0,offset);
v[2] = vec2( offset, offset);
v[3] = vec2(-offset, 0.0);
v[4] = vec2( 0.0, 0.0);
v[5] = vec2( offset, 0.0);
v[6] = vec2(-offset, -offset);
v[7] = vec2( 0.0, -offset);
v[8] = vec2( offset, -offset);
lowp float kernel[9] ;
//核定義數(shù)組
kernel[0] = -1.0;
kernel[1] = -1.0;
kernel[2] = -1.0;
kernel[3] = -1.0;
kernel[4] = 9.0;
kernel[5] = -1.0;
kernel[6] = -1.0;
kernel[7] = -1.0;
kernel[8] = -1.0;
lowp vec3 sampleTex[9];
for (int i=0 ; i < 9; i++){
sampleTex[i] = vec3(texture2D(boxTexture,outTextCoord.st+v[i]));
}
lowp vec3 col = vec3(0.0);
for(int i = 0; i < 9; I++)
col += sampleTex[i] * kernel[I];
gl_FragColor = vec4(col,1.0);
}
核效果：
Snip20200315_3.png
模糊效果：
void main(){
lowp float offset = 1.0 / 300.0;
lowp vec2 v[9];
v[0] = vec2(-offset,offset);
v[1] = vec2(0.0,offset);
v[2] = vec2( offset, offset);
v[3] = vec2(-offset, 0.0);
v[4] = vec2( 0.0, 0.0);
v[5] = vec2( offset, 0.0);
v[6] = vec2(-offset, -offset);
v[7] = vec2( 0.0, -offset);
v[8] = vec2( offset, -offset);
lowp float kernel[9] ;
//模糊效果定義數(shù)組
kernel[0] = 1.0 / 16.0;
kernel[1] = 2.0 / 16.0;
kernel[2] = 1.0 / 16.0;
kernel[3] = 2.0 / 16.0;
kernel[4] = 4.0 / 16.0;
kernel[5] = 2.0 / 16.0;
kernel[6] = 1.0 / 16.0;
kernel[7] = 2.0 / 16.0;
kernel[8] = 1.0 / 16.0;
lowp vec3 sampleTex[9];
for (int i=0 ; i < 9; i++){
sampleTex[i] = vec3(texture2D(boxTexture,outTextCoord.st+v[i]));
}
lowp vec3 col = vec3(0.0);
for(int i = 0; i < 9; I++)
col += sampleTex[i] * kernel[I];
gl_FragColor = vec4(col,1.0);
}
效果圖：
Snip20200315_4.png
灰度加權(quán)：
gl_FragColor = texture2D(boxTexture,outTextCoord);
gl_FragColor = vec4(gl_FragColor.r*0.2126+gl_FragColor.g*0.7152+gl_FragColor.b*0.0722,gl_FragColor.r*0.2126+gl_FragColor.g*0.7152+gl_FragColor.b*0.0722,gl_FragColor.r*0.2126+gl_FragColor.g*0.7152+gl_FragColor.b*0.0722,1.0);
灰度加權(quán)效果：
Snip20200315_5.png
圖像旋渦:
主要是在某個(gè)半徑范圍里灌曙，把當(dāng)前采樣點(diǎn)旋轉(zhuǎn)一定角度，旋轉(zhuǎn)以后當(dāng)前點(diǎn)的顏色就被旋轉(zhuǎn)后的點(diǎn)的顏色代替推姻，因此整個(gè)半徑范圍里會有旋轉(zhuǎn)的效果平匈。如果旋轉(zhuǎn)的時(shí)候旋轉(zhuǎn)角度隨著當(dāng)前點(diǎn)離半徑的距離遞減框沟，整個(gè)圖像就會出現(xiàn)漩渦效果藏古。這里使用的了拋物線遞減因子：(1.0-(r/Radius)*(r/Radius) )。
precision mediump float;
const float PI = 3.14159265;
uniform sampler2D textureMap;
const float uD = 80.0; //旋轉(zhuǎn)角度
const float uR = 0.5; //旋轉(zhuǎn)半徑
varying vec2 outText;
void main()
{
ivec2 ires = ivec2(512, 512);
float Res = float(ires.s);
vec2 st = outText;
float Radius = Res * uR;
vec2 xy = Res * st;
vec2 dxy = xy - vec2(Res/2., Res/2.);
float r = length(dxy);
float beta = atan(dxy.y, dxy.x) + radians(uD) * 2.0 * (-(r/Radius)*(r/Radius) + 1.0);//(1.0 - r/Radius);
vec2 xy1 = xy;
if(r<=Radius)
{
xy1 = Res/2. + r*vec2(cos(beta), sin(beta));
}
st = xy1/Res;
vec3 irgb = texture2D(textureMap, st).rgb;
gl_FragColor = vec4( irgb, 1.0 );
}
Snip20200705_39.png
馬賽克效果
馬賽克效果就是把圖片的一個(gè)相當(dāng)大小的區(qū)域用同一個(gè)點(diǎn)的顏色來表示.可以認(rèn)為是大規(guī)模的降低圖像的分辨率,而讓圖像的一些細(xì)節(jié)隱藏起來忍燥。
precision mediump float;
varying vec2 outText;
uniform sampler2D textureMap;
const vec2 TexSize = vec2(400.0, 400.0);
const vec2 mosaicSize = vec2(8.0, 8.0);
void main()
{
vec2 intXY = vec2(outText.x*TexSize.x, outText.y*TexSize.y);
vec2 XYMosaic = vec2(floor(intXY.x/mosaicSize.x)*mosaicSize.x, floor(intXY.y/mosaicSize.y)*mosaicSize.y);
vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
vec4 color = texture2D(textureMap, UVMosaic);
gl_FragColor = color;
}
Snip20200705_40.png
浮雕效果
浮雕效果是指圖像的前景前向凸出背景拧晕。實(shí)現(xiàn)思路：把圖象的一個(gè)象素和左上方的象素進(jìn)行求差運(yùn)算，并加上一個(gè)灰度梅垄。這個(gè)灰度就是表示背景顏色厂捞。這里我們設(shè)置這個(gè)插值為128 (圖象RGB的值是0-255)。同時(shí),我們還應(yīng)該把這兩個(gè)顏色的差值轉(zhuǎn)換為亮度信息队丝，避免浮雕圖像出現(xiàn)彩色像素靡馁。
precision mediump float;
varying vec2 outText;
uniform sampler2D textureMap;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);
const vec2 TexSize = vec2(100.0, 100.0);
const vec4 bkColor = vec4(0.5, 0.5, 0.5, 1.0);
void main()
{
vec2 tex = outText;
vec2 upLeftUV = vec2(tex.x-1.0/TexSize.x, tex.y-1.0/TexSize.y);
vec4 curColor = texture2D(textureMap, outText);
vec4 upLeftColor = texture2D(textureMap, upLeftUV);
vec4 delColor = curColor - upLeftColor;
float luminance = dot(delColor.rgb, W);
gl_FragColor = vec4(vec3(luminance), 0.0) + bkColor;
}
Snip20200705_41.png
d2、綁定默認(rèn)緩沖區(qū)机久，渲染frambuffer中的紋理到默認(rèn)緩沖區(qū)臭墨，至屏幕layer上。
