位置: IT常识 - 正文

浅识WebGL和Three.js(webgl1.0)

编辑:rootadmin
浅识WebGL和Three.js WebGL

推荐整理分享浅识WebGL和Three.js(webgl1.0),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:webgl1.0,webgl1和2的区别,webgl和threejs区别,webgl和threejs区别,webgl和web,webgl和three.js,webgl和webgpu,webgl和threejs区别,内容如对您有帮助,希望把文章链接给更多的朋友!

想必各位看官大大都了解过,进行3D图形渲染,主要依赖显卡(GPU)为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样,不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑,所支持的能力也不尽相同。为了简化方便图形应用开发和硬件适配的工作量,诞生了一些可以让不同应用方便调用的图形库,用以抹平底层硬件实现的差异,例如OpenGL、 Direct3D、Vulkan......

基本概念

WebGL(Web Graphics Library,Web图形库), 是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件 。 WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。通过这些接口,开发者可以直接跟GPU进行通信。

目前支持 WebGL 的浏览器有:Firefox 4+, Google Chrome 9+, Opera 12+, Safari5.1+, Internet Explorer 11+和Microsoft Edge build 10240+;然而, WebGL一些特性也需要用户的硬件设备支持。

WebGL 2 API引入了对大部分的OpenGL ES 3.0功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

WebGL 程序分为 2 部分:

使用 Javascript 编写的运行在CPU的程序使用 GLSL 编写的运行在GPU的着色器程序

着色器程序接收CPU传过来的数据,并进行一定处理,最终渲染成丰富多彩的应用样式。

3D坐标系WebGL 3D坐标系渲染流程

WebGL 能绘制的基本图元只有 3 种,分别是点、线段、三角形,对应了物理世界中的点线面。所有复杂的图形或者立方体,都是先用点组成基本结构,然后用三角形将这些点构成的平面填充起来,最后由多个平面组成几何体。

但现实情况是,如果想生成满足各种应用场景的复杂形状,几何结构会非常复杂,代码写起来也会非常复杂。这时候就会有看官会问了:那我写个🐱 啊?别着急哈,咱不是前端开发者嘛,所以肯定会有对前端友好的开发方式嘛~

Three.js

Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。

github链接:github.com/mrdoob/thre…

Three.js官网:threejs.org/

Three.js文档:threejs.org/docs/index.…

Three.js示例:threejs.org/examples/#w…

Three.js应用

既然Threejs是一款WebGL三维引擎,那么它可以用来做什么想必各位看官大大一定很关心。所以接下来内容会展示一些基于Three.js引擎或Three.js类似引擎开发的Web3D应用,以便大家了解~

物联网3D可视化

物联网粮仓3D可视化案例:www.yanhuangxueyuan.com/3D/liangcan…

产品720在线预览浅识WebGL和Three.js(webgl1.0)

玉镯产品在线预览案例:www.yanhuangxueyuan.com/3D/liangcan…

沙发在线预览

沙发在线预览:app.xuanke3d.com/apps/trayto…

服装在线预览

服装在线预览:suit.xuantech.cn/

洗衣机在线交互预览

 

洗衣机在线交互预览:cdn.weshape3d.com/hir001/1021…

数据可视化

解析GeoJSON数据中国GDP数据可视化:www.yanhuangxueyuan.com/3D/geojsonC…

H5/微信小游戏

非常火的微信小游戏跳一跳就是使用Three.js引擎开发的。 开发3D类的H5小游戏或者微信小游戏,Three.js引擎是非常好的选择。

通过Threejs开发的小游戏,可以直接部署在微信小程序或者web端,无需下载,方便传播,目前的生态非常和小游戏开发。

科教领域

在科教领域通过3D方式展示特定的知识相比较图像更为直观。

科研平台-蛋白质结构可视化案例:www.rcsb.org/3d-view/2JE…

化学相关——分子结构可视化:www.yanhuangxueyuan.com/3D/fenzi/in…

地理天文相关——太阳系3D预览:www.yanhuangxueyuan.com/3D/solarSys…

机械领域

机械模型在线预览demo:www.yanhuangxueyuan.com/3D/jixiezhu…

Onshape是一款机械领域的三维建模软件,如果熟悉Solidworks、UG等CAD软件,那么你可以把Onshape理解为云Solidworks。

WebVR

对于现在比较火的VR、AR概念,WebGL技术的出现,也是一个好消息,如果你想预览一些VR内容,完全可以不下载一个VR相关的APP,通过threejs引擎实现VR内容发布,然后用户直接通过微信等社交方式推广,直接打开VR内容链接就可以观看。

