15
回答
高手问答第 206 期 — 不一样的可视化组件库,聊聊前端的 Web3D 技术
开发十年,就只剩下这套Java开发体系了   

随着 WebGL 标准的快速推进,越来越多开发者尝试在浏览器上推出可交互的 3D 作品。相较于二维场景,3D 作品更能为用户带来真实和沉浸的体验。而对于可视化组件,相信大家都见过或者用过不少,通过它们,前端开发者能够十分直观且优雅地将数据可视化地展示出来。尤其是对于涉及到地理位置的数据,如果能将这类数据反映到地图上,不仅能在视觉上带来冲击的效果,更能让用户直观了解到数据的流动情况。

Giojs globe effect preview

像上面这张图片,正是基于一个称为 Gio.js 的开源组件库而实现的,Gio.js 是一个基于 Three.js 的 Web3D 地球数据可视化开源组件库。你可以仅使用 4 行 JavaScript 代码即可创建3D地球数据可视化模型。对于这么一个极具“科幻感”的可视化组件库,作为开发者的我们,除了被这些效果惊艳一把之外,或许会更关心这些效果背后的技术实现。

因此本期高手问答(2018 年 8 月 1 日 — 8 月 7 日)我们邀请到了开源项目 Gio.js 的两位核心开发者,和大家一起围绕 Gio.js 就关于前端 Web3D 技术方面的问题进行讨论。

本期高手问答主题

1.Gio.js 的设计思路和实现原理
2.Gio.js 使用使用实战分享
3.使用 Three.js 的开发经验分享
4.数据可视化讨论
5.现代化3D前端应用和Web3D 技术

或有其它和本期高手问答主题相关的问题,也欢迎大家积极提问!

本期高手嘉宾

刘波@botime(圣何塞州立大学<-北卡罗来纳州立大学<-清华大学),Gio.js 项目发起人与主要开发者。关注新技术和科技新闻,努力成为一个严肃的程序员。喜欢看美剧、电影,偶尔找个阳光明媚的小板凳看看书。

沈云天@syt123450(圣何塞州立大学<-浙江大学),Gio.js 项目发起人与主要开发者。关注新兴黑科技,热衷数据可视化。在技术之外,打打球,烧烧hifi,经常一个人躲在小角落里默默地敲代码。

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。

下面欢迎大家就 Web3D 技术相关问题向两位开源作者提问,请直接回帖提问。

举报
局长
发帖于3个月前 15回/2K+阅
共有15个答案 最后回答: 2个月前

@HelloGio  使用Three.js做3d物体obj 碰撞,  两个obj物体碰撞  ,应该怎么实现比较好

--- 共有 5 条评论 ---
HelloGio当然碰撞检测方法以及优化手段还有很多,在此也只能给出一些基本的思路,希望能起到抛砖引玉的作用~ 3个月前 回复
HelloGio使用raycaster来做检测是一种很好的方法,而在实际情况中,如果物体形状非常复杂,逐一对各个端点做射线检测可能引起一定的性能问题。另一种用一定的准确定来换取效率的做法是取物体的boundingbox,依靠boundingbox来做检测。 3个月前 回复
HelloGio在three.js中,可以使用raycaster来做碰撞检测,具体思路是由物体中心向各个顶点“发射射线”,看是否有相交的物体。在stackoverflow上对于这个问题,最高票的回答中给出了非常详细的解释和demo,如果感兴趣的话可以更深入了解一下。 3个月前 回复
HelloGio比如在最简单的情况下,检测两个圆的碰撞,只需要判断两个圆的圆心距离是否大于半径即可,不过针对于不规则图形,圆心半径检测的方法就不太精准了。 3个月前 回复
HelloGio在3D移动的场景下,碰撞检测是一个广泛讨论的问题。在不同场景下,应用的检测方法也不同。 3个月前 回复

@HelloGio 和ECharts GL有什么不同?

