WebGL开源框架列举概述

2023-10-31

一、概述

WebGL是基于OpenGL的JavaScript API /库,允许Web浏览器在浏览器中渲染3D / 2D图形,而无需安装额外的插件,桌面应用程序,任何第三方插件或浏览器扩展。WebGL允许通过浏览器使用机器GPU将3D图形渲染为HTML页面。目前,大多数现代网络浏览器(例如Google Chrome,Mozilla Firefox和Safari)都支持WebGL。可以通过浏览器设置或使用特殊插件来禁用或启用WebGL。WebGL框架和库用于创建交互式展示,基于浏览器的游戏,详细的科学和医学可视化/模拟,虚拟现实(VR)和混合现实(MR)应用程序。WebGL已在游戏,工程,数据分析,地理空间分析,科学和医学可视化与模拟等多个行业中使用。
在这里插入图片描述
特点:

· 只需要网页浏览器
· 适用于现代浏览器
· 不需要额外的插件或浏览器扩展
· 在移动浏览器上工作

二、常见框架

1、Three.js:JavaScript 3D WebGL库

在这里插入图片描述
Three.js是此列表中最著名的3D WebGL JavaScript库,成千上万的开发人员将其用于基于WebGL的游戏,模拟甚至网站。它具有简单的学习曲线,数百个演示和示例,丰富的教程库以及强大的社区。Three.js用作许多WebGL图形引擎和几个支持浏览器的游戏引擎的基础。它具有功能强大的轻量级在线编辑器。Three.js用于许多游戏,科学和医学可视化。它用作2个WebGL医学DICOM可视化框架的基础。

特点:

  1. 在线编辑
  2. 易学曲线
  3. 大型社区
  4. 用作多个WebGL游戏和图形引擎的基础

2、Cesium

在这里插入图片描述

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile。

3、Babylon.js:Web3D图形引擎

在这里插入图片描述
Babylon.js是一个功能强大,美观,简单且开放的游戏和呈现引擎,打包在一个友好的JavaScript框架中。Babylon.js是一个简单但功能强大的WebGL驱动的3D图形引擎,它为JavaScript开发人员提供了简单易学的曲线,简单的API以及丰富的文档和教程列表。它可用于构建交互式3D展示/演示,3D Web就绪的产品演示,游戏,VR(虚拟现实)应用程序以及复杂的体系结构仿真。Babylon.js有很多开发人员社区,他们提供其代码片段,教程清单,当然还有可重用的扩展,以扩展其核心功能。

特点:

  • 在线编辑
  • 易于设置
  • 丰富的例子列表
  • 支持JavaScript和TypeScript
  • 丰富的摘要库
  • 模块化并包含许多有用的扩展
  • 可扩展的模块化在线查看器
  • 功能丰富的引擎
  • GUI工具

4、长丝:谷歌移动优先的WebGL框架

Filament是为Web构建的开源WebGL实时3D渲染器,是一款Google开发的跨平台的实时渲染引擎,支持PBR材质,并且针对Android平台做了优化(毕竟Google亲儿子)。它使用C ++旨在成为移动优先的3D平台。Filament由Google开发和发布,作为其开源项目的一部分。尽管它以移动设备为目标针对多平台(Android,iOS,Linux,Mac OSX和Windows),但它在开发人员中并不流行。这是一个相当新的库,但随着时间的流逝,它可能会引起游戏开发人员的注意。
在这里插入图片描述

特点:

  • 移动优先(Android / iOS)WebGL物理和3D图形引擎
  • 支持Windows,Linux和Mac OSX
  • 材质渲染
  • 为最佳性能而构建的C ++

5、KickJS:Web的开源图形和游戏引擎

KickJS是开放源代码(BSD许可)的WebGL游戏引擎和为现代Web浏览器构建的3D Web图形库。对于新开发者来说,它具有简单的学习曲线,因为它附带了丰富的清晰文档,教程和一些游戏示例。作为游戏引擎,KickJS支持鼠标,键盘和游戏手柄控制器。它为开发人员提供了多种工具,包括着色器编辑器,模型工具,扩展查看器以及一些带有清晰代码的游戏示例。
在这里插入图片描述

特点:

  • Collada DAE和Wavefront OBJ模型

  • 内置着色器

  • 持久性模型

  • 查看视锥剔除

  • 阴影贴图

  • 采摘

  • 渲染到纹理

  • 天空盒

  • 电影纹理

  • 方向灯,点光源和环境光

  • 事件队列

  • 键盘和鼠标输入

  • 序列化

  • 上下文丢失处理

