Mars3D开发基础学习:glTF小模型
glTF全称是 Graphics Language Transmission Format (图形语言传输格式),是一种针对GL(WebGL,OpenGL ES以及OpenGL)接口的运行时资产传递格式,由澳大利亚的 Khronons 集团进行维护,并于2017年6月5日在GitHub 上公布了glTF 2.0的规范,此文也是针对于2.0版本进行介绍的。
glTF通过提供高效、可扩展、可互操作的格式来传输和加载三维内容,填补了3D建模工具与现代图形应用程序之间的空白,它已成为了 Web 上的3D 对象标准(Web导出的通用标准),可以说glTF是3D 模型的JPEG格式,几乎每个3D Web框架都支持glTF。随着glTF的不断发展,glTF形成了自己庞大的生态系统,同时受到了各行业的大力支持。
glTF小模型只是 Primitive 或Entity的其中一种类型数据,代码加载方式是一致的,这里单独拿出来讲解下他的.gltf数据特性。
glTF官方资料
#1. glTF数据结构
glTF的核心是一个JSON文件,另外还支持外部数据。具体而言,一个glTF模型可包括以下三部分内容:
- JSON格式的文件(.gltf),其中包含完整的场景描述,并通过场景结点引用网格进行定义 。包括:节点层次结构、材质(定义了3D对象的外观)、相机(定义义了渲染程序的视锥体设置 )、mesh(网格)、动画(定义了3D对象的变换操作,比如选择、平移操作)、蒙皮(定义了3D对象如何进行骨骼变换)等;
- .bin包含几何和动画数据以及其他基于缓冲区的数据的二进制文件;
- 图像文件(.jpg,.png)的纹理。
#1.1 glTF的JSON结构
场景对象以数组的形式存储在JSON文件中,可以使用数组中各个对象的索引来访问它们:
"meshes" :
[{ ... }{ ... }...
],
这些索引还用于定义对象之间的关系。上面的示例定义了多个网格对象,并且一个节点可以使用网格索引引用上面定义的其中一个网格对象:
"nodes":
[{ "mesh": 0, ... },{ "mesh": 5, ... },...
}
下图概述了glTF的JSON部分的顶级元素:
下面我对这些元素进行简要说明:
- scene: glTF格式的场景结构描述条目。它通过引用node来定义场景图;
- node: 场景图层次中的一个节点。它可以包含一个变换(比如旋转或平移),并且可以引用其他(子)节点 。此外,它可以引用网格和相机,以及描述网格变换的蒙皮;
- camera: 定义了用于渲染场景的视锥体配置;
- mesh: 描述了出现在场景中几何对象实际的几何数据。它是指accessor用于访问实际几何数据material的对象,并且是指在渲染对象时定义其外观的 ;
- skin: 定义了用于蒙皮的参数,参数的值通过一个accessor对象获得。
- animation: 描述了一些结点如何随时间进行变换(比如旋转或平移);
- accessor: 一个访问任意数据的抽象数据源。被mesh、skin和animation元素使用来提供几何数据、蒙皮参数和基于时间的动画值。它通过引用一个bufferView对象,来引用实际的二进制数据;
- material: 包含了定义3D对象外观的参数。它通常引用了用于3D对象渲染的texture对象;
- texture: 定义了一个sampler对象和一个image对象。sampler对象定义了image对象在3D对象上的张贴方式。
更多详情,可查阅 glTF 2.0规范 以及 glTF官方教程
#1.2 glTF相关工具推荐
浏览: BabylonJS查看器浏览gltf ThreeJS查看器浏览gltf PlayCanvas查看器浏览gltf
其他: glTF在线验证 gltf内部优化处理
数据处理:单体小模型转为glTF格式
#2. glTF的使用
供了两种方式加载glTF模型,分别是通过 Entity API 和 Primitive API 两个 API 实现的,使用方式差不多,仅类名不同。
核心代码如下:
//entity方式
var graphic = new mars3d.graphic.ModelEntity({position: [116.35104, 30.86225, 374.4],style: {url: 'http://data.mars3d.cn/gltf/mars/fengche.gltf',heading: 270,scale: 30,minimumPixelSize: 100,},
})
graphicLayer.addGraphic(graphic)//primitive方式
var primitive = new mars3d.graphic.ModelPrimitive({position: [116.35104, 30.86225, 374.4],style: {url: 'http://data.mars3d.cn/gltf/mars/fengche.gltf',colorBlendMode: Cesium.ColorBlendMode.MIX,heading: 270,scale: 30,minimumPixelSize: 100,},
})
graphicLayer.addGraphic(primitive)
#2.1. 运行效果
Mars3D开发基础学习:glTF小模型相关推荐
- Mars3D开发基础学习:矢量图层
三维场景中,地形和栅格来组成了三维的基础,但更多的业务还是需要 点线面等矢量数据来充实, 这就是我们的矢量数据图层. #1. 图层类型清单 当前主要使用的矢量图层,是指GraphicLayer 类及其 ...
- Mars3D开发基础学习:矢量数据
矢量数据 是用经度.纬度.高度坐标来表示地图图形或地理实体位置的数据,一般是通过记录坐标的方式来尽可能将地理实体的空间位置表现的准确无误,常见的矢量数据有:点.线.面.体等格式. #1. 矢量数据对象 ...
- Mars3D开发基础学习:栅格瓦片图层
前面我们说到地形是三维场景的"骨骼",栅格瓦片图层就是我们浏览三维能感知的"皮肤"了,通常我们叠加的是各种卫星影像或瓦片数据. Mars3D支持多种服务来源的高 ...
- Mars3D开发基础学习:坐标系及坐标变换
只要涉及到地图开发,无论如何关于坐标系的概念是逃不掉的,谁让地球它是个球呢. 地球就像个橘子 不同的坐标系就是不同的剝橘子的方法 这里就不列举国内常用的坐标系及转换方法,大家可以自行百度. 相关GIS ...
- Mars3D开发基础学习:场景特效
平台支持一些场景特效,包括 雾天气,雨天气,雪天气, 泛光特效,亮度效果,夜视效果,黑白效果,马赛克效果,景深效果 等. #1. 特效的底层实现:后处理(Post Processing) 特效底层是使 ...
- Mars3D开发基础学习:Material材质
在真实世界里,每个物体会对光产生不同的反应.钢看起来比陶瓷花瓶更闪闪发光,一个木头箱子不会像钢箱子一样对光产生很强的反射.每个物体对镜面高光也有不同的反应.有些物体不会散射(Scatter)很多光却会 ...
- Mars3D开发基础学习:相机Camera及视角控制
Camera相机控制了三维场景的视图.有很多方法可以操作Camera,如旋转(rotate).缩放(zoom).平移(pan)和飞到目的地(flyTo).同时也有鼠标和触摸事件用来处理与Camrea的 ...
- Mars3D开发基础学习:Property属性机制
平台是数据驱动和 time-dynamic visualization,这些可都是仰仗Property属性机制来实现的. Property最大的特点是和时间相互关联,在不同的时间可以动态地返回不同的属 ...
- ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
最新文章
- Coing-二叉树(bibary Tree)
- 研修项目文件丢失的处理思路
- python读取大文件csv内存溢出_Python,内存错误,csv文件太大
- laravel redis mysql_Laravel 5.1 Redis 缓存配合 MySQL 数据库实现「用户最后活跃时间」功能...
- oracle学习笔记三
- Docker教程-文件传输
- 面试官问:能否模拟实现JS的call和apply方法
- css 可编辑,如何设置DIV可编辑
- CanFestival应用
- tar 解压_关于Ubuntu下解压tar.xz方法记录
- EBGP邻居抖动问题
- java基础—IO流——复制一个文件到当前文件夹中
- Bootstrapbutton组
- Java日常编程优化细节
- Android之ListView优化(使用Lrucache,图片滑动时使用默认图片,停止时加载)
- 微信小程序之——自定义分享按钮(完整版)
- html5用户输入后自动显示用户名已重复_IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素...
- vba mysql_VBA连接Mysql数据库
- 基于spring boot的宠物医院管理系统(完美运行、数据库源代码、可远程调试、包含实验报告)
- 腾讯云服务器怎么进行学生认证?需要注意什么?
热门文章
- C#特性——Description
- bootstrapt学习指南_Bootstrap学习文档(一)
- UAP扩展开发 - 新增按钮
- Suzy找到实习了吗Day 14 | 二叉树开始啦 二叉树的分类、定义、遍历方法
- BUUCTF(12_1-12_5)
- Google Pay支付遇到的问题,妈妈再也不用担心我的面试
- 三洋服务器显示F6,三洋空调故障代码有哪些?
- POL8901 LVDS转MIPI DSI 支持旋转图像处理芯片
- 淘宝天猫开放平台店铺商品发布(新)-淘宝店铺发布API接口流程代码对接说明
- 三元一次方程组例题_最新《三元一次方程组及其解法》例题与讲解