Open GL ES -＞GLSurfaceView在正交投影下的图片旋转、缩放、位移

XML文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.example.myapplication.MyMatrixGLSurfaceViewandroid:id="@+id/glSurfaceView"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="4" /><!-- 旋转控制按钮 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="旋转："android:textSize="16sp" /><Buttonandroid:id="@+id/rotateXBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="X轴" /><Buttonandroid:id="@+id/rotateYBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Y轴" /><Buttonandroid:id="@+id/rotateZBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Z轴" /></LinearLayout><!-- 缩放控制按钮 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="缩放："android:textSize="16sp" /><Buttonandroid:id="@+id/scaleXBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="X轴" /><Buttonandroid:id="@+id/scaleYBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Y轴" /></LinearLayout><!-- 位移控制按钮 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="位移："android:textSize="16sp" /><Buttonandroid:id="@+id/translateXPosBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="X轴" /><Buttonandroid:id="@+id/translateYPosBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Y轴" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="正交投影：" /><Buttonandroid:id="@+id/resetBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="重置" /></LinearLayout></LinearLayout>

Activity代码

class MainActivity5 : AppCompatActivity(), View.OnClickListener {companion object {// 变换增量private const val ROTATION_DELTA = 10.0fprivate const val SCALE_DELTA = 0.25fprivate const val TRANSLATE_DELTA = 0.25f}private lateinit var glSurfaceView: MyMatrixGLSurfaceView// 变换参数private var rotationX = 0fprivate var rotationY = 0fprivate var rotationZ = 0fprivate var scaleX = 1.0fprivate var scaleY = 1.0fprivate var translateX = 0fprivate var translateY = 0foverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main5)// 初始化GLSurfaceViewglSurfaceView = findViewById(R.id.glSurfaceView)// 初始化所有按钮并设置点击监听器findViewById<Button>(R.id.rotateXBtn).setOnClickListener(this)findViewById<Button>(R.id.rotateYBtn).setOnClickListener(this)findViewById<Button>(R.id.rotateZBtn).setOnClickListener(this)findViewById<Button>(R.id.scaleXBtn).setOnClickListener(this)findViewById<Button>(R.id.scaleYBtn).setOnClickListener(this)findViewById<Button>(R.id.translateXPosBtn).setOnClickListener(this)findViewById<Button>(R.id.translateYPosBtn).setOnClickListener(this)findViewById<Button>(R.id.resetBtn).setOnClickListener(this)}override fun onClick(v: View) {when (v.id) {// 处理旋转R.id.rotateXBtn -> {rotationX += ROTATION_DELTAglSurfaceView.updateRotation(rotationX, AXIS.X)}R.id.rotateYBtn -> {rotationY += ROTATION_DELTAglSurfaceView.updateRotation(rotationY, AXIS.Y)}R.id.rotateZBtn -> {rotationZ += ROTATION_DELTAglSurfaceView.updateRotation(rotationZ, AXIS.Z)}// 处理缩放R.id.scaleXBtn -> {scaleX += SCALE_DELTAglSurfaceView.updateScale(scaleX, AXIS.X)}R.id.scaleYBtn -> {scaleY += SCALE_DELTAglSurfaceView.updateScale(scaleY, AXIS.Y)}// 处理位移R.id.translateXPosBtn -> {translateX += TRANSLATE_DELTAglSurfaceView.updateTranslate(translateX, AXIS.X)}R.id.translateYPosBtn -> {translateY += TRANSLATE_DELTAglSurfaceView.updateTranslate(translateY, AXIS.Y)}// 重置所有变换R.id.resetBtn -> {resetTransformations()}}// 更新渲染glSurfaceView.requestRender()}private fun resetTransformations() {// 重置所有变换参数rotationX = 0frotationY = 0frotationZ = 0fscaleX = 1.0fscaleY = 1.0ftranslateX = 0ftranslateY = 0fglSurfaceView?.reset()}
}enum class AXIS {X,Y,Z
}

GLSurfaceView代码

class MyMatrixGLSurfaceView(context: Context, attrs: AttributeSet) : GLSurfaceView(context, attrs) {private var mRenderer = MyMatrixRenderer(context)init {// 设置 OpenGL ES 3.0 版本setEGLContextClientVersion(3)setRenderer(mRenderer)// 设置渲染模式, 仅在需要重新绘制时才进行渲染，以节省资源renderMode = RENDERMODE_WHEN_DIRTY}fun updateRotation(angle: Float, axis: AXIS) {mRenderer?.mDrawData?.apply {resetMatrix()computeRotateModelMatrix(angle, axis)computeMVPMatrix(width, height)drawCurrentOutput()}}fun updateScale(scale: Float, axis: AXIS) {mRenderer?.mDrawData?.apply {resetMatrix()computeScaleModelMatrix(scale, axis)computeMVPMatrix(width, height)drawCurrentOutput()}}fun updateTranslate(translate: Float, axis: AXIS) {mRenderer?.mDrawData?.apply {resetMatrix()computeTranslateModelMatrix(translate, axis)computeMVPMatrix(width, height)drawCurrentOutput()}}fun reset() {mRenderer?.mDrawData?.apply {resetMatrix()computeMVPMatrix(width, height)drawCurrentOutput()}}
}

GLSurfaceView.Renderer代码

class MyMatrixRenderer(private val mContext: Context) : GLSurfaceView.Renderer {var mDrawData: MatrixDrawData? = nulloverride fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {// 当 Surface 创建时调用, 进行 OpenGL ES 环境的初始化操作, 设置清屏颜色为青蓝色 (Red=0, Green=0.5, Blue=0.5, Alpha=1)GLES30.glClearColor(0.0f, 0.5f, 0.5f, 1.0f)mDrawData = MatrixDrawData().apply {initTexture0(mContext, R.drawable.picture)initShader()initVertexBuffer()}}override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {// 当 Surface 尺寸发生变化时调用，例如设备的屏幕方向发生改变, 设置视口为新的尺寸，视口是指渲染区域的大小GLES30.glViewport(0, 0, width, height)mDrawData?.resetMatrix()mDrawData?.computeMVPMatrix(width, height)}override fun onDrawFrame(gl: GL10?) {GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)mDrawData?.drawCurrentOutput()}
}

GLSurfaceView.Renderer需要的绘制数据

class MatrixDrawData {private var NO_OFFSET = 0private val VERTEX_POS_DATA_SIZE = 3private val TEXTURE_POS_DATA_SIZE = 2private var mProgram: Int = -1// VAO(Vertex Array Object), 顶点数组对象, 用于存储VBOprivate var mVAO = IntArray(1)// VBO(Vertex Buffer Object), 顶点缓冲对象，用于存储顶点数据和纹理数据private var mVBO = IntArray(2)// IBO(Index Buffer Object), 索引缓冲对象，用于存储顶点索引数据private var mIBO = IntArray(1)// 纹理IDvar mTextureID = IntArray(1)// 有上下翻转的变换矩阵private var mMVPMatrix = FloatArray(16)// 投影矩阵private val mProjectionMatrix = FloatArray(16)// 观察矩阵private val mViewMatrix = FloatArray(16)// 模型矩阵private val mModelMatrix = FloatArray(16)// 视口比例private var mViewPortRatio = 1f// 准备顶点坐标，分配直接内存// OpenGL ES坐标系：原点在中心，X轴向右为正，Y轴向上为正，Z轴向外为正val vertex = floatArrayOf(-1.0f, 1.0f, 0.0f, // 左上-1.0f, -1.0f, 0.0f, // 左下1.0f, 1.0f, 0.0f, // 右上1.0f, -1.0f, 0.0f, // 右下)val vertexBuffer = ByteBuffer.allocateDirect(vertex.size * 4).order(ByteOrder.nativeOrder()).asFloatBuffer().put(vertex).position(NO_OFFSET)// 准备纹理坐标，分配直接内存// 纹理坐标系：原点在左下角，X轴向右为正，Y轴向上为正val textureCoords = floatArrayOf(0.0f, 1.0f, // 左上0.0f, 0.0f, // 左下1.0f, 1.0f, // 右上1.0f, 0.0f, // 右下)val textureBuffer = ByteBuffer.allocateDirect(textureCoords.size * 4).order(ByteOrder.nativeOrder()).asFloatBuffer().put(textureCoords).position(NO_OFFSET)// 索引坐标，分配直接内存val index = shortArrayOf(0, 1, 2, // 第一个三角形1, 3, 2, // 第二个三角形)val indexBuffer = ByteBuffer.allocateDirect(index.size * 2).order(ByteOrder.nativeOrder()).asShortBuffer().put(index).position(NO_OFFSET)// 初始化着色器程序fun initShader() {val vertexShaderCode = """#version 300 esuniform mat4 uMVPMatrix; // 变换矩阵in vec4 aPosition; // 顶点坐标in vec2 aTexCoord; // 纹理坐标 out vec2 vTexCoord; void main() {// 输出顶点坐标和纹理坐标到片段着色器gl_Position = uMVPMatrix * aPosition;vTexCoord = aTexCoord;}""".trimIndent()val fragmentShaderCode = """#version 300 esprecision mediump float;uniform sampler2D uTexture_0;in vec2 vTexCoord;out vec4 fragColor;void main() {fragColor = texture(uTexture_0, vTexCoord);}""".trimIndent()// 加载顶点着色器和片段着色器, 并创建着色器程序val vertexShader = LoadShaderUtil.loadShader(GLES30.GL_VERTEX_SHADER, vertexShaderCode)val fragmentShader =LoadShaderUtil.loadShader(GLES30.GL_FRAGMENT_SHADER, fragmentShaderCode)mProgram = GLES30.glCreateProgram()GLES30.glAttachShader(mProgram, vertexShader)GLES30.glAttachShader(mProgram, fragmentShader)GLES30.glLinkProgram(mProgram)// 删除着色器对象GLES30.glDeleteShader(vertexShader)GLES30.glDeleteShader(fragmentShader)}// 创建VAO, VBO, IBOfun initVertexBuffer() {// 绑定VAOGLES30.glGenVertexArrays(mVAO.size, mVAO, NO_OFFSET)GLES30.glBindVertexArray(mVAO[0])// 绑定VBOGLES30.glGenBuffers(mVBO.size, mVBO, NO_OFFSET)// 绑定顶点缓冲区数据到VBO[0]GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, mVBO[0])GLES30.glBufferData(GLES30.GL_ARRAY_BUFFER,vertex.size * 4,vertexBuffer,GLES30.GL_STATIC_DRAW)// 解析顶点缓冲区数据到VBO[0]val positionHandle = GLES30.glGetAttribLocation(mProgram, "aPosition")GLES30.glEnableVertexAttribArray(positionHandle)GLES30.glVertexAttribPointer(positionHandle,VERTEX_POS_DATA_SIZE,GLES30.GL_FLOAT,false,0,NO_OFFSET)// 解绑顶点缓冲区GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, 0)// 绑定纹理缓冲区数据到VBO[1]GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, mVBO[1])GLES30.glBufferData(GLES30.GL_ARRAY_BUFFER,textureCoords.size * 4,textureBuffer,GLES30.GL_STATIC_DRAW)// 解析纹理缓冲区数据到VBO[1]val textureHandle = GLES30.glGetAttribLocation(mProgram, "aTexCoord")GLES30.glEnableVertexAttribArray(textureHandle)GLES30.glVertexAttribPointer(textureHandle,TEXTURE_POS_DATA_SIZE,GLES30.GL_FLOAT,false,0,NO_OFFSET)// 解绑纹理缓冲区GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, 0)// 绑定IBOGLES30.glGenBuffers(mIBO.size, mIBO, NO_OFFSET)// 绑定索引缓冲区数据到IBO[0]GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, mIBO[0])GLES30.glBufferData(GLES30.GL_ELEMENT_ARRAY_BUFFER,index.size * 2,indexBuffer,GLES30.GL_STATIC_DRAW)// 解绑VAOGLES30.glBindVertexArray(0)// 解绑IBOGLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, 0)}// 使用着色器程序绘制图形fun drawSomething(program: Int, mvpMatrix: FloatArray) {// 解析变换矩阵val matrixHandle = GLES30.glGetUniformLocation(program, "uMVPMatrix")GLES30.glUniformMatrix4fv(matrixHandle, 1, false, mvpMatrix, NO_OFFSET)// 绑定VAOGLES30.glBindVertexArray(mVAO[0])// 绘制图形GLES30.glDrawElements(GLES30.GL_TRIANGLES,index.size,GLES30.GL_UNSIGNED_SHORT,NO_OFFSET)// 解绑VAOGLES30.glBindVertexArray(0)}fun resetMatrix() {Matrix.setIdentityM(mModelMatrix, NO_OFFSET)Matrix.setIdentityM(mViewMatrix, NO_OFFSET)Matrix.setIdentityM(mProjectionMatrix, NO_OFFSET)Matrix.setIdentityM(mMVPMatrix, NO_OFFSET)}// 计算GLSurfaceView变换矩阵fun computeMVPMatrix(width: Int, height: Int) {val isLandscape = width > heightmViewPortRatio = if (isLandscape) width.toFloat() / height else height.toFloat() / width// 计算包围图片的球半径val radius = sqrt(1f + mViewPortRatio * mViewPortRatio)val near = 0.1fval far = near + 2 * radius// 视图矩阵View MatrixMatrix.setLookAtM(mViewMatrix, NO_OFFSET,0f, 0f, near + radius,  // 相机位置0f, 0f, 0f,             // 看向原点0f, 1f, 0f              // 上方向)// 投影矩阵Projection MatrixMatrix.orthoM(mProjectionMatrix, NO_OFFSET,if (isLandscape) -mViewPortRatio else -1f,  // 左边界if (isLandscape) mViewPortRatio else 1f,    // 右边界if (isLandscape) -1f else -mViewPortRatio,  // 下边界if (isLandscape) 1f else mViewPortRatio,    // 上边界near, // 近平面far // 远平面)// 最终变换矩阵，第一次变换，模型矩阵 x 视图矩阵 = Model x View, 但是OpenGL ES矩阵乘法是右乘，所以是View x ModelMatrix.multiplyMM(mMVPMatrix,NO_OFFSET,mViewMatrix,NO_OFFSET,mModelMatrix,NO_OFFSET)// 最终变换矩阵，第二次变换，模型矩阵 x 视图矩阵 x 投影矩阵 = Model x View x Projection, 但是OpenGL ES矩阵乘法是右乘，所以是Projection x View x ModelMatrix.multiplyMM(mMVPMatrix,NO_OFFSET,mProjectionMatrix,NO_OFFSET,mMVPMatrix,NO_OFFSET)// 纹理坐标系为(0, 0), (1, 0), (1, 1), (0, 1)的正方形逆时针坐标系，从Bitmap生成纹理，即像素拷贝到纹理坐标系// 变换矩阵需要加上一个y方向的翻转, x方向和z方向不改变Matrix.scaleM(mMVPMatrix,NO_OFFSET,1f,-1f,1f,)}fun computeRotateModelMatrix(angleX: Float, axis: AXIS) {when (axis) {AXIS.X -> Matrix.rotateM(mModelMatrix, NO_OFFSET, angleX, 1f, 0f, 0f)AXIS.Y -> Matrix.rotateM(mModelMatrix, NO_OFFSET, angleX, 0f, 1f, 0f)AXIS.Z -> Matrix.rotateM(mModelMatrix, NO_OFFSET, angleX, 0f, 0f, 1f)}}fun computeScaleModelMatrix(scale: Float, axis: AXIS) {when (axis) {AXIS.X -> Matrix.scaleM(mModelMatrix, NO_OFFSET, scale, 1f, 1f)AXIS.Y -> Matrix.scaleM(mModelMatrix, NO_OFFSET, 1f, scale, 1f)else -> {}}}fun computeTranslateModelMatrix(translate: Float, axis: AXIS) {when (axis) {AXIS.X -> Matrix.translateM(mModelMatrix, NO_OFFSET, translate, 0f, 0f)AXIS.Y -> Matrix.translateM(mModelMatrix, NO_OFFSET, 0f, translate, 0f)else -> {}}}// 加载纹理fun loadTexture(context: Context, resourceId: Int): Int {val textureId = IntArray(1)// 生成纹理GLES30.glGenTextures(1, textureId, 0)// 绑定纹理GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId[0])// 设置纹理参数GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D,GLES30.GL_TEXTURE_MIN_FILTER,GLES30.GL_LINEAR) // 纹理缩小时使用线性插值GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D,GLES30.GL_TEXTURE_MAG_FILTER,GLES30.GL_LINEAR) // 纹理放大时使用线性插值GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D,GLES30.GL_TEXTURE_WRAP_S,GLES30.GL_CLAMP_TO_EDGE) // 纹理坐标超出范围时，超出部分使用最边缘像素进行填充GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D,GLES30.GL_TEXTURE_WRAP_T,GLES30.GL_CLAMP_TO_EDGE) // 纹理坐标超出范围时，超出部分使用最边缘像素进行填充// 加载图片val options = BitmapFactory.Options().apply {inScaled = false // 不进行缩放}val bitmap = BitmapFactory.decodeResource(context.resources, resourceId, options)// 将图片数据加载到纹理中GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0)// 释放资源bitmap.recycle()// 解绑纹理GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)Log.e("yang","loadTexture: 纹理加载成功 bitmap.width:${bitmap.width} bitmap.height:${bitmap.height}")return textureId[0]}fun enableTexture0(program: Int, id: Int) {GLES30.glActiveTexture(GLES30.GL_TEXTURE0)GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, id)val textureSampleHandle = GLES30.glGetUniformLocation(program, "uTexture_0")if (textureSampleHandle != -1) {GLES30.glUniform1i(textureSampleHandle, 0)}}fun disableTexture0() {GLES30.glActiveTexture(GLES30.GL_TEXTURE0)GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)}fun initTexture0(context: Context, resourceId: Int) {mTextureID[0] = loadTexture(context, resourceId)}// GLSurfaceView实时绘制fun drawCurrentOutput() {val state = saveGLState()try {GLES30.glUseProgram(mProgram)enableTexture0(mProgram, mTextureID[0])drawSomething(mProgram, mMVPMatrix)disableTexture0()} finally {restoreGLState(state)}}// 保存OpenGL状态private fun saveGLState(): GLState {val viewport = IntArray(4)val program = IntArray(1)val framebuffer = IntArray(1)GLES30.glGetIntegerv(GLES30.GL_VIEWPORT, viewport, 0)GLES30.glGetIntegerv(GLES30.GL_CURRENT_PROGRAM, program, 0)GLES30.glGetIntegerv(GLES30.GL_FRAMEBUFFER_BINDING, framebuffer, 0)return GLState(viewport, program[0], framebuffer[0])}// 恢复OpenGL状态private fun restoreGLState(state: GLState) {GLES30.glViewport(state.viewport[0],state.viewport[1],state.viewport[2],state.viewport[3])GLES30.glUseProgram(state.program)GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, state.framebuffer)}// OpenGL状态数据类data class GLState(val viewport: IntArray,val program: Int,val framebuffer: Int)object LoadShaderUtil {// 创建着色器对象fun loadShader(type: Int, source: String): Int {val shader = GLES30.glCreateShader(type)GLES30.glShaderSource(shader, source)GLES30.glCompileShader(shader)return shader}}
}

效果图