前端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


团队介绍

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

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

相关文章
|
11天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
18天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
91 29
|
4天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
13 5
|
11天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
21 3
|
11天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
17天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
30 3
|
18天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
49 4
|
17天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
24 2
|
16天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
27 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
18天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
28 2