Webgl学习系列-认识Webgl

Webgl学习系列

第一章 认识Webgl


文章目录


一、什么是webgl?

webgl是一种3D绘图协议,衍生于 OpenGL ES2.0,可以结合 Html5 和 JavaScript 在网页上绘制和渲染二/三维图形。

二、为什么学webgl?

  • 数据可视化
  • 图形/游戏引擎
  • 交互演示、图形渲染
  • 地图
  • VR
  • 物品展示
  • 室内设计
  • 城市规划

三、webgl的优势?

  • 内嵌在浏览器中,不需要安装任何插件即可运⾏;
  • 只需要⼀个⽂本编辑器和浏览器,就可以编写三维图形程序;

四、webgl开源框架

  • Three.js:JavaScript 3D WebGL库
  • Babylon.js:Web3D图形引擎
  • KickJS:Web的开源图形和游戏引擎
  • ClayGL:构建可扩展的Web3D应⽤程序
  • PlayCanvas:网络游戏和3D图形引擎
  • WebGLStudio.js和Litescene.js:开源Web 3D图形编辑器和创建器
  • Luma:Uber的3D WebGL可视化库
  • A-Frame是用于构建VR(虚拟现实)体验的Web框架

五、canvas和webgl的区别

Canvas API

  • Canvas API 提供 二维 绘图的方式
  • 图形的绘制主要通过 CanvasRenderingContext2D 接口完成
  • canvas.getContext(' 2d')

WebGL API

  • WebGL API 提供 三维 绘图的方式
  • 图形的绘制主要通过 WebGLRenderingContext 接口完成
  • canvas.getContext('webgl ')
相关推荐
Maybyy3 分钟前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈7 分钟前
CSS中的Element语法
前端·css
Real_man14 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中14 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术16 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
zhu_zhu_xia18 分钟前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
咔咔一顿操作19 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
charlee4424 分钟前
WebGL简易教程——结语
教程·webgl·三维可视化·前端开发·计算机图形学
棱镜研途1 小时前
学习笔记丨卷积神经网络(CNN):原理剖析与多领域Github应用
图像处理·笔记·学习·计算机视觉·cnn·卷积神经网络·信号处理
coding随想1 小时前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt