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

  • 微信语音通话怎么设置和来电一样(微信语音通话怎么设置铃声)

    微信语音通话怎么设置和来电一样(微信语音通话怎么设置铃声)

  • 趣威点读笔怎么连无线网(趣威点读笔怎么读绘本)

    趣威点读笔怎么连无线网(趣威点读笔怎么读绘本)

  • 荣耀x10和小米10青春版的区别(荣耀x10和小米10pro哪个好)

    荣耀x10和小米10青春版的区别(荣耀x10和小米10pro哪个好)

  • 微信买的流量迟迟不到(为什么微信买的流量这么慢)

    微信买的流量迟迟不到(为什么微信买的流量这么慢)

  • 蓝牙耳机左边声音很小(蓝牙耳机左边声音很小怎么调节)

    蓝牙耳机左边声音很小(蓝牙耳机左边声音很小怎么调节)

  • 苹果手机dock栏变透明(苹果手机dock栏怎么设置4个以上应用)

    苹果手机dock栏变透明(苹果手机dock栏怎么设置4个以上应用)

  • qq音乐怎么切换账号(qq音乐怎么切换黑夜模式)

    qq音乐怎么切换账号(qq音乐怎么切换黑夜模式)

  • 手机出现条纹怎么自修(手机出现条纹怎么回事)

    手机出现条纹怎么自修(手机出现条纹怎么回事)

  • 苹果勿扰模式微信怎么还有提示(苹果勿扰模式微信电话还能打过来)

    苹果勿扰模式微信怎么还有提示(苹果勿扰模式微信电话还能打过来)

  • 街电可以异地还吗(街电可不可以跨省还)

    街电可以异地还吗(街电可不可以跨省还)

  • 港版是什么意思(lv港版是什么意思)

    港版是什么意思(lv港版是什么意思)

  • 苹果手机微信朋友圈卡顿怎么回事(苹果手机微信朋友圈折叠怎么解决)

    苹果手机微信朋友圈卡顿怎么回事(苹果手机微信朋友圈折叠怎么解决)

  • 苹果手机视频全部打不开怎么办(苹果手机视频全变荧光色)

    苹果手机视频全部打不开怎么办(苹果手机视频全变荧光色)

  • 充电宝充不上电一直闪(充电宝充不上电了但是灯还亮)

    充电宝充不上电一直闪(充电宝充不上电了但是灯还亮)

  • 为什么交了话费手机还是没网络(为什么交了话费宽带还是不能用)

    为什么交了话费手机还是没网络(为什么交了话费宽带还是不能用)

  • 苹果11和11pro拍照区别(苹果11和11pro拍视频哪个好)

    苹果11和11pro拍照区别(苹果11和11pro拍视频哪个好)

  • 为什么苹果天气显示不出来(为什么苹果天气定位是别的地方)

    为什么苹果天气显示不出来(为什么苹果天气定位是别的地方)

  • 怎样解除来电免打扰(怎样解除来电免提功能)

    怎样解除来电免打扰(怎样解除来电免提功能)

  • led液晶无缝拼接屏的安装技巧(led液晶无缝拼接屏厂家)

    led液晶无缝拼接屏的安装技巧(led液晶无缝拼接屏厂家)

  • 怎么设置微信自动运行(怎么设置微信自动添加好友)

    怎么设置微信自动运行(怎么设置微信自动添加好友)

  • 华为p30拍照有防抖功能吗(华为p30拍照防抖在哪里)

    华为p30拍照有防抖功能吗(华为p30拍照防抖在哪里)

  • oppok3有红外线功能吗(oppok1带红外线功能)

    oppok3有红外线功能吗(oppok1带红外线功能)

  • qq火花掉了怎么补救(qq火花掉了怎么补签)

    qq火花掉了怎么补救(qq火花掉了怎么补签)

  • 忘记id密码怎么改(忘记id密码怎么恢复出厂设置)

    忘记id密码怎么改(忘记id密码怎么恢复出厂设置)

  • 偷渡者福音,不受微软支持的 Win11 PC 仍能获得累积更新补丁(偷渡者视频)

    偷渡者福音,不受微软支持的 Win11 PC 仍能获得累积更新补丁(偷渡者视频)

  • Salzburg with Salzach river, Austria (© MacEaton/Alamy)

    Salzburg with Salzach river, Austria (© MacEaton/Alamy)

  • JS之location对象详解

    JS之location对象详解

  • 【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件(node.js快速入门)

    【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件(node.js快速入门)

  • 居民企业投资收益免征企业所得税
  • 个人所得税计提分录怎么写
  • 农产品普票进项税抵扣怎么做账
  • 未确认融资费用和长期应付款
  • 小规模季度30万免税
  • 销售商品收到银行汇票计入什么科目
  • 销售的增值税怎么算
  • 期初固定资产净值在资产负债表中的哪里
  • 城镇土地使用税暂行条例
  • 编制利润表会计等式
  • 影视发行收入该如何做税收处理?
  • 低值易耗品一次性摊销体现重要性
  • 一个员工在两家公司上班违法吗
  • 本年度应收账款是否应该加起初
  • 防洪基金怎么做分录
  • 茶具可以作为固定资产吗
  • 资产置换税务处理案例
  • win7系统ie浏览器在哪里
  • 新买的电脑如何激活windows
  • 扣发工资可以要赔偿吗
  • w10怎么找蓝牙
  • i911900k与10900k
  • 房地产企业前期工程费包括什么项目
  • 租赁固定资产成本怎么算
  • 销售方怎么申请红字信息表
  • 股权转让定金怎么做账
  • 最小的蓝牙鼠标是哪款
  • 提高stable diffusion速度
  • php linux常用命令
  • 金融商品转让业务包括
  • 公司员工的车加油可以开公司发票吗
  • 补差价如何做账
  • 员工报销发票怎么做账
  • 准确率精确率
  • python字符串多行
  • 融资租赁设备所有权归谁
  • 实际库存小于账面库存
  • 发票申请条件
  • 预付账款和预收账款哪个是负债
  • 签劳动合同员工突然离职怎么办
  • 织梦如何使用
  • 员工洗衣机使用制度
  • 利息补缴税款加收利息计算
  • 未确认融资费用账务处理
  • 珠宝可以开票抵扣吗
  • MSSQLSERVER不同版本设置开启远程连接(sa配置)
  • 会计法中单位负责人均指法定代表人
  • 异地房产税如何收
  • 非居民企业所得税税率
  • 企业所得税留抵税额
  • 出口退税暂不抵税怎么办
  • 上一年度企业所得税汇算清缴会计分录
  • 工程上第三方代表啥意思
  • 个人境外投资限制
  • 调整后视镜
  • sqlserver表结构如何导入到oracle
  • 目前用到的两个字符
  • sql语句分号
  • mysql5.7最新版
  • win10阻止可能不需要的应用吗
  • fs是什么文件夹
  • mkcool是什么文件
  • 怎么降到windows7
  • win81with update
  • win7系统中怎么查看隐藏文件
  • linux检测硬件
  • nodejs常用api
  • Android游戏开发入门
  • android图像处理
  • ajax的异步是什么意思
  • unity中time.time
  • node.js速成
  • 批处理列出文件名
  • jquery跨域请求有哪些方式
  • android实时获取微信聊天信息
  • 住房货币化什么意思
  • 发票税额小数点打印不全能报销吗
  • 临时税务登记证是什么意思
  • 电子税务局怎么添加开票员
  • 股权转让所得怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设