通过OpenGL理解前端渲染原理(1)

一、OpenGL

OpenGL,是一套绘制3D图形的API,当然它也可以用来绘制2D的物体。OpenGL有一大套可以用来操作模型和图片的函数,通常编写OpenGL库的人是显卡的制造者。我们买的显卡都支持特定版本的OpenGL。

下图是用OpenGL做的旋转的立方体。

二、渲染原理

2.1 渲染管道

在OpenGL中,所有东西都在一个3D的空间里,而我们的屏幕和窗口都是2D的,所以OpenGL需要将3D的坐标转换成2D的坐标,做这件事的是OpenGL中的渲染管道(graphics pipeline)。

渲染管道可以分成两大部分:第一部分将3D坐标转换成2D坐标;第二部分把2D的坐标转换成实际的像素。

2.2 着色器

通常来说,渲染管道把一组3D坐标转换成屏幕上带有颜色的2D像素需要经过很多步。上一步的输出作为下一步的输入,所有步骤都是高度专一的,每步都有一个特定的函数,且可以很容易地并发执行。显卡有数千个处理核心来快速处理渲染管道中的数据,而这些是在每个步骤中通过运行在GPU上的多个小程序来处理的,这些小的程序被称之为程序着色器(shader)。

其中的一些着色器是可以配置的,开发者可以根据需求配置自己的着色器去替代已经存在的那些,这就让我们能够更自由和细粒度地控制渲染的过程。同时,因为它们运行在GPU上,又给我们保留了珍贵的GPU时间,在平时的开发中,我们也要充分利用GPU渲染来提高软件性能。

着色器通常使用GLSL来写,全称是OpenGL Shading Language。

2.3 举个例子

下图展示了一个抽象的渲染管线中的步骤,其中蓝色部分是我们可以注入自己的着色器。

通过上图我们发现,要把顶点数据转换成全渲染的像素要经过很多步,接下来我们对每一个步骤和代码进行简单的解释。

我们在渲染管线中传入一组可以组成三角形的3D坐标数据,这组数据即顶点数据。顶点数据是顶点的集合,而一个顶点是一个3D坐标的集合。

渲染管线的第一步是顶点着色器(Vertex Shader)。我们这里传入的是一个简单的顶点,顶点着色器可以让我们做一些基础的处理操作,比如顶点的属性。

在初始装配阶段,也就是Shape Assembly阶段,从顶点着色器中输出的顶点会形成一个原始的形状。本例中,输出的顶点形成的是一个三角形。

从初始装配阶段到geometry shader阶段,我们可以通过发散其他顶点来形成新的图形,本例中形成了第二个三角形。

在Tessellation Shader阶段,可以把上一阶段给出的原型图再分割成若干个小的原型图。本例中,可以形成更多的三角形来创造一个更加平坦、顺滑的环境。这么说可能难以理解,我们结合下图来进一步阐述,这就是细分曲面着色器的作用。

细分曲面着色器的下一阶段是光栅化阶段(Rasterzation stage),在这一阶段会对最终的原型和呈现在屏幕上的对应像素做一个映射,形成fragment,供下一阶段的fragment shader使用。

Fragment shader最主要的使命是计算出一个像素的最终颜色,在这个阶段我们可以使用OpenGL中一些高级的特效。通常fragment shader会包含3D界面的多个数据,包括灯光、阴影、颜色等等。

当所有对应的颜色都确定以后,最终的原型将会被传入最后一个步骤,我们称之为Alpha test and blending阶段。这个阶段会判断相应的深度,比如一个物体可能在另一个物体的后面,那它可能采用其他的颜色;或者如果该物体被遮挡,可能会被裁掉。

如上文所述,我们可以看到整个渲染管线的步骤和逻辑是十分复杂的,这其中包含了很多个可以改变的步骤,但我们一般只操作Vertex Shader 和 fragment shader,其他的着色器我们会直接采用默认的。在实际的OpenGL编程中,我们至少需要定义一个Vertex Shader和Fragment shader。(需要说明的是,OpenGL 3.1之前的版本包含了固定管线,从3.1版本开始,固定管线从核心中删掉了,因此我们必须使用着色器去工作)。

三、总结

本文为该系列文章的第一篇,先简单介绍OpenGL的一些原理,后续文章中会添加新的代码分析,包括着色器(Shader)、纹理(Textture)、变形(transformation)、坐标系统(Coordinate systems)、相机(Camera)等。

作者:崔晓迪

原文地址:https://www.cnblogs.com/yixinjishu/p/11269220.html

时间: 2024-10-05 05:50:23

