图形显示方法、装置、电子设备及可读存储介质制造方法及图纸

本发明专利技术提供了一种图形显示方法、装置、电子设备及可读存储介质,属于计算机技术领域。响应于网页浏览请求，从服务端获取建模文件、环境纹理文件以及材质参数文件；将建模文件与材质参数文件进行匹配，将材质渲染在对应的三维模型上并显示在三维初始场景中，同时在三维初始场景中渲染环境纹理，得到渲染完成的三维场景；从服务端获取取景参数，基于取景参数确定三维场景的目标显示内容，并将目标显示内容显示在网页。将模型文件与材质参数文件分离，在渲染时先匹配再进行渲染，提高了模型的加载速度，同时将材质参数固化为一个材质参数文件，在修改时，仅修改材质参数值，就可以对模型的材质显示进行调整，使得对三维模型的显示调优更方便。优更方便。优更方便。

【技术实现步骤摘要】
图形显示方法、装置、电子设备及可读存储介质


[0001]本专利技术涉及计算机
，尤其涉及一种图形显示方法、装置、电子设备及可读存储介质。

技术介绍

[0002]近年来WEB(World Wide Web，万维网)技术得到了快速的发展。随着HTML5(Hyper Text Markup Language5，超文本5)的普及，网页的表现能力越来越强大。网页上也可以表现复杂的动画，网页的展现维度已从二维逐渐发展到三维。
[0003]三维场景的展示需要通过建模软件进行建模，再将三维模型的材质、光照等渲染到网页的横幅或其他位置。
[0004]上述在网页渲染三维模型的方法，需要进行高速图形渲染计算，由于三维模型渲染耗费的计算资源较多，导致在网页显示三维模型需要占用较多的计算资源，而网页包含的内容较多，难以为网页中的三维图形分配足够的资源，导致三维图形难以在网页显示较好的展示效果，影响用户体验。

技术实现思路

