前端3D技术概述(2)

简介: 前端3D技术概述

建模



现在大部分的模型建模方案都是手工精确建模,在近几年由于民用激光雷达、深度学习的发展,基于视觉+空间距离数据或纯视觉的3D模型辅助建模方式逐渐多了起来。


传统的建模方式先不提及了,相信在深度学习继续发展之下基于文本建模、草图建模、NERF建模的方式会越来越多,和chatgpt结合的工具也会越来越多从而极大的提高建模效率,这也许过不了5年就能在各个软件中实验起来,目前NVIDIA 建模软件已经有了比较好的落地,未来所见所得的方式会更加多样化,传统方式终将成为干预的手段补充。


在近几年的英伟达大挤牙膏和深度学习的快速发展下一种新的辅助建模方式-- NERF给快速建模带来了希望,相对于传统的手捏建模方式NERF直接通过拍摄视频的方式建模,如同二维时代的拍照一样可以快速产生一个模型,而且相对于手捏的模型更加的有“温度”,是真实的情况的客观反应,在极低的成本之下可以带来更加花样的玩法,如在汽车领域,对客户进行快速建模,绑定骨骼动画配合汽车模型进行线上的试驾体验,实现线上试车,解决车辆大小和人的匹配问题,让客户更加有购物体感。从而逐渐打破物理世界和虚拟世界的边界,互补两个世界的不足。


NERF的原理大家可以参考这篇文章https://blog.csdn.net/BIT_HXZ/article/details/128055763学习,这篇文章做了论文的翻译和简化,可以帮助快速理解。如果想试用也有比较轻量的方式,https://github.com/NVlabs/instant-ngp



更简易的方式建议App Store搜索Luma进行使用,Luma背后也是使用了nerf技术的,可以比较简单的体验下。


模型建模、查看工具


 blender


blender 是开源软件,免费且功能强大,推荐个人使用。https://www.blender.org/

 unity 3D



3D渲染带来的优势和适用范围


3D渲染相对于我们现在的二维web互联网世界来说还是未被大范围利用的土地。3D相对于2D的优势有以下几点:

提高的逼真度和深度感:3D图形提供了对物体和环境的更逼真的表示,增强了沉浸感,并更好地理解空间关系。

提高的视觉吸引力:3D图形比2D图形更具视觉吸引力和互动性,因此非常适合在高价值商品还原、广告和游戏中使用。

更灵活的表示:3D图形可以从任意角度旋转和查看,提供了对物体和环境的更灵活的表示。

更好的模拟能力:3D图形非常适合模拟,允许创建高度逼真的虚拟环境和场景,用于测试、培训和研究目的。


在家装、汽车行业有比较好的可落地性,家装行业已经广泛使用也比较符合直觉。汽车行业目前在阿里系外的懂车帝、汽车之家等app中已经引入3D已久,作为用户看车对比、提升用户停留时长的重要手段。


一些汽车方向的使用:

https://ezshine.gitee.io/www/showcase/smart3dh5/loader.html

https://car.taobaocdn.com/static/realibox/breeze/index.html?wh_weex=true&spm=acar.rb-gb.list.breeze


团队介绍

我们大淘宝技术团队,团队主要负责品牌业务发展中心的行业业务,基于行业纵深做业务模式的突破和能力的沉淀,更好的支持业务的发展,支持的业务包含但不限于天猫优品、天猫汽车、家装、消电、运动等行业。

我们团队正在多方向尝试新技术、新方法,提升用户体验帮助业务实现可持续增长,欢迎大家加入阿里大家庭,一起用技术帮助业务成长。

相关文章
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
123 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
39 6
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
39 3
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
47 3
|
1月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
32 2
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0