6、ClayGL:构建可扩展的Web3D应用程序

ClayGL是一个Web 3D图形库,用于构建支持3D Web的应用程序,例如在真实的地理地图上绘制交互式3D街道地图。ClayGL可作为开源项目使用。
在这里插入图片描述

  • 特点:
  • 轻巧的
  • 缩放图形
  • 可配置高质量的图形
  • 支持缩放
  • 高级Web查看器(Clay Viewer)
  • 易于启动和学习,易于使用和学习
  • 具有高度详细的图形以及先进而详细的材料
  • 丰富的示例集。

7、PlayCanvas:网络游戏和3D图形引擎

PlayCanvas是一款轻巧的功能齐全的3D网络游戏和图形引擎。它是开发人员中最喜欢的WebGL 3D游戏引擎。它具有令人印象深刻的功能列表,可为游戏开发人员提供构建网络优先的图形丰富游戏所需的一切。PlayCanvas被许多游戏开发商使用,市场上有几款成功的游戏。PlayCanvas不仅用于游戏,还可以用于构建AR(增强现实)和VR(虚拟现实)应用程序。
在这里插入图片描述

特点:

  • 轻巧的
  • 快速加载
  • 移动浏览器支持
  • 基于Web的图形编辑器
  • AR(增强现实)和VR(虚拟现实)应用
  • 带编辑器的GPU粒子引擎
  • 静态,蒙皮和变形网格
  • Maya,3DS Max,Blender的完整模型导出管道
  • 强大的音频库
  • 与3D刚体物理引擎ammo.js完全集成
  • 输入:鼠标,键盘,触摸,游戏板,VR
  • 丰富的API文档
  • 带有源代码的几个游戏示例

8、WebGLStudio.js和Litescene.js:开源Web 3D图形编辑器和创建器

Litescene.js是一个简单但功能强大的WebGL库,它提供了基于组件的节点层次结构,它提供了简单的JSON代码,该代码易于嵌入到Web项目中并在WebGLStudio.js编辑器中使用,该编辑器是基于Web的开源高级3D WebGL编辑。使用WebGLStudio,您可以导出包含所有信息的JSON文件,并在LiteScene中使用它。Litescene.js使用其自己的微型库“ Litegl.js”来扭曲WebGL组件,从而通过创建用于管理不同项(例如Buffer,Mesh,Texture,Shader和任何WebGL应用程序的其他常见方面)的类,使WebGL组件更加用户友好。
在这里插入图片描述

特点:

  • 易学曲线
  • 强大的在线
  • 基于组件的节点系统
  • 逼真的渲染管线,它支持所有属性的阴影,反射,纹理等
  • 自动计算最佳着色器的材质系统,使其易于控制属性
  • 资源管理器以加载和存储任何类型的资源(纹理,网格等)
  • 序列化方法以将任何场景转换为JSON
  • 解析器用于最常见的文件格式
  • 容易嵌入

9、 Luma:Uber的3D WebGL可视化库

Luma是一个开源高性能WebGL2组件,用于GPU驱动的数据可视化和计算。它由Uber作为开放源项目发布和维护。它正在不断更新,它被用作2个框架的核心WebGL引擎:Kepler.gl是与数据无关的高性能基于Web的应用程序,用于可视化大规模地理定位数据集。
在这里插入图片描述

特点:

  • 适用于地理空间数据(大型数据集)可视化

10、A-Frame是用于构建VR(虚拟现实)体验的Web框架

A-Frame是用于构建虚拟现实(VR)应用程序的开源WebGL框架。迪士尼,谷歌,Mozilla,NASA,三星,索尼和丰田等世界顶级公司都在使用它。它非常易于使用,因为它对于经验丰富的初学者来说也很容易学习。A-Frame可在Vive,Rift等多个VR平台上正常运行,并在桌面上使用Mozilla Firefox,&Google Chrome等现代浏览器以及性能稳定的手机。
在这里插入图片描述
特点:

  • 专为虚拟现实(VR)和混合现实(MR)设计
  • 在Mozilla Firefox和Google Chrome上表现良好
  • 在手机上工作
  • 适用于许多VR平台
  • 大公司和品牌在其VR / MR项目中使用

