Android GlSurfaceView 入门教程 : 绘制一个三角形

野性酷女 2023-10-13 11:16 52阅读 0赞

### 1. GlSurfaceView是什么 ###

`GlSurfaceView`是`Android`中的一个类，继承自`SurfaceView`，是用于显示`OpenGL ES`图形渲染的一个`View`。  
`OpenGL ES`是一种跨平台的图形`API`，用于渲染`2D`和`3D`图形，也可以将相机的画面显示到`GlSurfaceView`上，从而实现滤镜的效果。  
`GlSurfaceView`提供了一个可以在`Android`应用程序中绘制`OpenGL ES`图形的接口，允许开发者将复杂的`3D`图形、动画和视觉效果嵌入到应用程序中。  
`GlSurfaceView`处理了`OpenGL ES`渲染环境的创建、维护和更新，以及与其他`Android`视图和事件系统的交互。

### 2. android中怎使用GlSurfaceview ###

#### 2.1 添加OpenGL ES版本支持 ####

新建`Android`项目，在`AndroidManifest.xml`文件中，添加 `OpenGL ES` 版本支持。例如，要使用 `OpenGL ES 2.0`，请添加以下代码：

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

> 如果需要使用 OpenGL ES 3.0 则需要以下声明：0x00030000  
> 如果需要使用 OpenGL ES 3.2 则需要以下声明：0x00030002

#### 2.2 新建自定义的GlSurfaceView ####

新建一个`MyGlSurfaceView`类，继承自 `GLSurfaceView`，并进行初始化

import android.content.Context
    import android.opengl.GLSurfaceView
    import android.util.AttributeSet
    
    class MyGLSurfaceView(context: Context, attrs: AttributeSet) : GLSurfaceView(context, attrs) {
        
    
        init {
        
            // 设置 OpenGL ES 版本
            setEGLContextClientVersion(2)
    
            // 设置渲染器
            val renderer = MyGLRenderer()
            setRenderer(renderer)
        }
    }

#### 2.3 新建自定义的Renderer ####

创建一个自定义的渲染器`MyRenderer`类，实现 `GLSurfaceView.Renderer` 接口，并实现其中的方法

class MyGLRenderer : GLSurfaceView.Renderer {
        
        override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        
            //设置清除屏幕时使用的颜色
            GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f)
        }
    
        override fun onDrawFrame(gl: GL10?) {
        
            // 清除屏幕
            GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
        }
    
        override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        
            // 设置视口大小
            GLES20.glViewport(0, 0, width, height)
        }
    }

#### 2.4 使用MyGLSurfaceView ####

在 `Activity`的`xml`中使用`MyGLSurfaceView`

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.heiko.myglsurfaceviewtest.MyGLSurfaceView
            android:id="@+id/gl_surface_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </FrameLayout>

#### 2.5 运行看下效果 ####

运行后，可以看到一个使用 `OpenGL ES` 绘制的黑色屏幕

![在这里插入图片描述][67ab2e1f203c43a3b5975069b6a1ad3d.jpeg]

### 3. 在自定义的MyGLRenderer中绘制三角形 ###

#### 3.1 添加顶点着色器和片段着色器的代码 ####

在 `MyGLRenderer` 类中，添加顶点着色器和片段着色器的代码。在这里，我们创建一个简单的顶点着色器和片段着色器，它们将顶点位置传递给渲染管线并使用固定颜色进行渲染：

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;" +
            "}"

#### 3.2 添加编译和链接着色器的方法 ####

在 `MyGLRenderer` 类中，添加一个方法来编译和链接着色器，然后返回着色器程序的 `ID`

private fun loadShaderProgram(vertexCode: String, fragmentCode: String): Int {
        
        // 编译顶点着色器
        val vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER)
        GLES20.glShaderSource(vertexShader, vertexCode)
        GLES20.glCompileShader(vertexShader)
    
        // 编译片段着色器
        val fragmentShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER)
        GLES20.glShaderSource(fragmentShader, fragmentCode)
        GLES20.glCompileShader(fragmentShader)
    
        // 链接着色器程序
        val program = GLES20.glCreateProgram()
        GLES20.glAttachShader(program, vertexShader)
        GLES20.glAttachShader(program, fragmentShader)
        GLES20.glLinkProgram(program)
        return program
    }

