目录
- 前言：
- OpenGL是什么：
- 如何使用：
- 1.设置OpenGL版本
- 2.创建GLSurfaceView实例
- 3.实现Renderer接口
- 4.绘制三角形
- 定义图形
- 绘制图形
- 5.投影和相机视图
- 6.增加动画
- 7.项目地址：
- 总结：
前言：
前段时间，闲来无事，打算研究一下自定义camera开发，发现用到了OpenGL,所以打算自学一下，顺便写几篇文章记录一下。
OpenGL是什么：
学习OpenGl先了解一下，它是一个什么东西？
OpenGL 是一种跨平台的图形 API，用于为 3D 图形处理硬件指定标准的软件接口。
这是官方给它的一个定义，当然我们从事Android开发，有专门的库即OpenGL ES，它遵循OpenGL规范，适用于嵌入式设备。
如何使用：
在了解了它是什么后，我们再来了解一下如何使用。OpenGL ES提供了两个类让我们使用，GLSurfaceView 和 GLSurfaceView.Renderer。
GLSurfaceView
继承自SurfaceView,并增加了 Renderer ，他的作用是给OpenGl显示渲染使用的。
GLSurfaceView.Renderer
Renderer主要是提供了绘制图形所需要的方法：
onSurfaceCreated()：系统会在创建 GLSurfaceView
时调用一次此方法。使用此方法可执行仅需发生一次的操作，例如设置 OpenGL 环境参数或初始化 OpenGL 图形对象。
onDrawFrame()：系统会在每次重新绘制 GLSurfaceView
时调用此方法。请将此方法作为绘制（和重新绘制）图形对象的主要执行点。
onSurfaceChanged()：系统会在GLSurfaceView 几何图形发生变化（包括 GLSurfaceView大小发生变化或设备屏幕方向发生变化）时调用此方法。例如，系统会在设备屏幕方向由纵向变为横向时调用此方法。使用此方法可响应GLSurfaceView 容器中的更改。
1.设置OpenGL版本
使用OpenGL之前，我们首先要在配置文件，设置支持的版本，我们这里使用2.0
<uses-feature android:glEsVersion="0x00020000" android:required="true" />2.创建GLSurfaceView实例
private lateinit var customGlSurfaceView: CustomGlSurfaceView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
customGlSurfaceView = CustomGlSurfaceView(this)
setContentView(customGlSurfaceView)
}我这里自定义一个GLSurfaceView，只是在初始化的时候，设置了一个Renderer
class CustomGlSurfaceView(context: Context?) : GLSurfaceView(context) {
private val mRenderer: CustomRenderer
init {
// Create an OpenGL ES 2.0 context
setEGLContextClientVersion(2)
mRenderer = CustomRenderer()
// Set the Renderer for drawing on the GLSurfaceView
setRenderer(mRenderer)
}
}3.实现Renderer接口
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
// Set the background frame color
GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f)
}
override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
GLES20.glViewport(0, 0, width, height); }
override fun onDrawFrame(gl: GL10?) {
// Redraw background color
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
}主要实现了Renderer绘制图形的几个方法，实现效果如下：
4.绘制三角形
定义图形
// number of coordinates per vertex in this array
const val COORDS_PER_VERTEX = 3
var triangleCoords = floatArrayOf( // in counterclockwise order:
0.0f, 0.622008459f, 0.0f, // top
-0.5f, -0.311004243f, 0.0f, // bottom left
0.5f, -0.311004243f, 0.0f // bottom right
)
class Triangle {
// Set color with red, green, blue and alpha (opacity) values
val color = floatArrayOf(1.0f, 0f, 0f, 1.0f,
0f, 1.0f, 0f, 1.0f,
0f, 0f, 1.0f, 1.0f)
private var vertexBuffer: FloatBuffer =
// (number of coordinate values * 4 bytes per float)
ByteBuffer.allocateDirect(triangleCoords.size * 4).run {
// use the device hardware's native byte order
order(ByteOrder.nativeOrder())
// create a floating point buffer from the ByteBuffer
asFloatBuffer().apply {
// add the coordinates to the FloatBuffer
put(triangleCoords)
// set the buffer to read the first coordinate
position(0)
}
}
}绘制图形
定义完图形后，绘制图形必须向图形渲染管道提供大量详细信息，主要需要以下几个基本信息：
- 顶点着色程序 - 用于渲染形状的顶点的 OpenGL ES 图形代码。
- 片段着色程序 - 用于使用颜色或纹理渲染形状面的 OpenGL ES 代码。
- 程序 - 包含您希望用于绘制一个或多个形状的着色程序的 OpenGL ES 对象。
首先定义着色器代码：
private val vertexShaderCode =
"attribute vec4 vPosition;" +
"void main() {" +
" gl_Position = vPosition;" +
"}"
private val fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
" gl_FragColor = vColor;" +
"}"然后将着色器代码加入到OpenGL ES 程序对象中：
private var mProgram: Int
init {
...
val vertexShader: Int = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode)
val fragmentShader: Int = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode)
// create empty OpenGL ES Program
mProgram = GLES20.glCreateProgram().also {
// add the vertex shader to program
GLES20.glAttachShader(it, vertexShader)
// add the fragment shader to program
GLES20.glAttachShader(it, fragmentShader)
// creates OpenGL ES program executables
GLES20.glLinkProgram(it)
}
}然后再定义一个draw方法绘制：
private var positionHandle: Int = 0
private var mColorHandle: Int = 0
private val vertexCount: Int = triangleCoords.size / COORDS_PER_VERTEX
private val vertexStride: Int = COORDS_PER_VERTEX * 4 // 4 bytes per vertex
fun draw() {
// Add program to OpenGL ES environment
GLES20.glUseProgram(mProgram)
// get handle to vertex shader's vPosition member
positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition").also {
// Enable a handle to the triangle vertices
GLES20.glEnableVertexAttribArray(it)
// Prepare the triangle coordinate data
GLES20.glVertexAttribPointer(
it,
COORDS_PER_VERTEX,
GLES20.GL_FLOAT,
false,
vertexStride,
vertexBuffer
)
// get handle to fragment shader's vColor member
mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor").also { colorHandle ->
// Set color for drawing the triangle
GLES20.glUniform4fv(colorHandle, 1, color, 0)
}
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount)
// Disable vertex array
GLES20.glDisableVertexAttribArray(it)
}
}在Renderer中，创建一个三角形
private lateinit var mTriangle: Triangle2
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
// Set the background frame color
GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f)
// initialize a triangle
mTriangle = Triangle2()
}最后在onDrawFrame()方法中调用draw()方法
override fun onDrawFrame(gl: GL10?) {
...
mTriangle.draw()
}运行效果如下：
5.投影和相机视图
我们看上面的图形有点变形，这是因为坐标系不一样，OpenGL展示的视图显示到Android上面的图形有偏差，需要我们做个校正。
在 OpenGL ES 中，通过投影和相机视图，使显示的绘制对象更接近，投影和相机视图，官方定义：
- 投影 - 这种转换可根据显示绘制对象的 GLSurfaceView 的宽度和高度调整绘制对象的坐标。如果不进行这种计算，OpenGL ES 绘制的对象会被不等比例的视图窗口所扭曲。通常只有在渲染程序的 onSurfaceChanged() 方法中确定或更改
OpenGL 视图的比例时，才需要计算投影转换。如需详细了解 OpenGL ES 投影和坐标映射，请参阅映射绘制对象的坐标。- 相机视图 - 这种转换可根据虚拟相机的位置调整绘制对象的坐标。请务必注意，OpenGL ES 不会定义实际的相机对象，而是通过转换绘制对象的显示方式提供模拟相机的实用程序方法。相机视图转换可能仅在您确定 GLSurfaceView
时计算一次，也可能会根据用户操作或应用的功能动态变化。
概念总是晦涩难懂的，我们看代码
首先定义投影：
private val vPMatrix = FloatArray(16)
private val projectionMatrix = FloatArray(16)
private val viewMatrix = FloatArray(16)
override fun onSurfaceChanged(unused: GL10, width: Int, height: Int) {
GLES20.glViewport(0, 0, width, height)
val ratio: Float = width.toFloat() / height.toFloat()
// this projection matrix is applied to object coordinates
// in the onDrawFrame() method
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1f, 1f, 3f, 7f)
}相机视图：
// Set the camera position (View matrix)
Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, -3f, 0f, 0f, 0f, 0f, 1.0f, 0.0f)
// Calculate the projection and view transformation
Matrix.multiplyMM(vPMatrix, 0, projectionMatrix, 0, viewMatrix, 0)
// Draw shape
triangle.draw(vPMatrix)应用投影和相机转换，在之前的顶点着色器代码基础上，修改如下：
private val vertexShaderCode2 =
// This matrix member variable provides a hook to manipulate
// the coordinates of the objects that use this vertex shader
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"void main() {" +
// the matrix must be included as a modifier of gl_Position
// Note that the uMVPMatrix factor *must be first* in order
// for the matrix multiplication product to be correct.
" gl_Position = uMVPMatrix * vPosition;" +
"}"最后改造我们之前的draw()方法，加入如下代码：
fun draw(mvpMatrix: FloatArray) { // pass in the calculated transformation matrix
// get handle to shape's transformation matrix
vPMatrixHandle = GLES20.glGetUniformLocation(program, "uMVPMatrix")
// Pass the projection and view transformation to the shader
GLES20.glUniformMatrix4fv(vPMatrixHandle, 1, false, mvpMatrix, 0)
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount)
// Disable vertex array
GLES20.glDisableVertexAttribArray(positionHandle)
}最终经过投影和相机视图转换的效果如下：
这样看起来是不是正常多了。
6.增加动画
在这基础上，我们可以增加动画：
// 添加动画
val scratch = FloatArray(16)
// // Create a rotation transformation for the triangle
val time = SystemClock.uptimeMillis() % 4000L
val angle = 0.090f * time.toInt()
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1.0f)
Matrix.multiplyMM(scratch, 0, vPMatrix, 0, rotationMatrix, 0)
mTriangle.draw(scratch)效果如下：
增加触摸事件效果如下：
7.项目地址：
参考例子地址：GitHub地址，觉得不错的给个🌟。
总结：
最后总结一下，OpenGL是一种跨平台图形API,Android上面使用的是OpenGL ES,提供我们真正代码使用的是GLSurfaceView和Renderer，它有着类似自己的语言即顶点着色器和片段着色代码，以及程序，由于坐标系的差别，我们需要用到投影和相机视图进行转换，使得用OpenGL ES写的代码更加接近真实场景，最后我们可以通过增加动画和添加touch事件，可以让我们的效果更加灵活多变，更加完美。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
