Android OpenGL ES 3.0 相机基础滤镜
创始人
2024-02-08 17:03:14
0

1.动态网格滤镜特效

1.1顶点着色器
#version 300 es
layout(location = 0) in vec3 attr_position;
layout(location = 1) in vec2 attr_uv;uniform mat4   uni_mat;
out vec2   v_texcoord;void main(void)
{v_texcoord = attr_uv;gl_Position = uni_mat* vec4(attr_position,1.0);
}

传入的是MVP矩阵和材质坐标

1.2片元着色器
#version 300 es
precision mediump float;
//precision highp float;uniform sampler2D uni_textureY;
uniform sampler2D uni_textureU;
uniform sampler2D uni_textureV;in vec2 v_texcoord;
out vec4 fragColor;uniform float u_offset;//偏移量
uniform vec2 texSize;//纹理尺寸vec4 YuvToRgb(vec2 uv){vec3 yuv;vec3 rgb;yuv.x = texture(uni_textureY, uv).r;yuv.y = texture(uni_textureU, uv).r - 0.5;yuv.z = texture(uni_textureV, uv).r - 0.5;rgb = mat3( 1,1,1, 0,-0.39465,2.03211,1.13983,-0.58060,0) * yuv;return vec4(rgb, 1);
}void main(void)
{vec2 imgTexCoord = v_texcoord * texSize;//将纹理坐标系转换为图片坐标系float sideLength = texSize.y / 6.0;//网格的边长float maxOffset = 0.15 * sideLength;//设置网格线宽度的最大值float x = mod(imgTexCoord.x, floor(sideLength));float y = mod(imgTexCoord.y, floor(sideLength));float offset = u_offset * maxOffset;if(offset <= x&& x <= sideLength - offset&& offset <= y&& y <= sideLength - offset){fragColor = YuvToRgb(v_texcoord);}else{fragColor = vec4(1.0, 1.0, 1.0, 1.0);}
}

YuvToRgb:这个用于将yuv的数据转成rgb渲染到屏幕上

动态网格主要是将纹理划分为多个网格,然后根据一个偏移量动态改变网格的宽度。

mod:返回 x – y * floor (x / y) ,即求模计算 %

floor:返回小于等于 x 的最大整数值

计算之前需要将纹理坐标系转换为图片坐标系,保证网格没有被拉伸。

2.分屏特效

2.1顶点着色器
#version 300 es
layout(location = 0) in vec3 attr_position;
layout(location = 1) in vec2 attr_uv;uniform mat4   uni_mat;
out vec2   v_texcoord;void main(void)
{v_texcoord = attr_uv;gl_Position = uni_mat* vec4(attr_position,1.0);
}

这块主要是顶点数据以及材质,所以跟上边的是一样的

2.2片元着色器
#version 300 es
precision mediump float;
//precision highp float;uniform sampler2D uni_textureY;
uniform sampler2D uni_textureU;
uniform sampler2D uni_textureV;in vec2 v_texcoord;
out vec4 fragColor;vec4 YuvToRgb(vec2 uv){vec3 yuv;vec3 rgb;yuv.x = texture(uni_textureY, uv).r;yuv.y = texture(uni_textureU, uv).r - 0.5;yuv.z = texture(uni_textureV, uv).r - 0.5;rgb = mat3( 1,1,1, 0,-0.39465,2.03211,1.13983,-0.58060,0) * yuv;return vec4(rgb, 1);
}void main(void)
{/*四分屏  效果正常*/vec2 newTexCoord = v_texcoord;if(newTexCoord.x < 0.5){newTexCoord.x = newTexCoord.x * 2.0;}else{newTexCoord.x = (newTexCoord.x - 0.5) * 2.0;}if(newTexCoord.y < 0.5){newTexCoord.y = newTexCoord.y * 2.0;}else{newTexCoord.y = (newTexCoord.y - 0.5) * 2.0;}fragColor = YuvToRgb(newTexCoord);
}

分屏滤镜的原理是在多个指定区域内对整个纹理进行下采样(缩小),从而实现整个图像在多个区域内多次显示。

3.缩放的圆特效

3.1顶点着色器
#version 300 es
layout(location = 0) in vec3 attr_position;
layout(location = 1) in vec2 attr_uv;uniform mat4   uni_mat;
out vec2   v_texcoord;void main(void)
{v_texcoord = attr_uv;gl_Position = uni_mat* vec4(attr_position,1.0);
}

这块主要是顶点数据以及材质,所以跟上边的是一样的

