惯例先扯点闲篇

记得15年那会儿,我给人讲WebGL,还得从头科普,三令五申要用Chrome,末了再强调一句,记得启用WebGL功能。今天,但凡懂点儿Web开发的,都会来一句“网页3D用WebGL”。

怎么形容这种感受呢?

这两年的技术发展,大家想必都看在眼里,单用“爆发”二字,实在难以描述其中的惊天巨变。而回到网页3D这个话题上,我想,最大的驱动力,莫过于16年至今虚拟现实的迅速崛起,彻底推进了三维可视化技术的突飞猛进,而物联网发力,又开启了一扇通往新世界的大门。

游戏界至今争论不休的Unity还是HTML5,依我看至少WebGL活的好好的,而插件技术么,则让我想起了一首悲伤的歌:dying in the sun…

三维可视化应用盘点

今天当然还是给大家介绍一款最新的三维可视化成果,开始正题前,我想先盘点一下这两年还算靠谱的一些三维应用。

工业上的,偏销售侧有复杂零件的三维展示,依托零件原有模型,做好参数转换,比较容易实现。偏管理侧,主要是厂房车间和生产设备的三维监控;电力行业,有无人值守变电站的巡检和监控,结合三维可以进行远程巡检作业,降低人工作业的风险;仓库和粮仓,引入三维后,可以结合库房系统、环境系统,进行全方位的管理;矿山和隧道,这个很好理解:作业越是危险、对环境要求越高的地方,越是需要虚拟仿真;3D家装设计, 通常是在线模式,拖拽设计,结合家具贩售,早先是以Stage3D为主,这两年也看到很多WebGL的案例;博物馆、图书馆、档案馆的导览结合解说,复杂设备的虚拟仿真培训商品展示,这个比较多了,像虚拟试衣间,商品的三维在线浏览,比如刚看到这款霸气侧漏的零食:

开个玩笑。其实不管哪个行业,三维应用很大的一部分工作量源于建模,而这次我们想分享的是和上述应用完全不同的一个案例。

正文

这次的案例,对模型几乎没有要求,只是用了最基本的形状元素,但是却可以解决企业在不断发展壮大,尤其是信息化进程不断深入的过程中,都会遇到的问题,那就是如何将复杂流程可视化

什么是流程?

流程,看起来很简答的两个字,英文process。我们这里所说的流程,主要是企业的业务流程,如生产流程、各类行政申请流程、财务审批流程、人事处理流程、质量控制及客服流程等等。

业务流程对于企业的意义不仅仅在于对企业关键业务的一种描述;更在于对企业的业务运营有着指导意义,这种意义体现在对资源的优化、对企业组织机构的优化以及对管理制度的一系列改变。这种优化的目的实际也是企业所追求的目标:降低企业的运营成本,提高对市场需求的响应速度,争取企业利润的最大化。(from智库百科MBAlib)

为啥我突然开始拽商业名词了呢?因为,这是甲方爸爸给出的一个难题。

甲方爸爸的企业,部门繁多,流程复杂,为了提升业务流程的效率,同时优化企业自身的管理,提出了一个将其现有业务流程进行三维可视化的需求。

为什么要把流程进行三维可视化呢?

通俗的说,因为平面的实在是看不清理不顺了;时髦点讲,只有“升维”,才能展示和包容更多的信息。

看到这里的三体同好们,请不要吝啬向我隔空挥舞小手!

举个栗子

甲方爸爸的信息实在太多,而且不能透露,我们就找其中几个简单的举个例子,比如每个企业每天都在处理的报账流程:(应要求马赛克了一些文字)

报账流程业务图:

二层逻辑交互图:

报账业务基础架构:

看到如此复杂的结构,无论你是以下哪种表情,都不要惊慌:

流程结构梳理

我们先简单梳理下流程图的大致框架,一共可以分为五层:

  • 业务流程层:起点、审批、服务;
  • 应用逻辑层:WEB服务、数据库服务、定时作业服务、接口服务、应用服务;
  • 实例:WEB服务实例、财辅数据库实例、支付服务实例;
  • OS:EB服务OS、财辅数据库OS;
  • 硬件:主机、交换机。

