初级入门 --- 认识 WebGL
WebGL 是什么?
WebGL 是一组基于 JavaScript 语言的图形规范,浏览器厂商按照这组规范进行实现,为 Web 开发者提供一套3D图形
相关的 API。
这些 API 能够让 Web 开发者使用 JavaScript 语言直接和显卡(GPU)进行通信。当然 WebGL 的 GPU 部分也有对应的编程语言,简称 GLSL
。我们用它来编写运行在 GPU 上的着色器程序。着色器程序需要接收 CPU(WebGL 使用 JavaScript) 传递过来的数据,然后对这些数据进行流水线处理,最终显示在屏幕上,进而实现丰富多彩的 3D 应用,比如 3D 图表,网页游戏,3D 地图,WebVR 等。
WebGL 工作原理
3D 模型数据从诞生到最终显示在屏幕上,大家可以想象一下流水线
的生产过程,流水线按照既定的步骤对原料进行加工,当前步骤只对前一步骤的结果进行处理,然后将处理后的结果传递给下一步骤,最终将原材料生产成完整的产品。WebGL 的工作方式和流水线类似,也是按照流水线的方式将 3D 模型数据渲染到 2D 屏幕上的,业界把这种渲染方式称为图形管线
或者渲染管线
。
WebGL 只能够绘制点
、线段
、三角形
这三种基本图元,但是我们经常看到 WebGL 程序中含有立方体、球体、圆柱体等规则形体,甚至很多更复杂更逼真的不规则模型,那么 WebGL 是如何绘制它们的呢?其实这些模型本质上是由一个一个的点
组成,GPU 将这些点用三角形图元
绘制成一个个的微小平面,这些平面之间互相连接,从而组成各种各样的立体模型。
因此,我们的首要任务是创建组成这些模型的顶点数据。
一般情况下,最初的顶点坐标是相对于模型中心
的,不能直接传递到着色器中,我们需要对顶点坐标
按照一系列步骤执行模型转换
,视图转换
,投影转换
,转换之后的坐标才是 WebGL 可接受的坐标,即裁剪空间坐标
。我们把最终的变换矩阵
和原始顶点坐标
传递给 GPU
,GPU 的渲染管线对它们执行流水线作业。
GPU 渲染管线的主要处理过程如下:
- 首先进入顶点着色器阶段,利用 GPU 的并行计算优势对顶点逐个进行坐标变换。
- 然后进入图元装配阶段,将顶点按照图元类型组装成图形。
- 接下来来到光栅化阶段,光栅化阶段将图形用不包含颜色信息的像素填充。
- 在之后进入片元着色器阶段,该阶段为像素着色,并最终显示在屏幕上。
什么是 GLSL?
GLSL
的中文意思是 OpenGL 着色语言,英文全称是 OpenGL Shading Language,它是用来在 OpenGL 编写着色器程序
的语言。
着色器程序:着色器程序允许我们通过编程来控制 GPU 的渲染
那么 GPU 渲染过程中的哪些部分允许开发者控制呢?下图是对 WebGL 渲染管线的简单演示:
上图简单演示了 WebGL 对一个红色三角形的渲染过程,绿色部分为开发者可以通过编程控制的部分:
- JavaScript 程序
处理着色器需要的顶点坐标
、法向量
、颜色
、纹理
等信息,并负责为着色器
提供这些数据,上图为了演示方便,只是提供了三角形顶点的位置数据。 - 顶点着色器
接收 JavaScript 传递过来的顶点信息
,将顶点绘制到对应坐标。 - 图元装配阶段
将三个顶点装配成指定图元类型
,上图采用的是三角形图元。 - 光栅化阶段 将三角形内部区域用空像素进行填充。
- 片元着色器 为三角形内部的像素填充颜色信息,上图为暗红色。
实际上,对顶点信息的变换操作既可以在 JavaScript
中进行,也可以在着色器程序
中进行。通常我们都是在 JavaScript
中生成一个包含了所有变换的最终变换矩阵,然后将该矩阵传递给着色器,利用 GPU 并行计算优势对所有顶点执行变换。
初级入门 --- 认识 WebGL的更多相关文章
- 响应式Web初级入门
本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
- Sping AOP初级——入门及简单应用
在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是和业 ...
- Linux初级入门(第一次作业)
Linux初级入门 在本科期间学过一些Linux的简单命令,再次接触Linux不仅巩固了知识还学习到了很多新的东西. 什么是操作系统? 操作系统,英文名称Operating System,简称OS,是 ...
- Spring AOP初级——入门及简单应用
在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是 ...
- Linux初级入门(一)
Linux是一种开源电脑操作系统内核,它是一个用C语言写成,符合POSIX标准的类Unix操作系统.Linux最早是由芬兰黑客 Linus Torvalds为尝试在英特尔x86架构上提供自由免费的类U ...
- hadoop入门手册5:Hadoop【2.7.1】初级入门之命令:文件系统shell2
问题导读 1.改变hdfs文件的权限,需要修改哪个配置文件?2.获取一个文件的或则目录的权限,哪个命令可以实现?3.哪个命令可以实现设置访问控制列表(ACL)的文件和目录? 接上篇:Hadoop[2. ...
- hadoop入门手册4:Hadoop【2.7.1】初级入门之命令:文件系统shell1
问题导读1.Hadoop文件系统shell与Linux shell有哪些相似之处?2.如何改变文件所属组?3.如何改变hdfs的文件权限?4.如何查找hdfs文件,并且不区分大小写? 概述文件系统 ( ...
- hadoop入门手册3:Hadoop【2.7.1】初级入门之命令指南
问题导读1.hadoop daemonlog管理员命令的作用是什么?2.hadoop如何运行一个类,如何运行一个jar包?3.hadoop archive的作用是什么? 概述 hadoop命令被bin ...
随机推荐
- 关于找不到指定的模块,异常来自HRESULT:0x8007007E的解决方法
上午从公司前辈那里拷贝到的ASP.NET代码,在自己机器上部署的时候发现问题,直接报错,找不到指定的模块,异常来自HRESULT:0x8007007E.并且一大堆警告. 在网上百度很多解决方法,归纳如 ...
- 「CQOI2009」中位数
「CQOI2009」中位数 传送门 这道题将会用到一点桶的思想. 首先我们可以在排列中先找到 \(b\) 的位置(找不到的话就直接输出 \(0\)). 然后我们从 \(b\) 的位置(设为 \(p\) ...
- 前端学习 之 CSS(三)
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- ThinkPHP5 动态生成图片缩略图
需求场景 不同终端(PC端.手机端.平板),不同界面(列表页.详情页),对图片大小的要求不一样, 如果所有场景下都使用同一尺寸的图片,势必对会网络带宽及服务器性能造成一定的影响,由此需要服务器端能够根 ...
- Unity - 求反射向量 (2d)
求反射向量 https://www.cnblogs.com/graphics/archive/2013/02/21/2920627.html 上面是大佬的公式可以去看一下 借的大佬的图 1.求入射向量 ...
- PAT T1012 Greedy Snake
直接暴力枚举,注意每次深搜完状态的还原~ #include<bits/stdc++.h> using namespace std; ; int visit[maxn][maxn]; int ...
- js里用 toLocaleString 实现给数字加三位一逗号间隔(有无小数点都适用)
<input type="hidden" id="totalLandArea" value="<%-info.totalLandArea% ...
- CentOS7编译安装httpd-2.4.41
安装参考环境: CentOS Linux release 7.5.1804 (Core) 一.安装依赖包 httpd安装的依赖包 # yum -y install pcre-devel # yum - ...
- mysql innodb cluster 无感知集群
MySQL 8.0.12 innodb cluster 高可用集群部署运维管理手册 Innodb cluster 原理介绍 Innodb cluster 利用组复制的 pxos 协议,保障数据一致性 ...
- yolo系列目标检测+自标注数据集进行目标识别
1. yolov1的识别原理 参考:https://blog.csdn.net/u010712012/article/details/85116365 https://blog.csdn.net/gb ...