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 ')
相关推荐
一 乐4 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
好奇龙猫4 小时前
【AI学习-comfyUI学习-第三十节-第三十一节-FLUX-SD放大工作流+FLUX图生图工作流-各个部分学习】
人工智能·学习
saoys4 小时前
Opencv 学习笔记:图像掩膜操作(精准提取指定区域像素)
笔记·opencv·学习
C_心欲无痕5 小时前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫5 小时前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo5 小时前
前端跨页面通信终极指南:方案拆解、对比分析
前端
电子小白1236 小时前
第13期PCB layout工程师初级培训-1-EDA软件的通用设置
笔记·嵌入式硬件·学习·pcb·layout
yinuo6 小时前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
唯情于酒6 小时前
Docker学习
学习·docker·容器
xkxnq6 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js