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的更多相关文章

  1. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  2. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  3. Sping AOP初级——入门及简单应用

    在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是和业 ...

  4. Linux初级入门(第一次作业)

    Linux初级入门 在本科期间学过一些Linux的简单命令,再次接触Linux不仅巩固了知识还学习到了很多新的东西. 什么是操作系统? 操作系统,英文名称Operating System,简称OS,是 ...

  5. Spring AOP初级——入门及简单应用

      在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是 ...

  6. Linux初级入门(一)

    Linux是一种开源电脑操作系统内核,它是一个用C语言写成,符合POSIX标准的类Unix操作系统.Linux最早是由芬兰黑客 Linus Torvalds为尝试在英特尔x86架构上提供自由免费的类U ...

  7. hadoop入门手册5:Hadoop【2.7.1】初级入门之命令:文件系统shell2

    问题导读 1.改变hdfs文件的权限,需要修改哪个配置文件?2.获取一个文件的或则目录的权限,哪个命令可以实现?3.哪个命令可以实现设置访问控制列表(ACL)的文件和目录? 接上篇:Hadoop[2. ...

  8. hadoop入门手册4:Hadoop【2.7.1】初级入门之命令:文件系统shell1

    问题导读1.Hadoop文件系统shell与Linux shell有哪些相似之处?2.如何改变文件所属组?3.如何改变hdfs的文件权限?4.如何查找hdfs文件,并且不区分大小写? 概述文件系统 ( ...

  9. hadoop入门手册3:Hadoop【2.7.1】初级入门之命令指南

    问题导读1.hadoop daemonlog管理员命令的作用是什么?2.hadoop如何运行一个类,如何运行一个jar包?3.hadoop archive的作用是什么? 概述 hadoop命令被bin ...

随机推荐

  1. 关于找不到指定的模块,异常来自HRESULT:0x8007007E的解决方法

    上午从公司前辈那里拷贝到的ASP.NET代码,在自己机器上部署的时候发现问题,直接报错,找不到指定的模块,异常来自HRESULT:0x8007007E.并且一大堆警告. 在网上百度很多解决方法,归纳如 ...

  2. 「CQOI2009」中位数

    「CQOI2009」中位数 传送门 这道题将会用到一点桶的思想. 首先我们可以在排列中先找到 \(b\) 的位置(找不到的话就直接输出 \(0\)). 然后我们从 \(b\) 的位置(设为 \(p\) ...

  3. 前端学习 之 CSS(三)

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  4. ThinkPHP5 动态生成图片缩略图

    需求场景 不同终端(PC端.手机端.平板),不同界面(列表页.详情页),对图片大小的要求不一样, 如果所有场景下都使用同一尺寸的图片,势必对会网络带宽及服务器性能造成一定的影响,由此需要服务器端能够根 ...

  5. Unity - 求反射向量 (2d)

    求反射向量 https://www.cnblogs.com/graphics/archive/2013/02/21/2920627.html 上面是大佬的公式可以去看一下 借的大佬的图 1.求入射向量 ...

  6. PAT T1012 Greedy Snake

    直接暴力枚举,注意每次深搜完状态的还原~ #include<bits/stdc++.h> using namespace std; ; int visit[maxn][maxn]; int ...

  7. js里用 toLocaleString 实现给数字加三位一逗号间隔(有无小数点都适用)

    <input type="hidden" id="totalLandArea" value="<%-info.totalLandArea% ...

  8. CentOS7编译安装httpd-2.4.41

    安装参考环境: CentOS Linux release 7.5.1804 (Core) 一.安装依赖包 httpd安装的依赖包 # yum -y install pcre-devel # yum - ...

  9. mysql innodb cluster 无感知集群

    MySQL 8.0.12 innodb cluster 高可用集群部署运维管理手册 Innodb cluster 原理介绍 Innodb cluster  利用组复制的 pxos 协议,保障数据一致性 ...

  10. yolo系列目标检测+自标注数据集进行目标识别

    1. yolov1的识别原理 参考:https://blog.csdn.net/u010712012/article/details/85116365 https://blog.csdn.net/gb ...