OpenGL ES

学习OpenGL ES之纹理投影效果

本文将为大家介绍如何把一张纹理贴图投影到复杂的几何体上。下面是例子运行的结果。

学习OpenGL ES之纹理投影效果

下面是未开启纹理投影的效果图。
学习OpenGL ES之纹理投影效果

这张是用来投影的纹理图。
学习OpenGL ES之纹理投影效果

涉及到的重要知识点

• 基本几何体的渲染
• 法线贴图
• 纹理坐标
• 投影矩阵

学习OpenGL ES之渲染到纹理

本文将介绍渲染到纹理技术。之前的例子都是将3D物体渲染到屏幕上,在iOS中GLKView为我们做好了渲染到屏幕的所有准备工作,我们只需要调用Open GL ES的绘制方法就可以轻松的渲染到屏幕。那么我们接下来了解一下GLKView为我们做了哪些准备工作。

FrameBuffer

FrameBuffer是OpenGL ES中重要基础组件之一,经常被缩写成FBO(FrameBufferObject),它用来承载GPU计算出来的数据,包括颜色(Color),深度(Depth),遮罩(Stencil)。FrameBuffer包括3个缓冲区,颜色缓冲区,深度缓冲区,遮罩缓冲区,每个缓冲区就是一块内存,存储着对应的像素数据。比如颜色缓冲区,一般像素格式都是RGBA,一共4个字节,如果是一个大小1024乘以1024的FrameBuffer,那么颜色缓冲区所占的内存就是1024x1024x4个字节。深度和遮罩缓冲区也有自己的格式。GLKView默认为我们创建了一个FrameBuffer,并且绑定了刚才说的3个缓冲区到这个FrameBuffer上。我们所有绘制的操作,最终都被写入到这个FrameBuffer的缓冲区中。这个FrameBuffer里的颜色缓冲区的数据最终会被呈现在GLKView上。

学习OpenGL ES之基本纹理

纹理通常来说就是一张图片,我们为每一个顶点指定纹理坐标,然后就可以在Shader中获取相应的纹理像素点颜色了。

纹理坐标

首先解释一下什么是纹理坐标。把一张图的左上角定为 0,0 点,长宽都定义为 1,剩余四个点的坐标就会如下图所示。这样就构成了纹理坐标系统。

学习OpenGL ES之基本纹理

一般使用 uv 来表示纹理坐标,uv 是一个二维向量 (u,v),u 和 v 的取值从 0 到 1 。我在代码中为每个顶点数据增加了2个
GLFloat 来表示 uv 的值。下面是 X 轴上平面的的代码。

