OpenGL ES -＞ GLSurfaceView纹理贴图

贴图

XML文件

1. <?xml version="1.0" encoding="utf-8"?>
2. <com.example.myapplication.MyGLSurfaceView
3.         xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent" />

复制代码

自界说GLSurfaceView代码

1. class MyGLSurfaceView(context: Context, attrs: AttributeSet) : GLSurfaceView(context, attrs) {
2.     private var mRenderer = MyGLRenderer(context)
4.     init {
5.         // 设置 OpenGL ES 3.0 版本
6.         setEGLContextClientVersion(3)
7.         setRenderer(mRenderer)
8.         // 设置渲染模式, 仅在需要重新绘制时才进行渲染，以节省资源
9.         renderMode = RENDERMODE_WHEN_DIRTY
10.     }
11. }

复制代码

自界说GLSurfaceView.Renderer代码

1. class MyGLRenderer(private val mContext : Context) : GLSurfaceView.Renderer {
2.     private var mDrawData: DrawData? = null
4.     override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
5.         // 当 Surface 创建时调用, 进行 OpenGL ES 环境的初始化操作, 设置清屏颜色为青蓝色 (Red=0, Green=0.5, Blue=0.5, Alpha=1)
6.         GLES30.glClearColor(0.0f, 0.5f, 0.5f, 1.0f)
7.         mDrawData = DrawData().apply {
8.             initVertexBuffer()
9.             initShader()
10.             loadTexture(mContext, R.drawable.bitmap_shader)
11.         }
12.     }
14.     override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
15.         // 当 Surface 尺寸发生变化时调用，例如设备的屏幕方向发生改变, 设置视口为新的尺寸，视口是指渲染区域的大小
16.         GLES30.glViewport(0, 0, width, height)
17.         mDrawData?.computeMVPMatrix(width.toFloat(), height.toFloat())
18.     }
20.     override fun onDrawFrame(gl: GL10?) {
21.         // 每一帧绘制时调用, 清除颜色缓冲区
22.         GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
23.         mDrawData?.drawSomething()
24.     }
25. }

复制代码

GLSurfaceView.Renderer必要的绘制数据

