WebGL(1.0)API

最新推荐文章于 2024-05-21 09:59:58 发布

butwang

最新推荐文章于 2024-05-21 09:59:58 发布

阅读量2.2k

点赞数 1

分类专栏： WebGL

本文链接：https://blog.csdn.net/butwang/article/details/84185220

版权

WebGL 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用。

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ 和 Internet Explorer 11+；然而, WebGL一些特性也需要用户的硬件设备支持。

<canvas> 元素也被 Canvas 2D 用于在网页上做2D图形。

参考节

标准接口节

扩展节

事件节

常量和类型节

WebGL 2节

WebGL 2 是WebGL的一个主要更新，它通过WebGL2RenderingContext 接口提供。它基于OpenGL ES 3.0，新功能包括：

3D textures,
Sampler objects,
Uniform Buffer objects,
Sync objects,
Query objects,
Tranform Feedback objects,
Promoted extensions that are now core to WebGL 2: Vertex Array objects, instancing, multiple render targets, fragment depth.

另请参见博客文章 "WebGL 2 lands in Firefox" 和 webglsamples.org/WebGL2Samples 几个演示。

指南和教程节

下面，您将找到各种指南，以帮助您学习WebGL概念和教程，提供分步课程和示例。

指南节

WebGL 中的数据

编写WebGL代码时使用的变量，缓冲区和其他类型数据的指南。

WebGL 最佳实践

提示和建议，以帮助您提高WebGL内容的质量，性能和可靠性。

使用扩展

WebGL 扩展的使用指南。

教程节

WebGL 教程

WebGL 核心概念的初学者指南。如果您以前没有 WebGL 的经验，那么这是一个很好的起点。

示例节

一个基础的 WebGL 的 2D 动画示例

此示例演示了单色形状的简单动画。检查的主题是适应宽高比差异，从多个着色器集合构建着色器程序的功能，以及 WebGL 绘图的基础知识。

高级教程节

WebGL 模型视图投影

详述了常用于显示3D物体视图的三种核心矩阵：模型，视图和投影矩阵。

Web 中的矩阵运算

讲述 3D 变换矩阵工作原理的指南 —— 这也能在WebGL计算和CSS3变换中派上用场。

资源节

Raw WebGL: WebGL入门 Nick Desaulniers 主讲的WebGL 基础知识。如果你从未接触过底层的图形编程，这是一个开始学习初级图形编程的好地方。
WebGL官网 Khronos Group 的WebGL官方站点。
学习WebGL 一个关于如何使用WebGL的教程站点。
WebGL基础一个关于WebGL的基础教程。
WebGL试炼一个在线创建和分享WebGL的工具站点，非常适合快速创建一个原型或者体验一个成品。
WebGL Academy 通过一个 HTML/JavaScript 编辑器来学习一个基础的WebGl基础知识。
WebGL Stats 一个统计WebGL在不同平台上能力表现的网站。

库节

glMatrix 创建高性能WebGL应用的JavaScript矩阵矢量库。
Sylvester 一个开源的 JavaScript矩阵矢量库，不仅为WebGL优化过，而且很健壮。

规范节

Specification	Status	Comment
WebGL 1.0	Recommendation	Initial definition. Based on OpenGL ES 2.0
WebGL 2.0	Editor's Draft	Builds on top of WebGL 1. Based on OpenGL ES 3.0.
OpenGL ES 2.0	Standard
OpenGL ES 3.0	Standard

浏览器兼容性节

WebGL 1节

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Full support9	Full support12 Notes 打开	Full support4	Full support11 Notes 打开	Full support12	Full support5.1	Full supportYes	Full support25	Full supportYes Notes 打开	Full supportYes	Full support12	Full support8.1	Full supportYes

Legend

Full support

See implementation notes.

WebGL 2节

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Full support56	No supportNo	Full support51	No supportNo	Full support43	No supportNo	Full support58	Full support58	No supportNo	Full support51	Full support43	No supportNo	Full support7.0

Legend

Full support

No support

兼容性说明节

除了浏览器，GPU本身也需要支持这个特性. 举个例子, S3 纹理压缩 (S3TC) 只可以用在基于图睿的GPU处理器. 大多数浏览器支持 webgl context name, 但是旧的浏览器支持 experimental-webgl更好些. 除此之外, 即将来临的 WebGL 2 只会向后兼容，在未来将使用新的上下文名称 experimental-webgl2 (目前正在测试中).