简介:基于Web的产品3D

基于 Web 的产品 3D

通过可视化界面获得各种选项来个性化他们的产品,例如颜色、材料、尺寸、文字、徽标、零件等。

在过去几年中,随着 3D 建模和渲染软件的出现,3D 渲染现在更常用于营销和促销目的。设计师、制造商和营销人员使用 3D 产品渲染来制作逼真的照片、动画和交互式 3D 模型,以帮助解释、推广和销售产品。

3D 产品渲染的最终结果可能会因几个因素而有所不同。 人才、建模软件和渲染引擎都会影响最终的输出。产品模型需要准确,以便能够对其进行虚拟修改。 3D 资产建模是一项需要奉献精神、技能和经验的工作。

3D 产品渲染是从 3D 模型创建 2D 图像的过程。 换句话说,这就像为计算机软件中存在的产品拍照一样,以便可以轻松查看和共享。渲染通常是 3D 项目的最后阶段。 它涉及将数字模型转换为逼真的图像或动画。 该过程首先使用计算机图形软件创建 3D 模型。

创建 3D 模型后,将其加载到渲染引擎中,该引擎计算照明、材质和摄像机角度,并将模型转换为二维图像或动画。 图像渲染后,通常会进行后处理和合成以创建最终图像或动画。

让我们更详细地回顾一下完整 3D 产品渲染过程的不同步骤。

建模过程

建模过程(Modeling)首先使用 Cinema 4D、Blender、Autodesk 3ds Max 或 Maya 等 3D 软件创建 3D 模型。 不同的 3D 建模软件提供不同的解决方案、工作流程或工具集,但最终结果通常应该是相同的。

由于 3D 模型是 3D 产品渲染的基础,因此需要注意的是,更准确地构建 3D 模型将产生更好的结果。 一个好的模型会让细节突出并且看起来更真实。

更精确构建的 3D 模型还将减少在纹理化阶段为达到预期结果而进行手动调整的需要,从而节省大量时间和精力。

纹理化

纹理化(Texturing)涉及添加材质和表面属性,为 3D 模型提供视觉特征并确定模型如何与光交互。 纹理化是向材质添加颜色、图案和其他重要细节的过程。 这可以通过在模型表面绘画或在材质上应用纹理贴图来完成。

纹理贴图是投影到 3D 模型表面的数字图像。 纹理贴图可用于投影颜色和图案,并模拟凹凸、划痕和其他表面缺陷。 此外,贴图还可用于添加真实效果,例如阴影、反射和环境光遮挡。

材质和纹理可实现更真实、更详细的 3D 视觉效果,并使平面 3D 模型栩栩如生。

照明设置

3D 照明(Lighting)的工作原理与现实环境中的照明类似。 光源对象具有多个属性,例如强度、颜色、方向和衰减,这些属性会影响场景的照明方式。 艺术家可以通过调整这些属性来控制灯光与场景中模型的交互方式。

艺术家还可以创建和添加不同类型的灯光,例如聚光灯、环境照明和点光源,以在场景中创建特定的照明效果。 这会对 3D 产品渲染产生很大影响。

组合不同类型的灯光可以让艺术家控制场景的整体外观和情绪,就像摄影工作室的摄影师一样。

相机设置

相机设置是渲染场景之前的重要步骤。 了解相机设置(例如视野、长宽比、焦距、曝光和其他设置)如何影响模型的外观非常重要。 此外,摄影的基本规则适用于如何将相机放置在场景中。

了解相机放置和设置如何影响场景和 3D 模型可以帮助 3D 艺术家创建更有意义的、艺术指导的作品,设置在 3D 环境中看起来更自然的模型,并最终创建更逼真的渲染图像。

渲染场景

渲染(Rendering)是获取 3D 模型并将其转换为 2D 图像或动画的最后过程。 渲染涉及使用各种软件工具,例如 3D 建模、渲染引擎和合成软件。

该过程可能需要几分钟到几天的时间,具体取决于场景的复杂程度。 渲染完成后,图像或动画可以在游戏、电影和其他媒体中使用。

后期制作