初稿

为了让这五层之间的关系一目了然,分层展示是必不可少的。每个层次里,又分为几个模块,层次与层次、模块与模块之间都有业务上的联系。根据梳理的逻辑关系,我先整了一个初稿。流程和业务先用简单的方块和圆柱代替,底层的机柜模型,直接用存货模型,机房相关的模型,我们大大的有。

虽然看起来层次感有了,不过这只是个整体的框架demo,我们在这基础上一步步修改。

圆弧效果

说下层模型的圆弧效果。为了把每个层做成圆弧的效果,我把层模型拆解成了由9个简单模型组合而成,上图给你们看(原谅我图画得渣渣)。

模型1、2、3、4、5均为厚度相同的立方体,模型6、7、8、9为大小相等的1/4圆柱体,9个模型组合成层模型。

模型1的代码:(模型1,2,3,4,5差不多,就只贴模型1的代码了。)

var centerNode = new mono.Cube({
    width: width,
    height: height,
    depth: depth,
});
centerNode.s({
    'm.type': 'phong',
    'm.color': color
});
    

模型6的代码:

var leftTopCylinder = new mono.Cylinder({
    radiusTop: radius,
    radiusBottom: radius,
    height: height,
    arcLength: Math.PI / 2, //圆柱的圆弧所占长度
    arcStart: Math.PI //圆弧开始的角度
});
    
leftTopCylinder.s({
    'm.type': 'phong',
    'm.color': color
});
leftTopCylinder.p(-width / 2, 0, -depth / 2);

9个模型合并:

var combo = new mono.ComboNode([centerNode, leftNode, rightNode, topNode, bottomNode, leftTopCylinder, rightTopCylinder, leftBottomCylinder, rightBottomCylinder],['+'],true);

背景和配色

首先,增加了背景图片,选取的是一张星空的图片,之后根据背景修改了配色和部分模型。

效果还是不错的,看起来更加大气。增加背景代码:

network.setClearColor(0, 0, 0);
network.setClearAlpha(0);
network.setBackgroundImage('./images/background.jpg');

文字

图中显示文字类似对话框的东西其实是billboard,先创建一个billboard,再用canvas画一张图作为贴图贴到上面就可以了。

var billboard = new mono.Billboard();
var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = "130px 微软雅黑";

    var array = [];
    if (text.indexOf("\n")) {
        array = text.split("\n");
    } else {
        array = [text]
    }
    var length = 0;
    for (var i = 0; i < array.length; i++) {
        if (i == 0) {
            length = context.measureText(array[i]).width;
        } else {
            length = Math.max(context.measureText(array[i]).width, length);
        }
    }

    var size = mono.Utils.getMaxTextSize(array, context.font);
    var width = mono.Utils.nextPowerOfTwo(length);
    var oHeight = size.height;
    var arrowHeight = 40;
    var arrowWidth = 80;
    var height = mono.Utils.nextPowerOfTwo(oHeight + arrowHeight);

    canvas.height = height;
    canvas.width = width;
    var lineHeight =(height - arrowHeight - 40) / array.length;
    var oLineHeight = oHeight / array.length;
    var radius = width / 16;

    var context = canvas.getContext('2d');
    context.globalAlpha = 0.9;
    context.fillStyle = bgColor;
    context.save();
    context.beginPath();
    context.moveTo(radius + 10, 10);
    context.lineTo(width - radius - 10, 10);
    context.arcTo(width - 10, 10, width - 10, radius + 10, radius);
    context.lineTo(width - 10, height - arrowHeight - radius - 10);
    context.arcTo(width - 10, height - arrowHeight - 10, width - radius -10, height - arrowHeight - 10, radius);
    context.lineTo(width / 2 + arrowWidth / 2 - 10, height - arrowHeight - 10);
    context.lineTo(width / 2 - 10, height - 10);
    context.lineTo(width / 2 - arrowWidth / 2 - 10, height - arrowHeight - 10);
    context.lineTo(radius + 10, height - arrowHeight - 10);
    context.arcTo(10, height - arrowHeight - 10, 10, height - arrowHeight - radius - 10, radius);
    context.lineTo(10, radius + 10);
    context.arcTo(10, 10, radius + 10, 10, radius);
    context.closePath();
    context.fill();
    context.globalAlpha = 1;
    context.lineWidth = 10;
    context.strokeStyle = bgColor;
    context.stroke();
    context.restore();

    context.fillStyle = fontColor;
    context.textBaseline = 'middle';
    context.font = "120px 微软雅黑";
    for (var i = 0; i < array.length; i++) {
        var text = array[i];
        length = context.measureText(text).width;
        context.fillText(text, (width - length) / 2, lineHeight * (i + 0.5));
    }
    billboard.s({
        'm.texture.image': canvas,
        'm.texture.offset': new mono.Vec2(0, 0.005),
        'm.texture.anisotropy': 8,
        'm.alignment': mono.BillboardAlignment.bottomCenter
    });

