机器之心专栏 机器之心编辑部 为满足元宇宙中对 3D 创意工具不断增长的需求,三维内容生成(3D AIGC)最近受到相当多的关注。并且,3D 内容创作在质量和速度方面都取得了显著进展。 尽管当前的前馈式生成模型可以在几秒钟内生成 3D 对象,但它们的分辨率受到训练期间所需密集计算的限制,进而导致生成低质量的内容。 这就产生了一个问题,能否只用 5 秒钟来生成高分辨率高质量的 3D 物体? 本文中,来自北京大学、南洋理工大学 S-Lab 和上海人工智能实验室的研究者提出了一个新的框架 LGM,即 Large Gaussian Model,实现了从单视角图片或文本输入只需 5 秒钟即可生成高分辨率高质量三维物体 abs/2402.05054 在线 Demo:https://huggingface.co/spaces/ashawkey/LGM 想要达成这样的目标,研究者面临着如下两个挑战: 有限计算量下的高效 3D
https://img13.360buyimg.com/imagetools/jfs/t1/220303/24/28446/2896414/6476b7f1F5f42bd3a/029b1f997b40151e.gif 而 3D 渲染层不停地在调用渲染方法,以响应用户操作和播放动画,这耗费了大量 CPU 和 GPU 的计算资源,还占用了存储模型顶点信息和贴图纹理的内存空间,因此在多个 3D 渲染层共存的情况下,需进行一定的管理以优化性能 https://img12.360buyimg.com/imagetools/jfs/t1/47088/13/21231/152433/6476bac2Fa76a9fb4/46144ec5dd733e60 https://img12.360buyimg.com/imagetools/jfs/t1/137287/2/36821/164863/64770da9F8623ceac/bae5848981ee5de7 以上两个策略都是现在较大型的 3D 游戏会使用的加载策略,能减少同一屏幕中绘制的面数量,减轻渲染压力。
小小总结,希望3D去往H5的道路天堑变通途。 Part 1 理论篇 设计师在还原3D类型的互动H5项目的时候一定想过这个宇宙终极问题:为什么H5/Web实现的3D效果和C4D里渲染出来的差异那么大? 二是对于游戏或H5互动网站实际应用来说,流畅的互动体验优先级往往高于画面精细度,所以牺牲视觉保性能也是常见情况。 考虑到H5项目的实际应用场景,下表罗列了Three.js原生材质的对比,包含了材质特性优势、贴图差异及适用场景,大家可以基于项目需求快速选择并混合使用: three.js材质对比表 四、色彩描述与管理 webGL:Web Graphics Library,Html 5可接入的3D绘图协议/函数库,可以为H5 Canvas提供3D渲染的各类API。
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 ,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频: ? 回到我们要实现的例子,我将采用heatmapjs在内存中实时运算出热图,结合hightopo(http://www.hightopo.com/)的HT for Web的3D引擎,以一堆节点连线关系的3D 引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。 整个实现代码如下不到百行,你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式来实现,这样就是3D到2D再到3D的有趣过程,这就是HTML5技术可无缝融合各种方案的魅力
http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 流动效果在3D领域有着广泛的应用场景, Hightopo的HT for Web作为3D客户端呈现解决方案,今天介绍的重点不在于采集这些指标,而在于如何应用HT的预定于3D元素来实现流动的效果。 和uvOffset实现流动的控制,这样实现的好处是没有增加过多的3D图元模型,同时可借助2D的图片融合到3D进行呈现,毕竟美工改变2D图片,或程序员内存中动态改变2D图片,都会比动态改变3D模型来的容易且轻量 该例子主要应用了ht.Shape类型对象,该对象在ht.graph.GraphView中呈现了多边形的效果,而该模型在ht.graph3d.Graph3dView中则常用于绘制墙面、管道等三维模型对象, ,大家可以发挥想象力让3D的流动效果发挥出更多不可思议的应用场景效果。
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。 Hightopo的HT for Web作为3D客户端呈现解决方案,今天介绍的重点不在于采集这些指标,而在于如何应用HT的预定于3D元素来实现流动的效果。 和uvOffset实现流动的控制,这样实现的好处是没有增加过多的3D图元模型,同时可借助2D的图片融合到3D进行呈现,毕竟美工改变2D图片,或程序员内存中动态改变2D图片,都会比动态改变3D模型来的容易且轻量 该例子主要应用了ht.Shape类型对象,该对象在ht.graph.GraphView中呈现了多边形的效果,而该模型在ht.graph3d.Graph3dView中则常用于绘制墙面、管道等三维模型对象, 以下是段操作HT for Web中3D流动例子的视频供参考,基于HT预定义的模型还有很多自定义效果,大家可以发挥想象力让3D的流动效果发挥出更多不可思议的应用场景效果:http://v.youku.com
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 ,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频: ? 回到我们要实现的例子,我将采用heatmapjs在内存中实时运算出热图,结合hightopo(http://www.hightopo.com/)的HT for Web的3D引擎,以一堆节点连线关系的3D 引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。 整个实现代码如下不到百行,你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式来实现,这样就是3D到2D再到3D的有趣过程,这就是HTML5技术可无缝融合各种方案的魅力
我们以一个普通的C端用户的视角,来看下这几个核心功能背后的大概应用架构。 观看直播 当我们进入直播间首先就是观看直播内容。 公有云厂商砸了巨额资金建设物理链路,作为应用型企业只需要使用云产品能力即可,一切即服务。 当我们愉快的看着直播时,会好奇这些直播内容源头在哪里,这些画面是如何被采集的,数据又如何传输的。 一般应用企业,做弹幕功能技术含量并不高,而且现在云厂商、开源sdk,稍微组合下架构基本就搭能起来。 反而是,安全、舆情管控才是最关键和重点投入的地方。 第一个重点是我们大多数比较熟悉的应用系统常规的抗高并发,这里包括一系列的中间件、DB、缓存、微服务套件等。
压力基本顶住了,我个人总结的经验是:HTML5性能肯定不是最高,但对企业应用足够高效,HTML5标准不可能所有浏览器都一致实现,但对于企业应用已经足够工作。 选择HTML5除了看中JavaScript动态语言的灵活性,能够很好的和其他异构系统融合到页面外,HTML5的跨平台性也是我们看中的重要原因,以前PC桌面应用上采用Flex和Silverlight到是可以跨平台 ,但如今的系统还不能上移动终端实在就说不过去了,而Flex和SL在跨移动终端方面就卡壳了,虽然有AIR可以导成native app应用,但还是远不如HTML5纯页面来的高效,每次修改任何东西PC上都可以模拟测试 项目初期我们团队在选型初期对3D建模进行了一定的研究,传统的3D引擎一般只提供后期三维模型的渲染呈现,并不提供3D建模的解决方案,本以为还需要招聘专业的3DMax或Maya三维建模设计师,因为我们目前的美工设计师只会 ps,但HT提供了一套完全基于HTML5的3D设计编辑工具,别说只会ps的美工设计师,其实后续项目的大部分3D场景我们程序员都参与了设计。
对于我最有意义的是我终于可以真正从事基于HTML5技术的开发了,以前呆过几家互联网公司总要痛苦的去做兼容IE6、7、8的无趣事情,每天看到HTML5技术的日新月异而我却只能望梅止渴,现在做回企业应用开发 ,虽然老同事笑我从toC降级做toB,但我自己倒觉得能用上HTML5技术是升级,并且在项目界面呈现上我们采用了HT的基于WebGL的3D引擎框架,让我们整天面对CRUD的企业应用,增加了很大的3D应用亮点 HT的3D引擎设计很独特,完全用面对对象的模式来开发三维场景,将常规2D图形组件的Model-View-Presenter (MVP) 设计模式与3D引擎融合一体,这种完全可以控制模型所有属性事件变化的模式还是很独创的 基于事件模式的刷新对于桌面应用可能无所谓,但我们项目选择基于HMTL5很重要的一点是我们需要利用HTML5的跨平台技术,让我们的项目也能跑在Android等移动终端,而对于移动应用来说如果不断进行无谓的刷新对于移动终端耗电可是个大问题 基于HTML5技术的电力3D监控应用(二)
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 ,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频: 实现Heatmap的开源js库比较出名的就是 heatmapjs ,该框架发展了2年多 回到我们要实现的例子,我将采用heatmapjs在内存中实时运算出热图,结合hightopo的HT for Web的3D引擎,以一堆节点连线关系的3D的网络拓扑图,其中节点代表热源,其越接近地面则地面温度越高 引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。 整个实现代码如下不到百行,你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式来实现,这样就是3D到2D再到3D的有趣过程,这就是HTML5技术可无缝融合各种方案的魅力
JSON 是现代应用程序中广泛使用的数据交换格式,但在处理大型 JSON 对象时,性能问题可能会迅速显现。 在本文中,我们将探讨为什么大型 JSON 对象会拖慢你的 .NET 应用程序,并讨论解决这些性能瓶颈的实用策略。 大型 JSON 对象的性能陷阱 1. 当大型 JSON 对象反序列化为 C# 对象时,可能会导致: 堆内存使用增加 频繁的垃圾回收(GC)周期 由于内存碎片导致的应用程序变慢 示例:将大型 JSON 文件加载到内存中 var jsonString publicstring LastName {get;set;} publicstring Email {get;set;} } 优点: ✅ 减少有效负载大小 ✅ 提高 API 性能 ✅ 避免数据过度获取 5. ✅ 比 JSON 快 10 倍 ✅ 更小的有效负载(约减少 50%) ✅ 适合实时应用程序 未经优化地使用大型 JSON 对象会严重影响 .NET 应用程序的性能。
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 ,主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用,先上最终例子实现的界面效果和操作视频。 回到我们要实现的例子,我将采用heatmapjs在内存中实时运算出热图,结合hightopo的HT for Web的3D引擎,以一堆节点连线关系的3D的网络拓扑图,其中节点代表热源,其越接近地面则地面温度越高 引擎将Cavnas作为贴图信息动态呈现到3D场景的效果。 整个实现代码如下不到百行,你也可以采用https://github.com/pyalot/webgl-heatmap 的WebGL方式来实现,这样就是3D到2D再到3D的有趣过程,这就是HTML5技术可无缝融合各种方案的魅力
回答了知乎问题较长,一些使用WebGL的经验: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己的感觉供参考: 5、Nexus 7二代很给力,作为WebGL的移动测试机,很轻且性能不错,终于找到了让我满意的愿意随身带着用的Android板。 7、上点代表性的项目抓图,一个是IE11下的,一个是Android下的,总体说我感觉2013年经过各个厂家的努力,对于大多数的企业应用应该可以说:WebGL is Ready!
一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己的感觉供参考: 1、 5、Nexus 7二代很给力,作为WebGL的移动测试机,很轻且性能不错,终于找到了让我满意的愿意随身带着用的Android板。 7、上点代表性的项目抓图,一个是IE11下的,一个是Android下的,总体说我感觉2013年经过各个厂家的努力,对于大多数的企业应用应该可以说:WebGL is Ready!
对于我最有意义的是我终于可以真正从事基于HTML5技术的开发了,以前呆过几家互联网公司总要痛苦的去做兼容IE6、7、8的无趣事情,每天看到HTML5技术的日新月异而我却只能望梅止渴,现在做回企业应用开发 ,虽然老同事笑我从toC降级做toB,但我自己倒觉得能用上HTML5技术是升级,并且在项目界面呈现上我们采用了HT的基于WebGL的3D引擎框架,让我们整天面对CRUD的企业应用,增加了很大的3D应用亮点 ,搞得很多其他部分同事因为能参与3D的开发很想加入我们项目组,先展示几张项目的现场抓图: HT的3D引擎设计很独特,完全用面对对象的模式来开发三维场景,将常规2D图形组件的Model-View-Presenter ,因此如果模型没有变化时,无需进行传统3D引擎那样无谓的刷新。 基于事件模式的刷新对于桌面应用可能无所谓,但我们项目选择基于HMTL5很重要的一点是我们需要利用HTML5的跨平台技术,让我们的项目也能跑在Android等移动终端,而对于移动应用来说如果不断进行无谓的刷新对于移动终端耗电可是个大问题
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应用几乎一致性的首选 见此视频 使用Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器,无需借助3ds max和maya这样的专业3D设计工具,直接HT 3D Designer通过页面就能进行3D建模 就像电信OSS和BSS越来越难清晰定界一样,2D和3D的应用也会如此,越来越模糊,一个系统将2D和3D融合是必然趋势,你中有我我中有你,也许将来我这个文章标题会让人觉得搞笑,机房监控当然要有3D功能了, 需要的东西和做企业应用的你我是不一样的东西,下一个时代的企业应用技术必将是清清爽爽的HTML5! 当然3D不是电信网管的专注,以下是我们另一个部门做的太阳能发电、燃气和智能家居行业的3D监控系统应用供参考:
,我个人总结的经验是:HTML5性能肯定不是最高,但对企业应用足够高效,HTML5标准不可能所有浏览器都一致实现,但对于企业应用已经足够工作。 选择HTML5除了看中JavaScript动态语言的灵活性,能够很好的和其他异构系统融合到页面外,HTML5的跨平台性也是我们看中的重要原因,以前PC桌面应用上采用Flex和Silverlight到是可以跨平台 ,但如今的系统还不能上移动终端实在就说不过去了,而Flex和SL在跨移动终端方面就卡壳了,虽然有AIR可以导成native app应用,但还是远不如HTML5纯页面来的高效,每次修改任何东西PC上都可以模拟测试 项目初期我们团队在选型初期对3D建模进行了一定的研究,传统的3D引擎一般只提供后期三维模型的渲染呈现,并不提供3D建模的解决方案,本以为还需要招聘专业的3DMax或Maya三维建模设计师,因为我们目前的美工设计师只会 ps,但HT提供了一套完全基于HTML5的3D设计编辑工具,别说只会ps的美工设计师,其实后续项目的大部分3D场景我们程序员都参与了设计。
新注册用户首先归属默认机房,然后进行多机房探测,必要时进行增量更新,方案与存量更新一致 参考 《大型系统应用架构实践》
大型企业级应用的业务逻辑宛如一座错综复杂的迷宫,其中嵌套着多层业务规则、流程以及数据交互。 在大型企业级应用中,组件之间的通信频繁且复杂,犹如人体神经系统的信号传递,任何一处的阻滞都可能导致系统的故障。Svelte 5提供了多种组件通信方式,开发者需要根据具体的业务场景选择最合适的策略。 随着企业级应用的不断发展和业务需求的变化,对应用的持续优化与维护至关重要。在Svelte 5开发的应用中,开发者需要建立完善的代码审查机制,确保代码质量和可维护性。 Svelte 5本身在编译时进行了优化,但开发者仍需注意避免不必要的重渲染和内存泄漏,合理使用懒加载和代码分割等技术,提高应用的加载速度和运行效率。 Svelte 5为大型企业级应用开发中的复杂业务逻辑管理和组件通信提供了丰富的工具和策略。开发者需要深入理解其特性和机制,结合具体的业务需求,运用合适的方法和技巧,才能构建出高效、可维护的大型应用。