最后,3D 建模中的后期制作(Post Production)是通过调整颜色并在 2D 空间中添加效果来细化和增强渲染图像的过程。 此过程通常在 Photoshop 或 After Effects 等 2D 软件中完成。 后期制作包括色彩校正、灯光效果和合成,为 3D 模型创建最终、更精美的外观。

后期制作中的合成(Composition)是将反射、阴影和环境光遮挡等多个元素组合在一起以创建最终图像或场景的过程。 这个过程可以帮助艺术家更好地控制将场景组合在一起的不同元素。 合成允许艺术家轻松调整各个元素的各种属性,例如颜色、亮度和对比度,并添加光耀斑和运动模糊等效果。

要创建将在营销材料中使用的产品渲染图。 例如,社交媒体广告、产品列表、登陆页面、宣传册等,通常需要提供 5-6 张不同角度、光线良好的高质量产品照片。 如果有产品的技术图纸,使用这些图纸能够使模型更加准确。

在雕刻/建模之前,必须定义该对象转换为数字的原因和复杂程度。建议更多地关注:

  • 文件大小
  • 多边形数
  • UV 和纹理
  • 材质

多边形问题

多边形越多,我们的模型就越重。 因此,为了优化 3D 模型,我们总是尝试减少这些计数。 对于增强现实,网格多边形数量应少于 100,000 个三角形。

UV 和纹理

纹理贴图导出至关重要。 纹理贴图的分辨率应为 2048 x 2048 或更小。 值得注意的是,UV 和纹理贴图不应相互重叠。

材质

不要对一个物体的不同面使用多种材质。 Substance Painter 是完成这项工作的最佳应用程序之一。

动画

Blender 以创建 3D 动画而闻名。 不过,一般来说,强烈建议动画应该在一个链下。

模型格式

建议采用以下格式导出 3D 模型:.glTF、.obj、.fbx、.glb 和 .dae。

3D 模型包含 Blender 文件,还包含 Cinema4D 模型、3Ds Max 模型、Maya 模型、Rigged 动画、FBX 模型、Obj 模型等。STL(Standard Tessellation Language)是一种常见的三维模型文件格式,被广泛应用于各种领域,包括3D打印、计算机辅助设计(CAD)等。它通过描述模型的表面几何形状,将三维对象转换为由许多小三角形组成的网格结构,从而实现了模型的数字化表示。

使用 Autodesk 3ds Max、Maya 或 Blender 等 3D 软件对旋转产品进行 3D 渲染。 该过程包括创建产品的 3D 模型、设置照明和材质并将其放置到场景中。 然后动画过程就可以开始,设置相机和场景,并创建旋转动画。

  • 产品设计与制造

最常见的是,3D 渲染用于产品制造过程中的产品原型设计和测试,以及在产品投入生产之前对产品进行可视化。 这可以让制造商深入了解产品设计,并帮助他们在制造前进行必要的调整。

3D 渲染还可用于创建装配过程的详细说明,以及创建产品在不同环境中的可视化效果。 这有助于制造商更好地了解产品并确保最终产品满足他们的期望。

  • 营销和产品推广

企业可以借助 3D 渲染来展示他们的产品。 同样,3D 建模渲染变得越来越普遍,因此它不再仅仅适用于大电影或预算庞大的品牌。

这些渲染可用于产品广告、网站或目录中。 3D 渲染使人们能够尽可能接近地体验产品,而无需实际体验它。

  • 建筑可视化

3D 渲染通常用于建筑中,以帮助可视化拟议的建筑或设计。 它们用于创建拟议结构的真实图像,可用于向客户和其他利益相关者展示成品的外观。

3D 渲染还可用于分析潜在的设计缺陷、识别潜在的材料使用以及评估项目的整体美感。 它们还可以用于创建空间的演练,让客户在建造之前体验设计。

  • 电影和电视中的特效

3D 渲染用于特效和电影制作中的各种任务。 它们有助于创建现实的环境、生物和物体,否则在现实生活中创建这些环境、生物和物体会非常困难或昂贵。

它们还可用于为现有场景添加额外的深度和真实感,或创建更真实的环境和对象。

  • 视频游戏

3D 渲染用于创建视频游戏的图形。 它们用于创建角色和环境,以及纹理和其他元素。 它们提供逼真且身临其境的游戏体验。 3D 渲染还用于创建许多视频游戏中的过场动画和过场动画。