VR与Web3D技术结合自然就衍生出来一个新的概念WebVR,也就是基于Web实现的VR内容。

家装室内设计相关

室内设计作品展示案例:www.yanhuangxueyuan.com/3D/houseDes…

相关库

下面表格列举了一些Three.js相关的开源库。

库功能PhysijsPhysijs是一款物理引擎,可以协助基于原生WebGL或使用three.js创建模拟物理现象,比如重力下落、物体碰撞等物理现stats.jsJavaScript性能监控器,同样也可以测试webgl的渲染性能dat.gui轻量级的icon形用户界面框架,可以用来控制Javascript的变量,比如WebGL中一个物体的尺寸、颜色tween.js借助tween.js快速创建补间动画,可以非常方便的控制机械、游戏角色运动ThreeBSP可以作为three.js的插件,完成几何模型的布尔,各类三维建模软件基本都有布尔的概念react-three-fiberThreejs的React 渲染器。gltfjsx一个小型命令行工具,可将 GLTF 资产转换为
本文链接地址:https://www.jiuchutong.com/zhishi/298844.html 转载请保留说明!

上一篇:滑模控制理论(SMC)(滑模控制理论与应用研究pdf)

下一篇:5.OpenCV图像拼接(opencv拼接图片)

  • 差额征税的税率怎么计算
  • 开发票,对方收取税点,如何计算
  • 盘库应该由公司什么部门负责
  • 男的交社保有什么好处
  • 国际机票可以抵扣进项税吗
  • 社保委托代发银行账号是空的
  • 企业收购资金计算公式
  • 公司支付宝扣的钱去哪了
  • 工程款的税是怎么扣除的?
  • 公司股权平价转让要交税吗
  • 资产负债表其他流动资产包括什么
  • 发票专用章只能盖一个
  • 销售商品会计凭证
  • 什么称为非正数
  • 与军队发生业务应该取得哪种发票?
  • 应付款转收入条件
  • 控股公司如何抵押股权
  • 受伤员工补贴
  • 机动车销售统一专票税率
  • scrtkfg.exe - scrtkfg是什么进程 有什么用
  • 当前页面的脚本发生错误是否要在此页面上继续运行脚本
  • php字符串赋值
  • PHP:pg_escape_identifier()的用法_PostgreSQL函数
  • 用科目汇总表怎么登记总账
  • php的正则表达式
  • 禁止input标签输入
  • PHP:shell_exec()的用法_命令行函数
  • 企业银行贷款利率2023
  • 公司法人变更账户没有改有影响吗
  • 临时经营如何纳税
  • 没有利润,能否开发票
  • 以前年度应扣未扣支出专项申报表
  • 季度申报怎样在网上申报
  • 以摊余成本计量和以公允价值计量的区别
  • php返回数据给ajax
  • css中的hover属性
  • roc曲线绘制r语言
  • 固定资产改造替换
  • 会计做账需要银行交易明细吗
  • 什么是社会团体组织
  • bootstrapstandby
  • 自然人独资的有限责任公司交什么税
  • 加计抵减会计分录其他收益
  • 个体经营部能抵扣个税吗
  • 个人所得税租房专项扣除标准
  • mysql数据库编码
  • 外聘专家机票能抵扣增值税吗
  • 上年度漏提折旧
  • 开出银行承兑汇票
  • 无奖有票是什么意思
  • 股东转公户的钱叫什么
  • 政府征税再进行补贴对消费者福利的影响
  • 收购免税农产品的进项税率
  • 行政事业单位固定资产入账标准最新规定
  • 利润表怎么没有本月数
  • 销项税红字发票如何做账
  • 利息收入核算什么科目
  • mysql5.7.29安装
  • 恢复注册表的方法
  • windows下用什么编程工具
  • win7如何设置共享
  • xp系统文件损坏怎么修复
  • w10组策略
  • window 8
  • 通过扣缴义务人申报和综合所得年度自行申报
  • html概念及作用
  • django内置组件
  • python基本入门
  • unity给物体添加重力
  • javascript函数的定义
  • 使用jQuery加载html页面到指定的div实现方法
  • jquery怎么修改样式
  • python 批量ping
  • python框架scrapy
  • 2018年建筑业增值税税率变更文件
  • 地税登录密码忘记了怎么办
  • 税务师事务所企业组织架构
  • 地税局跟税务局有什么区别
  • 计算出口退税的免抵税额,不计征城市维护建设税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设