11、X3DOM:在任何Web项目中构建和嵌入3D元素

X3DOM是一个WebGL框架,用于为网站和Web应用程序构建可嵌入3D Web的图形。它提供了可以添加到任何HTML5项目中的简单标记代码。
在这里插入图片描述
特点:

  • 易于使用
  • 准备嵌入任何HTML项目
  • 简单的可嵌入代码
  • 适用于许多浏览器,包括旧版IE和现代浏览器,例如Google Chrome,Firefox,Safari
  • 在移动浏览器(Safari IiOS),谷歌浏览器和Mozilla Firefox上均可正常运行
  • 可以在Python服务器或IIS Windows服务器上运行
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WebGL开源框架列举概述 的相关文章

  • 求 3d 中 2 个任意立方体的交集

    所以 我想找出一个函数 可以让您确定两个任意旋转和大小的立方体是否相交 如果立方体的旋转不是任意的 而是锁定到特定的轴 则相交很简单 您可以通过检查它们的边界来检查它们是否在所有三个维度上相交 以查看它们在所有三个维度上是否相交或在彼此之内
  • 如何在 Three.js 中使用反射?

    我想在带有 Three js 的 WebGL 页面中拥有一个反射立方体表面 它应该类似于手机显示屏 反射一些光 但它仍然必须是黑色的 我创建了一个反射立方体 以及反射球体 的示例 并附有详细的注释 现场版本位于 http stemkoski
  • 如何从 dxf 文件解析 nurbs 曲面?或者你知道用于解析它的库(对于js,如果存在或任何其他语言)?

    我正在尝试解析 autocad nurbs 曲面并使用 JavaScript 中的 webGL 进行三角测量绘制 我已经在寻找 bjnortier 的 dxf 解析器 它支持大多数实体 如直线 圆弧 3Dface 折线 lwpolyline
  • 编写每个三角形/面具有纯色的 GLSL 片段着色器的方法

    我有顶点和三角形数据 其中包含每个数据的颜色triangle 面 不是每个顶点 即单个顶点由多个面共享 每个面可能具有不同的颜色 我应该如何在 GLSL 中解决这个问题以获得每个的纯色分配face正在渲染 通过平均顶点相邻多边形的颜色来计算
  • 如何在Android中渲染OBJ或FBX? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有几个 obj 和 fbx 格式的 3D 对象 其中包含 mtl 和纹理文件 我想知道哪个是在 An
  • 3D 图形矩阵 4x4 中最后一行的 magic 4 的用途是什么?

    当我阅读有关WebGL的书时 我看到了下一个矩阵描述 有关于书中最后一行的信息 WebGL 初学者指南 初学者指南 Diego Cantor Brandon Jones 神秘的第四排 第四排没有任何特殊之处 意义 元素 m4 m8 m12
  • 如何在SceneKit中实现逼真的景深效果?

    我正在尝试渲染具有真实景深效果的帧 我已经尝试过景深属性camera节点 但它不会产生可用的结果 是否可以切换到景深效果的最大渲染质量 性能不是一个因素 我只需要渲染一帧 用户可以等待它 SceneKit 中逼真的景深效果 在SceneKi
  • 点列表的 3D 轮廓(凹壳)

    我有一个 C 中的 Vector3 点列表 我需要计算这些点的凹轮廓 确实有很多参考资料 特别是对于 凸 分辨率 由于格雷厄姆算法 我已经成功实现了 然而 由于我现在需要有效地计算凹轮廓 所以我迷失了 维基百科确实列出了很多用于凸计算的资源
  • OpenGL Z 偏置(多边形偏移)限制

    我有两个共面的多边形 我尝试做 glEnable GL POLYGON OFFSET FILL glPolygonOffset 0 1 并期望其中一个明显 位于 另一个之上 这种情况直到大约 70 75 个单位之外 近剪裁平面为 1 远剪裁
  • 将 WebGL 应用程序部署为本机 iOS 或 Android 应用程序?

    有谁知道如何将 WebGL 应用程序部署为本机 iOS 或 Android 应用程序 商业中间件是可以接受的 但开放项目会更好 谢谢 作为 Joris 答案的延伸 这似乎是基于内森 德弗里斯的作品 http atnan com blog 2
  • 在 Three.js 中将贝塞尔曲线转换为平面道路

    我试图根据之前计算得到的一些贝塞尔曲线在 Three js 中绘制一条弯曲的道路 问题是我找不到转换曲线序列的方法 一条从上一条曲线的末尾开始 到一个曲面 我有一个 3D 场景 其中有一些汽车 一条用飞机创建的道路 并且绘制了即将到来的道路
  • VS CODE 中的 WEBGL 自动完成

    我有一个学校项目 我需要使用 WEBGL 但是在没有自动补全的情况下编写所有代码是相当困难的 我没有找到合适的扩展名 你有想法吗 为了让 Visual Studio 代码能够自动完成 它需要知道变量的类型 例如 如果你有这个 const g
  • 判断一个点是否在多面体内部

    我试图确定某个特定点是否位于多面体内部 在我当前的实现中 我正在研究的方法采用我们正在寻找多面体面的数组 在本例中为三角形 但稍后可能是其他多边形 的点 我一直在尝试根据这里找到的信息进行工作 http softsurfer com Arc
  • C++ Irrlicht 程序未链接:“未定义对‘__imp_createDevice’的引用”

    我的 Irrlicht 程序无法链接 我使用的编译器是g Code include
  • 3D 数学:根据“向上”和“向上”正交向量计算倾斜(滚动)角度

    我希望这是提出这个问题的正确位置和这个一样 https stackoverflow com questions 3035590 bank angle from up vector and look at vector 但表示为纯数学而不是图
  • 将大块位图转换为 3 维位图

    Problem 我需要这个大量的数据作为输入 对于基于C的arduino 这是上面示例中所需格式的大量数据 const byte bitmap 8 8 0xFF 0x81 0x81 0x81 0x81 0x81 0x81 0xFF 0x81
  • 简单的线框格式?

    我正在寻找一种用于线框模型的简单文件格式 我知道 VRML u3D 等 但这些对于我的需求来说似乎很重要 我的标准是 必须有明确的规格 要么是开放的 要么是非常完善 记录的 我只需要 想要 简单的模型 顶点和边 我不想处理面孔或物体 如果格
  • GL_CULL_FACE使所有对象消失

    我正在尝试在 openGL3 3 中创建一些简单的多边形 我有两种类型的对象 具有以下属性 对象 1 10 个顶点 按顺序在下面列出 存储在GL ARRAY BUFFER并使用GL TRIANGLE FAN v x y z w v 0 0
  • 如何仅剪切剪切平面的交集(而不是并集)?

    在 OpenGL JOGL 中 当使用多个剪切平面时 似乎会应用所有剪切平面的并集 我想要的是路口要应用的所有剪裁平面 这可能吗 请参阅下面的简化二维示例 Edit An example of clipping by vertex shad
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形