#### 3.3 加载并创建着色器程序 ####

在 `MyGLRenderer` 类中，添加成员变量来存储顶点数据、顶点缓冲区对象（`VBO`）和着色器程序 `ID`。

private val vertexData = floatArrayOf(
        0.0f, 0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
        0.5f, -0.5f, 0.0f
    )
    
    private var vertexBufferId = 0
    private var shaderProgramId = 0

这里`vertexData`为什么这么传，是和`openGL`的世界坐标系相关的  
![在这里插入图片描述][75be028af7c943e9a72b6592fb4df2d1.png]  
可以看到`vertexData`的第一个值`0.0f`，第二个值`0.5f`这个坐标点位于Y轴偏上的位置，第三个值`0.0f`我们不用管，这个是`Z`轴，在`2D`图形中我们不需要`Z`轴，所以这个统一传`0.0f`就好了。  
同理，第四个值`-0.5f`、第五个值`-0.5f`位于`X`轴坐标的偏左侧，第六个值也是`Z`轴，我们不用管。  
第七个值是`0.5f`，第八个值是`-0.5f`位于`X`轴坐标的偏右侧，第九个值也是`Z`轴，我们不用管。  
具体如下图所示

![在这里插入图片描述][cde4b911cd4a4ecd9a17a66106bd8660.png]

然后，在 `onSurfaceCreated` 方法中初始化这些值，然后加载并创建着色器程序

override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        
        // 设置清除屏幕时使用的颜色
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f)
    
        // 创建顶点缓冲区对象
        val buffers = IntArray(1)
        GLES20.glGenBuffers(1, buffers, 0)
        vertexBufferId = buffers[0]
    
        // 将顶点数据上传到缓冲区对象
        val vertexBuffer = ByteBuffer.allocateDirect(vertexData.size * 4)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer()
        vertexBuffer.put(vertexData)
        vertexBuffer.position(0)
    
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vertexBufferId)
        GLES20.glBufferData(
            GLES20.GL_ARRAY_BUFFER,
            vertexData.size * 4,
            vertexBuffer,
            GLES20.GL_STATIC_DRAW
        )
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0)
    
        // 加载并创建着色器程序
        shaderProgramId = loadShaderProgram(vertexShaderCode, fragmentShaderCode);
    }

#### 3.4 绘制三角形 ####

在 `onDrawFrame` 方法中，使用创建的着色器程序和顶点缓冲区对象来绘制三角形：

override fun onDrawFrame(gl: GL10?) {
        
        // 清除屏幕
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
    
        // 使用着色器程序
        GLES20.glUseProgram(shaderProgramId)
    
        // 绑定顶点缓冲区对象并启用顶点属性
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vertexBufferId)
        val positionLocation = GLES20.glGetAttribLocation(shaderProgramId, "vPosition")
        GLES20.glEnableVertexAttribArray(positionLocation)
        GLES20.glVertexAttribPointer(positionLocation, 3, GLES20.GL_FLOAT, false, 0, 0)
    
        // 设置片段着色器的颜色
        val colorLocation = GLES20.glGetUniformLocation(shaderProgramId, "vColor")
        GLES20.glUniform4f(colorLocation, 1.0f, 0.0f, 0.0f, 1.0f)
    
        // 绘制三角形
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3) // GL_TRIANGLES:三角形 GL_POINTS:点
    
        // 禁用顶点属性并解除顶点缓冲区对象的绑定
        GLES20.glDisableVertexAttribArray(positionLocation)
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0)
    }

#### 3.5 设置视口大小 ####

在 `onSurfaceChanged` 方法中，还是一样，设置视口大小：

override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        
        // 设置视口大小
        GLES20.glViewport(0, 0, width, height)
    }

#### 3.6 运行看下效果 ####

