GLTF简介

1.glTF(GL TransmissionFormat),即图形语言交换格式,它是一种3D内容的格式标准,由Khronos Group管理(Khronos Group还管理着OpenGL系列、OpenCL等重要的行业标准);

2.glTF的设计是面向实时渲染应用的,尽量提供可以直接传输给图形API的数据形式,不再需要二次转换;

3.glTF对OpenGL ES、WebGL非常友好;

4.glTF的目标是:3D领域的JPEG;

5.作为一个标准,自2015年10月发布(glTF 1.0)以来,已经得到了业界广泛的认可,你可以相信它的水平;

6.glTF目前最新版本为2.0已于2017年6月正式发布。

GLTF具体的数据存储格式可以去官方网站上看:https://www.khronos.org/gltf/,大概就是相对于XML的JSON存储方式。

文章关注的是GLTF给我们带来的便利——节约存储空间,减少带宽压力。

那么如何获得GLTF格式文件?

目前已经有了很多的转换工具:

其中Input代表输入模型的格式,输出为gltf格式。由于之前使用过Dae格式的文件(https://www.khronos.org/collada/),因此文章选取COLLADA2GLTF工具转换文件:

千万别纠结于工具源代码的编译,因为KhronosGroup已经给出了Release版本。这里说一些使用方法:

1.解压zip文件,在根目录新建dae文件夹——用于存放原始的dae文件

2.在根目录新建gltf文件夹——用于存放转换后的gltf文件

3.在根目录按住Ctrl+Shift+Alt+鼠标右键,打开PowerShell窗口

4.在命令行中输入:./collada2gltf-bin.exe input.dae output.gltf –i dae/input.dae –o gltf/output.gltf

其中input为dae文件的名称,output为输出gltf文件的名称。

5.Enter开始转换。

PS C:\Users\Ruby\Desktop\COLLADA2GLTF-v2.1.2-windows-Release-x64>./COLLADA2GLTF-bin.exe elf.dae elf.gltf -i dae/elf/elf.

dae -o gltf/elf.gltf

Convertingdae\elf\elf.dae -> gltf\elf.gltf

Time: 320 ms

原始dae文件包含4个jpg贴图一共2.46M,转换后为一个单独的gltf文件约1.38M(含贴图)。其实我很好奇那些贴图文件去哪儿了,于是打开了gltf文件查看,发现在image数组下已经把这些贴图文件用base 64编码,变成一堆机器码直接插在gltf文件中。

完成模型转换以后,利用ThreeJS的LoadGLTF API导入网页中浏览效果如下:

如何在GLTF格式中捕获动画?

上述过程展示了从Collada到gltf的转换以及让gltf模型展示在网页上。下面将继续研究如何获取gltf模型的动画("Talk is cheap,show me the code"——哈哈哈)

效果如图所示:

至此,gltf从模型到动画都run了一遍。

总结

GLTF格式号称3D图形界的JPEG,能够实现快速的模型数据交换。在2017年中旬更新的2.0版本克服了一些低版本的功能缺陷,使得自身功能得到发展;同时,gltf解析及转换Tool的快速发展,为GLTF的进一步推广做出了很多的贡献。文中也应证了,作为GLTF格式的用户,能够利用现有的工具对模型处理,减少模型的数据量,在WebGL的应用中在成倍地节省带宽的同时能够获取同质量的模型以及动画。

原文:https://cloud.tencent.com/developer/news/204942

[转]GLTF-3D图形界的JPEG的更多相关文章

  1. 4-Highcharts 3D图之3D普通饼图

    <!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title& ...

  2. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...

  3. 2-Highcharts 3D图之3D柱状图带可调试倾斜角度

    <!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...

  4. 1-Highcharts 3D图之普通3D柱状图与带空值

    <!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...

  5. 自制裸眼3D图【推荐】

    Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...

  6. 最简单的基于DirectShow的示例:视频播放器图形界面版

    ===================================================== 最简单的基于DirectShow的示例文章列表: 最简单的基于DirectShow的示例:视 ...

  7. 最简单的基于libVLC的例子:最简单的基于libVLC的视频播放器(图形界面版)

    ===================================================== 最简单的基于libVLC的例子文章列表: 最简单的基于libVLC的例子:最简单的基于lib ...

  8. Hyper-V虚拟机上安装一个图形界面的Linux系统

    这件事情呢,一直想干但又觉得太陌生和麻烦,无奈现在到了非装不可的时候,只好硬着头皮去装.在此之前,我不懂什么叫做虚拟机,linux也接触甚少.经过3天的折腾,终于装好了带有图形界面的linux(字符版 ...

  9. 用ChemDraw画3D图的方法

    在绘制化学图形的时候,很多的用户都会发现很多的图形都是三维的,这个时候就需要找一款能够绘制3D图形的化学绘图软件.ChemOffice 15.1是最新的化学绘图工具套件,总共有三个组件,其中ChemD ...

随机推荐

  1. STM32CubeMx的使用分享

    1. 新建立工程(以F103ZET6为例) 2. 配置引脚(以PA0为例)   3. 配置外设(以串口为例) 4. 配置时钟 5. 外设.GPIO.中断初始化 6. 生成工程 7. 添加自己的代码 8 ...

  2. ASP.NET-使用json

    数据格式 vat strJson =' {"name":"jingya","Age":88} '; // 数字不用写双引号 JSON.par ...

  3. iOS企业证书网页分发全过程具体解释(图文并茂史无前例的具体哦)

    iOS企业证书网页分发全过程具体解释 苹果的企业级证书公布的应用.是不用设备授权就可以直接安装,而且不限设备上限. 为了方便分发,苹果有协议实现通过网页链接直接下载安装企业级的应用. 首先须要说明它的 ...

  4. java web 服务器端处理json格式参数

    前面我们说了传递参数的两种访书,第一是key-value形式,第二是json格式,对于第一种我们在服务器端直接使用 request.getParameter("key");就能获取 ...

  5. Post请求方式长度參数过长导致參数为空

    Post提交方式本身对于參数的长度没有限制,HTTP协议也没有限制. 可是今天在做一个web项目的时候碰到一个问题,当要提交的表单内容达到一定大小时,发现后台代码接收到的參数为空. 查询了一下.发现是 ...

  6. YII 数据库查询

    $userModel = User::Model(); $userModel->count(); $userModel->count($condition); $userModel-> ...

  7. html页面的简单对话框(alert, confirm, prompt)

    html页面简单的三种对话框例如以下: 1.alert(),最简单的提示框: alert("你好!"); 2.confirm(),有确认和取消两个button: if(confir ...

  8. C/C++数据类型的转换之终极无惑

    程序开发环境:VS2012+Win32+Debug 数据类型在编程中常常遇到.尽管可能存在风险,但我们却乐此不疲的进行数据类型的转换. 1. 隐式数据类型转换 数据类型转换.究竟做了些什么事情呢?实际 ...

  9. [jzoj 6086] [GDOI2019模拟2019.3.26] 动态半平面交 解题报告 (set+线段树)

    题目链接: https://jzoj.net/senior/#main/show/6086 题目: 题解: 一群数字的最小公倍数就是对它们质因数集合中的每个质因数的指数取$max$然后相乘 这样的子树 ...

  10. vue中router-link的click事件失效的解决办法

    title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...