位置: 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拼接图片)

  • 个人出租不动产税率
  • 月工资税基是什么
  • 一般纳税人机电安装服务费税率是多少
  • 没有支付运费会怎样
  • 分公司独立核算还需要总公司汇总缴纳吗
  • 私企捐助民办学校怎么办
  • 贸易公司的印花税税率是多少
  • 垫付被骗客服承诺退款
  • 以公司股权作价入股母公司
  • 公司购买服装
  • 委外加工半成品入库的会计分录
  • 安装过程中材料和工资
  • 投资收益如何做账
  • 地税收的其他政府基金计入科目及收益
  • 销售货物运费的增值税率
  • 不容忽视的近义词
  • 公户以借款形式打款给个人,对个人有影响么?
  • 初级备考心得总结
  • 进口货物退税流程
  • 筹建期间开办费账务处理
  • 四川中级会计报名需要上传哪些资料
  • 联营 保底
  • 会计基础工作是会计工作的基本环节
  • 招待客户住宿费用计入什么科目
  • win11 pin失效
  • linux sar文件
  • 我的电脑图标没了怎么恢复
  • bwkp.exe是什么程序
  • php基础编程题
  • 应付票据可以直接填列吗
  • PHP:mcrypt_module_is_block_algorithm()的用法_Mcrypt函数
  • 对个别报表中处置收益的归属期间进行调整
  • JavaScript数组长度
  • 注意力机制加在CNN的什么位置
  • php dirname函数
  • php怎么上传图片并保存到数据库
  • 酒店会计科目及账务处理视频
  • 旅游费用叫什么
  • 资产减值损失和资产减值准备
  • 本单位职工可以承包本单位业务吗
  • mysql主键和索引
  • 质量扣款应收账款怎么算
  • 什么是子公司 和控股的区别
  • 本年利润的会计编码
  • 印花税技术合同包括什么
  • 存货在报表里是如何体现的
  • 国外客户怎么付款给我们公司
  • 小规模纳税人的税率是多少
  • 应付账款尾款怎么处理
  • 跨年发票账务处理怎么做
  • 购买设备分期付款凭证怎么做
  • 预收账款如何做账务处理
  • 免增增值税的有
  • 会计凭证装订后应当加贴封条
  • mysql从一个表导入记录到另一个表
  • win10显示请勿关闭电脑
  • win7旗舰系统
  • win2000系统安装教程
  • ubuntu如何读
  • gwsystemservice.exe是什么进程 有什么作用 gwsystemservice进程查询
  • windows8设置
  • mac系统怎么查找文件
  • win8.1其他用户名登不进去
  • win7系统删除文件需要权限
  • 用dos杀毒的一个软件
  • vue前端后端
  • html框架frameset代码
  • jquery插件ajaxupload实现文件上传操作
  • 基于jquery的框架有哪些
  • cmd批处理命令文件个数
  • python简单gui
  • jquery操作
  • jQuery基本选择器
  • Android Listview addHeaderView setadapter的时候莫名NullPointerException 解决
  • 省市区json
  • 内蒙古税务局电子发票查询
  • 金税盘的操作步骤
  • 小规模纳税人销售自己使用过固定资产
  • 购买税控盘怎么抵扣
  • 重庆税务局app下载官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设