【Android App】三维投影OpenGL ES的讲解及着色器实现（附源码和演示超详细）

谁借莪１个温暖的怀抱￠ 2023-09-30 17:22 6阅读 0赞

> **需要源码请点赞关注收藏后评论区留言私信~~~**

## 一、OpenGL ES简介 ##

虽然OpenGL的三维制图功能非常强大，但是它主要为计算机设计的，对于嵌入式设备和移动端设备来说显得比较臃肿，所以业界又设计了专供嵌入式设备的OpenGL ES 它相当于OpenGL的精简版，因为嵌入式设备追求性价比，所以能不做的渲染操作尽量不做，以便优化整体的系统性能

OpenGL ES将所有的渲染过程划分为若干着色器，每个着色器只负责自己这块的渲染操作。

![614a4b0a9280449a9a8ac0a1ef0e6548.png][]

着色器的小程序保存在扩展名为glsl的配置文件中，它采用GLSL语言编写，语法框架类似于C语言

OpenGL ES 2.0与3.0之间的GLSL语法差异如下：

（1）对于ES 3.0来说，glsl文件开头多了一行“\#version 300 es”，表示当前小程序使用ES 3.0； （2）取消了ES 2.0的限定符attribute和varying，取而代之的是in和out；

（3）删除了ES 2.0的内置变量gl\_FragColor和gl\_FragData，改为通过out声明相关输出参数； （4）ES 2.0内置的纹理方法texture2D和texture3D都被新方法texture所取代；

（5）ES 3.0新增修饰符layout，它允许指定变量的位置序号；

## 二、着色器实战效果 ##

如下图所示 可以在下拉框中选择不同颜色填充

![24de883589ad4a9199e50e963aa616df.jpeg][]

![4f47b122c87d4a9bbe36035e65e87865.jpeg][]

![c39286ca8a5846998c09479c0169fd43.jpeg][]

代码如下

### Java类 ###

