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 ')
相关推荐
小奶包他干奶奶3 分钟前
将svg对象化,并动态修改svg图标的颜色、尺寸等
前端·html
y = xⁿ6 分钟前
【从零开始学习Redis|第七篇】Redis 进阶原理篇:消息队列、分布式锁、缓存击穿与事务实现
java·redis·学习·缓存
Lee川14 分钟前
React 快速入门:Vue 开发者指南
前端·vue.js·react.js
式51623 分钟前
VLLM架构学习(一)VLLM是什么、VLLM的原理
学习·vllm
进击的尘埃27 分钟前
基于 LangChain.js 的前端 Agent 工作流编排:Tool 注册、思维链可视化与多步推理的实时 DAG 渲染
javascript
用户61581396951634 分钟前
Elpis: 基于vue3+webpack5+nodejs搭建一个完整项目
前端
成长的小牛23337 分钟前
MCP 学习笔记
笔记·学习·ai
90后的晨仔39 分钟前
S C:\WINDOWS\system32> pnpm i -g openclaw@latest pnpm : 无法加载文件 C:\xx\A
前端
深蓝轨迹42 分钟前
SpringBoot YAML配置文件全解析:语法+读取+高级用法
java·spring boot·后端·学习
颜酱1 小时前
最小生成树(MST)核心原理 + Kruskal & Prim 算法
javascript·后端·算法