第三章 OpenGL ES 基础-基础-GLSL渲染纹理

2024-03-09 20:52

本文主要是介绍第三章 OpenGL ES 基础-基础-GLSL渲染纹理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第三章 OpenGL ES 基础-GLSL渲染纹理

第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标
第二章 OpenGL ES 基础-GLSL语法简单总结
第三章 OpenGL ES 基础-GLSL渲染纹理
第四章 OpenGL ES 基础-位移、缩放、旋转原理
第五章 OpenGL ES 基础-透视投影矩阵与正交投影矩阵

GLSL的shader介绍

vec4 :是四个分量的向量
mat4 :是4x4的浮点矩阵
渲染一张图片纹理写简单的shader

着色器分为两类:顶点着色器和片元着色器。

  1. 顶点着色器

    • 顶点着色器是一种处理输入顶点数据的着色器。它主要用于对每个顶点进行变换、投影和其他操作,以便将顶点从模型空间转换到裁剪空间。
    • 顶点着色器执行的操作包括顶点位置变换、法线变换、颜色插值等。这些操作影响顶点的最终呈现方式。
  2. 片元着色器

    • 片元着色器(也称为像素着色器)负责计算片元(像素)的颜色值。它通常在顶点着色器处理后的几何形状上运行,用于确定像素的最终颜色。
    • 片元着色器可以执行纹理采样、光照计算、阴影处理等操作,以确定每个像素最终的颜色输出。
//顶点坐标(原点为显示区域中心店)private final float[] vertexData  = {-1.0f, -1.0f,  //左下角1.0f, -1.0f,   //右下角-1.0f,  1.0f,  //左上角1.0f,  1.0f,   //右上角};//纹理坐标(原点为显示区域左下角)private final float[] textureData = {0.0f,  0.0f,     //左下角1.0f,  0.0f,     //右下角0.0f,  1.0f,     //左上角1.0f,  1.0f,     //右上角};String vertexSource ="attribute vec4 av_Position; // 顶点位置属性\n" +"attribute vec4 af_Position; // 纹理坐标属性 (S, T)\n" +"varying vec2 v_texPosition; // 传递给片段着色器的纹理坐标\n" +"uniform mat4 u_Matrix; // 投影矩阵\n" +"void main() {\n" +"    // 调整纹理坐标,将 y 坐标翻转(上下颠倒)\n" +"    v_texPosition = vec2(af_Position.x, 1.0 - af_Position.y);\n" +//"    v_texPosition = af_Position.xy;\n" +  // 另一种纹理坐标赋值方式"    gl_Position = u_Matrix * av_Position; // 计算最终顶点位置\n" +"}\n";String fragmentSource ="precision mediump float; // 浮点数精度\n" +"varying vec2 v_texPosition; // 接收来自顶点着色器的纹理坐标\n" +"uniform sampler2D sTexture; // 纹理采样器\n" +"\n" +"void main() {\n" +"    // 从纹理中获取像素颜色,并输出到屏幕\n" +"    gl_FragColor = texture2D(sTexture, v_texPosition);\n" +"}";

OpenGL线程加载顶点着色器和片元着色器

    public static int loadShader(int shaderType, String source){int shader = GLES20.glCreateShader(shaderType);if(shader != 0){GLES20.glShaderSource(shader, source);GLES20.glCompileShader(shader);int[] compile = new int[1];GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compile, 0);if(compile[0] != GLES20.GL_TRUE){Log.d("ywl5320", "shader compile error");GLES20.glDeleteShader(shader);shader = 0;}}return shader;}public static int createProgram(String vertexSource, String fragmentSource){int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexSource);if(vertexShader == 0){return 0;}int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);if(fragmentShader == 0){return 0;}int program = GLES20.glCreateProgram();if(program != 0){GLES20.glAttachShader(program, vertexShader);GLES20.glAttachShader(program, fragmentShader);GLES20.glLinkProgram(program);int[] linsStatus = new int[1];GLES20.glGetProgramiv(program, GLES20.GL_LINK_STATUS, linsStatus, 0);if(linsStatus[0] != GLES20.GL_TRUE){Log.d("ywl5320", "link program error");GLES20.glDeleteProgram(program);program = 0;}}return  program;}program =createProgram(vertexSource, fragmentSource);avPosition = GLES20.glGetAttribLocation(program, "av_Position");afPosition = GLES20.glGetAttribLocation(program, "af_Position");samplerOES = GLES20.glGetUniformLocation(program, "sTexture");umatrix = GLES20.glGetUniformLocation(program, "u_Matrix");

