从Paint 3D入门glTF

Paint 3D

Microsoft Paint 3D是微软的一款图像编辑软件,它是传统的Microsoft Paint程序的升级版。

这个新版本的Paint专注于三维设计和创作,使用户可以使用简单的工具创建和编辑三维模型。

Microsoft Paint 3D具有直观的界面和易于使用的工具,使任何人都可以在没有专业技能的情况下开始创建三维模型。用户可以选择使用预设的3D对象库中的模型,也可以从头开始创作自己的模型。还可以通过导入图像或使用内置的绘图工具来添加纹理和颜色。

除了创建和编辑3D模型之外,Microsoft Paint 3D还具有一些其他的功能,例如添加文字、绘制2D图像、裁剪和调整图像大小等。这使得它成为一个多功能的图像编辑工具,既可以用来进行简单的2D图像编辑,又可以用来创建复杂的3D模型。

一旦完成了设计,用户可以将其导出为不同的文件格式,例如3D模型文件、图像文件或甚至是可交互的3D对象。这使得用户可以与其他应用程序或平台共享或使用所创建的内容。

总的来说,Microsoft Paint 3D是一个功能强大且易于使用的图像编辑软件,它为用户提供了一种简单的方式来进行三维设计和创作。无论是初学者还是有经验的设计师,都可以通过这个软件来实现自己的创意和想法。

三维内容管道

在客户端应用程序中呈现的3D内容来自不同的来源,并以不同的文件格式存储。维基百科上的3D图形文件格式列表显示了压倒性的数量,有70多种不同的3D数据文件格式,服务于不同的目的和应用案例。

例如,可以使用3D扫描仪来获得原始3D数据。这些扫描仪通常提供单个对象的几何数据,这些数据存储在OBJ、PLY或STL文件中。这些文件格式不包含有关场景结构或应如何渲染对象的信息。

可以使用创作工具创建更复杂的三维场景。这些工具允许编辑场景的结构、灯光设置、相机、动画,当然还有场景中出现的对象的3D几何体。应用程序以自己的自定义文件格式存储这些信息。例如,Blender将场景存储在.flend文件中,LightWave3D使用.lws文件格式,3ds Max使用.Max文件格式,Maya使用.ma文件。

为了呈现这样的3D内容,运行时应用程序必须能够读取不同的输入文件格式。必须解析场景结构,并且必须将3D几何数据转换为图形API所需的格式。3D数据必须传输到图形卡存储器,然后渲染过程可以用图形API调用序列来描述。因此,每个运行时应用程序都必须为其支持的所有文件格式创建导入程序、加载程序或转换器。

glTF计划

2013 年,Khronos 发起了glTF计划,目标是创建一种与 JPEG 一样普遍的图像 3D 资产格式——现在glTF和 JPEG 一样,是一项国际标准。用于高效传输和加载 3D 场景和模型。 glTF最大限度地减少了解包和处理 3D 资产的运行时处理,同时实现了复杂的普遍图形功能。 glTF为 3D 内容、工具和服务定义了一种可扩展的通用发布格式,可简化创作工作流程并实现跨行业的内容互操作使用。

glTF(全称为Graphics Language Transmission Format)是一种用于在3D图形应用程序之间传输和加载3D模型的开放标准格式。它是由Khronos Group开发和维护的,旨在提供一种高效的方式来存储和传输3D模型,适用于在各种平台和设备上展示和交互。

越来越多的应用程序和服务基于3D内容。网上商店提供带有3D预览的产品配置程序。博物馆通过3D扫描将其文物数字化,并允许游客在虚拟画廊中探索其藏品。城市规划者使用三维城市模型进行规划和信息可视化。教育工作者创建交互式的、动画化的人体三维模型。其中许多应用程序直接在web浏览器中运行,这是可能的,因为所有现代浏览器都支持使用WebGL进行高效渲染。

