前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >OpenGL ES 3.0 简介

OpenGL ES 3.0 简介

作者头像
103style
发布于 2022-12-19 05:17:19
发布于 2022-12-19 05:17:19
1.4K03
代码可运行
举报
运行总次数:3
代码可运行

转载请以链接形式标明出处: 本文出自:103style的博客

OpenGL ES 3.0学习汇总

简介

  • OpenGL ES (OpenGL for Emberdded Systems)是以 手持嵌入式设备 为目标的高级3D图形应用编程接口(API)。
  • Android 4.3 +iPhone 5s + 已经支持OpenGL ES 3.0。
  • OpenGL ES 3.0 向后兼容 OpenGL ES 2.0
  • OpenGL ES 3.0 是从 OpenGL 3.3规范 衍生而来。

OpenGL ES 3.0 图形管线

OpenGL ES 3.0实现了具有 可编程着色功能 的图形管线,由 OpenGL ES 3.0 APIOpenGL ES 着色语言3.0规范 组成。 下图中深色背景的 顶点着色器片段着色器 为可编程阶段。

顶点着色器

顶点着色器 实现了顶点操作的通用可编程方法

顶点着色器的输入包括:

  • 着色器程序一一描述顶点上执行操作的顶点着色器程序源代码或者可执行文件。
  • 顶点着色器输人(或者属性)一一用顶点数组提供的每个顶点的数据。
  • 统一变量(uniform)一一顶点(或者片段)着色器使用的不变数据。
  • 采样器一一代表顶点着色器使用纹理的特殊统一变量类型。

下图是顶点着色器的输入输出模型。

顶点着色器取得一个位置及相关的颜色数据作为输入属性,用一个 4x4矩阵变换位置,并输出变换后的位置和颜色。

以下为顶点着色器示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#version 300 es   //提供着色语言的版本 必须出现在第一行
uniform mat4 u_mvpMatrix; # 统一变量 储存组合的模型视图和投影矩阵

in vec4 a_postion; # 顶点着色器输入的位置属性
in vec4 a_color;  # 顶点着色器输入的颜色属性

out vec4 v_color; # 顶点着色器输出的颜色属性
void main(){
  v_color = a_color; # 读取输入属性并写入输出属性上
  # 内建变量gl_Position 是自动声明的
  gl_Position = u_mvpMatrix * a_postion; # 变换后的位置写入gl_Positon输出
}

mat4 : 基本类型, 4 * 4浮点矩阵 vec4 : 基本类型,4分量浮点向量 uniform : 储存限定符,在图元处理中值不改变,统一变量组成了着色器、OpenGL ES 和 应用程序的链接。 in : 参数限定符,用于传入函数的函数参数 out : 参数限定符,用于传出函数,但是传入时没有初始化的参数

图元装配

OpenGL ES 3.0 图形管线,在 顶点着色器 之后就是 图元装配 了。 图元是 三角形、直线 或者 点精灵 等几何对象。 图元的每个顶点被发送到顶点着色器的不同拷贝,在图元装配期间,这些顶点被组合成图元。

对于每个图元,会抛弃图元不在 视锥体(屏幕可见的区域)内的部分,在视锥体内的区域的部分经过裁剪之后,将顶点位置转换为屏幕坐标。然后传递到管线的下一阶段 —— 光栅化阶段

光栅化

光栅化阶段 会绘制对应的 图元。 光栅化 是将 图元 转化为 二维片段 的过程,然后这些片段再由 片段着色器 处理。这些二维片段代表可在屏幕上绘制的像素。

下图为光栅化流程:

片段着色器

片段上的操作 实现了通用的可编程方法。

采用 如下输入 对每个光栅化阶段的片段执行这个着色器。

  • 着色器程序——描述片段上所执行操作的片段着色器程序源代码或者可执行文件。
  • 输入变量——光栅化单元用插值为每个片段生成的顶点着色器输出。
  • 统一变量——片段(或者顶点)着色器使用的不变数据。
  • 采样器——代表片段着色器所用纹理的特殊统一变量类型。