![在这里插入图片描述][ee77251d51e043ddafb1578a032c8cd2.jpeg_pic_center]

### 4. Android中GLES20.java的API说明 ###

上面我们已经实现了一个三角形的绘制，但是对于`GLES20`的`API`还是不太了解，接下来再来看下常用的`GLES20 API`

#### 4.1 Android中GLES20 API的一些主要功能说明 ####

*  Shaders（着色器）：GLES20使用可编程的着色器来渲染图形。顶点着色器处理顶点数据，片段着色器处理像素数据。着色器需要用GLSL（OpenGL Shading Language）编写。
 *  Buffers（缓冲区）：GLES20使用缓冲区来存储顶点数据和索引数据。顶点缓冲区对象（VBO）存储顶点数据，元素缓冲区对象（EBO）存储索引数据。
 *  Textures（纹理）：GLES20支持多种纹理类型，如2D纹理、立方体贴图等。纹理用于给3D对象添加详细的表面特征
 *  Framebuffers（帧缓冲区）：GLES20使用帧缓冲区对象（FBO）来存储渲染结果。你可以将渲染结果渲染到纹理中，然后将纹理应用到其他对象上，实现高级渲染效果。
 *  Transformations（变换）：GLES20支持多种变换操作，如平移、旋转、缩放等。变换矩阵用于在顶点着色器中处理顶点数据。
 *  Lighting（光照）：GLES20支持基本的光照计算，如环境光、漫反射光、镜面反射光等。光照计算通常在顶点着色器或片段着色器中进行。
 *  Blending（混合）：GLES20支持颜色混合，用于实现透明度、半透明等效果。混合操作可以根据源颜色和目标颜色按照指定的混合因子进行计算。
 *  Culling（剔除）：GLES20支持面剔除，可以剔除不可见的面，提高渲染性能。面剔除可以根据面的正面或反面进行。
 *  Depth Testing（深度测试）：GLES20支持深度测试，用于判断像素的可见性。深度测试可以根据像素的深度值进行比较，只渲染最前面的像素。
 *  Stencil Testing（模板测试）：GLES20支持模板测试，用于实现遮罩、镜子等效果。模板测试可以根据模板缓冲区的值对像素进行掩盖或者保留。

#### 4.2 GLES20 API中一些主要方法的说明 ####

*  glGenBuffers：生成缓冲区对象，如顶点缓冲区对象（VBO）和元素缓冲区对象（EBO）。
 *  glBindBuffer：绑定缓冲区对象，使其成为当前活动的缓冲区。
 *  glBufferData：将数据上传到缓冲区对象。
 *  glVertexAttribPointer：定义顶点属性数组，指定顶点数据在缓冲区中的布局。
 *  glEnableVertexAttribArray：启用顶点属性数组。
 *  glDisableVertexAttribArray：禁用顶点属性数组。
 *  glUseProgram：使用某个着色器程序进行渲染。
 *  glGetUniformLocation：获取着色器程序中uniform变量的位置。
 *  glUniformMatrix4fv：为uniform变量设置矩阵数据。
 *  glCreateShader：创建着色器对象。
 *  glShaderSource：为着色器对象设置源代码。
 *  glCompileShader：编译着色器对象。
 *  glGetShaderiv：获取着色器对象的编译状态。
 *  glAttachShader：将着色器对象附加到着色器程序。
 *  glLinkProgram：链接着色器程序。
 *  glGetProgramiv：获取着色器程序的链接状态。
 *  glDeleteShader：删除着色器对象。
 *  glGenTextures：生成纹理对象。
 *  glBindTexture：绑定纹理对象。
 *  glTexParameteri：设置纹理参数，如过滤模式、环绕模式等。
 *  glTexImage2D：上传纹理数据。
 *  glGenFramebuffers：生成帧缓冲区对象。
 *  glBindFramebuffer：绑定帧缓冲区对象。
 *  glFramebufferTexture2D：将纹理对象附加到帧缓冲区对象。
 *  glDrawArrays：绘制顶点数组，渲染图形。
 *  glDrawElements：绘制索引数组，渲染图形。
 *  glEnable：启用某个OpenGL功能，如深度测试、剔除、混合等。
 *  glDisable：禁用某个OpenGL功能。
 *  glBlendFunc：设置混合函数。
 *  glCullFace：设置剔除面的模式。
 *  glClearColor：设置清除颜色缓冲区时使用的颜色。
 *  glClear：清除颜色缓冲区、深度缓冲区和/或模板缓冲区。