obj模型

这两种属于obj模型,是设计小姐姐做的,然后我们通过make.Default.register函数定义模型,通过make.Default.load函数加载使用模型。

为了使效果更逼真,我们给模型做了环境贴图。

 object3d.setStyle('m.envmap.image', make.Default.getEnvMap('envmap5'));

动画

单纯的静态图看起来有些单调,所以我们给连线加了动画效果:找一张一半透明一半有颜色的图片,作为贴图贴在连线上,利用动画函数使贴图不断平移,就实现了下面的效果。

实体模型

最底层的模型采用了实体模型,真实感更强:

嵌套关系

上面也提到过,层与层、层内各个模块中之间存在错综复杂的多层嵌套关系,为了展现这种关系,那肯定就要连线,话不多说,直接上图。

线的类型有两种,层与层之间的连线类型是link,每层模块之间的连线类型是pathLink,创建pathLInk代码如下:

createPathLink: function (data) {
    var box = main.sceneManager.getDataBox();
    var fromNode = main.sceneManager.getNodeByDataOrId(data.fromId);
    var toNode = main.sceneManager.getNodeByDataOrId(data.toId);
    var radius = data.path.radius || 3;
    var color = data.path.color || 'yellow';
    var endCap = data.path.endCap;
    var startCap = data.path.startCap;
    var linkType = data.routeType;
    var flow = data.path.flow || '';
    var workflowId = data.workflowId || ''; 
    if (fromNode && toNode) {
        var link = new mono.PathLink(fromNode, toNode, data.id);
        var plength = link.getPath().getLength();
        link.setRadius(radius);
        link.s({
            'm.type': 'phong',
            'm.color': color,
            'm.ambient': color
        });
        link.workflowId = workflowId;
        if (endCap) {
            var endCapSize = data.path.endCapSize || 10;
            var endCapR = data.path.endCapR || 2;
            link.setEndCap(endCap);
            link.setEndCapSize(endCapSize);
            link.setEndCapR(endCapR);
        }
        if (startCap) {
            var startCapSize = data.path.startCapSize || 10;
            var startCapR = data.path.startCapR || 2;
            link.setStartCap(startCap);
            link.setStartCapSize(startCapSize);
            link.setStartCapR(startCapR);
        }
        if (linkType) {
            link.setLinkType(linkType);
        }
        box.add(link);
    }
}

link类型连线与pathLink类型连线大体相同,之所以层与层之间选择link类型,有两个原因:一是当镜头拉近时,link类型的连线粗细不会改变,二是便于控制拐点,就是下图中的红圈处。

link.setLinkType('control');//control属性控制连线的拐点
link.setControls(controls);//controls为数组

这样就可以呈现图中的伞状效果啦。

为了增加点朦胧感以及让伞状效果更好,我们特意添加了一点光环,有没有感觉金光从天而降呢?此时请想象自己45°角仰望天空,金光照在脸上。

