OpenGL ES 的问题，为何图像仅显示在手机屏幕右上第一象限？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 3471 days ago, the information mentioned may be changed or developed.

大家好，我是安卓直播端开源项目 yasea 作者，目前可以通过 OpenGL ES 2.0 将来自摄像头的图像进行滤镜渲染，基本功能已经实现： https://github.com/begeekmyfriend/yasea/tree/gpuimage

然而是对于磨皮，原来使用 glVertexAttribPointer 直接传递顶点数组的效率太差，导致输出帧率下降。幸好 GLES 2.0 支持 VBO ，我将代码改进如下，基本满足要求： https://github.com/begeekmyfriend/yasea/tree/gpuimage-vbo

问题是 VBO 替代后，渲染图像仅出现在屏幕右上第一象限中，大小为全屏四分之一。百思不得其解，我并没有改变顶点数组和纹理数组，也没有改变 glViewport 。请大家帮忙。

P.S.出于兼容性的原因，目前不考虑 GLES 3.0 ，而且 2.0 里的 VBO 基本满足性能问题。

Supplement 1 Oct 25, 2016

res/raw/default_vertex.glsl

attribute vec4 position; attribute vec4 inputTextureCoordinate; varying vec2 textureCoordinate; uniform mat4 textureTransform; void main() { textureCoordinate = (textureTransform * inputTextureCoordinate).xy; gl_Position = position; }

渲染代码在此

vbo

数组

gles

OpenGL

7 replies 2016-10-25 19:59:20 +08:00

jukka

Oct 25, 2016

- -# 你直接贴代码上来吧，还要去你的仓库里翻代码。

你问题提供的信息太少了啊。
vertex shader 怎么写的？
你的顶点数据的坐标系是怎么设置的？(-1, 1) normalized 的么？

begeekmyfriend

Oct 25, 2016

@jukka 附言里添加了信息，还需要啥尽管说

jukka

Oct 25, 2016

@begeekmyfriend 运行的截图可以贴么，

大致看了下代码，
mGLCubeBuffer = ByteBuffer.allocateDirect(TextureRotationUtil.CUBE.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
mGLCubeBuffer.put(TextureRotationUtil.CUBE).position(0);

可以先检查一下这些数值。 mGLCubeBuffer

begeekmyfriend

Oct 25, 2016

@jukka 数据源 Cube 应该没有错，因为没有改动过，就是说

GLES20.glVertexAttribPointer(mGLAttribPosition, 2, GLES20.GL_FLOAT, false, 4 * 2, mGLCubeBuffer)是全屏的。
GLES20.glVertexAttribPointer(mGLAttribPosition, 2, GLES20.GL_FLOAT, false, 4 * 2, 0)就变成右上角 1/4 了。

所以我想看看 default_vertex.glsl 的数据有何区别，比如用 vec4 还是 vec2 （ vec4 是否在 VBO 里面哪些分量变成 0 了导致全屏左下角对应到屏幕中心去了）。可惜无法调试，只能一步一步试了。

另外 V2EX 上我也不知道怎么上图。

jukka

Oct 25, 2016

稍微仔细看了一下你的代码。错误应该是在在这里。

GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, mGLCubeBuffers[0]);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, mGLTextureBuffers[0]);

你可以把 TextureBuffers 的数据改成(-1, -1) 你的画面位置应该就对了。
或者简单的条换一下这两个函数的调用顺序也可以。

OpenGL Client 接口是一个状态机。
OpenGL Client 接口是一个状态机。
OpenGL Client 接口是一个状态机。

在 issue 一个 drawcall 之前只能 bind 一个 buffer 。
你这样写相当于只有一个 buffer 被 bind 了。

以下是修改建议，

在 OpenGL ES 上，最好使用 packed 的 vertex 。
可以参考以下文档。
https://developer.apple.com/library/content/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/TechniquesforWorkingwithVertexData/TechniquesforWorkingwithVertexData.html#//apple_ref/doc/uid/TP40008793-CH107-SW1

也就是说只使用一个 vbo ，而不是给每一个 buffer 都建立一个 vbo 。

举个例子，

struct vertex {
GLfloat pos[2];
GLfloat uv[2];
}

glVertexAttribPointer(loc_pos, 2, GL_FLOAT, GL_FALSE, sizeof(struct vertex), offsetof(struct vertex, pos)); glVertexAttribPointer(loc_uv, 2, GL_FLOAT, GL_FALSE, sizeof(struct vertex), offsetof(struct vertex, uv));

offsetof(struct vertex, uv) -> 的值应该是 8

begeekmyfriend

Oct 25, 2016

果然你说的对！我查了一下《 OpenGL ES 3.0 编程指南》，它的写法是

```java
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, mGLCubeBuffers[0]);
GLES20.glEnableVertexAttribArray(mGLAttribPosition);
GLES20.glVertexAttribPointer(mGLAttribPosition, 4, GLES20.GL_FLOAT, false, 4 * 4, 0);

GLES20.lBindBuffer(GLES20.GL_ARRAY_BUFFER, mGLTextureBuffers[0]);
GLES20.glEnableVertexAttribArray(mGLAttribTextureCoordinate);
GLES20.glVertexAttribPointer(mGLAttribTextureCoordinate, 4, GLES20.GL_FLOAT, false, 4 * 4, 0);
```

也就是说，我错误的写法相当于只有一个 buffer 被 bind 了。

另外，除了你所说的 packed 顶点属性，还有一种是每个属性一个 VBO 的写法。文中这样解释：

每个顶点属性可以顺序方式读取，最有可能造成高效内存访问模式。缺点在于如果顶点属性的一个自己需要修改，将造成缓冲区跨距更新。当顶点属性缓冲区为 VBO 形式，需要重新加载整个缓冲区，可以将动态的顶点属性保存在单独缓冲区避免这种效率低下的情况。

当然我的顶点属性是静态的，可以考虑用你的方式修改。

不管怎样，原因找到了，非常感谢您！

jukka

Oct 25, 2016 via iPhone

:) 这个 issue 可以关闭了（手动滑稽