一种基于WebGL的三维模型显示方法技术

本发明专利技术提供一种基于WebGL的三维模型显示方法，三维模型显示方法基于WebGL的框架Three.js加载三维模型fbx格式到三维空间进行展示并读取模型所有材质，并利用HTML技术布局界面交互UI，所述三维模型显示方法至少包括步骤：第一步、将模型文件转换为自定义的json格式文件,所述json格式文件至少包括json格式模型文件、json格式贴图文件；第二步、利用JavaScript程序，根据第一步所得json格式文件，在支持WebGL的浏览器页面中显示。该编辑方法读取模型所有材质并利用HTML列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择。

A Method of Three-dimensional Model Display Based on WebGL

【技术实现步骤摘要】
一种基于WebGL的三维模型显示方法
本专利技术涉及三维模型显示技术，特别涉及一种基于WebGL框架Three.js加载模型fbx格式到三维世界、显示方便、编辑灵活的用于网页的模型显示方法。
技术介绍
随着社会和科技的进步，信息展示和交流慢慢从文字、图片和视频向三维甚至多维转变，从而衍生了大量新的技术，如虚拟现实(VR)、增强现实(AR)、混合显示(MR)等,而这些技术又离不开三维模型，三维模型创建后不一定能适应任何地方任何情况，而要解决这个问题，就离不开模型编辑，对于Web网页,现有三维模型的显示和编辑存在很多不足：1、模型显示不方便，在Web上进行三维展示需要借助flash或其他插件，从而很容易造成加载速度慢，显示不顺畅；2、三维文件格式繁多，兼容性差，目前三维软件各有各的标准，从而导致三维文件格式也五花八门，如fbx、obj、dae、gltf/glb等；3、编辑不方便，需要借助第三方软件，目前模型编辑比较通用的方案是将模型导回到制作软件进行修改编辑(如3DMAX、Maya、Blender、C4D等三维建模软件)，编辑完再导出相应的格式使用。WebGL是一种3D绘图标准，该绘图标准允许将脚本语言Javascript与着色语言GLSL结合在一起，且WebGL已经在各主流浏览器上支持。WebGL的出现使得在浏览器上展示三维效果不再需要浏览器插件的支持，其直接利用底层的硬件加速对图形进行渲染，为开发人员提供了与传统三维桌面应用同样高效的图形渲染速度，本专利技术利用这一技术的特点，提出一种采用Three.js开源框架基于WebGL的三维模型显示方法。专利技术内容本专利技术的目的是为了解决上述技术问题，提供一种基于WebGL的三维模型显示方法，该显示方法基于WebGL框架Three.js加载模型fbx格式到三维世界，读取模型所有材质利用HTML列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择。为了解决上述现有技术问题,本专利技术的技术方案是:本专利技术一种基于WebGL的三维模型显示方法，所述三维模型显示方法基于WebGL的框架Three.js加载三维模型fbx格式文件到三维空间进行展示并读取模型所有材质，并利用HTML技术布局界面交互UI，所述三维模型显示方法具体包括以下步骤：第一步、将模型文件转换为自定义json格式文件；第二步、利用JavaScript程序，根据第一步所得json格式文件，在支持WebGL的浏览器页面中显示，且基于HTML5的编程约定。进一步的,所述自定义json格式文件包括：网格json文件，含顶点位置，法线，面，uv，蒙皮权重与索引，对顶点数大于65535的单网格进行切割处理，对所有数据精度与密度进行优化；材质json文件，含材质数据与关联数据；动画json文件，含动画属性以及时间信息；贴图txt文件，含图片base64编码数据以及材质关联数据json格式贴图文件。进一步的，网格json文件、材质json文件、动画json文件均采用Gzip压缩格式存储，可以大比例的压缩文件大小，该压缩方式的解压被浏览器默认支持，极大地提高传输速度。进一步的，所述第一步具体包括：S1.对FBX模型文件进行数据结构分析；S2.对可合并的网格进行合并操作，优化网格数据；S3.生成自动展UV数据，UV是指U、V纹理贴图坐标的简称，原始UV数据保存到UV2通道；S4.通过烘焙生成模型的ambientocclusionmap(环境闭塞贴图)，lightmap(光照贴图)以及nomalmap(法线贴图)贴图数据；S5.提取模型文件中的材质信息，形成材质渲染数据；S6.提取模型文件中的动画信息，形成动画数据；S7.以顶点信息数组、法线信息数组、UV信息数据、模型构件三角面片索引数组，动画数组，生成json格式模型文件；S8.通过纹理信息数组生成多个json格式贴图文件，包含低精度贴图文件，高精度贴图文件，环境贴图文件以及光照贴图文件。所述第二步具体包括：T1渲染前准备，在浏览器页面中新建空的缓冲区对象，初始化three.js框架；T2初始化对象，通过AMRTLoader.js解析json格式网格文件，生成网格数据、UV数据、动画数据、材质数据，在场景中加入模型，该模型为无贴图模型；T3解析动画，在模型加载完成后，对动画数据进行解析，生成AnimationClip(动画卡片)数组，并缓存；T4解析贴图，在动画解析完成后，开始加载低精度贴图数据，并赋予相关材质低精度贴图信息，此时显示的为完整模型，低精度贴图加载完后，加载高精度贴图和环境贴图，并赋予材质高精度贴图信息和环境贴图信息，最后加载光照贴图文件，将烘焙的光照还原到模型上。本专利技术一种基于WebGL的三维模型显示方法,其有益效果有：1、该模型显示方法不依赖其它软件或插件，只需浏览器，使用基于WebGL的框架Three.js加载模型(fbx格式)到三维世界进行展示并读取模型所有材质利用HTML列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择，使用方便、速度快；2、该模型显示方法使用简单、方便快速上手，任何人即使没有任何技术基础也可轻松进行模型展示；3、使用主流通用格式FBX，兼容性好。附图说明图1为本专利技术一种基于WebGL的三维模型显示方法的示意图。具体实施方式下面结合实施例对本专利技术作进一步说明：参见图1，图1为本专利技术的流程框图，基于WebGL的三维模型显示方法包括以下步骤：将模型文件进行标准化处理获取.fbx格式文件，将模型文件转换为自定义的json格式文件，采用WebGL将三维模型通过浏览器以页面的形式展示，利用JavaScript程序来控制三维模型的显示效果，其中所述json格式文件至少包括json格式模型文件、json格式贴图文件，.fbx文件转换为自定义的json格式文件的具体过程如下：S1.对FBX模型文件进行数据结构分析；S2.对可合并的网格进行合并操作，优化网格数据；S3.生成自动展UV数据，原始UV数据保存到UV2通道；S4.通过烘焙生成模型的ambientocclusionmap，lighmap以及nomalmap贴图数据；S5.提取模型文件中的材质信息，形成材质渲染数据；S6.提取模型文件中的动画信息，形成动画数据；S7.以顶点信息数组、法线信息数组、UV信息数据、模型构件三角面片索引数组，动画数组，生成json格式模型文件；S8.通过纹理信息数组生成多个json格式贴图文件，包含低精度贴图文件，高精度贴图文件，环境贴图文件以及光照贴图文件。采用脚本语言JavaScript的方式来控制三维模型的显示效果的具体过程如下：T1渲染前准备，在浏览器页面中新建空的缓冲区对象，初始化three.js框架；T2初始化对象，通过AMRTLoader.js解析json格式网格文件，生成网格数据、UV数据、动画数据、材质数据，在场景中加入模型，该模型为无贴图模型；T3解析动画，在模型加载完成后，对动画数据进行解析，生成AnimationClip数组，并缓存；T4解析贴图，在动画解析完成后，开始加载低精度贴图数据，并赋予相关材质低精度贴图信息，此时显示的为完整模型，低精度贴图加载完后，加载高精度贴图和环境贴图，并赋予材质高本文档来自技高网...