片段着色器可以抛弃片段,也可以生成一个或多个颜色值作为输出。 片段着色器一般只输出一个颜色值,在 渲染多重目标 的时候会为每一个渲染目标输出一个颜色值。 光栅化阶段 生成的 颜色深度模板屏幕坐标位置(Xw,Yw) 变成 OpenGL ES 3.0管线 逐片段操作 阶段的输入。

片段着色器示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#version 300 es  //提供着色语言的版本 
precision mediump float;  # 默认的精度限定符

in vec4 v_color; # 片段着色器的输入,即顶点着色器的输出
 
out vec4 fragColor; # 片段着色器的输出变量, 即传递到逐片段操作的颜色
void main()
{
   fragColor = v_color; # 输出颜色设置为输入颜色  片段着色器的输入在图元之间进行线性插值 然后传递给片段着色器
}

precision precision-qualifier type; precision : 可以用来确定默认精度修饰符, type可以是intfloat采样器类型precision-qualifier可以是lowp, mediump, 或者highp。任何其他类型和修饰符都会引起错误。包括全局变量声明,函数返回值声明,函数参数声明,和本地变量声明等。没有声明精度修饰符的变量将使用和它最近的precision语句中的精度。 highp: 精度和精度限定符,满足顶点语言的最低需求。 lowp: 精度和精度限定符,范围和精度低于mediump,但是任然能够表现所有颜色通道的所有颜色值。 mediump : 精度和精度限定符,范围和精度介于 highplowp之间。 FP = 浮点

FP范围

FP幅值范围

FP精度

整数范围 有符号

整数范围 无符号

highp

(2-126,2127)

0.0, (2-126,2127)

2-24

(2-31,231-1)

(0,232-1)

mediump

(2-14,214)

(2-14,214)

2-10

(2-15,215-1)

(0,216-1)

lowp

(-2,2)

(2-8,2)

2-8

(2-7,27-1)

(0,28-1)

逐片段操作

光栅化阶段生成的屏幕坐标为(Xw,Yw)的片段只能修改 帧缓冲区 中位置为(Xw,Yw)的像素。 下图描述了OpenGL ES 3.0 逐片段操作阶段。

  • 像素归属测试——确定帧缓区中的位置(Xw,Yw)的像素是不是归OpenGL ES 所有。被遮挡的像素则不属于OpenGL ES 的上下文,从而不显示这些像素。此过程在OpenGL ES 内部处理,不由开发人员控制
  • 剪裁测试—— 确定(Xw,Yw)是否位于OpenGL ES 状态的一部分的裁剪矩形范围内,抛弃范围之外的片段。
  • 模板测试、深度测试—— 这些测试在输入片段的 模板深度值 上进行 ,以确定片段是都该被拒绝。
  • 混合——将新生成的颜色和保存在帧缓冲区(Xw,Yw)位置的颜色值组合起来。
  • 抖动——用于最小化 因为使用有限精度在帧缓冲区中保存颜色值而产生的伪像。

