2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的节奏。 3D呈现固然比2D方式更直观,但如果摆放图元布局却比2D麻烦,毕竟增加了一个维度,手工布局不如以前2D手工操作方便,因此3D的自动布局功能比2D凸显其重要性。最近玩了玩HT的弹力自动布局插件挺有意思,特别在平板上Touch方式拖拽三维空间图元节点时,对我这种控制欲较强者很有满足感。 弹力布局也不是啥
JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)》主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的
本文介绍了实时数据通讯系列,包括基于 WebSocket 的实时数据通讯、基于 HTTP 的实时数据通讯以及实时数据通讯在 Web 3D 中的应用。
在上一篇《基于HT for Web矢量实现3D叶轮旋转》一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介绍及用法。 先上一段枯燥的理论知识,大家混个眼熟。 在HT的数据模型驱动图形组件的设计架构下,动画可理解为将某些属性由起始值逐渐变到目标值的过程, HT提供了ht.Default.startAnim的动画函数,其示例代码如下。 ht.Default.startAnim({ frames: 12, //
本文主要介绍了一种基于HTML5的3D页面中动态旋转立方体的实现方法和系统,通过使用HTML5的Canvas和WebGL技术,可以在页面上绘制出真实的3D场景,并实现了动态旋转立方体的效果。该方法可以广泛应用于各种3D页面场景中,具有很好的实用价值。
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台(http://www.hightopo.com/blog/70.html),这篇我们将进一步折腾,将算法运行到真正的
本文介绍了HT for Web在软件研发中的拓扑图组件在研发管理、团队协作、自动化部署、监控告警等方面的应用,并提供了丰富的案例和解决方案。
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.hightopo.com/guide/readme
HT For Web 提供完整的基于 HTML5 图形界面组件库。您可以轻松构建现代化的,跨桌面和移动终端的企业应用,无需担忧跨平台兼容性,及触屏手势交互等棘手问题。也可用于快速创建和部署,高度可定制化,并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web 非常适用于实时监控系统的界面呈现,广泛应用于电信网络拓扑和设备管理,以及电力、燃气等工业自动化 ( HMI / SCADA ) 领域。HT for Web 还有提供了一套一套强大的基于 WebGL 技术的 3D 图形引擎,独特的 WebGL 层抽象,将 Model – View – Presenter ( MVP ) 的设计模型延伸应用到了 3D 图形领域。使用 HT for Web 您可更关注于业务逻辑功能,不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。( http://www.hightopo.com )
前言 SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。这个 Demo 运用的技术基于 HTML5 的技术适应了只能电网调度、配电网运行监控与配电网运维管控,通过移动终端实现 Web SCADA 账上运维的时代需求。由于传统电力行业 CS 桌面监控系统一直到新一代 Web 和移动终
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元,在HT for Web系统中提
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元,在HT for Web系统中提供了一些常规的3D模型,但是对于那些比较复杂的模型,比如汽车、人物等模型就无能为力了,那再项目中需要用到这样的模型该肿么办呢?这时候就需要借助专业的3ds Max工具来建模了,然后通过3ds Max工具将模型导出成obj文件,然后再项目中引用导出的obj文件,这样就能成功的使用上复杂的图元了。 在《HT图形组件
这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算
描绘真实的物理世界时,3D的场景能给人更加直观的感受。然而在数字孪生应用中,除了描绘物理世界,很多时候也需要去描绘逻辑世界,表达对象之间的逻辑拓扑关系,比如组态工艺流程、网络拓扑关系等。在对面这些需求时,2D的表现方式显然更为清晰。搭建3D园区和3D城市,可以使用ThingJS的工具,做一些3D可视化的开发。那面对这些2D场景时,该用什么工具呢?
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatmap热图原
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元,在HT for Web系统中提供了
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元,在HT for Web系统中提供了一些常规的3D模型,但是对于那些比较复杂的模型,比如汽车、人物等模型就无能为力了,那再项目中需要用到这样的模型该肿么办呢?这时候就需要借助专业的3ds Max工具来建模了,然后通过3ds Max工具将模型导出成obj文件,然后再项目中引用导出的obj文件,这样就能成功的使用上复杂的图元了。 在《HT图形组件设计
前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 http://www.hightopo.c
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观。今天我们就在HT for Web的3D技术上完成设备面板的搭建。 我们今天模拟
本文介绍了如何利用 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯。首先介绍了 WebSocket 的概念和原理,然后阐述了利用 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯的具体步骤。最后通过一个示例展示了如何在前端实现该功能。
今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。 我们先来聊聊这次 Demo 的思路吧,首先我要有一个 3D 的拓扑图组件,在上面创建几个节点,然后通过拉力布局(ForceLayout)将这些节点自动布局,但是有一定,需要在不同的网页窗口下,对应节点的位置是一样的,简单地说就是不同网页窗口所呈现的节点
在《HT图形组件设计之道(二)》我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我们将构建一个3D飞机模型,展示如果将数据
本文介绍了唐建课题组的Shengchao Liu等人基于3d几何研究的成果:鉴于现实世界场景中 3D 信息的缺乏极大地阻碍了对分子几何图表示的学习,本文提出了一种图预训练框架Graph Multi-View Pre-training (GraphMVP)。GraphMVP通过利用 2D 拓扑结构和 3D 几何视图之间的对应性和一致性来执行自我监督学习(SSL)。该方法有效地学习了一个 2D 分子图编码器,而该编码器之前已通过更丰富和更具辨别力的 3D 几何知识进行了预训练。作者进一步提供理论见解来证明 GraphMVP 的有效性。最后,综合实验表明 GraphMVP优于现有的图 SSL 方法。
经常有小伙伴在问各类型拓扑图的问题,怎么设计,怎么配置,或者让群里的大佬帮忙看看,这图有没有啥问题的……
IDC+BIM,或将带来数据中心新革命。你是选择做这场革命的推动者、追随者,还是旁观者? 一、什么是BIM? 美国国家BIM标准对BIM的定义很清晰: 1.一个设施(建设项目)物理和功能特性的数字表达
IDC+BIM,或将带来数据中心新革命。你是选择做这场革命的推动者、追随者,还是旁观者? 一、什么是BIM 美国国家BIM标准对BIM的定义很清晰: 1.一个设施(建设项目)物理和功能特性的数字表达。 2.一个共享的知识资源。 3.一个分享有关这个设施的信息,为该设施从概念开始的全生命周期的所有决策提供可靠依据的过程。 4.在项目不同阶段不同利益相关方通过在BIM中插入、提取、更新和修改信息以支持和反应其各自职责的协同作业。 圈内人已经非常清楚BIM不是一个软件。在BIM与CAD在差异上,有一个比喻很形
档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能。为企事业单位的档案现代化管理,提供完整的解决方案,档案管理系统既可以自成系统,为用户提供完整的档案管理和网络查询功能,也可以与本单位的OA办公自动化和DPM设计过程管理,或者与MIS信息管理系统相结合,形成更加完善的现代化信息管理网络。传统档案馆随着社会的快速发展与变化,其内在形式上也发生了巨大变化,逐渐演变为现代智慧档案馆。智慧档案馆以现代科技为依托,充分结合现代物联网技术与云计算技术构建完善的城市智慧档案,实现了现代社会全面管理的目标。本文以当前流行的 H5 技术为主,为现代智慧档案馆提供一套 WEB 解决方案。
本文主要介绍了如何通过HT for Web实现一个动态可交互的WebApp,包括自定义组件、扩展组件和插件化设计。通过这些设计,可以快速构建一个基于HT for Web的图形化应用,实现各种交互操作,如手势识别、语音识别、视频播放等。同时,还介绍了一种基于HT for Web的图形组件设计,通过该组件可以方便地实现各种图形界面,如电力系统的电力拓扑图等。
上一篇我们自定义CPU和内存的展示界面效果,这篇我们将继续采用HT完成一个新任务:实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件,以便用户能做可视化编辑器里,通过拖拽方式快速搭建具体电力网络或工控环境的场景,并设置好设备对应后台编号等参数信息,将拓扑图形与图元信息一并保存到后台,实际运行环境中将打开编辑好的网络拓扑图信息,连接后台实时数据库,接下来就是接受实时数据库发送过来的采集信息进行界面实时动态刷新,包括用户通过客户端对设备进行
JS数组追加数组没有现成的函数,这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的,不需要写for循环的写法,一直也没遇到什么问题,直到今天我要append的b是个很大的数组时才遇到了坑。 a = new Array(); b = new Array(125624); a.push.apply(a, b); 以上的代码在mac的chrome下抛出了如下的异常 Uncaught RangeError: Maximum call sta
Marvelous Designer,是一款专为服装设计和布料模拟而打造的3D建模软件。它拥有强大的功能,可以帮助用户轻松地创建逼真的布料和服装效果。不仅能够表现出折痕、皱褶和流线等特性,更能够快速创建真实的虚拟服装。
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效,因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应用。简单说来
数据中心作为城市“新基建”之一,是推动数字经济发展的算力基础设施和重要载体。随着生命科学、基因测序、医药研发、高性能计算、深度学习、遥感测绘、地质勘探、冷冻电镜、数据分析、数据挖掘、真空羽流、并行计算等技术的快速发展,以及国家东数西算政策的支持,建设绿色数据中心、智算中心成为人们关注的重中之重。
标题:Persistent Homology based Graph Convolution Network forFine-grained 3D Shape Segmentation
该文介绍了如何基于Web Workers实现3D拓扑自动布局,通过创建一个简化的3D场景,将Box2D物理引擎与HTML5 Canvas元素相结合,并利用Web Workers提高渲染性能。在示例代码中,创建了一个包含多个节点的3D场景,并通过调用Box2D的API实现节点的创建、物理运动和碰撞检测。通过将渲染任务转移到Web Workers,从而提高了渲染性能和响应速度。
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这些年了衍生出
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,先上张最终例子效果图:http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这些年
领取专属 10元无门槛券
手把手带您无忧上云