【技术保护点】
1.一种基于WebGL的三维模型显示方法，其特征在于，三维模型显示方法采用将三维模型文件进行标准化处理；在超文本标记语言HTML编辑的浏览器页面进行三维模型显示。

【技术特征摘要】
1.一种基于WebGL的三维模型显示方法，其特征在于，三维模型显示方法采用将三维模型文件进行标准化处理；在超文本标记语言HTML编辑的浏览器页面进行三维模型显示。2.根据权利要求1所述的基于WebGL的三维模型显示方法，其特征在于，所述三维模型显示方法基于WebGL的框架Three.js加载三维模型到三维空间进行展示并读取模型所有材质，并利用HTML技术布局界面交互UI，所述标准化处理是将三维模型文件保存为fbx格式的文件，所述三维模型显示方法包括以下步骤：第一步、将三维模型的fbx格式文件转换为自定义json格式文件；第二步、利用JavaScript程序，根据第一步所得json格式文件，在支持WebGL的浏览器页面中显示。3.根据权利要求2所述的基于WebGL的三维模型显示方法，其特征在于，所述自定义json格式文件包括：网格json文件，含顶点位置，法线，面，uv，蒙皮权重与索引，对顶点数大于65535的单网格进行切割处理，对所有数据精度与密度进行优化；材质json文件，含材质数据与关联数据；动画json文件，含动画属性以及时间信息；贴图txt文件，含图片base64编码数据以及材质关联数据json格式贴图文件。4.根据权利要求3所述的基于WebGL的三维模型显示方法，其特征在于，所述网格json文件、材质json文件、动画json文件均采用Gzip压缩格式存储。5.根据权利要求4所述的基于WebGL的三维模型显示方法，其特征在于，所述...

【专利技术属性】
技术研发人员：李韬，夏宇翔，
申请(专利权)人：长沙眸瑞网络科技有限公司，
类型：发明
国别省市：湖南,43