流程动画

基础打好,下面就可以加上动画,执行流程了。先上图:

点击左边的按钮,出现图中的白色小球,沿着连线运动,完整展现整个流程步骤。当然,镜头会随着小球切换,这样小球时刻在视线正中,妈妈再也不用担心我的视线被挡住。

镜头切换的代码也很简单:

var pos = link.getPointAt(v);
workflowSphere.p(pos);
billboard.p(pos.clone().add(new mono.Vec3(0, 250, 0)));
var camera = main.sceneManager.network3d.getCamera();
camera.lookAt(pos);
camera.p(pos.clone().sub(this._cameraOffset));

数据

最后聊聊数据。为了方(tou)便(lan),我们将流程图的所有数据都存放在后台。在后端页面,可以设置流程图的结构、逻辑、流程节点的样式等。

利用Ajax获取模型数据,然后三行代码便可建造一个3D流程图系统。

dataManager.addCategoryFromJson(loadData.categories);
dataManager.addDataTypeFromJson(loadData.datatypes);
dataManager.addDataFromJson(loadData.datas);

同样,可以在后端页面设置连线的样式、颜色、起点、终点等等,获取到连线数据后,利用上文提到的方法便可绘制出所需要的连线。连动画的起点、走向同样可以在后端页面设置。

如果甲方爸爸觉得某个流程有问题,需要修改时,不要怕,默默打开后端页面改几个节点就好了。速度这么快,快夸我快夸我。

总而言之,只需要通过数据配置即可生成不同的三维流程,满足客户的各种需求。

对demo感兴趣的同学,可以给我发邮件:tw-service@servasoft.com,甲方爸爸的数据不能给你,demo还是可以给你们看一眼的。

你可能感兴趣的文章

15 条评论
Ronaldinho_Loway · 10月12日

楼主你好,应公司需求开始开发一些数据可视化的需求,常用d3做定制开发,逐渐地对web上的这些让系统应用看起来高大上的技术感兴趣,想学习webGL做一些3D可视化技术,学习webGL应该从哪里开始呢?有什么适合上手的基础库可以推荐吗?

+4 回复

1

讲真,上手用three.js就可以,毕竟资源多,百度的echarts x,腾讯磨坊,用的都是three

MonoLog 作者 · 10月12日
蒙罗丽猫的大叔 · 11月13日

赞。有没有小demo提供测试

+4 回复

0

有,给个邮箱

MonoLog 作者 · 11月13日
点号 · 10月13日

楼主好,很想看下您的DEMO,已经发过邮件,xinming_qu@163.com 再次感谢👍

+3 回复

Melor · 10月18日

看到领导审批想到在某国企的工作经历。。

+3 回复

悟不空 · 10月12日

三体同好,挥过小手

+2 回复

AlexZ33 · 10月31日

能否分享您的demo呢?

回复

金牌红豆 · 11月13日

写文章是不是转载的?在手机上压根看不清图片的内容。有原文出处吗?

回复

0

一脸懵逼,这就是原文,只是把报账业务里面的信息模糊掉了。你可以留个邮箱,我给你发demo

MonoLog 作者 · 11月13日
sylforever98 · 11月13日

@MonoLog 能帮我发一份上面的demo,邮箱308635971@qq..com 十分感谢

回复

小伙伴 · 11月14日

372613221安特qq.com传一份demo

回复

999万岁 · 11月19日

516669011@126.com 楼主好人!求demo!

回复

amini · 11月23日

楼主你好,我正好有这样一个需求,在基于webgl做楼层可视化。可否分享一下你的demo?
邮箱:452110600@qq.com

回复

programexp · 11月27日

楼主你好,最近我正在做这方面的开发,可否分享一下你的demo,谢谢~!
邮箱:2223217862@qq.com

回复

载入中...
MonoLog MonoLog

2.6k 声望

发布于专栏

MonoLog

专注UI,前端数据可视化,最近研究HTML5,webGL 3D。

204 人关注