package com.example.threed;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.app.ActivityManager;
    import android.content.Context;
    import android.content.pm.ConfigurationInfo;
    import android.opengl.GLES30;
    import android.opengl.GLSurfaceView;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    import android.widget.Toast;
    
    import com.example.threed.util.GlUtil;
    
    import java.nio.FloatBuffer;
    
    import javax.microedition.khronos.egl.EGLConfig;
    import javax.microedition.khronos.opengles.GL10;
    
    public class EsShaderActivity extends AppCompatActivity {
        private final static String TAG = "EsShaderActivity";
        private GLSurfaceView glsv_content; // 声明一个图形库表面视图对象
        private int mProgramId; // 声明glsl小程序的编号
        private int mStyle; // 三角形样式
        // 三角形的顶点坐标数组
        private float mCoordArray[] = { // 默认按逆时针方向顺序绘制
                0.0f, 0.622008459f, 0.0f,   // 顶
                -0.5f, -0.311004243f, 0.0f,   // 左底
                0.5f, -0.311004243f, 0.0f    // 右底
        };
        // 三角形的顶点颜色数组（纯色）
        private float[] mColorPureArray = {
                1.0f, 0.0f, 0.0f, 1.0f,
                1.0f, 0.0f, 0.0f, 1.0f,
                1.0f, 0.0f, 0.0f, 1.0f
        };
        // 三角形的顶点颜色数组（彩色）
        private float[] mColorFullArray = {
                0.0f, 1.0f, 0.0f, 1.0f,
                1.0f, 0.0f, 0.0f, 1.0f,
                0.0f, 0.0f, 1.0f, 1.0f
        };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_es_shader);
            showEsVersion(); // 显示OpenGL ES的版本号
            initStyleSpinner(); // 初始化样式下拉框
            glsv_content = findViewById(R.id.glsv_content);
            // 声明使用OpenGL ES的版本号为3.0。使用ES30方法之前务必指定版本号
            glsv_content.setEGLContextClientVersion(3);
            // 给OpenGL的表面视图注册三维图形的渲染器
            glsv_content.setRenderer(new ShaderRender());
            // 设置渲染模式（关闭自动刷新）
            glsv_content.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
        }
    
        // 显示OpenGL ES的版本号
        private void showEsVersion() {
            ActivityManager am = (ActivityManager) getSystemService(Context.ACTIVITY_SERVICE);
            ConfigurationInfo info = am.getDeviceConfigurationInfo();
            String versionDesc = String.format("%08X", info.reqGlEsVersion);
            String versionCode = String.format("%d.%d", Integer.parseInt(versionDesc)/10000,
                    Integer.parseInt(versionDesc)%10000);
            Toast.makeText(this, "系统的OpenGL ES版本号为"+versionCode, Toast.LENGTH_SHORT).show();
        }
    
        // 初始化样式下拉框
        private void initStyleSpinner() {
            ArrayAdapter<String> styleAdapter = new ArrayAdapter<>(this,
                    R.layout.item_select, styleArray);
            Spinner sp_style = findViewById(R.id.sp_style);
            sp_style.setPrompt("请选择三角形样式");
            sp_style.setAdapter(styleAdapter);
            sp_style.setOnItemSelectedListener(new StyleSelectedListener());
            sp_style.setSelection(0);
        }
    
        private String[] styleArray = { "只画线条", "绘制纯色表面", "绘制彩色表面" };
        class StyleSelectedListener implements AdapterView.OnItemSelectedListener {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                mStyle = arg2;
                glsv_content.requestRender(); // 主动请求渲染操作
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
        // 定义一个三维图形的渲染器
        private class ShaderRender implements GLSurfaceView.Renderer {
            // 在表面创建时触发
            @Override
            public void onSurfaceCreated(GL10 gl, EGLConfig config) {
                // 设置白色背景。0.0f相当于00，1.0f相当于FF
                GLES30.glClearColor(1f, 1f, 1f, 1);
                // 初始化着色器
                mProgramId = GlUtil.initShaderProgram(EsShaderActivity.this, "shader_vertex.glsl", "shader_fragment.glsl");
            }
    
            // 在表面变更时触发
            @Override
            public void onSurfaceChanged(GL10 gl, int width, int height) {
                GLES30.glViewport(0, 0, width, height); // 设置输出屏幕大小
                // 开启剔除操作。开启之后才能调用glCullFace方法禁止光照、阴影和颜色等效果，以消除不必要的渲染计算。
                GLES30.glEnable(GLES30.GL_CULL_FACE);
            }
    
            // 执行框架绘制动作
            @Override
            public void onDrawFrame(GL10 gl) {
                // 清除屏幕和深度缓存
                GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT | GLES30.GL_DEPTH_BUFFER_BIT);
                GLES30.glLineWidth(3); // 指定线宽
                drawTriangle(); // 绘制三角形
            }
        }
    
        // 绘制三角形
        private void drawTriangle() {
            FloatBuffer vertexBuffer = GlUtil.getFloatBuffer(mCoordArray);
            FloatBuffer colorBuffer;
            if (mStyle == 2) { // 绘制彩色表面
                colorBuffer = GlUtil.getFloatBuffer(mColorFullArray);
            } else { // 绘制纯色表面
                colorBuffer = GlUtil.getFloatBuffer(mColorPureArray);
            }
            // 获取顶点着色器的vPosition位置（来自shader_vertex.glsl）
            int positionLoc = GLES30.glGetAttribLocation(mProgramId, "vPosition");
            // 获取片段着色器的vColor位置（来自shader_vertex.glsl）
            int colorLoc = GLES30.glGetAttribLocation(mProgramId, "inColor");
            GLES30.glEnableVertexAttribArray(positionLoc); // 启用顶点属性数组
            GLES30.glEnableVertexAttribArray(colorLoc); // 启用顶点属性数组
            // 指定顶点属性数组的位置信息
            GLES30.glVertexAttribPointer(positionLoc, 3, GLES30.GL_FLOAT, false, 0, vertexBuffer);
            // 指定顶点属性数组的颜色信息
            GLES30.glVertexAttribPointer(colorLoc, 4, GLES30.GL_FLOAT, false, 0, colorBuffer);
            if (mStyle == 0) { // 只绘制线条
                // 绘制物体的轮廓线条
                GLES30.glDrawArrays(GLES30.GL_LINE_LOOP, 0, mCoordArray.length/3);
            } else { // 也绘制表面
                // 绘制物体的轮廓表面
                GLES30.glDrawArrays(GLES30.GL_TRIANGLES, 0, mCoordArray.length/3);
            }
            GLES30.glDisableVertexAttribArray(colorLoc); // 禁用顶点属性数组
            GLES30.glDisableVertexAttribArray(positionLoc); // 禁用顶点属性数组
        }
    
    }

### XML文件 ###

**创作不易 觉得有帮助请点赞关注收藏~~~**

[614a4b0a9280449a9a8ac0a1ef0e6548.png]: https://img-blog.csdnimg.cn/614a4b0a9280449a9a8ac0a1ef0e6548.png
[24de883589ad4a9199e50e963aa616df.jpeg]: https://img-blog.csdnimg.cn/24de883589ad4a9199e50e963aa616df.jpeg
[4f47b122c87d4a9bbe36035e65e87865.jpeg]: https://img-blog.csdnimg.cn/4f47b122c87d4a9bbe36035e65e87865.jpeg
[c39286ca8a5846998c09479c0169fd43.jpeg]: https://img-blog.csdnimg.cn/c39286ca8a5846998c09479c0169fd43.jpeg