SF
前端可视化 WebGL
前端可视化 WebGL
注册登录
关注博客
注册登录
主页
关于
RSS
threejs三维地图大屏项目分享
用户bPBVPM
2022-11-09
阅读 11 分钟
8.1k
这是最近公司的一个项目。客户的需求是基于总公司和子公司的数据,开发一个数据展示大屏。 大屏两边都是一些图表展示数据,中间部分是一个三维中国地图,点击中国地图的某个省份,可以下钻到省份地图的展示。 地图上,会做一些数据的标注,信息标牌。 如下图所示:
WebGL压缩纹理实践
用户bPBVPM
2022-09-06
阅读 3 分钟
4k
本文将讲述压缩纹理在实际项目中的使用的案例。最近的一个项目是这样的:项目由于涉及到的建筑物特别多,大概有近40栋的建筑,而每一栋建筑物,又有10层楼,每层楼里面又有很多的设备。这就导致我们需要使用到大量的贴图。在实际的项目过程中,我们的客户的电脑会经常遇到webgl崩溃的情况。这就需要我们想办法来减少该项...
UE 实现镜头平移,旋转和缩放
用户bPBVPM
2022-09-02
阅读 5 分钟
3.4k
在数字孪生三维场景中,通过键盘和鼠标来控制镜头的移动,缩放是很常见的行为,也是很必要的行为,用户正是通过这些操作,达到对整个三维场景的观看和控制。
UE 实现鼠标点选模型
用户bPBVPM
2022-08-29
阅读 3 分钟
3.6k
本文会涉及到一些蓝图的知识,如果你对蓝图不了解,需要先了解下UE的蓝图知识。蓝图 是虚幻引擎4的可视化脚本方法。也就是说,通常要通过编写脚本来完成的任务,现在可以通过一个由节点和连接组成的图形来创建,而不必输出任何实际的代码。
UE导入FBX、GLTF模型
用户bPBVPM
2022-08-27
阅读 2 分钟
4.4k
虽然做了很多年的三维可视化,不过都主要还是web端开发为主(webgl,threejs,有兴趣的读者也可以关注下我的相关专栏)。最近准备入手一下UE,顺便做一下知识梳理。 所以文章可能都是比较粗浅的,对于UE大佬可以忽略。
webgl(threejs)生成房间楼层
用户bPBVPM
2022-08-20
阅读 4 分钟
6k
在很多数字孪生项目中,都会涉及到楼层的建模。楼层的建模由于结构繁多,如果都是建模师进行手动建模,工作量会比较大。而楼层本身的结构,可以抽象成可以通过路径构造的对象(这和之前的文章提及的的管路以及道路类似),这方便我们通过代码的方式来生成房间楼层。
基于webgl(threejs)的路面编辑
用户bPBVPM
2022-08-11
阅读 5 分钟
3.7k
在很多应用中,特别是一些园区类的应用。 都需要对园区的地面 环境进行展示,路面就是地面的一部分。通常的做法是,都是建模的时候把相关的元素都建好,然后导入到展示系统中进行展示。不过有些情况下,可能建模并不太方便,所以三维编辑器可以直接进行简单的路面编辑显得挺有必要。
WebGL管网展示(及TubeGeometry优化)
用户bPBVPM
2022-08-03
阅读 3 分钟
3.7k
前言管路展示在三维场景中很常见。比如地下管网,建筑里面的水果,暖通管道等等的展示。建立管路的方式主要两种:通过3DMax C4D Blender等建模工具进行建模。通过路径数据,程序生成三维管路。如果需要动态的通过数据生成管路,只能采用第二种方式来生成。生成管路的方式在THREE中,通过TubeGeometry可以生成管路。TubeG...
WebGL实践之半透阴影
用户bPBVPM
2022-07-11
阅读 2 分钟
3.1k
但是对于透明或者半透明的对象,WebGL在处理阴影效果的时候,会把他当成一个不透明的对象来处理,这也渲染的阴影效果就显得很假。 比如下面树得阴影效果:
JS数组at函数(获取最后一个元素的方法)介绍
用户bPBVPM
2022-06-15
阅读 2 分钟
3.6k
首先,我们可以思考如下一个问题,如果要获取一个数组的最后一个元素(这是很常用的操作),我们应该怎么做? 相信大部分人能够想到的代码是这样的:
webgl未使用独立显卡报告2
用户bPBVPM
2022-05-12
阅读 1 分钟
2.5k
楔子在上一篇文章 《# [[链接]] webgl未使用独立显卡报告》发表后,有读者在公众号给我发了一段评论,如下图所示:我通过找电脑测试,发现确实有这个情况,而我之前的文章没有提到这种情况:“在windows下面进行图形设置”,所以做个补充。设置步骤对于前面下面把详细的设置步骤说明下:右键在windows桌面点击,选择显示设...
WebGL加载本地模型
用户bPBVPM
2022-05-06
阅读 3 分钟
3.9k
大部分的webgl框架,比如threejs和babylon等,都可以加载obj和gltf模型。 我们的引擎,基于three封装,同样有加载模型的loader,因此加载obj和gltf模型也是很简单就可以实现的。
webgl未使用独立显卡报告
用户bPBVPM
2022-03-14
阅读 2 分钟
3.8k
最近客户在使用我们的的三维可视化平台的时候,总是会出现浏览器崩溃,webgl context lost的情况。 这种请一般出现在电脑配置很低的电脑上,比如没有独显,只有很小现存的集成显卡的电脑。
使用IndexedDB缓存给WebGL三维程序加速
用户bPBVPM
2022-02-09
阅读 4 分钟
6k
使用webgl开发三维应用的时候,经常会发现三维场景加载比较慢,往往需要等待挺长时间,这样用户的体验就很不友好。 造成加载慢的原因,主要是三维应用涉及到的资源文件会特别多,这些资源文件主要是模型及其图片,往往这些模型和图片都会比较大。
threejs 贴图动画总结
用户bPBVPM
2021-12-17
阅读 5 分钟
7.1k
上面代码,实现了一个tube(管道),然后给管道加了一个贴图texture。 在渲染的时候,不断更新texture对象的offset的值,此时就可以生产流动的动画。如下图所示:
三维引擎导入obj模型不可见总结
用户bPBVPM
2021-12-14
阅读 1 分钟
2.9k
导入的模型不在镜头视野内,所以看不到模型。有可能模型就不在视野内,也有可能模型位置超过了镜头的far参数值。 这种情况下,调整镜头的参数(包括position,center,far等)。
三维引擎导入obj模型全黑总结
用户bPBVPM
2021-12-09
阅读 2 分钟
4.4k
最近有客户试用我们的三维平台,在导入模型的时候,会出现模型全黑和不可见的情况。本文说下全黑的情况。经过测试,发现可能有如下几种情况。obj 模型没有法线向量如果obj模型导出的时候没有导出法线向量,会导致模型不能接受光照,从而导出的模型是全黑的。 此种情况下,高光反射也没有。解决方案上,一种是让建模人员...
使用SVG做模型贴图的思路
用户bPBVPM
2021-11-20
阅读 2 分钟
3.5k
大多数情况下,三维模型使用PNG,JPG作为模型的贴图,当然为了性能优化,有时候也会使用压缩贴图来提高渲染效率和较少GPU压力。今天提供一种新的思路,使用SVG作为模型的贴图,可以达到动态调整图片精度的效果。使用svg作为贴图的思路,有两种。直接作为贴图直接使用贴图,其实和png jpeg的图片没有多少差别,加载的贴图...
光伏逆变器建筑设计工具
用户bPBVPM
2021-08-16
阅读 3 分钟
1.7k
最近有不同行业的客户咨询我司能不能提供一种解决方案,可以快速实现三维建筑效果,能快速响应市场需要,满足投标、交付、技术服务、厂房建设等需求。客户主要行业领域为新能源光伏逆变器铺设、房地产建筑、工厂厂房等三维建筑领域。首先我们对他们的需求进行了分析,发现他们的共同需求是三维建筑,他们都想使用简单快...
智能制造芯片车间生产线可视化
用户bPBVPM
2021-08-16
阅读 1 分钟
3k
随着《中国制造2025》的提出,制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用,如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用,已经成为社会各界共同关注的热点。
水厂流程三维场景可视化解决方案
用户bPBVPM
2021-07-13
阅读 3 分钟
3.5k
最近有客户咨询我们三维可视化编辑器,说看到我们三维可视化编辑器做的案例,也想实现自己水厂净水处理流程这块的可视化展示。想通过这种真实的三维可视化展示,进行线上销售,以便成交更多的客户,减少疫情对自己的影响。通过沟通交流,客户提出了几个难题,想让我们根据他们的水厂场景图片,做一些三维可视化场景的dem...
智能制造芯片车间生产线可视化
用户bPBVPM
2021-06-25
阅读 1 分钟
2.6k
智能制造芯片车间生产线可视化
canvas绘制折线路径动画
用户bPBVPM
2021-05-09
阅读 5 分钟
4.7k
最近有读者加我微信咨询这个问题:其中的效果是一个折线路径动画效果,如下图所示:要实现以上路径动画,一般可以使用svg的动画功能。或者使用canvas绘制,结合路径数学计算来实现。如果用canvas来绘制,其中的难点在于:需要计算子路径,这块计算比较复杂。(当然是可以实现的)渐变的计算, 从图中可以看出,动画的子...
canvas绘制图像轮廓效果
用户bPBVPM
2021-03-31
阅读 6 分钟
4.9k
在2d图形可视化开发中,经常要绘制对象的选中效果。 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果。 发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述。
三维场景中常用的路径动画
用户bPBVPM
2021-02-22
阅读 4 分钟
2.3k
在三维场景中,除了用逼近真实的模型代表现实中的设备、标识物外,通常还会使用一些动画来表示模型在现实中一些行为和作用。常见的动画比如路径动画、旋转动画、发光动画、流动动画等。本文将为大家介绍几种常用的路径动画。首先,最简单的自然是直线路径动画。
三维组态部件动画解决方案
用户bPBVPM
2021-01-25
阅读 4 分钟
2.1k
其中涉及到的设备有冷却塔、水泵、螺杆机、离心机 、分水器(集水器)、阀门,以及管路。其中冷却塔,水泵,螺杆机,离心机都有停机/开机状态,开机状态下要有叶轮转动效果。
canvas多重阴影发光效果
用户bPBVPM
2021-01-18
阅读 2 分钟
3.7k
有的人可能会说,这个用阴影其实就可以实现。但是从图中可以看出,是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。比如
智慧园区可视化设计思路
用户bPBVPM
2021-01-09
阅读 3 分钟
4.7k
随着物联网技术的不断发展,推动了园区的智能化管理与服务不断升级。科技的进步激发市场诉求,智能化园区的市场规模也越来越大。在经济快速发展和政府政策的推动下,伴随着国内智慧城市建设步伐的加快,园区规划建设整体性越来越强,更加注重各种基础配套设施,以更好的服务促进高新产业的发展。尤其是注意产业园区的信...
自动化车间3D可视化设计思路
用户bPBVPM
2020-12-30
阅读 3 分钟
3.3k
随着国内制造业企业的高速发展,再加上政策支持,高效的生产模式和先进的管理方式越来越受到企业重视。更多的企业将工业信息化技术进行广泛的应用,比如MES系统、数字孪生以及生产管理可视化等技术的研究应用。近期我们团队利用自主开发的大屏编辑器与3D编辑器结合做了一个智能实验室三维可视化平台项目。在这个智能实验...
webgl智慧楼宇发光效果算法系列之高斯模糊
用户bPBVPM
2020-12-30
阅读 8 分钟
4k
webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中,要求对楼宇实现楼宇发光的效果。 比如如下图所示的简单楼宇效果:楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高...
1
2
(current)
3
4
下一页
上一页
2
(current)
下一页