各种应用程序中对3D内容的需求不断增加。在许多情况下,3D内容必须通过网络传输,并且必须在客户端高效地呈现。但到目前为止,在3D内容创建和在运行时应用程序中高效渲染3D内容之间存在差距。

glTF:一种用于3D场景的传输格式

glTF的目标是以适合在运行时应用程序中使用的形式定义用于表示3D内容的标准。现有的文件格式不适用于此用例:有些文件不包含任何场景信息,只包含几何体数据;其他文件是为在创作应用程序之间交换数据而设计的,其主要目标是保留尽可能多的关于3D场景的信息,从而产生通常较大、复杂且难以解析的文件。此外,可能必须对几何数据进行预处理,以便使用客户端应用程序对其进行渲染。
现有的文件格式都不是为在网络上高效地传输3D场景并尽可能高效地渲染它们的用例而设计的。但glTF并不是“另一种文件格式”。它是3D场景传输格式的定义:场景结构是用JSON描述的,JSON非常紧凑,可以很容易地进行解析。对象的3D数据以可由通用图形API直接使用的形式存储,因此不存在解码或预处理3D数据的开销。
不同的内容创建工具现在可以提供glTF格式的3D内容。越来越多的客户端应用程序能够使用和呈现glTF。因此,glTF可能有助于弥合内容创建和渲染之间的差距。
越来越多的内容创建工具直接提供glTF导入和导出。

例如《Blender手册》记录了如何使用glTF导入和导出PBR材质。或者,可以使用glTF项目资源管理器中列出的一个开源转换实用程序,使用其他文件格式来创建glTF资产。转换器和出口商的输出可以使用Khronos glTF验证器进行验证。

glTF的设计目标是解决当前存在的3D模型传输和加载的一些问题,包括文件大小和加载时间过长。通过使用基于JSON的文本或二进制编码,glTF可以将3D模型压缩到尽可能小的文件大小,并能够在加载时快速解析和渲染。

通过引擎、浏览器和应用程序高效传输和运行时加载3D场景和模型。glTF最大限度地减少了3D资产的大小和解包和使用它们所需的运行时处理。glTF已经在整个行业中被广泛采用,相当于“JPEG for 3D”。glTF被数百种内容工具和服务使用,简化了3D创作工作流程,并实现了整个行业真实3D模型的互操作使用。
随着glTF的采用速度加快,其生态系统已发展成为一个丰富的工具和应用程序宝库,可以生成和导入glTF文件。然而,这种日益增长的多样性迫切需要一种有效的工具来对整个行业的glTF资源进行编目,并使需要生成或使用glTF资产的开发人员和艺术家能够为他们的项目找到最佳工具。

为了满足这一社区需求,Khronos创建了glTF项目浏览器,作为glTF生态系统中项目的集中搜索目录。

glTF Project Explorer用户界面

在创建glTF项目浏览器之前,glTF生态系统中的工具在官方的glTF GitHub上的README和“最新的glTF项目”问题中都列出了,但如果没有有效的路标和过滤,这些列表很快就会变得难以处理。新的glTFProjectExplorer取代了这两个以前的资源,创建了一个位置,glTF社区可以在这里维护和搜索glTF项目的最新数据库。

glTF项目浏览器是一个可搜索的目录,包括库、引擎、插件、扩展和其他工具,这些工具已由Khronos和更广泛的社区引入glTF生态系统。用户可以搜索Khronos或社区项目,根据他们需要完成的任务、他们需要的工具或软件类型、他们希望使用的语言进行筛选,甚至可以看到glTF工作组本身的“员工选择”。

鼓励所有glTF用户和开发人员为glTF项目浏览器做出贡献。如果您已经开发或知道一个您认为应该包含的用于glTF的伟大工具,请随时打开拉取请求-您可以在glTF Project Explorer repo中找到此处的说明。Project Explorer是开源的,我们欢迎任何有兴趣帮助改进该工具以打开代码本身的拉取请求的人。

请尝试一下glTF项目浏览器,并让我们知道你的想法!我们期待着与您合作,为glTF社区开发这一动态且宝贵的资源。

