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 ')
相关推荐
AI即插即用6 分钟前
即插即用系列 | MICCAI EM-Net:融合 Mamba 与频域学习的高效 3D 医学图像分割网络
网络·人工智能·深度学习·神经网络·学习·计算机视觉·视觉检测
Chunyyyen11 分钟前
【第二十六周】OCR学习01
学习·计算机视觉·ocr
king王一帅14 分钟前
AI 时代真正流式解析+渲染双重优化的 Incremark
前端·ai编程·markdown
charlie11451419114 分钟前
现代C++工程实践:简单的IniParser4——实现ini_parser
开发语言·c++·笔记·学习·工程
Glommer17 分钟前
AST 反混淆处理示例(二)
javascript·爬虫
好奇龙猫24 分钟前
【AI学习-comfyUI学习-第十五节-FLUX修复工作流-各个部分学习】
学习
aesthetician29 分钟前
用铜钟听歌,发 SCI !
前端·人工智能·音频
Mike_jia1 小时前
LogWhisperer 全解析:打造你的Linux服务器AI日志分析中枢
前端
网安Ruler1 小时前
崭新出厂,自研CipherForge小工具,攻破 D-Link M30 固件加密
前端·网络·python
daxiang120922051 小时前
记一次前端请求报错:Content-Length can‘t be present with Transfer-Encoding,+Cursor使用教训
前端·cursor