3.2片元着色器
#version 300 es
precision mediump float;
//precision highp float;uniform sampler2D uni_textureY;
uniform sampler2D uni_textureU;
uniform sampler2D uni_textureV;in vec2 v_texcoord;
out vec4 fragColor;uniform float u_offset;//偏移量
uniform vec2 texSize;//纹理尺寸vec4 YuvToRgb(vec2 uv){vec3 yuv;vec3 rgb;yuv.x = texture(uni_textureY, uv).r;yuv.y = texture(uni_textureU, uv).r - 0.5;yuv.z = texture(uni_textureV, uv).r - 0.5;rgb = mat3( 1,1,1, 0,-0.39465,2.03211,1.13983,-0.58060,0) * yuv;return vec4(rgb, 1);
}void main(void)
{vec2 imgTex = v_texcoord * texSize;//将纹理坐标系转换为图片坐标系float r = (u_offset + 0.2 ) * texSize.x;   //0.2 表示圆圈的默认大小if(distance(imgTex, vec2(texSize.x / 2.0, texSize.y / 2.0)) < r){fragColor = YuvToRgb(v_texcoord);}else{fragColor = vec4(1.0, 1.0, 1.0, 1.0);}}

4.渲染程序部分

void MSDynamicGridLine::UpdateYUVData(MSYUVData_Frame *yuvFrame) {if(yuvFrame == nullptr ){return;}if(m_nVideoH != yuvFrame->height || m_nVideoW != yuvFrame->width){if(nullptr != m_pBufYuv420p){free(m_pBufYuv420p);m_pBufYuv420p=nullptr;}}m_nVideoW =  yuvFrame->width;m_nVideoH = yuvFrame->height;m_yFrameLength = yuvFrame->luma.length;m_uFrameLength = yuvFrame->chromaB.length;m_vFrameLength = yuvFrame->chromaR.length;//申请内存存一帧yuv图像数据,其大小为分辨率的1.5倍int nLen = m_yFrameLength + m_uFrameLength +m_vFrameLength;if(nullptr == m_pBufYuv420p){m_pBufYuv420p = ( unsigned char*) malloc(nLen);}memcpy(m_pBufYuv420p,yuvFrame->luma.dataBuffer,m_yFrameLength);memcpy(m_pBufYuv420p+m_yFrameLength,yuvFrame->chromaB.dataBuffer,m_uFrameLength);memcpy(m_pBufYuv420p+m_yFrameLength +m_uFrameLength,yuvFrame->chromaR.dataBuffer,m_vFrameLength);m_bUpdateData =true;
}

这个方法用于更新YUV数据,由于数据是从相机过来的,跟opengl 不是一个线程,所以需要通过内存共享的方式进行拷贝。

void MSDynamicGridLine::Render(MSGLCamera *pCamera) {glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);if(m_bUpdateData == false){return;}static MSVertex triangleVert[] = {{-1, 1,  1,     0,0},{-1, -1,  1,    0,1},{1,  1,  1,     1,0},{1,  -1,  1,    1,1},};glm::mat4x4  objectMat = glm::mat4x4(1.0);glm::mat4x4  objectTransMat = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -5));objectMat = objectMat * objectTransMat;objectMat = pCamera->projectionMatrix * pCamera->viewMatrix * objectMat ;m_pOpenGLShader->Bind();m_pOpenGLShader->SetUniformValue("uni_mat",objectMat);m_pOpenGLShader->EnableAttributeArray("attr_position");m_pOpenGLShader->SetAttributeBuffer("attr_position",GL_FLOAT,triangleVert,3,sizeof(MSVertex));m_pOpenGLShader->EnableAttributeArray("attr_uv");m_pOpenGLShader->SetAttributeBuffer("attr_uv",GL_FLOAT,&triangleVert[0].u,2,sizeof(MSVertex));m_PeriodicFrameIndex++;float progress = GetFrameProgress();m_pOpenGLShader->SetUniformValue("u_offset",0.2f * progress);LOGD("m_nVideoW is %d,progress is %f",m_nVideoW,progress);if (m_nVideoW>0){m_pOpenGLShader->SetUniformValue("texSize",glm::vec2(m_nVideoW,m_nVideoH));}else{m_pOpenGLShader->SetUniformValue("texSize",glm::vec2(720,1280));}m_pOpenGLShader->SetUniformValue("uni_textureY",0);glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, m_textures[0]);glPixelStorei(GL_UNPACK_ALIGNMENT, 1);glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, m_nVideoW, m_nVideoH, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, m_pBufYuv420p);glPixelStorei(GL_UNPACK_ALIGNMENT, 4);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);m_pOpenGLShader->SetUniformValue("uni_textureU",1);glActiveTexture(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, m_textures[1]);glPixelStorei(GL_UNPACK_ALIGNMENT, 1);glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE,m_nVideoW/2, m_nVideoH/2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, (char*)(m_pBufYuv420p+m_yFrameLength));glPixelStorei(GL_UNPACK_ALIGNMENT, 4);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);m_pOpenGLShader->SetUniformValue("uni_textureV",2);glActiveTexture(GL_TEXTURE2);glBindTexture(GL_TEXTURE_2D, m_textures[2]);glPixelStorei(GL_UNPACK_ALIGNMENT, 1);glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, m_nVideoW/2, m_nVideoH/2, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, (char*)(m_pBufYuv420p+m_yFrameLength+m_uFrameLength));glPixelStorei(GL_UNPACK_ALIGNMENT, 4);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);glBindTexture(GL_TEXTURE_2D, 0);m_pOpenGLShader->DisableAttributeArray("attr_position");m_pOpenGLShader->DisableAttributeArray("attr_uv");m_pOpenGLShader->Release();return;
}
  • 将参数传递给shader:mvp矩阵、顶点、偏移量等
  • 生成三个纹理,用于承载yuv三个分量的数据
  • 然后进行绘制glDrawArrays