通过OpenGL理解前端渲染原理(1)的相关文章

浏览器渲染原理解析

作者:贝程学院 浏览器内核分为两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎.早期渲染引擎和 JS 引擎并没有明显区分,随着 JS 引擎越来越独立,内核逐渐变成了渲染引擎的代名词.渲染引擎包括: HTML 解释器 CSS 解释器 布局 网络 存储 图形 音视频 图片解码器 等等 渲染引擎简介 浏览器——Firefox.Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safa

高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染

目录 一. 高性能动画 二. 像素渲染管线 基本渲染流程 回流和重绘 三. 旧软件渲染 渲染对象(RenderObject) 渲染层(RenderLayer) 四. 从canvas体会分层优势 不分层的情况 分层绘制 层的合并 五.小结 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 高性能动画 动画的流畅程度通常是以FPS(Frame Per Seco

浏览器渲染原理及流程

我们可能都知道浏览器含有一个渲染引擎,用来渲染窗口所展示的内容.默认情况下,渲染引擎可以显示html.xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,用于显示PDF格式.但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧.这些天研究了一下浏览器的渲染原理,有了些心得,在这里跟大家分享一下,这里只讨论渲染引擎最主要的用途--显示应用了CSS之后的html及图片. 渲染引擎简介 本文所讨论的浏览器--Firefox.Chrome和Safari

深入学习页面优化之页面渲染原理

拾人牙慧理解并整理之 直奔主题,要考虑到页面性能优化,必须得理解浏览器的渲染机制才行. 1.原理 渲染引擎在这里就不展开了,可自行搜索解决.下面说说渲染流程,大致是这样的: 浏览器在接收到服务器返回的html页面后, 浏览器开始构建DOM TREE,遇到CSS样式会构建CSS RULER TREE, 遇到javascript会通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree,解析完成后, 浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来

【blade的UI设计】理解前端MVC与分层思想(bat面试深度回顾)

前言 这里扯到面试,完全是因为最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不好 ② 好的选择比坚持更重要 这点小钗便深有体会了,因为当年我是搞.net的,凭着这项技能想进bat简直就是妄想,于是当时我就非常机智的转了前端,另一个同学也非常机智的转了安卓 所以各位想进大公司,还需要提前关注各个公司最大的缺口是什么,找不准缺口基本无望进大公司的 ③ 积累

LVS之原理篇--深入全面理解LVS工作原理

一.介绍 LVS是Linux Virtual Server的简写,即Linux虚拟服务器,是一个虚拟的服务器集群系统.该项目由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. 使用LVS技术要达到的目标是:通过LVS提供的负载均衡技术和Linux操作系统实现一个高性能.高可用的服务器群集,它具有良好可靠性.可扩展性和可操作性.从而以低廉的成本实现最优的服务性能. 负载均衡技术有很多实现方案,如基于DNS域名轮流解析的方法.基于客户端调度访问的方法.基于应用层系统负载的调度方法,还有基于IP

React 服务器渲染原理解析与实践

第1章 服务器端渲染基础本章主要讲解客户端与服务器端渲染的概念,分析客户端渲染和服务器端渲染的利弊,带大家对服务器端渲染有一个粗浅认识. 1-1 课程导学1-2 什么是服务器端渲染1-3 什么是客户端渲染1-4 React 客户端渲染的优势与弊端第2章 React中的服务器端渲染本章将借助Node.js,Webpack等工具的帮助,带大家实现一个非常基础的基于React.js技术栈的服务器端渲染模型,过程中还会讲解虚拟DOM与服务器端渲染的内在联系. 2-1 在服务器端编写 React 组件2-

【转】浏览器的渲染原理简介

How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程 先看个图 从图中,可以看到: 1) 浏览器会解析三个东西 * 一个 HTML/SVG/XHTML,事实上,Webkit 有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree * CSS,解析CSS会产生CSS规则树 * JavaScript 脚本,主要是通过

Linux内核设计第一周 ——从汇编语言出发理解计算机工作原理

Linux内核设计第一周 ——从汇编语言出发理解计算机工作原理 作者:宋宸宁(20135315) 一.实验过程 图1 编写songchenning5315.c文件 图2 将c文件汇编成32位机器语言 图3 将.s文件中的链接语句删除,获得最后的汇编代码 二.分析堆栈变化情况 三.总结 阐明对“计算机是如何工作的”的理解. ①计算机是依据冯诺依曼体存储结构,依据其核心思想——存储程序计算机工作模型,按程序编排的顺序,一步一步地取出指令,自动地完成指令规定的操作. ②从硬件的角度看,是通过总线连接C