以下是glTF的一些主要特点和优势:

  1. 开放标准:glTF是一个开放标准,任何人都可以自由使用和实现。它由Khronos Group的成员组织共同制定和维护。

  2. 高效压缩:glTF使用基于JSON的文本或二进制编码,可以将3D模型压缩到较小的文件大小,减少传输和加载时间。

  3. 独立性:glTF是独立于特定图形API和平台的,可以在各种3D图形应用程序和设备上使用,包括WebGL、OpenGL、Vulkan、iOS和Android等。

  4. 全面支持:glTF不仅支持静态3D模型的传输和加载,还支持动画、材质、纹理、光照、骨骼动画等高级功能。

  5. 可扩展性:glTF通过使用扩展机制,可以根据需求添加自定义的功能和属性。

总的来说,glTF是一种高效、灵活且跨平台的3D模型格式,为开发者和用户提供了一种便捷的方式来传输、加载和展示3D模型。

它在游戏开发、虚拟现实、增强现实和Web应用程序等领域具有广泛的应用前景。

从勤劳的小蜜蜂开始

蜜蜂忙碌在花丛间,为人间带来甘甜滋味; 振翅飞舞的身影如黄金,美丽如夏日的阳光;

努力采集花粉的勤劳,是大自然的小管家;

蜜蜂努力工作不懈怠,为我们带来酿制的精华;

蜂蜜香甜润心田,蜜蜂只为花开满地。

在Paint 3D的三维库中获取模型

在Paint 3D的3D库中,有12大类模型,搜索Bee获取蜜蜂的三维模型

导入三维模型到画板

蜜蜂的正面投影

蜜蜂的三维正轴测图

可以做XYZ轴旋转操作

投影出的三维视觉

接下来,可以另存为三维模型

选中glb格式,GLB文件(.GLB)代表“GL传输格式二进制文件”,是用于共享3D数据的标准化文件格式。确切地说,它可以包含有关三维模型、场景、模型、光源、材质、节点层次和动画的信息。

当您打开GLB文件格式时,您可以实现完整的三维场景可视化,并与之交互。这就是为什么它也被称为3D资产世界的JPEG。GLB和GLTF之间存在显著差异,GLB格式是GLTF文件的一个版本,不同之处在于,GLB格式是二进制文件格式,而GLTF格式是基于JSON(JavaScript对象表示法)的。GLB将三维场景的所有元素(包括材质、节点层次和摄影机)定位在一个压缩文件中。相比之下,GLTF文件需要外部处理文件格式,例如纹理、着色器和动画数据等其他格式。这些外部元素存储在GLTF文件中,但每个元素都使用唯一的格式编码语言(JPEG用于纹理,GLSL用于着色器,BIN用于动画数据)。

​因此,GLB被识别为一个独立的文件,包含单个网络中3D场景的所有组件,而GLTF被视为一个非独立文件,需要纹理、着色器和动画数据等元素的外部处理文件。

此外,GLB格式的大小比GLTF格式小33%,这使其成为一种更高效的选择,因为它需要更少的处理能力。

导入glb模型到blender

将Paint 3D导出的蜜蜂Bee.glb文件导入开源三维设计软件Blender。

使用开源三维设计软件blender设计三维模型

模型layout查看

模型modeling查看

模型sculpting查看

模型UV查看

材质贴图设计

模型shading查看

模型texture paint查看

模型动画查看

模型Geometry Nodes查看

模型俯视图

模型侧视图

模型前视图

导出为gltf格式文件

选中gltf格式 (*.gltf+*.bin+*.texture)导出

至此完成glb格式向gltf格式转换

浏览三维蜜蜂

使用3D查看器即可浏览三维蜜蜂

蜜蜂展现到屏幕上的的三维虚拟效果

gltf格式的数据结构