在逐片段操作阶段的最后,片段 被拒绝 或者 在帧缓冲区(Xw,Yw)位置写入片段的颜色、深度或者模板值。 写入片段的颜色、深度或者模板值 取决于 启用的相应写入掩码。写入掩码可以更精细的控制写入的值。例如,可以设置颜色缓冲区的写入掩码 使得 任何红色值都不被写入到颜色缓冲区

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
OpenGL学习笔记(二)——渲染管线&着色语言
导语 :渲染管线(渲染流水线),一般由显示芯片(GPU)内部处理图形信号的并行处理单元组成。这些并行处理单元两两之间相互独立。不同的型号硬件上独立处理单元的数量有很大差异。 与CPU串行执行不同,渲染
MelonTeam
2018/01/04
2.1K0
OpenGL学习笔记(二)——渲染管线&着色语言
OpenGL ES 着色语言
OpenGL ES 3.0的顶点着色器和片段着色器第一行总是声明着色器版本。 # version 300 es 没有声明版本的表示用的 OpenGL ES着色语言的1.0版本,对应OpenGL ES 2.0。
103style
2022/12/19
6040
干货:OpenGL ES pipeline 简介
在移动应用开发过程中用到了 OpenGL ES 的相关知识,虽然 app 已经完成了相应的功能,但是始终觉得自己的认知与真实的 OpenGL ES 隔了一层薄雾,因此趁着周末有时间,彻底学习一下OpenGL ES。
字节流动
2021/12/20
1.4K0
干货:OpenGL ES pipeline 简介
OpenGL ES for Android 世界
大家好,本文是 iOS/Android 音视频专题的第五篇,该专题中 AVPlayer 项目代码将在 Github 进行托管,你可在微信公众号(GeekDev)后台回复资料 获取项目地址。
100001509164
2022/01/20
1.3K0
OpenGL ES for Android 世界
OpenGL ES 着色器语言丨音视频基础
我们在音视频基础主题专栏中关于渲染的文章里介绍了 OpenGL 和 OpenGL ES 的基础理论知识和相关 API,其中涉及到了一些简单 Shader 的使用,而编写 Shader 则需要用到 OpenGL Shader Language(后面简称 GLSL)和 OpenGL ES Shading Language(后面简称 GLSL ES)。
关键帧
2023/02/14
1.7K0
OpenGL ES 着色器语言丨音视频基础
Shader 入门:GLSL ES(运算符和限定符)
使用 uniform 限定符来表示一个统一且只读的全局变量,该变量为所有着色器所共用。
陈皮皮
2020/07/10
2.9K0
OpenGLES-02 绘制基本图元(点、线、三角形)
在绘制之前,我们需要了解下面的知识: 一、渲染管线 下图中展示整个OpenGL ES 2.0可编程渲染管线 渲染管线.png 图中Vertex Shader和Fragment Shader 是可编程
清墨
2018/05/07
2.3K0
OpenGLES-02 绘制基本图元(点、线、三角形)
OpenGL ES读书笔记(一)—初始庐山真面目
本文主要介绍了如何通过OpenGL ES 2.0实现一个简单的3D图形渲染。首先介绍了OpenGL ES 2.0的基本知识,然后通过一个实例展示了如何使用OpenGL ES 2.0实现一个三角形在屏幕上的渲染。在实例中,首先介绍了如何加载并编译着色器程序,然后定义了顶点缓冲区和片段缓冲区,使用OpenGL ES 2.0的API绘制一个三角形。通过不断地完善这个示例,我们可以看到OpenGL ES 2.0的强大功能,以及社区中丰富的资源。
MelonTeam
2018/01/04
1K0
OpenGL ES读书笔记(一)—初始庐山真面目
OpenGL ES简介
概述 在聊Android的View渲染流程中,通常会有一个比较核心的步骤:通过OpeGL ES接口调用GPU接口通知GPU绘制图形。其完整的流程:UI对象—->CPU处理为多维图形,纹理 —–通过Op
xiangzhihong
2018/01/26
2K0
从关键概念开始,万字带你轻松入门 WebGL
只要理解了 WebGL 背后的概念,学习 WebGL 并没有那么难。很多 WebGL 入门文章并没有介绍这些重要的概念,直接使用 WebGL 复杂的 API 开始渲染图形,很轻松就把入坑文变成了劝退文。这篇文章将会着重讲解这些概念,并一步步探究 WebGL 是如何渲染图片到屏幕的,理解这些重要的概念,将会大大降低学习曲线。
羽月
2022/10/08
2.1K0
从关键概念开始,万字带你轻松入门 WebGL
WebGL: 从 2D 开始
腾讯IVWEB团队
2017/10/13
5K0
WebGL: 从 2D 开始
webgl 基础
WebGL仅仅是一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。 WebGL在电脑的GPU中运行,每对方法中一个叫顶点着色器, 另一个叫片断着色器,并且使用一种和C或C++类似的强类型的语言 GLSL。 每一对组合起来称作一个 program(着色程序)
ronixiao
2022/08/08
1.4K0
OpenGL ES 2.0 (iOS)[01]: 一步从一个小三角开始
1). 三个什么端点(屏幕坐标点)? 要回答这个问题要先了解 OpenGL ES 的坐标系在屏幕上是怎样分布的:
半纸渊
2018/09/04
2.2K0
OpenGL ES 2.0 (iOS)[01]: 一步从一个小三角开始
OpenGL与OpenGL在移动端的应用
OpenGL首先我们从字面意思来理解:Open Graphics Library,开放的图形库,图形库自然是处理图形的,所以简单来说OpenGL就是用来处理图形的一个三方库。 稍微技术流一点,作如下解释:是用于渲染2D,3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。
清墨
2019/11/15
2.8K0
OpenGL与OpenGL在移动端的应用
干货 | 移动应用中使用OpenGL生成转场特效
作者简介 jzg,携程资深前端开发工程师,专注Android开发; zcc,携程高级前端开发工程师,专注iOS开发。 一、前言 随着移动端短视频的火热,音视频编辑工具在做内容类APP上的地位举足轻重。丰富的转场方式可以给短视频带来更多炫酷的效果,从而更好地赢得用户青睐。本议题主要包含了对OpenGL的简单介绍及相关API使用,GLSL着色器语言的基本使用,以及如何通过编写自定义的着色器程序来实现图片的转场效果。 二、为什么使用OpenGL以及使用的难点 2.1 为什么使用OpenGL 视频的转场效果离不开图
携程技术
2022/09/26
1.8K0
干货 | 移动应用中使用OpenGL生成转场特效
OpenGL ES 3.0 | 围绕HelloTriangle实战案例 展开 渲染流程分析
案例运行(绘制一个三角形)的基本步骤 【可以先看看文末的代码,结合文章内容去看, 理解了整个流程之后再来看这个步骤,会容易很多】 用EGL创建屏幕上的渲染表面(Android直接用一个GLSurfaceView) 加载顶点、片段着色器 创建一个程序对象, 连接顶点、片段着色器, 并链接程序对象; 设置视口; 清除颜色缓冲区; 渲染简单图元 使颜色缓冲区的内容在EGL窗口表面(GLSurfaceView)中可见 着色器 在OpenGL ES 3.0中, 除非加载有效的顶点和片段着色器,否则不会绘
凌川江雪
2020/08/11
1.6K0
OpenGL ES 3.0 | 围绕HelloTriangle实战案例 展开 渲染流程分析
OpenGL ES Shading Language 2.0 参考笔记
声明 struct matStruct { vec4 ambientColor; vec4 diffuseColor; vec4 specularColor; float specularExponent; };
用户2615200
2018/08/02
7870
OpenGL 系列---基础绘制流程
OpenGL 是一种应用程序编程接口,它是一种可以对图形硬件设备特性进行访问的软件库。
音视频开发进阶
2019/07/26
1.9K0
图元装配和光栅化
图元可以用 glDrawArrays、glDrawElements、glDrawRangeElements、glDrawArraysInstanced、glDrawElementsInstanced 命令绘制的几何形状对象。
103style
2022/12/19
3.1K0
图元装配和光栅化
【前端可视化】 OpenGL / WebGL 入门和实践
OpenGL 是一套规范,不是接口,学习这套规范,就可以在支持 OpenGL 的机器上正常使用这些规范,在显示器上看到绘制的结果。
ConardLi
2019/10/24
4.7K1
相关推荐
OpenGL学习笔记(二)——渲染管线&着色语言
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验