目录
效果展示
相关文章
OpenGL系列之十六:实现大眼特效
实现步骤
1.下载基础代码
这里使用的代码是以OpenGL系列之十六:实现大眼特效这篇文章为基础的
2.添加识别库
这里由于依赖库中使用的CameraX版本与我的有冲突所以我将其剔除了
implementation ('com.google.mediapipe:solution-core:latest.release'){
exclude group: 'androidx.camera', module: 'camera-camera2'
exclude group: 'androidx.camera', module: 'camera-core'
}
implementation ('com.google.mediapipe:hands:latest.release'){
exclude group: 'androidx.camera', module: 'camera-camera2'
exclude group: 'androidx.camera', module: 'camera-core'
}
3.修改GLHelper
我们修改getTextureData方法,返回texture中的Buffer数据,用于后续在render中生成Bitmap
fun getTextureData(matrix: FloatArray):GLData{
// camTextureId->fboTexureId
// camTextureId->fboTexureId
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fbo[0])
GLES20.glViewport(0, 0, textureWidth, textureHeight)
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
GLES20.glUseProgram(progCam2FBO)
GLES20.glVertexAttribPointer(
vcCam2FBO,
2,
GLES20.GL_FLOAT,
false,
4 * 2,
vertexCoordsBuffer
)
textureCoordsBuffer!!.clear()
textureCoordsBuffer?.put(transformTextureCoordinates(textureCoords, matrix))
textureCoordsBuffer!!.position(0)
GLES20.glVertexAttribPointer(
tcCam2FBO,
2,
GLES20.GL_FLOAT,
false,
4 * 2,
textureCoordsBuffer
)
GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, camTextureId[0])
GLES20.glUniform1i(GLES20.glGetUniformLocation(progCam2FBO, "sTexture"), 0)
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4)
GLES20.glFlush()
var targetTexureId = fboTexureId[0]
//========================Kotlin代码生成图像数据============================
val pixelBuffer = ByteBuffer.allocate(textureWidth * textureHeight * 4)
GLES20.glReadPixels(
0,
0,
textureWidth,
textureHeight,
GLES20.GL_RGBA,
GLES20.GL_UNSIGNED_BYTE,
pixelBuffer
)
targetTexureId = drawTexureId[0]
return GLData(targetTexureId,pixelBuffer)
}
data class GLData(var textureId:Int,var byteBuffer: ByteBuffer?)
4.进行识别
我们识别使用的是依赖库中的Hands
private val hands: Hands
我们需要实例化Hands并且添加识别回调,这里的识别回调中的paintFlag是用于通知OpenGL绘制
constructor(cameraView: CameraView){
this.cameraView = cameraView
glHelper = GLHelper()
hands = Hands(
cameraView.context,
HandsOptions.builder()
.setStaticImageMode(true)
.setMaxNumHands(2)
.setRunOnGpu(true)
.build()
)
hands.setResultListener { handsResult: HandsResult? ->
Log.e("结果","${handsResult?.multiHandLandmarks()?.size}")
if(handsResult?.multiHandLandmarks()?.size!! > 0){
hasHand = 1
arrayLandMarks = handsResult.multiHandLandmarks()?.get(0)?.landmarkOrBuilderList?.toTypedArray()
Log.e("结果","${arrayLandMarks?.size}")
}
paintFlag = true
}
hands.setErrorListener { message: String, e: RuntimeException? ->
Log.e(
"测试",
"MediaPipe Hands error:$message"
)
}
val lifecycleOwner = cameraView.context as LifecycleOwner
cameraHelper = CameraHelper(lifecycleOwner,this)
}
我们在onDrawFrame方法中根据texture获取到图像数据并且转成Bitmap传给Hands用于识别,然后添加一个循环用于检测是否已经识别完毕,如果识别完毕了就将识别的数据传给Native层进行绘制
override fun onDrawFrame(p0: GL10?) {
startTime = System.currentTimeMillis()
paintFlag = false
hasHand = 0
GLES30.glClearColor(0.0f, 0.0f, 0.0f, 1.0f)
GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT or GLES30.GL_DEPTH_BUFFER_BIT)
//更新画面
surfaceTexture.updateTexImage()
val matrix = FloatArray(16)
surfaceTexture.getTransformMatrix(matrix)
glData = glHelper.getTextureData(matrix)
var ARGB8888ImageBitmap =
Bitmap.createBitmap(glHelper.textureWidth, glHelper.textureHeight, Bitmap.Config.ARGB_8888)
ARGB8888ImageBitmap.copyPixelsFromBuffer(glData?.byteBuffer)
//为了缩小Bitmap加快识别速度
val scaleWidth = (glHelper.textureWidth.toFloat() * 0.05f).toInt()
val scaleHeight = (glHelper.textureHeight.toFloat() * 0.05f).toInt()
ARGB8888ImageBitmap = Bitmap.createScaledBitmap(ARGB8888ImageBitmap,scaleWidth,scaleHeight,false)
hands.send(ARGB8888ImageBitmap)
ARGB8888ImageBitmap.recycle()
try {
while (!paintFlag){
Thread.sleep(6)
}
Log.e("渲染","渲染")
ndkPaintGL(glData!!.textureId,hasHand,arrayLandMarks)
}catch (e:Exception){}finally {
val endTime = System.currentTimeMillis()
val offTime = endTime - startTime
val fps = 1000 / offTime
LogUtils.eTag("FPS",fps)
requestRender()
}
}
5.绘制手势
识别的手势一共有21个点,每个点有x、y、z三个值,这里我们只需要取x、y即可,另外由于返回的坐标系是0~1之间的,所以需要自己算出真实的位置,整体如下所示
void* pixelBuffer = NULL;
extern "C"
JNIEXPORT void JNICALL
Java_com_itfitness_openglcheckhand_render_GLRender_ndkPaintGL(JNIEnv *env, jobject thiz,
jint texture_id,jint hasHand,jobjectArray landmarks) {
int width = ccRender->textureWidth;
int height = ccRender->textureHeight;
if(pixelBuffer == NULL){
pixelBuffer = malloc(width * height * 4);
} else{
memset(pixelBuffer,0,width * height * 4);
}
glReadPixels(
0,
0,
width,
height,
GL_RGBA,
GL_UNSIGNED_BYTE,
pixelBuffer
);
cv::Mat imageSrc(height, width, CV_8UC4, pixelBuffer);
cv::cvtColor(imageSrc,imageSrc,cv::COLOR_RGBA2BGR);
if(hasHand == 1){
//定义三角型的点
CCFloat3 vertexPoints[21];
for(int i = 0 ; i < 21 ; i++){
jobject landMark = env->GetObjectArrayElement(landmarks,i);
jclass landMarkClazz = env->GetObjectClass(landMark);
jmethodID getXMethod = env->GetMethodID(landMarkClazz,"getX", "()F");
jmethodID getYMethod = env->GetMethodID(landMarkClazz,"getY", "()F");
jmethodID getZMethod = env->GetMethodID(landMarkClazz,"getZ", "()F");
float x = env->CallFloatMethod(landMark,getXMethod);
float y = env->CallFloatMethod(landMark,getYMethod);
float z = env->CallFloatMethod(landMark,getZMethod);
float centerX = x * imageSrc.cols;
float centerY = y * imageSrc.rows;
vertexPoints[i].x = centerX;
vertexPoints[i].y = centerY;
vertexPoints[i].z = 1.0;
cv::circle(imageSrc,cv::Point(centerX,centerY),20,cv::Scalar(0,255,0),cv::FILLED);
LOGE("点%d->%f,%f",i,centerX,centerY);
LOGE("点%d->%f,%f",i,x,y);
LOGE("点%d->%d,%d",i,imageSrc.cols,imageSrc.rows);
}
//cv::line(imageSrc,cv::Point(vertexPoints[0].x,vertexPoints[0].y),cv::Point(vertexPoints[1].x,vertexPoints[1].y),cv::Scalar(0,255,0),3);
cv::putText(imageSrc,"itfitness",
cv::Point(vertexPoints[8].x,vertexPoints[8].y),
cv::FONT_HERSHEY_SIMPLEX,2,cv::Scalar(0,0,255),5);
}
cv::cvtColor(imageSrc,imageSrc,cv::COLOR_BGR2RGBA);
glActiveTexture(texture_id);
glBindTexture(GL_TEXTURE_2D,texture_id);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, imageSrc.cols, imageSrc.rows, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageSrc.data);
glBindFramebuffer(GL_FRAMEBUFFER, 0);
ccRender->paintGL(texture_id);
}
案例源码
https://gitee.com/itfitness/opengl-check-hand