glTF(Graphics Library Transmission Format)是一种开放的标准格式,用于更高效地传输和加载3D场景。它旨在提供一种紧凑、高效且易于解析的格式,以便在不同的应用和设备之间共享3D内容。以下是glTF标准格式的基本结构:
### 文件结构
glTF文件可以是JSON格式(.gltf)或者二进制格式(.glb)。以下是JSON格式的基本结构:
```json
{
  "asset": {
    "version": "2.0",
    "generator": "GeneratorName"
  },
  "scenes": [
    {
      "nodes": [
        0
      ]
    }
  ],
  "nodes": [
    {
      "mesh": 0
    }
  ],
  "meshes": [
    {
      "primitives": [
        {
          "attributes": {
            "POSITION": 1,
            "NORMAL": 2,
            "TEXCOORD_0": 3
          },
          "indices": 0,
          "material": 0
        }
      ]
    }
  ],
  "accessors": [
    {
      "bufferView": 0,
      "componentType": 5123,
      "count": 36,
      "type": "SCALAR",
      "max": [ 35 ],
      "min": [ 0 ]
    }
  ],
  "bufferViews": [
    {
      "buffer": 0,
      "byteOffset": 0,
      "byteLength": 144,
      "target": 34963
    }
  ],
  "buffers": [
    {
      "uri": "data:application/octet-stream;base64,...",
      "byteLength": 144
    }
  ],
  "materials": [
    {
      "pbrMetallicRoughness": {
        "baseColorFactor": [ 1.0, 1.0, 1.0, 1.0 ],
        "metallicFactor": 0.0,
        "roughnessFactor": 1.0
      }
    }
  ],
  "images": [
    {
      "uri": "image.png",
      "mimeType": "image/png"
    }
  ],
  "textures": [
    {
      "source": 0,
      "sampler": 0
    }
  ],
  "samplers": [
    {
      "magFilter": 9729,
      "minFilter": 9987,
      "wrapS": 33071,
      "wrapT": 33071
    }
  ]
}
```
### 主要组成部分
- **asset**:描述glTF文件的元数据,包括版本和生成器信息。
- **scenes**:场景数组,每个场景包含一个节点列表。
- **nodes**:节点数组,定义了场景中的变换和结构,可以引用网格、相机、光源等。
- **meshes**:网格数组,每个网格包含一系列的图元,每个图元定义了顶点属性和材料。
- **accessors**:访问器数组,用于描述缓冲区视图中的数据,如顶点位置、法线、纹理坐标等。
- **bufferViews**:缓冲区视图数组,定义了如何在缓冲区中访问数据。
- **buffers**:缓冲区数组,包含实际的二进制数据,如顶点缓冲区、索引缓冲区等。
- **materials**:材料数组,定义了物体的外观和渲染属性。
- **images**:图像数组,用于存储纹理图像数据。
- **textures**:纹理数组,引用图像和采样器。
- **samplers**:采样器数组,定义了如何采样纹理。
### 二进制格式(.glb)
glTF的二进制格式(.glb)将JSON和二进制数据(如缓冲区)打包在一个二进制文件中。它由以下部分组成:
1. **Header**:包含文件的魔术数字、版本和文件长度。
2. **JSON Chunk**:包含glTF JSON数据的块,其长度在块头中指定。
3. **Binary Chunk**:包含所有二进制缓冲区的块,其长度也在块头中指定。
glTF旨在最小化3D内容的传输和加载时间,同时保持易于解析和扩展的特性。它被广泛用于WebGL、WebXR、Unity、Unreal Engine等多种平台和应用。

gltf数据结构卡片

参见:

Windows 10 Tip: A guide to the basic tools in Paint 3D | Windows Experience Blog

How to use Microsoft's Paint 3D in Windows 10 | PCWorld

glTF-Tutorials | glTF Tutorials

The-gltf-project-explorer

gltf-ecosystem-takeoff

gltf20-reference-guide.pdf

glTF | glTF – Runtime 3D Asset Delivery

glTF Tutorial | glTF-Tutorials

glTF-2.0.html

Khronos glTF 2.0 作为 ISO/IEC 国际标准发布 - Khronos Group Press Release

