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. Codeforces Round #589 (Div. 2)E(组合数,容斥原理,更高复杂度做法为DP)

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int f[257],fac[257],ifa ...

  2. 设计模式课程 设计模式精讲 6-2 抽象工厂coding

    1 代码讲解 1.1 抽象工厂优点 1.2 抽象工厂缺点 1.3 为何有产品族的业务场景宜用抽象工厂设计模式?而不是工厂设计模式? 2 代码演练 2.1 抽象工厂代码演练 1 代码讲解 1.1 抽象工 ...

  3. jqgrid自适应宽度

    https://blog.csdn.net/duzhanxiaosa/article/details/78922660

  4. 关于自学java的内容及感受

    这周自学了关于java输入的知识:java输入的方法与c++和c有些不同,他需要在开头加一个import连接系统的包,才能进行输入语句的编写. 自己编写了一点简单的输入的程序: package mod ...

  5. poj1988 Cube Stacking(并查集

    题目地址:http://poj.org/problem?id=1988 题意:共n个数,p个操作.输入p.有两个操作M和C.M x y表示把x所在的栈放到y所在的栈上(比如M 2 6:[2 4]放到[ ...

  6. DVWA靶机--简单的文件上传漏洞

    简单的文件上传漏洞(靶机安全级别:low) 事先准备好一句话木马,密码为pass 上传一句话木马,显示上传路径(一般网站是不会显示路径的,这里靶机为了方便你测试漏洞,直接显示出了路径: ../../h ...

  7. C#多态学习总结

    面向对象编程三大特点  封装 继承 多态.今天我把自己学习多态的过程进行总结 多态 就是 同一个方法在不同情况下,会表选不同的效果(多个形态).在代码上表现就是 同一个父类对象 赋予不同的子类对象 就 ...

  8. 基于Modelsim的视频流仿真

    一.前言 最近在看牟新刚写的<基于FPGA的数字图像处理原理及应用>,书中关于FPGA数字图像处理的原理的原理写的非常透彻,在网上寻找了很久都没有找到完整的源代码工程,因此尝试自己做了补充 ...

  9. BKP寄存器

    STM32的BKP: 备份寄存器是42个16位的寄存器,可用来存储84个字节的用户应用程序数据.他们处在备份域里,当VDD电源被切断,他们仍然由VBAT维持供电.当系统在待机模式下被唤醒,或系统复位或 ...

  10. [ 剑指Offer ] Week2 学习笔记

    打印从1到最大的n位数 题解:由于未知n的大小,需要考虑大数问题.在这样的情况下,逐位地将字符串转换为数字输出,不会有溢出的可能.使用全排列的方式列出所有数字,省去了需要考虑进位的可能. 初始化数组, ...