下一节: WebGL - Html5 画布概述
下一节
WebGL - 教程
简述
WebGL（Web Graphics Library）是 Web 上 3D 图形的新标准，专为渲染 2D 图形和交互式 3D 图形而设计。本教程首先介绍了 WebGL、OpenGL 和 HTML-5 的 Canvas 元素，然后是示例应用程序。本教程包含编写基本 WebGL 应用程序所需的所有步骤的专门章节。它还包含解释如何使用 WebGL 进行仿射变换（例如平移、旋转和缩放）的章节。
本教程对于所有想要学习 WebGL 编程基础知识的读者来说都非常有用。
这是一个初级教程，只要具备 JavaScript 或 HTML-5 编程的基础知识，就可以轻松理解此处解释的概念。但是，如果您之前接触过与 3D 图形相关的 OpenGL 语言和矩阵运算，将会有所帮助。
几年前，Java 应用程序——作为小程序和 JOGL 的组合——被用于通过寻址 GPU（图形处理单元）来处理 Web 上的 3D 图形。由于小程序需要 JVM 才能运行，因此很难依赖 Java 小程序。几年后，人们不再使用 Java applet。
Adobe 提供的 Stage3D API（Flash、AIR）提供了 GPU 硬件加速架构。使用这些技术，程序员可以在 Web 浏览器以及 IOS 和 Android 平台上开发具有 2D 和 3D 功能的应用程序。由于 Flash 是专有软件，因此并未用作 Web 标准。
2011 年 3 月，WebGL 发布。它是一个可以在没有 JVM 的情况下运行的开放软件。它完全由网络浏览器控制。
新版本的 HTML 5 具有多项支持 3D 图形的功能，例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。在本教程中，我们将介绍 WebGL 的基础知识。
什么是 OpenGL？
OpenGL（开放图形库）是一个跨语言、跨平台的 2D 和 3D 图形 API。它是命令的集合。OpenGL4.5是OpenGL的最新版本。下表列出了一组与 OpenGL 相关的技术。
应用程序接口
使用的技术
OpenGL ES
它是嵌入式系统（包括控制台、电话、电器和车辆）上的 2D 和 3D 图形库。OpenGL ES 3.1 是其最新版本。它由 Khronos Group www.khronos.org维护
JOGL
它是 OpenGL 的 Java 绑定。JOGL 4.5 是其最新版本，由jogamp.org 维护。
WebGL
它是 OpenGL 的 JavaScript 绑定。WebGL 1.0 是其最新版本，由khronos group维护。
OpenGLSL
OpenGL 着色语言。它是一种编程语言，是 OpenGL 2.0 及更高版本的伴侣。它是核心 OpenGL 4.4 规范的一部分。它是专门为嵌入式系统（例如手机和平板电脑上的系统）量身定制的 API。
注意- 在 WebGL 中，我们使用 GLSL 编写着色器。
什么是 WebGL？
WebGL（Web Graphics Library）是Web上3D图形的新标准，它是为渲染2D图形和交互式3D图形而设计的。它源自 OpenGL 的 ES 2.0 库，这是一个用于手机和其他移动设备的低级 3D API。WebGL 提供了与 ES 2.0（嵌入式系统）类似的功能，并且在现代 3D 图形硬件上表现良好。
它是一个可以与 HTML5 一起使用的 JavaScript API。WebGL 代码是在 HTML5 的
谁开发了 WebGL
一位名叫Vladimir Vukicevic的美籍塞尔维亚软件工程师完成了基础工作并领导了 WebGL 的创建
2007 年，Vladimir 开始为 HTML 文档的 Canvas 元素开发OpenGL原型。
2011 年 3 月，Kronos Group 创建了 WebGL。
渲染
渲染是使用计算机程序从模型生成图像的过程。在图形中，使用通过渲染程序传递的几何、视点、纹理、光照和阴影等信息来描述虚拟场景。此渲染程序的输出将是数字图像。
有两种类型的渲染 -
软件渲染- 所有渲染计算都是在 CPU 的帮助下完成的。
硬件渲染- 所有图形计算均由 GPU（图形处理单元）完成。
渲染可以在本地或远程完成。如果要渲染的图像太复杂，则渲染是在专用服务器上远程完成的，该服务器具有渲染复杂场景所需的足够硬件资源。它也被称为基于服务器的渲染。渲染也可以由 CPU 在本地完成。它被称为基于客户端的渲染。
WebGL 遵循基于客户端的渲染方法来渲染 3D 场景。获取图像所需的所有处理都是使用客户端的图形硬件在本地执行的。
显卡
根据 NVIDIA 的说法，GPU 是“具有集成变换、照明、三角形设置/裁剪和渲染引擎的单芯片处理器，每秒能够处理至少 1000 万个多边形。” 与具有针对顺序处理优化的几个内核的多核处理器不同，GPU 由数千个更小的内核组成，可以有效地处理并行工作负载。因此，GPU 加速了帧缓冲区（包含完整帧数据的 ram 的一部分）中用于输出到显示器的图像的创建。
GPU 加速计算
在 GPU 加速计算中，应用程序被加载到 CPU 中。每当它遇到代码的计算密集型部分时，该部分代码就会加载并在 GPU 上运行。它使系统能够以有效的方式处理图形。
GPU 将有一个单独的内存，它一次运行一小部分代码的多个副本。GPU 处理本地内存中的所有数据，而不是中央内存。因此，需要GPU处理的数据应该加载/复制到GPU内存中，然后进行处理。
在具有上述架构的系统中，应该减少CPU和GPU之间的通信开销以实现更快的3D程序处理。为此，我们必须将所有数据复制并保存在 GPU 上，而不是反复与 GPU 通信。
支持的浏览器
下表显示了支持 WebGL 的浏览器列表 -
网络浏览器
浏览器名称
版本
支持
因特网浏览器_
11岁及以上
完备的支持
谷歌浏览器
39岁及以上
完备的支持
苹果浏览器
8
完备的支持
火狐
36岁及以上
部分支持
歌剧
27岁及以上
部分支持
移动浏览器
浏览器名称
版本
支持
安卓版Chrome
42
部分支持
安卓浏览器
40
部分支持
苹果浏览器
8.3
完备的支持
歌剧迷你
8
不支持
黑莓浏览器
10
完备的支持
IE手机
10
部分支持
WebGL 的优势
以下是使用 WebGL 的优势 -
JavaScript 编程- WebGL 应用程序是用 JavaScript 编写的。使用这些应用程序，您可以直接与 HTML 文档的其他元素交互。您还可以使用其他 JavaScript 库（例如 JQuery）和 HTML 技术来丰富 WebGL 应用程序。
增加对移动浏览器的支持——WebGL 还支持移动浏览器，例如 iOS safari、Android 浏览器和 Chrome for Android。
开源- WebGL 是开源的。您可以访问该库的源代码并了解它的工作原理和开发方式。
无需编译- JavaScript 是一个半编程半 HTML 的组件。要执行此脚本，无需编译文件。相反，您可以使用任何浏览器直接打开文件并检查结果。由于 WebGL 应用程序是使用 JavaScript 开发的，因此也不需要编译 WebGL 应用程序。
自动内存管理- JavaScript 支持自动内存管理。无需手动分配内存。WebGL 继承了 JavaScript 的这个特性。
易于设置- 由于 WebGL 集成在 HTML 5 中，因此无需额外设置。要编写 WebGL 应用程序，您只需要一个文本编辑器和一个 Web 浏览器。
环境设置
无需为 WebGL 设置不同的环境。支持 WebGL 的浏览器有自己的内置 WebGL 设置。
下一节: WebGL - Html5 画布概述
下一节
查看笔记 分享笔记
笔记内容：
称呼：
Email：
站点：
分享笔记 重置
分类导航
前端
Ajax 教程
Angular 教程
Aurelia 教程
Bootstrap 教程
ChartJS 教程
CSS 教程
ES6 教程
FontAwesome 教程
HTML 教程
HTML 字符集 教程
HTML 游戏 教程
JavaScript 教程
jQuery 教程
Less 教程
React 教程
Sass 教程
Stylus 教程
TypeScript 教程
Unity 教程
Vue.js 教程
WebAssembly 教程
XAML 教程
颜色 教程
服务端
C# 教程
C++ 教程
COBOL 教程
C语言 教程
Fortran 教程
Go 教程
Groovy 教程
Java 教程
JSP 教程
JVM 教程
Kotlin 教程
Lisp 教程
Lua 教程
Node.js 教程
Pascal 教程
Perl 教程
PHP 教程
Python 教程
Python 3 教程
Ruby 教程
Rust 教程
Scala 教程
Spring 教程
Spring Boot 教程
Spring Cloud 教程
VB.Net 教程
移动端
Android 教程
IOS 教程
Objective-C 教程
React Native 教程
Swift 教程
小程序 教程
数据库
Access 教程
DB2 教程
Mariadb 教程
Memcached 教程
MongoDB 教程
MySQL 教程
Neo4j 教程
PL/SQL 教程
PostgreSQL 教程
Redis 教程
SQL 教程
SQL Server 教程
SQLite 教程
T-SQL 教程
数据格式
Jackson 教程
JSON 教程
SVG 教程
XML 教程
开发工具
ActiveMQ 教程
Ant 教程
Apache HttpClient 教程
Apache POI PPT 教程
AWS 教程
Docker 教程
ElasticSearch 教程
ExpressJS 教程
GIT 教程
GitLab 教程
Google Maps 教程
Gradle 教程
Java NIO 教程
JavaFX 教程
JavaMail 教程
JDBC 教程
jMeter 教程
JPA 教程
jsoup 教程
Junit 教程
KoaJS 教程
Kubernetes 教程
Log4j 教程
Logstash 教程
Lucene 教程
Makefile 教程
Maven 教程
RESTful 教程
Sed 教程
SEO 教程
Servlet 教程
SLF4J 教程
Socket.IO 教程
Struts 教程
SVN 教程
TestNG 教程
UML 教程
UNIX / LINUX 教程
WebSocket 教程
WPF 教程
xStream 教程
区块链 教程
数据处理
Flink 教程
Flume 教程
Hadoop 教程
Hbase 教程
Hive 教程
Kafka 教程
Kibana 教程
MapReduce 教程
MATLAB 教程
MyBatis 教程
Pig 教程
R语言 教程
Solr 教程
Spark 教程
Storm 教程
Zookeeper 教程
大数据分析 教程
数据仓库 教程
数据挖掘 教程
计算机基础
HTTP 教程
IPv4 教程
IPv6 教程
Ubantu 教程
WebServices 教程
嵌入式系统 教程
操作系统 教程
数据结构和算法 教程
汇编语言 教程
物联网 教程
电子电路基础 教程
编译器设计 教程
网站开发 教程
计算机 教程
计算机基础 教程
计算机网络 教程
设计模式 教程
AI
CNTK 教程
Keras 教程
PyTorch 教程
TensorFlow 教程
人工智能 教程
机器学习 教程
Python 技术
Django 教程
Flask 教程
NumPy 教程
Pandas 教程
Pillow 教程
PyGTK 教程
PyQt5 教程
PySpark 教程
pytest 教程
Python -数据科学 教程
Python MySQL 教程
Python 取证 教程
Python 数据结构 教程
Python 文本处理 教程
Python 网络编程 教程
Python 网页抓取 教程
Python 设计模式 教程
RxPY 教程
SciPy 教程
Seaborn 教程
SymPy 教程
wxPython 教程
框架
Laravel 教程
Web 图标Icon 教程
Web2py 教程
WebGL 教程
WebRTC 教程
WordPress 教程
Yii 教程
Zend Framework 教程
SAP
Crystal Reports 教程