根据代码片段中的 glGetAttribLocationglGetUniformLocation 这些函数,我们可以得出以下推导:

  1. 针对 avPositionafPosition

    • glGetAttribLocation 函数用于获取着色器程序对象中顶点属性的位置。
    • 由于 avPositionafPosition 分别表示顶点着色器中的属性变量,可能代表顶点位置等。
    • 若要加载一个 vec4 类型的属性,通常在顶点着色器中会使用类似 attribute vec4 av_Position; 的语法声明。
  2. 针对 samplerOES

    • glGetUniformLocation 函数用于获取着色器程序对象中统一变量的位置。
    • 由于 samplerOES 在这里被用作 uniform 变量,它可能代表一个纹理采样器(sampler)。
    • 对于纹理采样器,在片元着色器中通常使用 sampler2D 或其他类型的采样器来进行纹理采样。
  3. 针对 umatrix

    • 同样是通过 glGetUniformLocation 获取的位置,可能表示一个矩阵变量。
    • 命名为 u_Matrix 通常用于传递变换矩阵给着色器,比如模型视图投影矩阵等。
    • 在 GLSL 着色器代码中,该矩阵可能被声明为 uniform mat4 u_Matrix;

bitmap data数据原点(0,0)放在左上角位置,而OpenGL的纹理坐标纹理坐标原点(0,0)在左下角

/*** Creates a texture from bitmap.*创建一个图片纹理,上下颠倒* @param bmp bitmap data  bitmap data数据原点(0,0)放在左上角位置,而OpenGL的纹理坐标纹理坐标原点(0,0)在左下角* @return Handle to texture.**/public static int createImageTexture(Bitmap bmp) {int[] textureHandles = new int[1];int textureHandle;GLES20.glGenTextures(1, textureHandles, 0);textureHandle = textureHandles[0];// Bind the texture handle to the 2D texture target.GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle);// Configure min/mag filtering, i.e. what scaling method do we use if what we're rendering// is smaller or larger than the source image.GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_LINEAR);GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);// Load the data from the buffer into the texture handle.GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, /*level*/ 0, bmp, 0);return textureHandle;}

这段代码主要完成了以下操作:

  • 清除颜色缓冲区并设置清除颜色为黑色。
  • 使用指定的着色器程序。
  • 通过 glUniformMatrix4fv 函数将一个 4x4 矩阵传递给着色器中的 uniform 变量 u_Matrix
  • 配置顶点属性数据并启用顶点属性数组。
  • 激活并绑定纹理对象,将纹理单元索引传递给纹理采样器的 uniform 变量。
  • 最后,使用 glDrawArrays 绘制四边形(采用三角形带方式)。

这些步骤一起实现了对图像的绘制渲染过程。

    public void onDrawFrame(GL10 gl) {// 清除颜色缓冲区,将整个屏幕清除为黑色
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // 设置清除颜色为黑色// 使用着色器程序
GLES20.glUseProgram(program);// 将变换矩阵传递给着色器中的u_Matrix uniform 变量
GLES20.glUniformMatrix4fv(umatrix, 1, false, matrix, 0);// 启用顶点属性数组 avPosition
GLES20.glEnableVertexAttribArray(avPosition);
// 指定 avPosition 的数据格式和数据源
GLES20.glVertexAttribPointer(avPosition, 2, GLES20.GL_FLOAT, false, 8, vertexBuffer);// 启用顶点属性数组 afPosition
GLES20.glEnableVertexAttribArray(afPosition);
// 指定 afPosition 的数据格式和数据源
GLES20.glVertexAttribPointer(afPosition, 2, GLES20.GL_FLOAT, false, 8, textureBuffer);// 激活纹理单元 0
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
// 将纹理对象绑定到当前活动纹理单元上
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, bitmapId);
// 将纹理单元索引传递给 samplerOES uniform 变量
GLES20.glUniform1i(samplerOES, 0);// 绘制图形,使用当前绑定的着色器程序和设置的顶点数据
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);}

