OpenGL 渲染篇

最新推荐文章于 2025-09-10 23:21:47 发布
最新推荐文章于 2025-09-10 23:21:47 发布 · 646 阅读 · 2
文章标签：

#移动开发

前面讨论了如何给3D图形染色，更一般的情况是使用位图来给Mesh上色（渲染材质）。主要步骤如下：

创建Bitmap对象

使用材质渲染，首先需要构造用来渲染的Bitmap对象，Bitmap对象可以从资源文件中读取或是从网络下载或是使用代码构造。为简单起见，本例从资源中读取：

1
2
Bitmap bitmap = BitmapFactory.decodeResource(contect.getResources(),
R.drawable.icon);

要注意的是，有些设备对使用的Bitmap的大小有要求，要求Bitmap的宽度和长度为2的几次幂（1，2，4，8，16，32，64.。。。)，如果使用不和要求的Bitmap来渲染，可能只会显示白色。

创建材质(Generating a texture)

下一步使用OpenGL库创建一个材质(Texture)，首先是获取一个Texture Id。

1
2
3
4
5
// Create an int array with the number of textures we want,
// in this case 1.
int[] textures =newint[1];
// Tell OpenGL to generate textures.
gl.glGenTextures(1, textures,0);

textures中存放了创建的Texture ID，使用同样的Texture Id ，也可以来删除一个Texture：

1
2
// Delete a texture.
gl.glDeleteTextures(1, textures,0)

有了Texture Id之后，就可以通知OpenGL库使用这个Texture：

1
gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

设置Texture参数glTexParameter

下一步需要给Texture填充设置参数，用来渲染的Texture可能比要渲染的区域大或者小，这是需要设置Texture需要放大或是缩小时OpenGL的模式：

1
2
3
4
5
6
7
8
9
// Scale up if the texture if smaller.
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_MAG_FILTER,
GL10.GL_LINEAR);
// scale linearly when image smalled than texture
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_MIN_FILTER,
GL10.GL_LINEAR);

常用的两种模式为GL10.GL_LINEAR和GL10.GL_NEAREST。

需要比较清晰的图像使用GL10.GL_NEAREST：

而使用GL10.GL_LINEAR则会得到一个较模糊的图像：

UV Mapping

下一步要告知OpenGL库如何将Bitmap的像素映射到Mesh上。这可以分为两步来完成：

定义UV坐标

UV Mapping指将Bitmap的像素映射到Mesh上的顶点。UV坐标定义为左上角（0，0），右下角（1，1）（因为使用的2D Texture)，下图坐标显示了UV坐标，右边为我们需要染色的平面的顶点顺序：

为了能正确的匹配，需要把UV坐标中的（0，1）映射到顶点0，（1，1）映射到顶点2等等。

1
2
3
4
floattextureCoordinates[] = {0.0f,1.0f,
1.0f,1.0f,
0.0f,0.0f,
1.0f,0.0f };

如果使用如下坐标定义：

1
2
3
4
floattextureCoordinates[] = {0.0f,0.5f,
0.5f,0.5f,
0.0f,0.0f,
0.5f,0.0f };

Texture匹配到Plane的左上角部分。

而

1
2
3
4
floattextureCoordinates[] = {0.0f,2.0f,
2.0f,2.0f,
0.0f,0.0f,
2.0f,0.0f };

将使用一些不存在的Texture去渲染平面(UV坐标为0，0-1，1 而 (0,0)-(2,2)定义超过UV定义的大小），这时需要告诉OpenGL库如何去渲染这些不存在的Texture部分。

有两种设置

  • GL_REPEAT重复Texture。
  • GL_CLAMP_TO_EDGE只靠边线绘制一次。

下面有四种不同组合：

本例使用如下配置：

1
2
3
4
5
6
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_WRAP_S,
GL10.GL_REPEAT);
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_WRAP_T,
GL10.GL_REPEAT);

然后是将Bitmap资源和Texture绑定起来：

1
GLUtils.texImage2D(GL10.GL_TEXTURE_2D,0, bitmap,0);

使用Texture

为了能够使用上面定义的Texture，需要创建一Buffer来存储UV坐标：

1
2
3
4
5
FloatBuffer byteBuf = ByteBuffer.allocateDirect(texture.length *4);
byteBuf.order(ByteOrder.nativeOrder());
textureBuffer = byteBuf.asFloatBuffer();
textureBuffer.put(textureCoordinates);
textureBuffer.position(0);

渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Telling OpenGL to enable textures.
gl.glEnable(GL10.GL_TEXTURE_2D);
// Tell OpenGL where our texture is located.
gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
// Tell OpenGL to enable the use of UV coordinates.
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Telling OpenGL where our UV coordinates are.
gl.glTexCoordPointer(2, GL10.GL_FLOAT,0, textureBuffer);
// ... here goes the rendering of the mesh ...
// Disable the use of UV coordinates.
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Disable the use of textures.
gl.glDisable(GL10.GL_TEXTURE_2D);

本例代码是在一个平面上（SimplePlane）下使用Texture来渲染，首先是修改Mesh基类，使它能够支持定义UV 坐标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Our UV texture buffer.
privateFloatBuffer mTextureBuffer;
/**
* Set the texture coordinates.
*
* @param textureCoords
*/
protectedvoidsetTextureCoordinates(float[] textureCoords) {
// float is 4 bytes, therefore we multiply the number if
// vertices with 4.
ByteBuffer byteBuf = ByteBuffer.allocateDirect(
textureCoords.length *4);
byteBuf.order(ByteOrder.nativeOrder());
mTextureBuffer = byteBuf.asFloatBuffer();
mTextureBuffer.put(textureCoords);
mTextureBuffer.position(0);
}

并添加设置Bitmap和创建Texture的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// Our texture id.
privateintmTextureId = -1;
// The bitmap we want to load as a texture.
privateBitmap mBitmap;
/**
* Set the bitmap to load into a texture.
*
* @param bitmap
*/
publicvoidloadBitmap(Bitmap bitmap) {
this.mBitmap = bitmap;
mShouldLoadTexture =true;
}
/**
* Loads the texture.
*
* @param gl
*/
privatevoidloadGLTexture(GL10 gl) {
// Generate one texture pointer...
int[] textures =newint[1];
gl.glGenTextures(1, textures,0);
mTextureId = textures[0];
// ...and bind it to our array
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
// Create Nearest Filtered Texture
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER,
GL10.GL_LINEAR);
// Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S,
GL10.GL_CLAMP_TO_EDGE);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T,
GL10.GL_REPEAT);
// Use theAndroidGLUtils to specify a two-dimensional texture image
// from our bitmap
GLUtils.texImage2D(GL10.GL_TEXTURE_2D,0, mBitmap,0);
}

最后修改draw方法来渲染材质：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// Indicates if we need to load the texture.
privatebooleanmShouldLoadTexture =false;
/**
* Render the mesh.
*
* @param gl
* the OpenGL context to render to.
*/
publicvoiddraw(GL10 gl) {
...
// Smooth color
if(mColorBuffer !=null) {
// Enable the color array buffer to be used during rendering.
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
gl.glColorPointer(4, GL10.GL_FLOAT,0, mColorBuffer);
}
if(mShouldLoadTexture) {
loadGLTexture(gl);
mShouldLoadTexture =false;
}
if(mTextureId != -1&& mTextureBuffer !=null) {
gl.glEnable(GL10.GL_TEXTURE_2D);
// Enable the texture state
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Point to our buffers
gl.glTexCoordPointer(2, GL10.GL_FLOAT,0, mTextureBuffer);
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
}
gl.glTranslatef(x, y, z);
...
// Point out the where the color buffer is.
gl.glDrawElements(GL10.GL_TRIANGLES, mNumOfIndices,
GL10.GL_UNSIGNED_SHORT, mIndicesBuffer);
...
if(mTextureId != -1&& mTextureBuffer !=null) {
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
}
...
}

本例使用的SimplePlane定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
packagese.jayway.opengl.tutorial.mesh;
/**
* SimplePlane is a setup class for Mesh that creates a plane mesh.
*
* @author Per-Erik Bergman (per-erik.bergman@jayway.com)
*
*/
publicclassSimplePlaneextendsMesh {
/**
* Create a plane with a default with and height of 1 unit.
*/
publicSimplePlane() {
this(1,1);
}
/**
* Create a plane.
*
* @param width
* the width of the plane.
* @param height
* the height of the plane.
*/
publicSimplePlane(floatwidth,floatheight) {
// Mapping coordinates for the vertices
floattextureCoordinates[] = {0.0f,2.0f,//
2.0f,2.0f,//
0.0f,0.0f,//
2.0f,0.0f,//
};
short[] indices =newshort[] {0,1,2,1,3,2};
float[] vertices =newfloat[] { -0.5f, -0.5f,0.0f,
0.5f, -0.5f,0.0f,
-0.5f,0.5f,0.0f,
0.5f,0.5f,0.0f };
setIndices(indices);
setVertices(vertices);
setTextureCoordinates(textureCoordinates);
}
}

本例示例代码下载见http://www.linuxidc.com/Linux/2011-10/45756p8.htm，到本篇为止介绍了OpenGL ES开发的基本方法，更详细的教程将在以后发布，后面先回到AndroidApiDemos中OpenGL ES的示例。