- (void)drawXPlanes {
    static GLfloat triangleData[] = {
// X轴0.5处的平面
      0.5,  -0.5,    0.5f, 1,  0,  0, 0, 0,
      0.5,  -0.5f,  -0.5f, 1,  0,  0, 0, 1,

基于OpenGL ES实现多媒体全景渲染

近几年来,VR型的多媒体变得越来越常见。在YouTube上就有很多360度视频,很多地图产品也提供全景街道图。作为开发者,我们不禁要想如何实现多媒体的全景渲染呢?

其实,渲染VR的多媒体其实并不难,这里就以360度视频为例介绍一下。我也没有尝试过从头写一个360视频渲染库(目前能力和精力都不太允许),所以这篇博客其实是基于开源库的——
https://github.com/ashqal/MD360Player4Android 。此外,我不准备详细去介绍这个库怎么使用,而是基于它分析整个渲染流程。

全景视频一般由鱼眼镜头产生,鱼眼镜头的物理结构大致如下:

基于OpenGL ES实现多媒体全景渲染

最左边的就是一个曲面的镜头,光线就是从这里进入相机的。然后,光线经过一系列的光学结构,最终会映射到最右边的成像面上,也就是CMOS传感器阵列上。从图中可以看出,边缘的光线会被压缩,这是广视角导致的。下面这张图可以非常直观的体现这种图像映射关系。

学习OpenGL ES之法线贴图

本文将给大家介绍法线贴图的相关知识,在游戏中由于GPU资源有限,尤其是在移动设备中,所以无法使用大量的三角形来表示3D模型的细节。这时候法线贴图就成为了折中的渲染方案,既能够带来不错的细节表现效果,还可以减少资源的消耗。

未使用法线贴图的Cube

学习OpenGL ES之法线贴图

使用了法线贴图的Cube
学习OpenGL ES之法线贴图

通过上面的图可以看出,法线贴图给Cube表面增加了很多光照上的细节。

什么是法线贴图

学习OpenGL ES之高级光照

基本光照中为大家介绍了环境光和漫反射光构成的基本光照模型。本文将为大家介绍Blinn-Phong光照模型,通过环境光,漫反射光和高光渲染出更加真实的物体。

学习OpenGL ES之高级光照

Blinn-Phong光照模型分为三个部分,环境光,漫反射光,高光(也可以理解为镜面反射光),将这三种光和物体本来的颜色融合,就可以计算出最终的颜色了。下面我们先来介绍这三种光的物理含义。

环境光

学习OpenGL ES之激光特效

本文主要介绍如何使用2个四边形实现一个简单的激光效果。下面是最终效果图。

学习OpenGL ES之激光特效

在了解激光实现原理之前,先介绍一下我对上一篇文章的代码进行的简单重构。我把OpenGL关键性的代码都集成到了
GLContext 类中。

#import <GLKit/GLKit.h>

@interface GLContext : NSObject
@property (assign, nonatomic) GLuint program;
+ (id)contextWithVertexShaderPath:(NSString *)vertexShaderPath fragmentShaderPath:(NSString *)fragmentShaderPath;
- (id)initWithVertexShader:(NSString *)vertexShader fragmentShader:(NSString *)fragmentShader;

学习OpenGL ES之基本光照

本文主要介绍如何使用Shader实现平行光的效果。什么是平行光呢?我们可以拿激光做比喻,平行光的方向不会随着离光源的距离而改变。所以我们在模拟平行光的时候仅仅需要使用一个光照方向即可。

我们有了光照方向,接下来还需要一个重要数据,平面的朝向。一个平面如果刚好面朝光线,那自然是最亮的。当然还有些材质的平面可以反射光线,反射光线的强度和你观察的角度相关,不过这些本文都不会介绍。后面会有专门一篇介绍复杂的光照模型。

我们用法线向量来表示平面朝向,在具体实现中,每个点都会有一个法线向量。所谓法线向量就是垂直于平面的一个三维向量,如下图所示。

垂直于平面的一个三维向量

图中展示了两种法线向量的表示方法,左边是每个多边形的每个点有一个法线向量,右边是每个点有一个法线向量,共享点的法线向量是这个点在所有平面上的法线向量之和。法线向量应该总是被规范化成单位向量。本文的例子中使用的是左边的方式。

有了法线向量和光照方向之后,只要将它们相乘即可得到光照强度。接下来开始分析代码。

我的OpenGL ES学习之路(一):GLSL着色器语言

着色器语言

GLSL即 OpenGL Shading Language,着色器语言,是和GPU打交道的语言,GLSL的语法比较像C语言。

版本

OpenGL ES的顶点着色器和片段着色器的第一行声明GLSL的版本:

#version 300 es // 使用3.0版本
如果没有声明版本号,则会认为使用1.0版本,着色器的1.0版本用于OpenGL ES 2.0,从OpenGL ES 3.0 开始,规范匹配API和着色器语言的版本号,所以版本才从1.0跳到3.0。

数据类型

基本数据类型

GLSL有三种基本数据类型:float,int,bool,还有由这三种数据类型组成的数组和结构体。

float myFloat = 1.0;
float floatArray[4];
float a[4] = float[](1.0, 2.0, 3.0, 4.0);
float b[4] = float[4](1.0. 2.0, 3.0, 4.0);

Vulkan vs OpenGL ES:PowerVR 3D卫星导航APP

PowerVR架构能快速支持最新的技术,Vulkan API便是实证。Vulkan是一款现代的API,使开发人员能够获得底层图像硬件的“低级”访问权限,确保硬件性能的最大化。

任何需要显示大量数据的应用程序(如导航软件)便是Vulkan的绝佳使用案例。导航应用程序需要大量的后台处理,使大量的相关信息尽可能以较高的帧速率进行渲染。在这里,我将详细介绍最新的卫星导航演示系统,我将阐述其如何利用Vulkan图像API、对比Vulkan与OpenGL ES的性能、阐释为何PowerVR适合运行这类使用了现代图像API(如Vulkan)的程序。

Vulkan and OpenGL ES

首先,让我们先回顾Vulkan和OpenGL ES之间的差异。与OpenGL ES相比,Vulkan基本上设计有完全和明确的控制,其中包括对多线程分布工作负载的严格控制。

同步内容
--电子创新网--
粤ICP备12070055号