1. class DrawData {
2.     private var mProgram : Int = -1
3.     private var NO_OFFSET = 0
4.     private val VERTEX_POS_DATA_SIZE = 3
5.     private val TEXTURE_POS_DATA_SIZE = 2
6.     // 纹理ID
7.     private var mTextureID = IntArray(1)
8.     // VBO IDs
9.     private var mVertexVBO = 0
10.     private var mTexCoordVBO = 0
12.     // 最终变化矩阵
13.     private val mMVPMatrix = FloatArray(16)
14.     // 投影矩阵
15.     private val mProjectionMatrix = FloatArray(16)
16.     // 相机矩阵
17.     private val mViewMatrix = FloatArray(16)
19.     private var mViewPortRatio = 1f
21.     // 1. 准备顶点坐标，分配直接内存
22.     // OpenGL ES坐标系：原点在中心，X轴向右为正，Y轴向上为正，Z轴向外为正
23.     val vertex = floatArrayOf(
24.         -1.0f,  1.0f, 0.0f, // 左上
25.         -1.0f, -1.0f, 0.0f, // 左下
26.         1.0f, 1.0f, 0.0f, // 右上
27.         1.0f, -1.0f, 0.0f, // 右下
28.     )
30.     val vertexBuffer = ByteBuffer.allocateDirect(vertex.size * 4)
31.         .order(ByteOrder.nativeOrder())
32.         .asFloatBuffer()
35.     // 2. 准备纹理坐标，分配直接内存
36.     // 纹理坐标系：原点在左下角，X轴向右为正，Y轴向上为正
37.     val textureCoords = floatArrayOf(
38.         0.0f, 1.0f, // 左上
39.         0.0f, 0.0f, // 左下
40.         1.0f, 1.0f, // 右上
41.         1.0f, 0.0f, // 右下
42.     )
44.     val textureBuffer = ByteBuffer.allocateDirect(textureCoords.size * 4)
45.         .order(ByteOrder.nativeOrder())
46.         .asFloatBuffer()
48.     // 3. 创建顶点缓冲区对象
49.     fun initVertexBuffer(){
50.         // 初始化顶点坐标缓冲区
51.         vertexBuffer.put(vertex)
52.         vertexBuffer.position(NO_OFFSET)
54.         // 初始化纹理坐标缓冲区
55.         textureBuffer.put(textureCoords)
56.         textureBuffer.position(NO_OFFSET)
57.         // 创建两个VBO，一个用于顶点坐标，一个用于纹理坐标
58.         val vbo = IntArray(2)
59.         GLES30.glGenBuffers(vbo.size, vbo, NO_OFFSET) // 生成一个缓冲区对象ID，并存储在数组 vbo 中，存放位置为0
61.         // 绑定顶点缓冲区
62.         GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vbo[0])
63.         GLES30.glBufferData(
64.             GLES30.GL_ARRAY_BUFFER,
65.             vertex.size * 4, // 数据总字节数 = 顶点数 * Float占4字节
66.             vertexBuffer,
67.             GLES30.GL_STATIC_DRAW
68.         )
70.         // 绑定纹理缓冲区
71.         GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vbo[1])
72.         GLES30.glBufferData(
73.             GLES30.GL_ARRAY_BUFFER,
74.             textureCoords.size * 4, // 数据总字节数 = 顶点数 * Float占4字节
75.             textureBuffer,
76.             GLES30.GL_STATIC_DRAW
77.         )
79.         mVertexVBO = vbo[0]
80.         mTexCoordVBO = vbo[1]
81.     }
83.     // 4. 初始化着色器程序
84.     fun initShader()  {
85.         val vertexShaderCode = """#version 300 es
86.                 in vec4 aPosition; // 顶点坐标
87.                 uniform mat4 uMVPMatrix; // 变换矩阵
88.                 in vec2 aTexCoord; // 纹理坐标
89.                 out vec2 vTexCoord;
90.                 void main() {
91.                     // 输出顶点坐标和纹理坐标到片段着色器
92.                     gl_Position = uMVPMatrix * aPosition;
93.                     vTexCoord = aTexCoord;
94.                 }""".trimIndent()       // 顶点着色器代码
96.         val fragmentShaderCode = """#version 300 es
97.                 precision mediump float; // 定义float 精度为 mediump
98.                 out vec4 fragColor; // 输出片段颜色
99.                 in vec2 vTexCoord; // 接收顶点着色器传递过来的纹理坐标
100.                 uniform sampler2D uTexture; // 纹理取样器
101.                 void main() {
102.                     // 使用内置函数texture, 根据纹理坐标和取样器sampler2D计算片段颜色
103.                     fragColor = texture(uTexture, vTexCoord);
104.                 }""".trimIndent()
106.         // 加载顶点着色器和片段着色器, 并创建着色器程序
107.         val vertexShader = LoadShaderUtil.loadShader(GLES30.GL_VERTEX_SHADER, vertexShaderCode)
108.         val fragmentShader = LoadShaderUtil.loadShader(GLES30.GL_FRAGMENT_SHADER, fragmentShaderCode)
109.         mProgram = GLES30.glCreateProgram()
110.         GLES30.glAttachShader(mProgram, vertexShader)
111.         GLES30.glAttachShader(mProgram, fragmentShader)
112.         GLES30.glLinkProgram(mProgram)
113.         GLES30.glUseProgram(mProgram)
114.     }
116.     // 5. 加载纹理
117.     fun loadTexture(context: Context, resourceId: Int) {
118.         // 生成纹理
119.         GLES30.glGenTextures(mTextureID.size, mTextureID, NO_OFFSET)
120.         // 绑定纹理
121.         GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, mTextureID[0])
122.         // 设置纹理参数
123.         GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_LINEAR) // 纹理缩小时使用线性插值
124.         GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR) // 纹理放大时使用线性插值
125.         GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_S, GLES30.GL_CLAMP_TO_EDGE) // 纹理坐标超出范围时，超出部分使用最边缘像素进行填充
126.         GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_T, GLES30.GL_CLAMP_TO_EDGE) // 纹理坐标超出范围时，超出部分使用最边缘像素进行填充
127.         // 加载图片
128.         val options = BitmapFactory.Options().apply {
129.             inScaled = false // 不进行缩放
130.         }
131.         val bitmap = BitmapFactory.decodeResource(context.resources, resourceId, options)
132.         // 将图片数据加载到纹理中
133.         GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, NO_OFFSET, bitmap, NO_OFFSET)
134.         // 释放资源
135.         bitmap.recycle()
136.         // 解绑纹理
137.         GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, NO_OFFSET)
138.     }
140.     // 6. 计算变换矩阵
141.     fun computeMVPMatrix(width: Float, height: Float) {
142.         // 正交投影矩阵
143.         takeIf { width > height }?.let {
144.             mViewPortRatio = width / height
145.             Matrix.orthoM(
146.                 mProjectionMatrix, // 正交投影矩阵
147.                 NO_OFFSET, // 偏移量
148.                 -mViewPortRatio, // 近平面的坐标系左边界
149.                 mViewPortRatio, // 近平面的坐标系右边界
150.                 -1f, // 近平面的坐标系的下边界
151.                 1f, // 近平面坐标系的上边界
152.                 0f, // 近平面距离相机距离
153.                 1f // 远平面距离相机距离
154.             )
155.         } ?: run {
156.             mViewPortRatio = height / width
157.             Matrix.orthoM(
158.                 mProjectionMatrix, // 正交投影矩阵
159.                 NO_OFFSET, // 偏移量
160.                 -1f, // 近平面坐标系左边界
161.                 1f, // 近平面坐标系右边界
162.                 -mViewPortRatio, // 近平面坐标系下边界
163.                 mViewPortRatio, // 近平面坐标系上边界
164.                 0f, // 近平面距离相机距离
165.                 1f // 远平面距离相机距离
166.             )
167.         }
169.         // 设置相机矩阵
170.         // 相机位置(0f, 0f, 1f)
171.         // 物体位置(0f, 0f, 0f)
172.         // 相机方向(0f, 1f, 0f)
173.         Matrix.setLookAtM(
174.             mViewMatrix, // 相机矩阵
175.             NO_OFFSET, // 偏移量
176.             0f, // 相机位置x
177.             0f, // 相机位置y
178.             1f, // 相机位置z
179.             0f, // 物体位置x
180.             0f, // 物体位置y
181.             0f, // 物体位置z
182.             0f, // 相机上方向x
183.             1f, // 相机上方向y
184.             0f // 相机上方向z
185.         )
187.         // 最终变化矩阵
188.         Matrix.multiplyMM(
189.             mMVPMatrix, // 最终变化矩阵
190.             NO_OFFSET, // 偏移量
191.             mProjectionMatrix, // 投影矩阵
192.             NO_OFFSET, // 投影矩阵偏移量
193.             mViewMatrix, // 相机矩阵
194.             NO_OFFSET // 相机矩阵偏移量
195.         )
197.         // 纹理坐标系为(0, 0), (1, 0), (1, 1), (0, 1)的正方形逆时针坐标系，从Bitmap生成纹理，即像素拷贝到纹理坐标系
198.         // 变换矩阵需要加上一个y方向的翻转, x方向和z方向不改变
199.         Matrix.scaleM(
200.             mMVPMatrix,
201.             NO_OFFSET,
202.             1f,
203.             -1f,
204.             1f,
205.         )
207.         val matrixHandler = GLES30.glGetUniformLocation(mProgram, "uMVPMatrix")
208.         GLES30.glUniformMatrix4fv(matrixHandler, 1, false, mMVPMatrix, NO_OFFSET)
209.     }
211.     // 7. 使用着色器程序绘制图形
212.     fun drawSomething(){
213.         // 激活纹理编号
214.         GLES30.glActiveTexture(GLES30.GL_TEXTURE0)
215.         GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, mTextureID[0])
216.         // 激活纹理取样器
217.         val textureSampleHandle = GLES30.glGetUniformLocation(mProgram, "uTexture")
218.         GLES30.glUniform1i(textureSampleHandle, NO_OFFSET)
220.         // 激活变换矩阵
221.         val matrixHandle = GLES30.glGetUniformLocation(mProgram, "uMVPMatrix")
222.         GLES30.glUniformMatrix4fv(matrixHandle, 1, false, mMVPMatrix, NO_OFFSET)
224.         // 输入顶点数据
225.         val positionHandle = GLES30.glGetAttribLocation(mProgram, "aPosition")
226.         GLES30.glEnableVertexAttribArray(positionHandle)
227.         GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, mVertexVBO)
228.         GLES30.glVertexAttribPointer(positionHandle, VERTEX_POS_DATA_SIZE, GLES30.GL_FLOAT, false, 0, NO_OFFSET)
230.         // 绑定纹理数据
231.         val textureHandle = GLES30.glGetAttribLocation(mProgram, "aTexCoord")
232.         GLES30.glEnableVertexAttribArray(textureHandle)
233.         GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, mTexCoordVBO)
234.         GLES30.glVertexAttribPointer(textureHandle, TEXTURE_POS_DATA_SIZE, GLES30.GL_FLOAT, false, 0, NO_OFFSET)
236.         // 绘制纹理
237.         GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, NO_OFFSET, vertex.size  / VERTEX_POS_DATA_SIZE)
239.         // 解绑顶点数据
240.         GLES30.glDisableVertexAttribArray(positionHandle)
241.         // 解绑纹理数据
242.         GLES30.glDisableVertexAttribArray(textureHandle)
243.     }
244. }
248. object LoadShaderUtil{
249.     // 创建着色器对象
250.     fun loadShader(type: Int, source: String): Int {
251.         val shader = GLES30.glCreateShader(type)
252.         GLES30.glShaderSource(shader, source)
253.         GLES30.glCompileShader(shader)
254.         return shader
255.     }
256. }

复制代码

效果图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。