总结:

在 OpenGL 中,线程调用 GLSL(OpenGL Shading Language)时通常需要注意一些关联问题,以确保正确的操作和流程。以下是一些关于 OpenGL 线程和 GLSL 关联的注意事项:

  1. GLSL 着色器编译

    • 在一个线程中加载、编译和链接 GLSL 着色器程序。
    • 确保着色器程序在正确的上下文中创建,并且每个着色器程序都与合适的 OpenGL 上下文相关联。
  2. Uniform 和 Attribute 数据传递

    • 在执行渲染操作之前,要确保将 uniform 变量和顶点属性数据传递给 GLSL 着色器程序。
    • 这些数据应该在绑定了正确的 OpenGL 上下文后传递,以便着色器能够访问这些数据。
  3. 纹理操作

    • 当涉及到纹理操作时,需要确保纹理对象绑定到正确的纹理单元,并在正确的上下文中进行操作。
    • 必须小心处理纹理对象的状态和绑定。
      在这里插入图片描述

完整代码

package com.mg.cc.opengldemo;import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.SurfaceTexture;
import android.media.MediaPlayer;
import android.opengl.GLES11Ext;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.GLUtils;
import android.opengl.Matrix;
import android.util.Log;
import android.view.Surface;import com.mg.cc.opengldemo.utils.BitmapUtils;import java.io.BufferedOutputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;public class BitmapRender implements GLSurfaceView.Renderer {String vertexSource ="attribute vec4 av_Position;\n" +"attribute vec4 af_Position;//S T 纹理坐标\n" +"varying vec2 v_texPosition;\n" +"uniform mat4 u_Matrix;\n" +"void main() {\n" +"    v_texPosition = vec2(af_Position.x, 1.0 - af_Position.y);\n"+//上下颠倒//  "    v_texPosition= af_Position.xy;\n" +"    gl_Position = u_Matrix*av_Position ;\n" +"}\n";String fragmentSource ="precision mediump float;\n" +"varying vec2 v_texPosition;\n" +"uniform sampler2D sTexture;\n" +"\n" +"void main() {\n" +"    gl_FragColor=texture2D(sTexture, v_texPosition);\n" +"}";public static final int NO_TEXTURE = -1;private int screenWidth, screenHeight;private MediaPlayer mediaPlayer;private Context context;//顶点旋转private int umatrix;private float[] matrix = new float[16];//    private final float[] vertexData = {
//
//            1f, -1f,//右下角
//            -1f, -1f,//左下角
//            1f, 1f, //右上角
//            -1f, 1f //左上角
//
//    };
//    private final float[] textureData = {
//            1f, 0f, //右下角
//            0f, 0f,//左下角
//            1f, 1f,//右上角
//            0f, 1f //左上角
//    };//顶点坐标(原点为显示区域中心店)private final float[] vertexData  = {-1.0f, -1.0f,  //左下角1.0f, -1.0f,   //右下角-1.0f,  1.0f,  //左上角1.0f,  1.0f,   //右上角};//纹理坐标(原点为显示区域左下角)private final float[] textureData = {0.0f,  0.0f,     //左下角1.0f,  0.0f,     //右下角0.0f,  1.0f,     //左上角1.0f,  1.0f,     //右上角};private FloatBuffer vertexBuffer;private FloatBuffer textureBuffer;//mediacodecprivate int program;private int avPosition;private int afPosition;private int samplerOES;private int bitmapId;private int videoWidth;private int videoHeight;public BitmapRender(Context context, GLSurfaceView surfaceView) {this.context = context;vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer().put(vertexData);vertexBuffer.position(0);textureBuffer = ByteBuffer.allocateDirect(textureData.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer().put(textureData);textureBuffer.position(0);surfaceView.setEGLContextClientVersion(2);surfaceView.setRenderer(this);//设置renderersurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);}@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {program =createProgram(vertexSource, fragmentSource);avPosition = GLES20.glGetAttribLocation(program, "av_Position");afPosition = GLES20.glGetAttribLocation(program, "af_Position");samplerOES = GLES20.glGetUniformLocation(program, "sTexture");umatrix = GLES20.glGetUniformLocation(program, "u_Matrix");Bitmap bitmap= BitmapUtils.getImageFromAssetsFile(context,"bg.png");videoWidth=bitmap.getWidth();videoHeight=bitmap.getHeight();bitmapId = createImageTexture(bitmap);bitmap.recycle();}@Overridepublic void onSurfaceChanged(GL10 gl, int width, int height) {GLES20.glViewport(0, 0, width, height);screenWidth = width;screenHeight = height;if (videoWidth != 0 && videoHeight != 0){updateProjection(videoWidth, videoHeight);}}// FilterRender object3D;@Overridepublic void onDrawFrame(GL10 gl) {GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);GLES20.glUseProgram(program);GLES20.glUniformMatrix4fv(umatrix, 1, false, matrix, 0);GLES20.glEnableVertexAttribArray(avPosition);GLES20.glVertexAttribPointer(avPosition, 2, GLES20.GL_FLOAT, false, 8, vertexBuffer);GLES20.glEnableVertexAttribArray(afPosition);GLES20.glVertexAttribPointer(afPosition, 2, GLES20.GL_FLOAT, false, 8, textureBuffer);GLES20.glActiveTexture(GLES20.GL_TEXTURE0);GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, bitmapId);GLES20.glUniform1i(samplerOES, 0);GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);}public void saveFrame()  {ByteBuffer buf = ByteBuffer.allocateDirect(screenWidth * screenHeight * 4);buf.order(ByteOrder.LITTLE_ENDIAN);GLES20.glReadPixels(0, 0, screenWidth, screenHeight,GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, buf);buf.rewind();try {Bitmap bmp = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888);bmp.copyPixelsFromBuffer(buf);String filePath = "/storage/emulated/0/DCIM/111.jpg";saveBitmap( filePath,bmp);bmp.recycle();} finally {}}/*** 保存图片* @param filePath* @param bitmap*/public static void saveBitmap(String filePath, Bitmap bitmap) {if (bitmap == null) {return;}BufferedOutputStream bos = null;try {bos = new BufferedOutputStream(new FileOutputStream(filePath));bitmap.compress(Bitmap.CompressFormat.JPEG, 100, bos);bitmap.recycle();} catch (FileNotFoundException e) {e.printStackTrace();} finally {if (bos != null) try {bos.close();} catch (IOException e) {// do nothing}}}public void updateProjection(int videoWidth, int videoHeight) {float screenRatio = (float) screenWidth / screenHeight;this.videoWidth = videoWidth;this.videoHeight = videoHeight;float videoRatio = (float) videoWidth / videoHeight;if (videoRatio > screenRatio) {Matrix.orthoM(matrix, 0, -1f, 1f, -videoRatio / screenRatio, videoRatio / screenRatio, -1f, 1f);} else {Matrix.orthoM(matrix, 0, -screenRatio / videoRatio, screenRatio / videoRatio, -1f, 1f, -1f, 1f);}}public static int loadShader(int shaderType, String source){int shader = GLES20.glCreateShader(shaderType);if(shader != 0){GLES20.glShaderSource(shader, source);GLES20.glCompileShader(shader);int[] compile = new int[1];GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compile, 0);if(compile[0] != GLES20.GL_TRUE){Log.d("ywl5320", "shader compile error");GLES20.glDeleteShader(shader);shader = 0;}}return shader;}public static int createProgram(String vertexSource, String fragmentSource){int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexSource);if(vertexShader == 0){return 0;}int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);if(fragmentShader == 0){return 0;}int program = GLES20.glCreateProgram();if(program != 0){GLES20.glAttachShader(program, vertexShader);GLES20.glAttachShader(program, fragmentShader);GLES20.glLinkProgram(program);int[] linsStatus = new int[1];GLES20.glGetProgramiv(program, GLES20.GL_LINK_STATUS, linsStatus, 0);if(linsStatus[0] != GLES20.GL_TRUE){Log.d("ywl5320", "link program error");GLES20.glDeleteProgram(program);program = 0;}}return  program;}/*** Creates a texture from bitmap.*创建一个图片纹理,上下颠倒* @param bmp bitmap data  bitmap data数据原点(0,0)放在左上角位置,而OpenGL的纹理坐标纹理坐标原点(0,0)在左下角* @return Handle to texture.**/public static int createImageTexture(Bitmap bmp) {int[] textureHandles = new int[1];int textureHandle;GLES20.glGenTextures(1, textureHandles, 0);textureHandle = textureHandles[0];// Bind the texture handle to the 2D texture target.GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle);// Configure min/mag filtering, i.e. what scaling method do we use if what we're rendering// is smaller or larger than the source image.GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_LINEAR);GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);// Load the data from the buffer into the texture handle.GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, /*level*/ 0, bmp, 0);return textureHandle;}}

这篇关于第三章 OpenGL ES 基础-基础-GLSL渲染纹理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/791921

相关文章

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C 语言基础之数组

文章目录 什么是数组数组变量的声明多维数组 什么是数组 数组,顾名思义,就是一组数。 假如班上有 30 个同学,让你编程统计每个人的分数,求最高分、最低分、平均分等。如果不知道数组,你只能这样写代码: int ZhangSan_score = 95;int LiSi_score = 90;......int LiuDong_score = 100;int Zhou

c++基础版

c++基础版 Windows环境搭建第一个C++程序c++程序运行原理注释常亮字面常亮符号常亮 变量数据类型整型实型常量类型确定char类型字符串布尔类型 控制台输入随机数产生枚举定义数组数组便利 指针基础野指针空指针指针运算动态内存分配 结构体结构体默认值结构体数组结构体指针结构体指针数组函数无返回值函数和void类型地址传递函数传递数组 引用函数引用传参返回指针的正确写法函数返回数组

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是

【MRI基础】TR 和 TE 时间概念

重复时间 (TR) 磁共振成像 (MRI) 中的 TR(重复时间,repetition time)是施加于同一切片的连续脉冲序列之间的时间间隔。具体而言,TR 是施加一个 RF(射频)脉冲与施加下一个 RF 脉冲之间的持续时间。TR 以毫秒 (ms) 为单位,主要控制后续脉冲之前的纵向弛豫程度(T1 弛豫),使其成为显著影响 MRI 中的图像对比度和信号特性的重要参数。 回声时间 (TE)

Java基础回顾系列-第七天-高级编程之IO

Java基础回顾系列-第七天-高级编程之IO 文件操作字节流与字符流OutputStream字节输出流FileOutputStream InputStream字节输入流FileInputStream Writer字符输出流FileWriter Reader字符输入流字节流与字符流的区别转换流InputStreamReaderOutputStreamWriter 文件复制 字符编码内存操作流(

Java基础回顾系列-第五天-高级编程之API类库

Java基础回顾系列-第五天-高级编程之API类库 Java基础类库StringBufferStringBuilderStringCharSequence接口AutoCloseable接口RuntimeSystemCleaner对象克隆 数字操作类Math数学计算类Random随机数生成类BigInteger/BigDecimal大数字操作类 日期操作类DateSimpleDateForma