相关内容

热门资讯

“城阙辅三秦”,陕西为什么又被... “城阙辅三秦”,陕西为什么又被称为“三秦”?我有一次去陕西,听当地的人说是因为陕西可以分成三块地理位...
形容一个懒惰的人的语句 形容一个懒惰的人的语句我们班有四大天王,他们都是一些非常懒惰的人,成天不做作业,上课还要吵闹玩耍,成...
大侠传月扇怎样快速提高战力 大侠传月扇怎样快速提高战力亲爱的玩家,您好:您可以到我们的平台及论坛里面查看下相关的游戏攻略,希望能...
名侦探柯南剧场版15沉默的15... 名侦探柯南剧场版15沉默的15分钟 片尾曲叫什么?Don't Wanna LieDon't Wann...
早上打了一盆水,不知怎么撒了一... 早上打了一盆水,不知怎么撒了一地,请问今天运气好,因为今天会像盆水洒了,就有新的开始很正常,不用理会...
神舟天运p180c声卡驱动,急... 神舟天运p180c声卡驱动,急需新年的钟声里举起杯,任酒的醇香在空气中荡漾,任我对你的感激在杯里慢慢...
求小时候看过的动漫名字! 求小时候看过的动漫名字!《偷星九月天》 国产动漫 我记得女主角是偷东西的大盗 《惊爆校园》蛮...
魔兽世界30级兽人猎人去哪里能... 魔兽世界30级兽人猎人去哪里能抓到白熊说实话,看你做什么用的拉。现在BB的攻速统一了,所以带BB,稀...
梦三国马良的伤害基数是什么,是... 梦三国马良的伤害基数是什么,是伤害的倍数吗基数是什么W的技能基数5就是伤害 没一秒爆炸一次 每一次...
《十二生肖》是不是《成龙历险记... 《十二生肖》是不是《成龙历险记》得真人版不是《十二生肖》是《龙兄虎弟》的第三部
工程监理三控主要内容是什么 工程监理三控主要内容是什么三控:质量控制、进度控制、投资控制;两管:信息管理以及合同管理:一协调:组...
男人一生最重要的是什么?事业? 男人一生最重要的是什么?事业?男人一生最重要的是明白自己的责任所在,然后为之奋斗。是的,除非是高富帅...
有什么好看的 穿越小说 虐恋 ... 有什么好看的 穿越小说 虐恋 结局好的笑倾三国 美人劫 美人殇 绾青丝寻找前世之旅 超好看的小说嘿嘿
难以启齿的温柔是什么意思 难以启齿的温柔是什么意思不好意思说的温柔无法忘记的温柔。
分手了,还总是想起过往点点滴滴... 分手了,还总是想起过往点点滴滴,感觉像没有分手似的,做什么事情都没有心情赶紧走出阴影吧时间会冲淡一切...
桃花满天飞,缘分天注定,将喜结... 桃花满天飞,缘分天注定,将喜结良缘,相约白首的星座有哪些呢?相约白首的星座有天秤座,狮子座,金牛座,...
“长腿姐姐”王子文,不仅颜值高... “长腿姐姐”王子文,不仅颜值高演技也不差,你是从哪部剧开始喜欢她的?我是从欢乐颂的时候开始喜欢她的,...
说说那些先结婚后恋爱的人都是怎... 说说那些先结婚后恋爱的人都是怎样的心理吧?其实我觉得先结婚后恋爱的人,他们都是有一种比较着急,这一些...
100分求一首关于家庭有儿有女... 100分求一首关于家庭有儿有女[龙凤胎]的打油诗精品俊朗小伙真帅好洞伏哥,杰令美女送秋波。雨后彩虹淑...
一首很嗨的英文歌,开头是we ... 一首很嗨的英文歌,开头是we are hi hi ho, we are hi hi hey。歌名什么...