JavaScript 2D 3D 图形库API webGL

最新推荐文章于 2024-06-27 16:23:14 发布
最新推荐文章于 2024-06-27 16:23:14 发布
阅读量2.4k 收藏 7
点赞数
分类专栏： JavaScript 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boonya/article/details/100423937
版权

目录

WebGL MDN API

指南和教程

指南 

教程

示例

高级教程

资源

库

规范

浏览器兼容性

WebGL 1

Legend

WebGL 2

Legend

兼容性说明

Gecko备忘

参见

 WebGL 中文版

多端阅读《WebGL 中文版》:

中文学习目录 

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一些特性也需要用户的硬件设备支持。

WebGL MDN API

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

指南和教程

下面，您将找到各种指南，以帮助您学习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优化过，而且很健壮。

规范

 

SpecificationStatusComment
WebGL 1.0Recommendation初始定义。基于 OpenGL ES 2.0
WebGL 2.0Editor's Draft在 WebGL 1 基础上构建。基于 OpenGL ES 3.0
OpenGL ES 2.0Standard 
OpenGL ES 3.0Standard 

 

浏览器兼容性

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

 DesktopMobile
 ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WebGLRenderingContextFull support9Full support12

Notes

打开		Full support4Full support11

Notes

打开		Full support12Full support5.1Full supportYesFull support25Full supportYesFull support12Full support8.1Full supportYes

Legend

Full support 

Full support

See implementation notes.

See implementation notes.

WebGL 2

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

 DesktopMobile
 ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WebGL2RenderingContextFull support56No supportNoFull support51No supportNoFull support43No supportNoFull support58Full support58Full support51Full support43No supportNoFull support7.0

Legend

Full support 

Full support

No support 

No support

兼容性说明

不仅是浏览器，GPU本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的GPU的设备上可用。大多数浏览器可以通过 webgl 这一上下文名称来使用 WebGL，但是旧的浏览器需要使用 experimental-webgl。另外，将来的 WebGL 2 只会向后兼容，其使用的上下文名称为 webgl2 。

Gecko备忘

WebGL调试与检测

开始使用Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), 在测试中，这里有两个参数可以让你来控制WebGL性能:

webgl.min_capability_mode

一个以布尔值存储的属性。当它的值为True时，将会启用最小性能模式。当这个模式启用时，WebGL将会仅提供由其标准指定的最基本的功能集和性能支持。这样可以确保您的WebGL代码能够在性能的设备和浏览器上正确运行。它的默认值是False。

webgl.disable_extensions

一个以布尔值存储的属性。当它的值为True时，会禁用所有的WebGL拓展。它的默认值是False。

参见

 WebGL 中文版

多端阅读《WebGL 中文版》:

中文学习目录 

  1. WebGL 中文教程

  2.   WebGL 基础

    1. WebGL 基本原理

    2. WebGL 是如何工作的

    3. WebGL 着色器和 GLSL

  3.   图像处理

    1. WebGL 图像处理

    2. WebGL 图像处理（续）

  4.   2D 转换、旋转、伸缩、矩阵

    1. WebGL 2D 图像转换

    2. WebGL 2D 图像旋转

    3. WebGL 2D 图像伸缩

    4. WebGL 2D 矩阵

  5.   3D

    1. WebGL 3D 正交

    2. WebGL 3D 透视

    3. WebGL 3D 摄像机

  6.   结构与组织

    1. WebGL 更少代码，更多乐趣

    2. WebGL 绘制多个东西

    3. WebGL 场景图

  7.   文本

    1. WebGL 文本 HTML

    2. WebGL 文本 Canvas 2D

    3. WebGL 文本 纹理

    4. WebGL 文本 使用字符纹理

更多学习：http://www.hewebgl.com/