[0005]鉴于上述问题，提出了本专利技术实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种图形显示方法、装置、电子设备及可读存储介质。
[0006]第一方面，本申请实施例公开了一种图形显示方法，应用于客户端，所述方法包括：
[0007]响应于网页浏览请求，从服务端获取建模文件、环境纹理文件以及材质参数文件；
[0008]将所述建模文件与所述材质参数文件进行匹配，将材质渲染在对应的三维模型上并显示在三维初始场景中，同时在所述三维初始场景中渲染环境纹理，得到渲染完成的三维场景；所述三维初始场景为所述服务端创建的，用于放置三维模型的场景；
[0009]从所述服务端获取取景参数，基于所述取景参数确定所述三维场景的目标显示内容，并将所述目标显示内容显示在网页，所述取景参数用于决定所述三维场景的显示范围。
[0010]第二方面，本申请实施例公开了一种图形显示方法，应用于服务端，所述方法包括：
[0011]创建三维初始场景，在所述三维初始场景中设置取景控件，并设置所述取景控件对应的取景参数，所述取景参数用于确定所述取景控件在所述三维初始场景中的位置以及角度，以进一步确定所述三维初始场景的显示范围；
[0012]构建建模文件、环境纹理文件以及材质参数文件；
[0013]响应于网页浏览请求，将所述建模文件、环境纹理文件以及材质参数文件发送至客户端，以供所述客户端在所述三维初始场景中将材质渲染在对应的三维模型上，并将环境纹理渲染至三维初始场景，并基于所述取景参数在所述客户端的网页显示渲染完成的三维场景的目标显示内容。
[0014]第三方面，本申请实施例公开了一种图形显示装置，应用于客户端，所述装置包括：
[0015]获取模块，用于响应于网页浏览请求，从服务端获取建模文件、环境纹理文件以及材质参数文件；
[0016]匹配模块，用于将所述建模文件与所述材质参数文件进行匹配，将材质渲染在对应的三维模型上并显示在三维初始场景中，同时在所述三维初始场景中渲染环境纹理，得到渲染完成的三维场景；所述三维初始场景为所述服务端创建的，用于放置三维模型的场景；
[0017]显示模块，用于从所述服务端获取取景参数，基于所述取景参数确定所述三维场景的目标显示内容，并将所述目标显示内容显示在网页，所述取景参数用于决定所述三维场景的显示范围。
[0018]第四方面，本申请实施例公开了一种图形显示装置，应用于服务端，所述装置包括：
[0019]场景设置模块，用于创建三维初始场景，在所述三维初始场景中设置取景控件，并设置所述取景控件对应的取景参数，所述取景参数用于确定所述取景控件在所述三维初始场景中的位置以及角度，以进一步确定所述三维初始场景的显示范围；
[0020]构建模块，用于构建建模文件、环境纹理文件以及材质参数文件；
[0021]发送模块，用于响应于网页浏览请求，将所述建模文件、环境纹理文件以及材质参数文件发送至客户端，以供所述客户端在所述三维初始场景中将材质渲染在对应的三维模型上，并将环境纹理渲染至三维初始场景，并基于所述取景参数在所述客户端的网页显示渲染完成的三维场景的目标显示内容。
[0022]第五方面，本申请实施例还公开了一种电子设备，包括处理器和存储器、所述存储器存储可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面和第二方面所述的图形显示方法的步骤。
[0023]第六方面，本申请实施例还公开了一种可读存储介质，所述可读存储介质上存储有程序或指令，所述程序或指令被处理器执行时实现如第一方面和第二方面所述的图形显示方法的步骤。
[0024]本申请实施例中，客户端响应于网页浏览请求，从服务端获取建模文件、环境纹理文件以及材质参数文件；将所述建模文件与所述材质参数文件进行匹配，将材质渲染在对应的三维模型上并显示在三维初始场景中，同时在三维初始场景中渲染环境纹理，得到渲染完成的三维场景；从所述服务端获取取景参数，基于所述取景参数确定所述三维场景的目标显示内容，并将所述目标显示内容显示在网页，所述取景参数用于决定所述三维场景的显示范围。本申请中将建模文件与材质参数文件分离，加载至客户端后，将建模文件与材质参数文件匹配再进行渲染显示，提高了模型的加载速度，同时将三维模型对应的材质参数固化为一个材质参数文件，在修改时，仅修改材质参数文件中的参数值，就可以对模型的材质显示进行调整，使得非专业人员也可以实现对三维模型的显示调优。同时，本申请通过分别构建建模文件、环境纹理文件以及材质参数文件，在环境纹理文件改变时，三维模型的显示效果同步改变，使得显示在网页的三维场景无需进行复杂的光照计算，使得在网页也可以展示较好的三维显示效果。
附图说明
[0025]图1是本专利技术实施例提供的一种图形显示方法应用在客户端的步骤流程图；
[0026]图2是本专利技术实施例提供的一种图形显示方法应用在服务端的步骤流程图；
[0027]图3是本专利技术实施例提供的一种三维模型实时切换流程图；
[0028]图4是本专利技术实施例提供的一种三维模型配置示意图；
[0029]图5是本专利技术实施例提供的一种图形显示装置的框图；
[0030]图6是本专利技术实施例提供的又一种图形显示装置的框图；
[0031]图7是本专利技术实施例提供的一种电子设备的框图；
[0032]图8是本专利技术另一个实施例的另一种电子设备的框图。
具体实施方式
[0033]下面将参照附图更详细地描述本专利技术的示例性实施例。虽然附图中显示了本专利技术的示例性实施例，然而应当理解，可以以各种形式实现本专利技术而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本专利技术，并且能够将本专利技术的范围完整的传达给本领域的技术人员。
[0034]下面对本申请的实现使用的技术手段进行解释与说明。
[0035]WebGL(Web Graphics Library，web图形库)是本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图形显示方法，其特征在于，应用于客户端，所述方法包括：响应于网页浏览请求，从服务端获取建模文件、环境纹理文件以及材质参数文件；将所述建模文件与所述材质参数文件进行匹配，将材质渲染在对应的三维模型上并显示在三维初始场景中，同时在所述三维初始场景中渲染环境纹理，得到渲染完成的三维场景；所述三维初始场景为所述服务端创建的，用于放置三维模型的场景；从所述服务端获取取景参数，基于所述取景参数确定所述三维场景的目标显示内容，并将所述目标显示内容显示在网页，所述取景参数用于决定所述三维场景的显示范围。2.根据权利要求1所述的方法，其特征在于，所述将所述建模文件与所述材质参数文件进行匹配，将材质渲染在对应的三维模型上并显示在三维初始场景中，包括：获取所述建模文件中包括的几何体对应的几何体标识，以及材质参数文件标识；将所述几何体标识与所述材质参数文件标识匹配，并在匹配的情况下，根据材质参数渲染三维模型。3.根据权利要求1所述的方法，其特征在于，所述取景参数包括可见性层级参数，所述可见性层级参数用于确定所述三维模型所属的渲染图层，所述基于所述取景参数确定所述三维场景的目标显示内容，包括：基于所述可见性层级参数，确定可显示的目标三维模型；将所述目标三维模型所属的渲染图层作为所述目标显示内容。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：对所述可见性层级参数不同的三维模型进行分层渲染，并将渲染后的三维模型保存至缓存；所述将所述目标三维模型所属的渲染图层作为所述目标显示内容，包括：从所述缓存获取渲染后的目标三维模型所属的渲染图层，作为所述目标显示内容。5.根据权利要求1所述的方法，其特征在于，所述取景参数包括位置参数和角度参数，所述基于所述取景参数确定所述三维场景的目标显示内容，包括：基于所述位置参数和角度参数确定所述三维场景显示在取景控件的视口内容，所述取景控件为设置在所述三维场景中，用于确定所述三维场景的显示范围的控件；将所述视口内容作为所述网页的目标显示内容。6.根据权利要求1所述的方法，其特征在于，所述方法还包括：在预设的坐标系下，按照预设周期将所述三维场景旋转预设角度，所述三维场景中的三维模型保持原始位置不变；基于旋转后的三维场景重新渲染所述三维模型，并在所述网页显示重新渲染后的三维模型。7.一种图形显示方法，其特征在于，应用于服务端，所述方法包括：创建三维初始场景，在所述三维初始场景中设置取景控件，并设置所述取景控件对应的取景参数，所述取景参数用于确定所述取景控件在所述三维初始场景中的位置以及角度，以进一步确定所述三维初始场景的显示范围；构建建模文件、环境纹理文件以及材质参数文件；响应于网页浏览请求，将所述建模文件、环境纹理文件以及材质参数文件发送至客户端，以供所述客户端在所述三维初始场景中将材质渲染在对应的三维模型上，并将环境纹
理渲染至三维初始场景，并基于所述取景参数在所述客户端的网页显示渲染完成的三维场景的目标显示内容。8.根据权利要求7所述的方法，其特征在于，所述构建建模文件，包括：在三维建模界...

【专利技术属性】
技术研发人员：林瑞玉，杨基文，侯建强，凌承昆，周伟伟，覃元锋，王汕，崔佳玲，
申请(专利权)人：天翼云科技有限公司，
类型：发明
国别省市：