GLTF在线编辑器

本文涉及的产品
实时数仓Hologres,5000CU*H 100GB 3个月
实时计算 Flink 版,5000CU*H 3个月
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
简介: GLTF在线编辑器提供了一系列功能,支持对GLTF模型的在线查看、材质修改、模型大小修改、模型网格属性修改、重置原点、模型合批等功能

GLTF在线编辑器提供了一个内置的模型查看器,可以加载和预览 glTF/glb 文件。用户可以在不用安装任何插件的情况下直接在浏览中快速查看和编辑器3D模型。

它的功能特点如下:

1、打开GLTF模型

  用户可以在GLTF编辑器中拖入GLB/GLTF模型或者选择打开本地GLB/GLTF模型文件,用户在预览模型的同时,在左侧面板查还可以看模型的网格mesh信息。

2、GLTF模型材质修改

  模型的材质属性可以通过各种贴图和参数来定义,用于控制模型的外观、反射特性和光照效果。下面是一些常见的模型材质属性:

  1. 贴图(Texture):贴图是指将图像映射到模型表面以实现细节和纹理效果的技术。常见的贴图类型包括颜色贴图、法线贴图、高光贴图、环境贴图等。颜色贴图用于定义模型表面的基本颜色。法线贴图用于模拟表面的细节和凹凸感。高光贴图用于定义模型表面的镜面高光反射部分,增强光照效果。环境贴图用于模拟环境光照和反射。
  2. 自发光贴图(Emissive Texture):自发光贴图定义了模型表面自身发光的部分。通过给模型的某些区域赋予自发光贴图,可以使其在渲染时呈现出发光的效果,例如荧光材质或发光纹理效果。
  3. 透明贴图(Opacity Texture):透明贴图用于控制模型表面的透明度。通过透明贴图,可以实现模型局部透明或半透明的效果,如玻璃、水面或植物的叶子等。
  4. 凹凸贴图(Bump/Normal Texture):凹凸贴图通过改变模型表面正常的法线方向来模拟凹凸细节。该贴图可以赋予表面更多的细节和深度感,但不会改变模型的几何形状。
  5. 环境光遮挡贴图(Ambient Occlusion Texture):环境光遮挡贴图用于模拟环境中光线受阻遮挡的效果。它可以增强模型的凹凸感和阴影效果,使其看起来更真实。
  6. 位移贴图(Displacement Map):位移贴图通过改变模型顶点的位置来模拟细节和几何形状的改变。与凹凸贴图不同,位移贴图可以真实地改变模型的几何形状。
  7. 粗糙贴图(Roughness Texture):粗糙贴图用于控制模型表面的光滑度。通过调整粗糙贴图的值,可以实现模型表面的光滑或粗糙的外观。
  8. 金属贴图(Metallic Texture):金属贴图用于定义模型表面的金属属性。通过调整金属贴图的值,可以指定哪些部分是金属的,哪些是非金属的。
  9. 光照贴图(Lighting Texture):光照贴图用于预定义模型的光照效果。通过给模型应用光照贴图,可以在渲染时模拟出各种光照条件下的外观效果。

  此外,在材质属性方面,还有一些与贴图无关的参数,如粗糙度(Roughness)和金属度(Metallicity)。这些参数用于直接控制模型表面的光照特性。粗糙度参数表示模型表面的粗糙程度,取值范围从完全光滑到非常粗糙。金属度参数表示模型表面的金属属性,取值范围从完全非金属到完全金属。

  除了贴图和参数之外,模型的其他属性还包括顶点颜色(Vertex Colors)、面(Faces)和混合(Blending)等。顶点颜色可以为模型的每个顶点指定颜色,用于细节着色和着色效果的增强。面指的就是模型的多边形面,它们构成了模型的几何形状。混合是指在渲染过程中将多个模型或多个材质混合在一起,以实现不同模型之间的过渡和融合效果。

  这些材质属性和参数的组合使用可以创建出各种不同的材质效果,使模型在渲染时呈现出丰富逼真的外观和光照效果。

  GLTF编辑器可以针对模型的网格mesh进行各种常规类型的才是属性修改, 如图所示:

3、GLTF模型位移、旋转、大小修改

  通过右侧变换面板,可以对模型的位置、旋转角度、尺寸大小进行修改,如下图所示:

和卡车大小的苹果

4、GLTF模型节点属性修改

  基本属性栏可展示模型网格mesh的基本属性,基本属性包括:模型类型、模型名称、顶点数数、三角数和可见性等属性。其中模型名称和可见性属性是可进行修改的。

修改模型的基本属性

5、GLTF模型原点重置

  模型原点(Model Origin)是三维模型坐标系中的一个重要概念。它表示模型的局部坐标系的原点或起始点。在三维计算机图形学中,模型原点在模型的局部坐标系中起到了定位和参考的作用。

  模型原点通常位于模型的几何中心或者特定的参考点上,具体位置取决于建模软件和设计者的选择。一般来说,当一个模型被创建时,模型原点默认会被设置为模型的几何中心。这使得在进行旋转、缩放和平移等操作时更加方便,因为这些变换操作将以模型原点为基准进行。

  模型原点的位置对于模型的正确显示和处理非常重要。当模型被加载到渲染引擎或三维应用程序中时,模型原点被用作计算模型在世界坐标系中的位置和姿态的依据。通过相对于模型原点的坐标,可以确定模型在场景中的正确位置和方向。

  在一些三维文件格式(如glTF)中,模型原点的位置和方向可以通过矩阵或变换信息进行描述。这些信息包括平移、旋转和缩放等变换矩阵,以及与全局坐标系之间的转换关系。

  总而言之,模型原点是三维模型中的一个重要概念,用于定位和参考模型的局部坐标系。它在三维计算机图形学中起到了基准和参照的作用,对于正确显示和处理模型非常关键。

  在GLTF编辑器中用户可以很方便的设置模型原点,如下所示:在导入龙门吊时,我们可以看到龙门吊的原点和坐标原点的位置偏差较大:

