OpenGL ES for Android 绘制矩形和正方形
OpenGL ES for Android 绘制矩形和正方形
老孟Flutter
发布于 2020-09-11 16:05:00
发布于 2020-09-11 16:05:00
代码可运行
运行总次数：0
代码可运行
老
孟
一个
有态度
的程序员
前面的文章介绍了如何 绘制三角形，在OpenGL ES中没有直接绘制矩形的方式，通过绘制2个三角形的方式绘制矩形。
绘制矩形的顶点shader：
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}绘制矩形的片段shader：
precision mediump float;
void main()
{
gl_FragColor = vec4(1,0,0,1);
}创建program：
private fun createProgram() {
var vertexCode =
AssetsUtils.readAssetsTxt(
context = context,
filePath = "glsl/triangle_vertex.glsl"
)
var fragmentCode =
AssetsUtils.readAssetsTxt(
context = context,
filePath = "glsl/triangle_fragment.glsl"
)
mProgramHandle = GLTools.createAndLinkProgram(vertexCode, fragmentCode)
}triangle_vertex.glsl和triangle_vertex.glsl分别表示顶点shader和片段shader的文件，存放于assets/glsl目录下，readAssetsTxt为读取assets目录下文件的公用方法。
获取参数句柄：
vPositionLoc = GLES20.glGetAttribLocation(mProgramHandle, "vPosition")初始化顶点数据，代码如下：
var vertexBuffer = GLTools.array2Buffer(
floatArrayOf(
-0.5f, 0.5f, 0.0f,
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.5f, 0.5f, 0.0f
)
)初始化索引数据，代码如下：
var index = shortArrayOf(3,2,0,0, 1, 2)
val indexBuffer = GLTools.array2Buffer(index)绘制：
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
GLES20.glUseProgram(mProgramHandle)
vertexBuffer.position(0)
GLES20.glEnableVertexAttribArray(vPositionLoc)
GLES20.glVertexAttribPointer(vPositionLoc, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer)
GLES20.glDrawElements(GLES20.GL_TRIANGLES, index.size, GLES20.GL_UNSIGNED_SHORT,indexBuffer)效果图如下：
上面设置的顶点虽然都是0.5，但不一定是正方形，0.5表示x轴或者y轴的一半，如果绘制的窗口本身是矩形，那么绘制出来的也是矩形，如何绘制出正方形呢？
绘制正方形需要根据绘制窗口的宽高计算顶点数据，计算方式如下：
override fun onSurfaceChanged(p0: GL10?, width: Int, height: Int) {
GLES20.glViewport(0, 0, width, height)
var ratio = width / height.toFloat()
vertexBuffer = GLTools.array2Buffer(
floatArrayOf(
-0.5f, 0.5f * ratio, 0.0f,
-0.5f, -0.5f * ratio, 0.0f,
0.5f, -0.5f * ratio, 0.0f,
0.5f, 0.5f * ratio, 0.0f
)
)
}
onSurfaceChanged是Renderer实现的方法，这个方法有宽高参数，计算宽高比，保持x轴不变，计算y轴长度，效果如下：
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-01-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
