什么是 WebGL?

简介: 什么是 WebGL?

概念


WebGL(全写Web Graphics Library)是一种3D绘图协议。


   这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。


WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂 3D 结构的网站页面,甚至可以用来设计 3D 网页游戏等等。




设计


   WebGL 1.0 基于 OpenGL ES 2.0,并提供了 3D 图形的 API。它使用 HTML5 Canvas 并允许利用文档对象模型接口。


   WebGL 2.0 基于 OpenGL ES 3.0,确保了提供许多选择性的 WebGL 1.0扩展,并引入新的 API。可利用部分 Javascript 实现自动存储器管理。



作用


WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题:


  • 第一,它通过HTML脚本本身实现 Web 交互式三维动画的制作,无需任何浏览器插件支持;
  • 第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的 OpenGL 接口实现的。



资料


【MDN WebGL_API】

Khronos Group

w3cschool WebGL 中文版

WebGL 理论基础

WebGL2 理论基础

WebGL Academy

目录
相关文章
|
Web App开发 前端开发 JavaScript
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
488 0
|
存储 编解码 缓存
webgl系列之抗锯齿和深度缓存
前言 大家好我是Fly 哥, 这是今年webgl 系列的第三篇文章, 如果你之前的两篇文章没看的话,建议先看一下,然后再来看这一篇文章 Webgl 系列之buffer的使用 webgl系列之对光栅化的理解 上一篇文章,任何虚拟3维世界的转换到二维屏幕中通过「采样」 也就判断屏幕上的每个像素中心点是不是在三角形内部的得到了 下面这幅图: 图片 走样之前 这时候有同学问, 这不像三角形哇, 这个其实用个专业的词—— 「锯齿」 , 我的理解 一个三角形经过光栅化后, 得到屏幕上每一个像素点 组成的像素点的集合。那到底是经过什么样的处理得到下面这张图: 图片 final 反走样 其实出现上面
webgl系列之抗锯齿和深度缓存
|
1月前
|
前端开发 JavaScript vr&ar
WebGL
WebGL(Web Graphics Library)是一种用于在网页上渲染交互式 3D 和 2D 图形的 JavaScript API,它基于 OpenGL ES 2.0 标准,为开发者提供了一种在浏览器中创建高性能图形应用的途径
|
2月前
|
JavaScript 前端开发 图形学
WebGL 技术详解
【10月更文挑战第7天】
|
3月前
|
JavaScript 前端开发 图形学
|
2月前
|
JavaScript 前端开发
使用 WebGL 创建 3D 动画
【10月更文挑战第3天】使用 WebGL 创建 3D 动画
|
JavaScript 前端开发 数据可视化
6 个用于 3D 网页图形渲染的最佳 WebGL 库
现代前端、游戏和Web开发正是WebGL可以转化为数字杰作的东西。使用GPU绘制在浏览器屏幕上生成的矢量元素,WebGL创建交互式Web图形,从而获得用户体验。视觉元素的质量和复杂性使该工具在HTML或CSS等其他方法中脱颖而出。
590 0
|
Web App开发 测试技术 API
WebGpu VS WebGL
首先是Web 和 WebGPU 上的图形简史.如果您还没有阅读,请阅读 - 这篇文章在很大程度上是从那篇文章开始的。我将介绍WebGPU在实践中与WebGL的比较,我在Web游戏引擎Construct中添加WebGPU支持时学到的东西,以及它对未来的意义。
210 0
|
JavaScript 物联网 开发者
WebGL的3D框架比较 ThingJS 和 Three.js
随着flash的没落,浏览器的原生能力的兴起。在3D方面WebGL不管从功能还是性能方面都在逐渐加强。2D应用变为3D应用的需求也越来越强烈。 win10的画图板支持3D图片,2d工具photoshop也开始逐步集成了3D工具。
4798 0
|
编解码 数据可视化 图形学
webgl系列之对光栅化的理解
前言 周末没事的学习了光栅化进一步理解, 从底层去学习,遇到问题才会从容不迫, 并同时把这些知识分享给大家, 如果大家没时间看视频的话,废话不多说, 直接开始吧, 这里先做一个概念的铺垫在3D即将渲染到我们屏幕当中来的时候。而接下来我们要做的是把这个标准立方体绘制到屏幕上,这样才能最终被我们所看见。 不清楚的同学看下这篇文章吧 可视化入门跳转到坐标系转换那里 我们简单看下这张图: 图片 变换过程 而光栅化的过程发生在哪里 ,其实 就是物体通过MVP变换,把摄像机观测的空间压缩成了一个标准立方体。然后将标准的立方体【-,1,】绘制到屏幕上的这些过程 图片 转换 在做这步操作之前,我们首
webgl系列之对光栅化的理解