3D 模型对于网站和平台来说通常过于复杂和繁重。 与台式机相比,智能手机或移动设备更方便我们阅读文章、在社交网络渠道上发布内容、阅读电子邮件。 移动设备目前仍然存在Web 3D的应用局限性。

  • .glTF文件

对于增强现实,此格式已成为基于 Web 和基于应用程序的应用程序的流数据标准。 它速度很快,并且允许游戏引擎直接读取。 GlTF格式极大地支持静态模型和动画。 但是,请不要使用此格式保存或导出文件以便稍后进行编辑,编辑完成后再使用GLTF转换工具将其转换为GLTF格式即可。

  • .Obj 文件

.Obj 文件是可扩展的。 这种格式在信息交换中很流行。 它极大地支持无限的颜色,一个文件可以定义多个对象。可以使用Obj转换工具将其他格式的3D模型转换为Obj格式。

  • .FBX 文件

通常,它非常适合交换 3D 几何和动画数据。 人们喜欢它,因为它非常普遍; 我们可以打开、编辑和导出高保真 2D 和 3D 文件。其他格式的3D模型可以使用FBX转换工具将其转换为FBX文件。

  • .GLB 文件

.GLB 文件也是 3D 设计师喜爱的文件之一,因为它支持运动和动画。 此外,它很小,但可以包含纹理、着色器和动画。GLB模型非常适合网页应用,你可以用GLB转换工具将其他格式的3D模型转换为GLB文件。

Web 3D模型优化要点如下:

  • 整个场景有 100000 个三角形
  • 大型网格有 5000 个顶点,中型网格有 1000 个顶点,小型网格有 250 个顶点
  • 每个网格 1 个 UV
  • 最多 10 个着色器,因为超过 10 个会导致随机错误
  • 纹理分辨率为 2048 x 2048

Objaverse大型3D数据集

海量开放数据集Objaverse数据集可以从huggingface下载,它包含大约 800 000 个 3D 模型以及文本描述,可以解放建模中的繁重任务。

参见:

[2212.08051v1] Objaverse: A Universe of Annotated 3D Objects (arxiv.org)

Objaverse (allenai.org)

10 Great Website for FREE 3D Models for your Games in 2020

AI: 3D objects and 3D assets (3dvf.com)

OpenGameArt.org

Home · Kenney

Download the latest indie games - itch.io

Blend Swap | Home

Models | 3D Resources (nasa.gov)

Free 3D Models, CAD Models And Textures Download

免费3D模型 - Free3D.com

CGTrader - 3D Models for VR / AR and CG projects

3D Models for Professionals :: TurboSquid

购买3D模型 - 3DModels.org

Free 2D Game Assets - CraftPix.net

最好的汽车、物体等的3D模型 - 3DModels商店

Photorealistic 3D images for product and package design | Adobe Dimension

3D模型在线查看器 - BimAnt

3D模型在线转换

InstaLOD -- Everything you need for the production and automatic optimization of 3D content.

RapidCompact -- 3D Optimization Software.

STL模型分割工具:解放3D打印的尺寸限制 (mvrlink.com)

OBJ模型简化工具:提升性能与效率的利器 (mvrlink.com)

CAD图纸轻量化中圆的处理 (mvrlink.com)

相关推荐
书山有路_邓1 小时前
vscode 如何鼠标双击时选择带有-的
前端
张三风啊3 小时前
vue config 接口地址配置
前端·javascript·vue.js
多情码农无情键3 小时前
浏览器漫谈HTML--2.2从表单标签看vue的响应式系统 理论+实战
前端·javascript·html
Uluoyu3 小时前
Vue.Draggable使用nested-with-vmodel进行拖拽
前端·javascript·vue.js
北极糊的狐3 小时前
vue页面成绩案例(for渲染表格/删除/添加/统计总分/平均分/不及格显红色/输入内容去首尾空格trim/输入内容转数字number)
前端·javascript·vue.js
边洛洛4 小时前
路由传参、搜索、多选框勾选、新增/编辑表单复用
前端·javascript·vue.js
OEC小胖胖6 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
川石教育7 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
新时代的弩力8 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js
余道各努力,千里自同风8 小时前
HTML5 视频 Vedio 标签详解
前端·音视频·html5