#### 4.3 扩展 : EGL是什么 ####

`OpenGL`是一个跨平台的操作`GPU`的`API`，但`OpenGL`需要本地视窗系统进行交互，这就需要一个中间控制层。  
而`EGL`就是连接`OpenGL ES`和本地窗口系统的接口，引入`EGL`就是为了屏蔽不同平台上的区别。  
`EGL`需要做一些环境配置，而`GLSurfaceView`就已经帮我们配置好了，从而让我们不了解`EGL`也可以调用`OpenGL`。

> 当然，我们也可以不使用GLSurfaceView，而是自己通过EGL来和OpenGL进行交互，但这样就比较麻烦了。

### 5. 开启调试 ###

`GLSurfaceView.setDebugFlags()` 方法可以激活 `log`或者错误检测，它们可以帮助调试 `OpenGL ES` 调用。具体使用时，在　`GLSurfaceView` 的构造函数中，调用 `setRender()` 之前调用`GLSurfaceView.setDebugFlags()`就可以了。下面是个例子：

class MyGLSurfaceView(context: Context, attrs: AttributeSet) : GLSurfaceView(context, attrs) {
        
    
        init {
        
            // 设置 OpenGL ES 版本
            setEGLContextClientVersion(2)
            //打开调试和日志
            setDebugFlags(DEBUG_CHECK_GL_ERROR or DEBUG_LOG_GL_CALLS)
    
            // 设置渲染器
            val renderer = MyGLRenderer()
            setRenderer(renderer)
        }
    }

### 6. 源码下载 ###

本文源码下载 : [Android使用GlSurfaceView和OpenGL绘制三角形 Demo][Android_GlSurfaceView_OpenGL_ Demo]

### 7. 官方文档 ###

[GLSurfaceView | Android Developers (google.cn)][GLSurfaceView _ Android Developers _google.cn]  
[SurfaceView 和 GLSurfaceView | Android 开源项目 | Android Open Source Project (google.cn)][SurfaceView _ GLSurfaceView _ Android _ _ Android Open Source Project _google.cn]  
[构建 OpenGL ES 环境 | Android 开发者 | Android Developers (google.cn)][OpenGL ES _ _ Android _ _ Android Developers _google.cn]

[67ab2e1f203c43a3b5975069b6a1ad3d.jpeg]: https://img-blog.csdnimg.cn/67ab2e1f203c43a3b5975069b6a1ad3d.jpeg
[75be028af7c943e9a72b6592fb4df2d1.png]: https://img-blog.csdnimg.cn/75be028af7c943e9a72b6592fb4df2d1.png
[cde4b911cd4a4ecd9a17a66106bd8660.png]: https://img-blog.csdnimg.cn/cde4b911cd4a4ecd9a17a66106bd8660.png
[ee77251d51e043ddafb1578a032c8cd2.jpeg_pic_center]: https://img-blog.csdnimg.cn/ee77251d51e043ddafb1578a032c8cd2.jpeg#pic_center
[Android_GlSurfaceView_OpenGL_ Demo]: https://download.csdn.net/download/EthanCo/88001035
[GLSurfaceView _ Android Developers _google.cn]: https://developer.android.google.cn/reference/android/opengl/GLSurfaceView?hl=en
[SurfaceView _ GLSurfaceView _ Android _ _ Android Open Source Project _google.cn]: https://source.android.google.cn/docs/core/graphics/arch-sv-glsv?hl=zh-cn
[OpenGL ES _ _ Android _ _ Android Developers _google.cn]: https://developer.android.google.cn/training/graphics/opengl/environment?hl=zh-cn