--- 共有 2 条评论 ---
HelloGio而Gio.js的设计,借鉴于Google Data Art团队的一个颇受欢迎的项目webgl globe。该项目专注于一种很酷的数据模型,有着简洁易用的设计理念,并没有复杂的功能与过多的配置。库的使用者,如果对这种数据模型感兴趣,可以专注于数据,只需要有最简单的前端知识,就能快速为自己的应用添加交互式3D数据可视化模型。对这种开发方式感兴趣的开发者,不妨试试Gio.js~ 3个月前 回复
HelloGioEchart是一个非常酷的可视化库,我个人,从Echart-X开始,就是它的深度用户。在跨过了Echart的学习曲线了之后,可以借助这个大而全的库创建出不一样的前端应用。同类型的库还有deck.gl。 3个月前 回复

引用来自“凉茶未凉”的评论

@HelloGio 和ECharts GL有什么不同?

名字不同喽!  这个问题你应该找一个不同点问。

比如:设计哲学有什么不同,体积,执行速度有什么不同。难易有什么不同。。。

@HelloGio 你好,关于数据可视化这块,对于后端来说应该怎么来考虑呈现?从哪些方面去考虑?目前接触到的很多的BI项目里面都有可视化这一块,或者有没有什么好的建议,谢谢

--- 共有 3 条评论 ---
HelloGio在全栈开发的时候,对开发者会有更高的要求,不仅要对数据可视化“套路”了熟于心,更是需要创意、灵感、以及日常不断的积累。从技术角度,最好能掌握多种数据可视化库,熟悉基本的展现方式。从软件工程角度,采用渐进的开发方式,逐步开发2D数据展示、3D数据展示、3D交互式数据展示等。从产品角度,研究企业以及数据的核心价值,通过数据可视化将该价值即通俗易懂、又内涵丰富地展现出来。 3个月前 回复
HelloGio在协作开发的场景下,不少精力会放在前后端协商上,比如数据通信格式等工作,同时在开发的过程中,考虑数据清洗、数据格式化、高性能数据存取等问题。 3个月前 回复
HelloGio这个问题看起来很大,不知道能不能把问题缩小成:作为可视化项目的参与者,后端开发者应该考虑什么问题。当然在实际情况中,遇到问题必然会所有不同,不过个人认为可以放到两种工作场景中来探讨一下:前后端协作开发,全栈开发。 3个月前 回复

引用来自“凉茶未凉”的评论

@HelloGio 和ECharts GL有什么不同?

感谢你的提问,这也是我们在Gio.js开发之初考虑过的问题,正好借这个机会将我们的设计与思考过程分享给大家。

 

Echart是一个非常酷的可视化库,我个人,从Echart-X开始,就是它的深度用户。在跨过了Echart的学习曲线了之后,可以借助这个大而全的库创建出不一样的前端应用。同类型的库还有deck.gl

 

而Gio.js的设计,借鉴于Google Data Art团队的一个颇受欢迎的项目webgl globe。该项目专注于一种很酷的数据模型,有着简洁易用的设计理念,并没有复杂的功能与过多的配置。库的使用者,如果对这种数据模型感兴趣,可以专注于数据,只需要有最简单的前端知识,就能快速为自己的应用添加交互式3D数据可视化模型。对这种开发方式感兴趣的开发者,不妨试试Gio.js~

@HelloGio 最新在关注flutter的客户端方案,    web有没有可能用webgl实现同一套的方案, 用webgl实现清渲染层, 实现一套dom和css的子集, 达到高性能的dom的目的?