blender.org - Home of the Blender project - Free and Open 3D Creation Software

glTF 2.0 — Blender Manual

Explore 3D Models - Sketchfab

3D绘制允许你在游戏和编辑器中绘制场景中的所有对象。 记住这不是一个贴花系统,所以你的游戏不会因为你画了多少而延迟。相反,您的FPS将保持不变,即使您将对象绘制一百万次! 看看:WebGL演示|论坛线程 ▶一致的性能 即使你画了很多,在3D中画的速度还是很快的原因是因为颜料被烘焙成物体的纹理。你的对象已经有纹理了,为什么不使用它们呢?代码也不会产生垃圾(0 gc alloc),所以您不必担心随机延迟峰值。 ▶闪电快速绘画 烤漆成纹理听起来很慢,但是画图代码是在GPU上100%完成的,这使得它的速度非常快。绘制代码也经过了大量优化,以通过将绘制操作组合在一起来最小化状态更改。 ▶完整的c#源代码 就像我的所有资产一样,我提供了完整的c#源代码——没有什么隐藏在.dll中。代码的组织和注释也很好,所以如果需要,可以很容易地进行更改。 ▶长期支持 就像我所有的资产,我提供长期的支持,不会在你购买后就消失。我也提供定期的免费更新基于伟大的功能从客户的要求。 ▶蒙皮绘画 在3D绘制允许您绘制动画对象与伟大的性能。看看WebGL的演示,看看僵尸油漆看起来有多棒。 ▶无缝紫外线绘画 如果你有一个复杂的网格,它是常见的接缝时绘画,甚至当使用专业的绘画软件。3D绘画解决了这个问题,包括“缝线固定”工具。3D绘画也使多个对象之间的绘画无缝连接,即使它们有不同的比例。 ▶易于使用 就像我的所有资产一样,我尽量保持界面简单。在几分钟之内,你就可以在游戏中添加绘画功能,并根据你的需要调整简单而强大的设置。 ▶团队基础绘画 3D绘画具有易于使用的基于团队的绘画功能。你可以指定一个特定的颜色给一个特定的团队,并计算每个团队在你的场景中画了多少像素! ▶Multi-Texture绘画 如果你有一个复杂的材质和着色器,有多个纹理一起工作,那么没问题。3D绘画允许你创建画笔,在同一时间绘制多个纹理,并给予每个画笔独特的设置。 ▶完整的物质支持 3D绘制不仅支持绘制所有的材质和着色器与统一,但所有你的定制的!使用直观的检查器,您可以轻松地选择您想要绘制的材质和纹理。 ▶在游戏&编辑器 3D绘画从一开始就被设计来支持游戏和编辑器中的绘画。这允许您在编辑器中快速调整纹理,然后在游戏中使用完全相同的特性绘制它们。 ▶混合模式 你不局限于画普通的反照率纹理。3D绘画有一系列的混合模式和设置,允许你画任何类型的纹理你喜欢。例如,添加混合照明纹理,RGB隔离阿尔法混合切割纹理,和更多。 信贷:
使用three.js加载glTF模型非常简单,你可以按照以下步骤进行操作: 1. 引入three.js和GLTFLoader.js文件。 ```html <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> ``` 2. 创建一个场景、相机和渲染器。 ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 3. 加载glTF模型。 ```javascript const loader = new THREE.GLTFLoader(); loader.load('path/to/model.gltf', function(gltf) { scene.add(gltf.scene); }, undefined, function(error) { console.error(error); }); ``` 4. 渲染场景。 ```javascript function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 完整的代码如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Load glTF Model with Three.js</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const loader = new THREE.GLTFLoader(); loader.load('path/to/model.gltf', function(gltf) { scene.add(gltf.scene); }, undefined, function(error) { console.error(error); }); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 请注意,上述代码中的路径"path/to/model.gltf"应该替换为你自己的glTF模型的路径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

:MNongSciFans

抛铜币以舒赞同,解兜囊以现支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值