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 ')
相关推荐
slongzhang_8 小时前
jquery 修复怪异模式html未声明“<!DOCTYPE html>”
前端·html·jquery
宋拾壹8 小时前
fastadmin列表中查看列表,并且添加增加相应的数据
javascript·php·fastadmin
MartinYeung58 小时前
[论文学习]CAMIA:基于上下文感知的成员资格推断攻击:针对预训练大型语言模型的深度分析
人工智能·学习·语言模型
chase。9 小时前
【学习笔记】Unified World Models:基于视频-动作耦合扩散的机器人预训练新范式
笔记·学习·音视频
一锅炖出任易仙9 小时前
创梦汤锅学习日记day32
学习·ai·游戏引擎
云水一下9 小时前
Vue.js从零到精通系列(三):组件化基础——Props、Emits、插槽与生命周期
前端·javascript·vue.js
小糯米6019 小时前
JavaScript表达式与运算符
开发语言·javascript·ecmascript
影寂ldy10 小时前
C# 事件完整学习笔记(发布订阅 + 自定义事件 + 内置 EventHandler)
笔记·学习·c#
SEO_juper10 小时前
新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
前端·谷歌·seo·跨境电商·外贸·geo·独立站
TinssonTai10 小时前
这个 VS Code 插件让我的 AI Coding 又快又稳 - 旧瓶装新酒
前端·人工智能·程序员