--- 共有 8 条评论 ---
HelloGio作为我个人,非常期待这么能有这么酷框架出现~ 3个月前 回复
HelloGio如果把性能的问题也一并考虑进来,从理论上来说,应用webgl,对于需要频繁挂载、卸载dom对象的应用或者大量dom搜索计算的应用,会有一定提升。不过由于不同的浏览器对于dom对象都有一定的优化,如果使用虚拟dom替代原来的静态dom方案的话有很大可能无法享受部分此类特性,具体性能提升情况需要在开发完成后,经过测试才能有一个定论。 3个月前 回复
HelloGio当然在dom设计的时候也要考虑一定的降级方案,比如three.js除了webgl渲染器外同时也实现了canvas渲染器。 3个月前 回复
HelloGio回到开始的问题,首先以webgl实现虚拟dom来达到html和css的子集理论上是可行的。在现有的技术框架下,实现一个虚拟dom的可行方案(暂不考虑性能问题):创建three.js对象替代dom对象,所有对象缓存在内存中,不需要真正挂载到dom上,使用raycaster来控制对象的捕获与交互,该框架只需要在有浏览器环境支持即可运行。 3个月前 回复
HelloGiowebgl加速:webgl可以在浏览器端调用GPU来获得高性能,是一个快速发展的领域,将webgl加速落地的项目也不少。在加速渲染方面,有highchart boost(一般散点图在100k的点的量级上就会有一定的性能问题,而使用webgl散点图可以轻松渲染1000k的散点);在加速计算方面,有tensorflow.js(使用webgl来做tensor运算)。 3个月前 回复

@HelloGio  这个主要用在那些场景, 主要是bi分析的吗?

 

--- 共有 2 条评论 ---
HelloGio非常期待能够有更多基于Gio.js二次开发的炫酷应用。 3个月前 回复
HelloGioGio.js主要关注点在地球数据流动。BI肯定是一个非常好的场景,同时BI应用在计算机开发工作中占了很大一部分,对于开发者来说也会比较熟悉。而技术的想象空间因人而异,我也并不能在此下一个定论,比如之前有人提到希望能做使用Gio.js来做人口迁徙项目、教育项目等。 3个月前 回复

hightopo 觉得这个挺好的 
https://hightopo.com/demos/index.html     

--- 共有 1 条评论 ---
HelloGio挺不错的一个资源整合库,其中有不少想法可以借鉴学习~ 3个月前 回复

引用来自“八一菜刀”的评论

@HelloGio 你好,关于数据可视化这块,对于后端来说应该怎么来考虑呈现?从哪些方面去考虑?目前接触到的很多的BI项目里面都有可视化这一块,或者有没有什么好的建议,谢谢

这个问题看起来很大,不知道能不能把问题缩小成:作为可视化项目的参与者,后端开发者应该考虑什么问题。当然在实际情况中,遇到问题必然会所有不同,不过个人认为可以放到两种工作场景中来探讨一下:前后端协作开发,全栈开发。

 

在协作开发的场景下,不少精力会放在前后端协商上,比如数据通信格式等工作,同时在开发的过程中,考虑数据清洗、数据格式化、高性能数据存取等问题。

 

在全栈开发的时候,对开发者会有更高的要求,不仅要对数据可视化“套路”了熟于心,更是需要创意、灵感、以及日常不断的积累。从技术角度,最好能掌握多种数据可视化库,熟悉基本的展现方式。从软件工程角度,采用渐进的开发方式,逐步开发2D数据展示、3D数据展示、3D交互式数据展示等。从产品角度,研究企业以及数据的核心价值,通过数据可视化将该价值即通俗易懂、又内涵丰富地展现出来。

@HelloGio 以前搞web的时候,总是畅想着用 web 能做 3D 游戏。后来 silverlight5 刚开始有点苗头,结果。。。就没结果了。

不知道,现在 web 能做这种真 3D 的页面游戏了吗?

--- 共有 2 条评论 ---
HelloGio使用不同的web3D引擎来开发游戏,会带来不同的开发成本。three.js是一个强大的web3D引擎,除此之外,cocos2d-js,Babylon.js都是不错的选择,通过使用这些库,可以简化很多的开发工作。 3个月前 回复
HelloGio关于是否能开发web3D游戏的问题,webgl的引入,技术的成熟,已经让这个问题变得可能了。现在已有不少拿three.js作为引擎开发的web 3D游戏,在three.js官网上就能找到很多。比如有一个叫hexgl的竞速游戏就很酷:http://hexgl.bkcore.com,之前很火的微信小游戏“跳一跳”也是基于three.js开发的。 3个月前 回复
顶部