前面简单介绍了OpenGL ES的开发：

  1. AndroidOpenGL ES 简明开发教程一：概述
  2. AndroidOpenGL ES 简明开发教程二：构造OpenGL ES View
  3. AndroidOpenGL ES 简明开发教程三：3D绘图基本概念
  4. AndroidOpenGL ES 简明开发教程四：3D 坐标变换
  5. AndroidOpenGL ES 简明开发教程五：添加颜色
  6. AndroidOpenGL ES 简明开发教程六： 真正的3D图形
  7. AndroidOpenGL ES 简明开发教程七：材质渲染

和2D图形相比，3D绘图要复杂的多，Android提供了OpenGL ES 3D 图形开发包，对应熟悉OpenGL开发的不会很难，但如果一直没有从事3D开发过，一时还不容易上手，因此暂时跳过Android ApiDemos 中后OpenGL相关的例子，计划将在后面详细介绍Android OpenGL ES开发，之后补上这部分例子。

ApiDemo 中 OpenGL ES 示例解析

Graphics/OpenGL ES/Compressed Texture
Graphics/OpenGL ES/Cube Map
Graphics/OpenGL ES/Frame Buffer Object
Graphics/OpenGL ES/GLSurfaceView
Graphics/OpenGL ES/Kube
Graphics/OpenGL ES/Matrix Palette Skinning
Graphics/OpenGL ES/OpenGL ES 2.0
Graphics/OpenGL ES/Sprite Text
Graphics/OpenGL ES/Textured Triangle
Graphics/OpenGL ES/Touch Rotate
Graphics/OpenGL ES/Translucent GLSurfaceView
Graphics/SurfaceView Overlay

本文全部源码下载：

免费下载地址在http://linux.linuxidc.com/

用户名与密码都是www.linuxidc.com

具体下载目录在/pub/Android源码集锦/2011年/10月/Android OpenGL ES 简明开发教程相关源码/

iteye_9368
关注
C++ Qt OpenGL渲染FFmpeg解码后的视频
琅嬛福地
02-26 1362
本篇博客介绍使用OpenGL渲染FFmpeg解码后的视频，涉及到QOpenGLWidget、QOpenGLFunctions、OpenGL shader以及纹理相关。
OpenGL渲染YUV实战：GPU加速转换与MipMap模糊效果实现
qq_44723937的博客
03-29 1013
本文介绍了使用Qt和OpenGL渲染YUV420P数据的方法，包括YUV到RGB的转换以及通过OpenGL实现画质模糊的技术。文章详细讲解了YUV420P的结构、OpenGL纹理处理、MipMap技术及其在模糊效果中的应用，并探讨了在OpenGL ES 2.0环境下的兼容性问题及解决方案。最后，提出了进一步优化性能的方向，如FFmpeg硬解码和零拷贝渲染技术。
opengl 渲染，可旋转+水印+显示文字
11-20
用opengl显示RGB数据，自己测试代码，虽杂乱但是比较简单，可以从中扣自己要的代码。
OpenGL渲染流程
weixin_34341117的博客
12-23 1039
一.什么是openGL OpenGL被定义为“图形硬件的一种软件接口”。从本质上说，它是一个3D图形和模型库，具有高度的可移植性，具有非常快的速度。 二.管线 管线这个术语描述了opengl渲染的整个过程。openGL采用cs模型：c是cpu，s是GPU，c给s的输入是vertex信息和Texture信息，s的输出是显示器上显示的图像。下面这2个图比较清楚的讲解了opengl的渲染管线。 ...
OpenGL的图片渲染
最新发布
WaWaJie的博客
09-10 753
本文介绍了OpenGL纹理处理的关键概念和技术流程。主要内容包括：1. UV坐标原理及两种纹理过滤方式（临近过滤和双线性插值）的对比选择；2. 纹理对象、采样器和纹理单元的关系；3. 四种纹理包裹属性（Repeat、Mirrored、ClampToEdge、ClampToBoarder）的特点；4. 纹理处理的完整流程：数据加载传输阶段（CPU到GPU）和纹理采样渲染阶段（GPU处理）。文章结合代码示例详细说明了如何实现纹理加载、坐标转换、参数设置以及着色器中的纹理采样过程，并提供了不同过滤方式和包裹属性的
入门OpenGL渲染
好好学习，天天向上
04-02 3196
先简单了解OpenGL渲染的基本原理，可以参考：LearnOpenGL CN 以下先对其作主要的摘录。 在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为2D像素。3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线（Graphics Pipeline）管理的。 图形渲染管线可以被划分为两个主要部分：第一部分把3D坐标转换为2D坐标，第二部分是把2D坐标转变为实际的有颜色的像素。 图形渲染管线可以被划分为几个阶段，每个阶段将
【OpenGL】渲染概览
躺平笔记
06-10 562
图形渲染概览及OpenGL快速入门
OpenGL 渲染
weixin_50873490的博客
11-19 1147
在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线（Graphics Pipeline，大多译为管线，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）管理的。图形渲染管线可以被划分为两个主要部分：第一部分把你的3D坐标转换为2D坐标，第二部分是把2D坐标转变为实际的有颜色的像素。
SampleYUVRenderer：通过QtOpenGL渲染YUV帧的非常基本的草图
02-04
《使用QtOpenGL渲染YUV帧：SampleYUVRenderer解析》 在计算机图形学领域，OpenGL是一种广泛使用的跨语言、跨平台的编程接口，用于渲染2D、3D矢量图形。在现代视频处理中，YUV色彩空间是常见的图像编码方式，尤其是...
Texample2:在Android的OpenGL ES 2中渲染文本
05-06
在Android的OpenGL ES 2中渲染文本。 通过中分形的代码的OpenGL ES 2端口。 根据CC0 1.0公共域许可证获得许可，因此可以自由使用它，没有任何限制。 如何使用 提供的代码包括Texample2和Texample2Renderer，它们...
鸿蒙5.0实战案例：基于OpenGL渲染视频画面帧
Maniu_666的博客
03-28 693
在napi 接口init的时候在Xcomponent的OnSurfaceCreatedCB回调中初始化渲染线程，通过OH_NativeImage_Create创建nativeImage。通过OH_NativeImage_SetOnFrameAvailableListener设置帧可用回调，通过NativeVsync接收系统信号，控制渲染。设置窗口：获取并设置属性SurfaceID，该surfaceId是native侧nativeImage的surfaceID，调用play方法开始播放。
8、OpenGL - 渲染框架
shengdaVolleyball的博客
07-12 1246
OpenGL 渲染架构 1、渲染架构 顶点着色器、片元着色器，可以自定义编程 图元装配、渲染，是我们不可以控制的 1.1、渲染流程 1、设置顶点数据和其他参数 2、在定点着色器中进行运算的到裁剪的坐标 3、细分着色器、几何着色器，不可自定义。 4、图元设置，根据设置构成点、线、三角形。 5、裁剪，裁剪掉超出显示区域的部分。 6、光栅化，将图源栅格化为一个个的像素点。 7、片元着色器，将应对的栅格（像素）填充为具体的颜色 8、渲染图像。 1.2、参数类型 将数据传给顶点着色..
OpenGL 渲染流程
xzben‘blog
04-11 4633
1、OpenGL是什么 OpenGL 是由 Khronos 组织制定并维护的一套图形渲染API规范合集，具体的功能实现是由各个显卡的开发厂商根据规范实现对应的功能。 由于OpenGL 是运行在 GPU(显卡)上的，而我们编写的程序都是运行在CPU上的，所以OpenGL的绘制过程就是在CPU操作GPU提供的API控制显卡这个状态机绘制图形的过程。 2、OpenGL 渲染流程 OpenGL 渲染的原理是将输入的3d坐标的顶点数据绘制成屏幕上的2D像素片段的过程。通过这句话...
OpenGL 学习笔记(二) 基础渲染
q1148811572的博客
11-13 816
OpenGL 渲染
opengl对着色器纹理坐标等的综合
Dosth_Magic
07-20 1131
#include #include #include #include #include "stb_image.h" void framebuffer_size_callback(GLFWwindow* window, int width, int height); void processInput(GLFWwindow *window); // settings const uns
opengl渲染流程
dizuo的专栏
12-09 4327
物体坐标系：物体位于坐标系原点位置。 视点坐标系：视点位于坐标系原点位置。                模型视图变换 物体坐标系 -------------  视点坐标系 最近不怎么看ogl了，但是总有一些东西是需要记忆的： add 2012/12/11 - dizuo / peteryfren 裁剪在投影时进行，透视投影的裁剪区域为棱锥，正交投影的裁剪区域为长方体。 标准坐标
Opengl ES之YUV数据渲染
u012944685的专栏
11-23 4132
YUV的格式比较多，我们今天就以YUV420SP为例，而YUV420SP又分为`NV12`和`NV21`两种，因此今天我们的主题就是如何使用Opengl ES对`NV12`和`NV21`数据进行渲染显示。
OpenGL渲染管线与坐标变换详解
"这篇教程详细介绍了OpenGL的渲染管线和坐标变换，旨在帮助初学者理解图形渲染的基本过程，解决关于坐标转换的问题。...这篇教程通过实例和详细解释，为初学者提供了理解OpenGL渲染管线和坐标变换的良好起点。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值