6、GLTF模型材质合并

  模型材质合并(Material Merging)是指将多个模型中使用的材质合并为一个或少数几个共享的材质。这个过程可以在三维计算机图形中进行,以优化模型的渲染性能和减少内存占用。

以下是模型材质合并的一些作用:

  1. 减少批量渲染次数:当一个模型使用大量独立的材质时,渲染引擎需要为每个材质执行一次绘制调用,这会导致批量渲染次数的增加。通过合并模型材质,可以将多个绘制调用合并为一个或少数几个,从而减少了渲染的开销,提高了渲染性能。
  2. 降低渲染状态切换:在渲染过程中,当使用不同的材质时,渲染引擎需要切换渲染状态,例如纹理绑定、着色器参数等。这些状态切换也会带来额外的开销。通过合并模型材质,可以减少状态切换的次数,从而提高渲染效率。
  3. 优化内存占用:每个材质对象都包含了一些数据,如纹理、颜色、法线贴图等。当一个模型使用大量独立的材质时,会占用较多的内存空间。通过合并模型材质,可以减少重复的材质数据,从而降低内存消耗。
  4. 简化材质管理和维护:当一个模型拥有许多独立的材质时,对于材质的管理和维护会变得复杂。通过合并模型材质,可以减少材质的数量,简化了材质的管理和维护过程。

  需要注意的是,模型材质合并也可能会带来一些限制和影响。例如,如果模型中的不同部分需要使用不同的着色器或材质特性,合并材质可能会造成这些细节的丢失。因此,在进行模型材质合并时,需要根据具体情况权衡优缺点,并确保最终的效果符合预期要求。

  下面来介绍下如何使用GLTF编辑器进行模型材质合并。

7、GLTF模型快捷操作

  除了以上功能之外,为了提升用户体验,方便编辑模型,GLTF编辑器 还提供了撤销、恢复、拷贝模型、删除模型和聚焦等快捷功能。


原文链接:https://www.mvrlink.com/gltf-online-model-editor/

目录
相关文章
|
存储 人工智能 图形学
GLB/GLTF在线纹理编辑
GLB文件中的纹理数据采用了嵌入式存储的方式,具有较小的文件体积和高效的数据传输,能够提高3D模型的加载速度和渲染质量。
265 1
基于three.js的牛逼轰轰的3D编辑器nunuStudio!
这是一款基于Three.js的3D编辑器,我之前一直喊错,叫人家"牛牛",因为我觉得它真的好牛,其实人家正确拼音喊“努努”! 可以发布web的运行包,直接可以网页端二次开发,真的不要太方便了!
基于three.js的牛逼轰轰的3D编辑器nunuStudio!
|
28天前
Threejs制作窗户透亮效果
这篇文章讲解了如何在Three.js中制作窗户的透亮效果,包括设置透明材质和光照以实现逼真的窗户渲染效果的技术细节。
36 1
|
29天前
|
编解码 前端开发 JavaScript
ThreeJs制作模型图片
这篇文章介绍了如何使用Three.js将一张图片转化为3D场景中的像素化模型,通过提取图片的像素颜色并将它们应用到3D立方体上,形成一种特殊的图像展示效果。
23 0
ThreeJs制作模型图片
|
29天前
Threejs制作海面效果
这篇文章详细介绍了利用Three.js制作逼真海面效果的过程,包括设置Water材质、调整光照及实现波动动画的步骤。
26 0
Threejs制作海面效果
|
19天前
|
资源调度 前端开发 JavaScript
安利一款基于canvas/svg的富文本编辑器-支持在线导出PDF、DOCX
高性能:利用Canvas和SVG进行图形和矢量图形的渲染,提供高性能的绘图能力。 可扩展性:Canvas-Editor是一个开源项目,支持通过插件机制扩展编辑器的功能,如DOCX、PDF导出、表格分页等。 丰富的文本编辑功能:支持多种文本编辑操作,如插入表格、分页、性能优化等。
88 0
|
30天前
Threejs用官方提供的编辑器做一个简单的模型
这篇文章介绍了如何使用Three.js内置的编辑器来创建和编辑简单的3D模型,并提供了相应的操作指南。
75 0
|
3月前
|
Web App开发 JSON JavaScript
WebGL简易教程(十五):加载gltf模型
WebGL简易教程(十五):加载gltf模型
101 1
|
3月前
|
API Python
Blender导出带透明贴图的gltf模型
Blender导出带透明贴图的gltf模型
137 0
Blender导出带透明贴图的gltf模型
|
算法 UED
GLTF编辑器的另一个作用
GLTF编辑器的另一个作用就是可以将fbx、dae、gltf等格式的模式转换成glb模型
154 0