随机推荐

  • 计算机毕业设计选题推荐基于nodejs+Vue360学生宿舍系统

    管理员 首页 个人中心 宿舍信息管理 学生管理 宿舍报修管理 访客信息管理 水电费管理 管理员管理 交流论坛 系统管理 学生 首页 个人中心 宿舍报修管理 水电费管理 前台首页 首页 交流论坛 通知公告 个人中心 后台管理 在线沟通等 目
  • win 10 下cmd命令无法使用ssh命令

    在WIN 10 系统下出现cmd命令无法正常使用ssh命令 提示 ssh不是内部命令 出现这种情况要考虑到是环境变量出现问题 1 鼠标右键单击 我的电脑 进入 属性 2 点击 系统高级设置 选择 环境变量 3 找到 path 点击打开 4
  • Qt中使用QTextStream中文乱码的情况解决

    1 前言 今天在做一个文件编辑器 然后发现读取txt文件的时候 中文的显示乱码 然后在网上查了一些方法 没用 自己摸索了一下 找出了一个办法 2 解决办法 QTextStream in new QTextStream file in gt
  • Csharp:TinyMCE HTML Editor in .NET WindowsForms

  • STM32控制电机简易教程

    STM32控制电机简易教程 包教包会 近期 电赛临近 来补习一下电机的使用方式 使用起来非常的方便 首先是在CUBEMX里面配置一些基本内容 然后是使用PWM去调速 其他的时钟和调试配置就不多说了 然后就是初始化了 同样的 这里使用的是结构
  • 【华为OD机试真题 python】最大报酬【2022 Q4

    题目描述 最大报酬 小明每周上班都会拿到自己的工作清单 工作清单内包含 n 项工作 每项工作都有对应的耗时时间 单位 h 和报酬 工作的总报酬为所有已完成工作的报酬之和 那么请你帮小明安排一下工作 保证小明在指定的工作时间内工作收入最大化
  • 如何在SYSTEM权限下实现屏幕监控

    屏幕监控是远控软件的基本功能之一 现在很多远控程序的服务端通常为DLL形式 通过远程线程注入等方法插入到services svchost等SYSTEM权限的进程中去 而此时常规的屏幕监控就会失效 这是因为与SYSTEM权限进程关联的窗口站
  • Springboot 各种常用配置

    目录 数据库配置 常用 sql 数据源 spring 配置 druid 依赖 基础配置 统一错误处理 统一响应信息处理 Swagger 配置 Spring security 配置 抽象业务配置 实体类的父类 控制器父类 mybatis pl
  • 【统计模型】ToothGrowth数据集双因素方差分析

    目录 ToothGrowth数据集双因素方差分析 一 研究目的 二 数据来源和相关说明 三 描述性分析 3 1 样本描述 3 2 样本均值 3 3 箱线图 四 数学建模 五 结论与建议 5 1 结论 5 2 建议 六 代码 ToothGro
  • 111. 二叉树的最小深度

    给定一个二叉树 找出其最小深度 最小深度是从根节点到最近叶子节点的最短路径上的节点数量 说明 叶子节点是指没有子节点的节点 Definition for a binary tree node public class TreeNode in
  • android so劫持,防劫持SDK

    防劫持SDK 一 产品简介 防劫持SDK是具备防劫持兼防截屏功能的SDK 可有效防范恶意程序对应用进行界面劫持与截屏的恶意行为 二 iOS版本 2 1 环境要求条目说明兼容平台iOS 8 0 开发环境XCode 4 0 CPU架构armv7
  • 四、设计工程

    软件设计开始于软件需分析和规约之后 是把需求转化为软件系统的重要环节 软件需求解决 做什么 的问题 软件设计解决 怎么做 的问题 一 概述 早期设计工程分为概要设计和详细设计 概要设计 将需求转换为数据结构 软件体系结构及其接口 详细设计或
  • 另一种排序方法 C#

    private void button27 Click object sender EventArgs e int array new int 10 3 2 4 90 50 20 34 22 49 int newArray new int
  • 125道Python面试题总结

    Pyhton面试宝典 提高编程能力的最有效办法就是 敲代码 1 一行代码实现1 100之和 res sum range 1 101 print res 5050 Python精华知识点手册 完整版 下载 2 如何在一个函数内部修改全局变量
  • Java嵌入式数据库H2学习总结(一)——H2数据库入门

    只为成功找方法 不为失败找借口 Java嵌入式数据库H2学习总结 一 H2数据库入门 一 H2数据库介绍 常用的开源数据库有 H2 Derby HSQLDB MySQL PostgreSQL 其中H2和HSQLDB类似 十分适合作为嵌入式数
  • ios(六)sqlite3以及FMDB

    SQLite 一种轻量的本地数据库 方便嵌入系统 支持跨平台 根据工作经验来看 无论是Android还是iOS大多都采用SQLite 首先我们需要新建一个数据库 我们给他起名personinfo sqlite 创建一张叫做person的表
  • HashMap 与HashTable的区别

    HashMap 与HashTable的区别 HashMap与Hashtable的区别是面试中经常遇到的一个问题 这个问题看似简单 但如果深究进去 也能了解到不少知识 本文对两者从来源 特性 算法等多个方面进行对比总结 力争多角度 全方位的展
  • python绘图坐标轴

    转载很好的学习资料 https zhuanlan zhihu com p 448571003
  • MySQL必知必会 学习笔记 第二十七章 全球化和本地化

    不同的语言和字符集需要以不同的方式存储和检索 MySQL需要适应不同的字符集 以及排序和检索这些数据的方法 术语 1 字符集 字母和符号的集合 2 编码 某个字符集成员的内部表示 3 校对 规定字符如何比较 查看MySQL支持的字符集列表
  • WebGL开源框架列举概述

    一 概述 WebGL是基于OpenGL的JavaScript API 库 允许Web浏览器在浏览器中渲染3D 2D图形 而无需安装额外的插件 桌面应用程序 任何第三方插件或浏览器扩展 WebGL允许通过浏览器使用机器GPU将3D图形渲染为H