boonya
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
w2gl:Webgl 2D 图形库
06-12
W2GL Webgl 2D 图形库
glazeGL:Typescript 2D WebGL渲染库
04-30
2D渲染在WebGL中通常通过投影2D坐标到3D空间来实现，使2D图形能够利用WebGL的硬件加速特性。 ### TypeScript支持 `glazeGL` 使用TypeScript编写，这是一种强类型、面向对象的JavaScript超集。TypeScript引入了类型...
WebGL(1.0)API
butwang的专栏
11-17 2224
WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 &lt;canvas&gt; 元素中使用。 目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari...
百度地图 JavaScript API GL + mapV GL + bmap-draw 实现地图聚合点以及聚合点框选功能开发
最新发布
kntqaq的博客
06-27 1506
使用百度地图 JavaScript API GL + bmap-draw + mapV GL 工具包开发地图的一系列功能，包括聚合点、地图框选功能
用JavaScript绘图 ——JS2D函数集
happmaoo的专栏
05-16 259
代码如下: &lt;script Language="javascript"&gt; /****************** JS2D函数集 ******************* 作者：neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息，谢谢!!! 本函数集可以单独存成一个js文件："JS2D.js" ********...
Two.js —— 二维的绘图 JavaScript 库
zzzkk2009的专栏
05-08 1286
Two.js 是一个二维的绘图 API，用于较新的 Web 浏览器，可基于不同上下文绘制，包括 svg、canvas 和 webgl。 示例代码： // Make an instance of two and place it on the page. var elem = document.getEle
JavaScript中的2D数组
cunchi8090的博客
07-19 701
This article shows how to create and access 2-dimensional arrays in JavaScript. It includes a tutorial in case you are just trying to "get your head wrapped around" the concept a...
使用ReactThreejs和WebGL构建的2D3D粒子库
08-10
WebGL是一种JavaScript API，允许在任何兼容的Web浏览器中进行硬件加速的3D图形渲染，无需插件支持。 结合React和Three.js，我们可以创建一个React组件来处理3D场景，而Three.js则负责底层的图形渲染。这样，开发者...
tree.rar_3D图形编程_JavaScript_
08-12
在3D图形编程中，JavaScript通常通过与WebGL库结合使用，如Three.js或 Babylon.js，来创建和渲染3D模型。 WebGL是一种基于OpenGL标准的JavaScript API，允许在支持的浏览器中进行硬件加速的3D图形渲染，无需插件。...
Three.js是一个用于创建3D图形的JavaScript库
04-19
Three.js 是一个基于 WebGL 的开源 JavaScript 库，专门用于在 Web 浏览器中创建和展示交互式的三维图形。WebGL 是一种在浏览器中实现硬件加速的图形渲染技术，它允许开发者无需插件就能在网页上实现复杂的3D图形...
标题： WebGL-Plot：高性能的2D绘图库，带你探索无限可能！
gitblog_00096的博客
05-21 448
标题：???? WebGL-Plot：高性能的2D绘图库，带你探索无限可能！ webgl-plotA high-Performance real-time 2D plotting library based on native WebGL项目地址:https://gitcode.com/gh_mirrors/we/webgl-plot 1、项目介绍 WebGL-Plot 是一款轻量级的2D绘图库，它充...
webgl-plot：基于本地WebGL的高性能实时2D绘图库
02-04
webgl图 使用本机WebGL的多线高性能2D绘图库。 优点是： 简单高效的2D WebGL库 使用WebGL本机线条画 高更新率，与屏幕的刷新率匹配 适用于动态和静态数据 完全控制每一帧中每行的颜色 没有依赖关系 在任何浏览器/平台上 与和兼容，从主线程中卸载CPU时间 资源少或数据集大的嵌入式系统的理想选择 用例 动态：绘制实时波形时，需要多个波形。 例如，基于软件的示波器，Arduino，微控制器，FPGA用户界面。 该框架也可以与ElectronJS结合使用。 静态：启用快速平移和缩放功能以检查非常大的数据集。 参见 局限性 由于行的OpenGL实现，因此无法更改线宽。 Open
webgl2-2d:WebGL2 中的画布 API 实现
05-29
webgl2-2d WebGL2 中的画布 API 实现 用法 // const ctx = canvas.getContext('2d') // origin canvas 2D context const ctx = canvas . getContext ( 'webgl2-2d' ) // WebGL2 implementation 清单 参考： : HTMLCanvas 元素 宽度/高度（待办事项：设置行为不一样） getContext('webgl2-2d'): 不支持属性 toDataURL(): (TODO: 不支持参数) CanvasRenderingContext2D 帆布 状态 保存（） 恢复（） 转变 规模（） 旋转（） 翻译（） 转换（） 设置转换（） 合成 全球阿尔法 全局复合操作 颜色和样式（TODO：需要完整的
HTML5（JS）2D游戏引擎
11-12
HTML5（JS）2D游戏引擎，简单上手。 LIB类介绍 D2D_Engine.js 引擎 D2D_Audio.js 音效 D2D_Animation.js 序图动画 D2D_Font.js 文字 D2D_RectBox.js 包围盒 D2D_Sprite.js 精灵 D2D_Texture.js 纹理
flatten-js:二维几何的Javascript库
04-28
二维几何的Javascript库 flatten-js是一个JavaScript库，用于处理抽象的几何形状，例如点，矢量，线，射线，线段，圆，弧和多边形。 形状可以组织成“平面集”-支持空间查询的可搜索容器。 flatten-js提供了许多有用的方法和算法，例如查找相交，检查包含，计算距离，应用仿射变换，执行布尔运算等等。 软件包以3种格式分发：commonjs，umd和es6模块。 Package.json文件提供了适合不同目标的各种入口点。 TypeScript用户可以利用包中包含的打字稿定义文件index.d.ts进行静态类型检查。 flatten-js不太关注可视化。 无论如何，所有类都实现svg（）方法，该方法返回可以插入SVG容器的字符串。 它与库一起很好地工作，但是绝对有可能创建到其他图形库的桥梁。 开始使用FlattenJS的最佳方法是使用很棒的 javascri
live2d.js live2d.js
01-14
live2d.js live2d.js
【PixiJs】从零开始webgl 2d渲染库PixiJs
践行终生成长
07-10 1002
官网教程：https://www.pixijs.com/tutorials 教程：https://github.com/kittykatattack/learningPixi 1、使用谷歌浏览器打开html文件，报错ncaught Error: WebGL unsupported in this browser 解决： 改用火狐浏览器 或者Microsoft Edge浏览器， 参考：https://github.com/pixijs/pixi.js/issues/5694 ...
JavaScript图形库
weixin_34306676的博客
09-29 146
做前端少不了画图，html5 的 canva 很强大，可是如果所有需求都自己画图，恐怕会被 leader 炒掉。记录一下我用过的几个 2D 和 3D 的js图形库，各种功能。我就不分 2D 和 3D 了，因为 WebGL前端数据可视化是一个很热门的方向，发展趋势，也是很多图形库的发展目标。 1.echarts：百度开源的功能很多的图形库。看一下下图的 demo 就知道它的功能了。http://e...
使用js做一个2D动画
weixin_63331779的博客
09-03 403
前端学习之移动的精灵
精通Three.js：WebGL的JavaScript 3D库实战
1. **WebGL基础**：首先，读者会了解到WebGL的基本概念，它是如何在浏览器中运行的，以及与2D图形相比，3D图形的特性。 2. **Three.js入门**：介绍如何安装和设置Three.js库，以及如何创建基本的3D场景、相机、光源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值