[发明专利]一种场景生成方法及装置

说明书

在本申请实施例提供的场景生成方法及装置中，包括：响应于画布创建操作指令，通过webgl技术创建画布；响应于多个场景实例创建操作指令，通过webgl技术在所述画布创建场景实例，并存储所述场景实例对应的场景描述信息；根据所述场景实例以及对应的场景描述信息，在所述画布生成至少一个场景。在本申请实施例提供的场景声场方法中，通过webgl技术创建画布，然后在画布上可以创建多个场景实例，使得一块画布可以生成多个场景，与现有的一块画布通常只生成一个场景相比，本申请可以在一块画布上生成多个场景，而不是在多块画布的每块画布各生成一个场景，使得需要加载的Canvas数量较少，较好的节约了浏览器的GPU线程开销。

技术领域

本申请涉及互联网领域，具体而言，涉及一种场景生成方法及装置。

背景技术

Canvas API(画布)是在HTML5中新增的标签，用于在网页上实时生成图像，Canvas对象标识一个HTML画布元素。

现有技术中，通常在一个Canvas画布绘制一个场景，但是一个页面加载的Canvas是有限制的，对谷歌浏览器、火狐浏览器来说，一个页面约能加载8个Canvas，超过8个后前面的几个Canvas就会失效，因此采用Canvas画布绘制场景的方式一个页面最多只能绘制8个场景。

通常的数据可视化编排工具编排出来的页面的Canvas个数经常会超过8个，现有的解决方式:配置两个页面，A页面有8个Canvas，超过的Canvas在B页面中；在A页面中配置一个iframe，iframe中将B页面嵌入到A页面中。但是这样的实现非常不灵活，由于需要加载的Canvas数量较多，造成浏览器的GPU线程开销较大。

申请内容

有鉴于此，本申请实施例提供了一种场景生成方法及装置。

第一方面，本申请实施例提供了一种场景生成方法，所述方法包括：响应于画布创建操作指令，通过webgl技术创建画布；响应于多个场景实例创建操作指令，通过webgl技术在所述画布创建场景实例，并存储所述场景实例对应的场景描述信息；根据所述场景实例以及对应的场景描述信息，在所述画布生成至少一个场景。

在一个可能的设计中，所述场景描述信息包括：场景位置、场景大小、场景视角、光效规则、动效规则，所述响应于多个场景实例创建操作指令，通过webgl技术在所述画布创建场景实例，包括：获取所述场景实例在所述画布中的位置，将其作为场景位置；获取所述场景实例在所述画布中的占用面积，将其作为场景大小；响应于场景视角设置指令、光效设置指令、动效设置指令，获得该场景的场景视角、光效规则以及动效规则。

在一个可能的设计中，所述存储所述场景实例对应的场景描述信息，包括：将所述场景位置、场景大小、场景视角、光效规则以及动效规则作为该场景实施例的场景描述信息，存储在一个堆数据结构中。

在一个可能的设计中，所述根据所述场景实例以及对应的场景描述信息，在所述画布生成至少一个场景，包括：读取所述堆数据结构中的场景描述信息，根据所述场景描述信息在所述画布生成至少一个场景。

在一个可能的设计中，读取所述堆数据结构中的场景描述信息，根据所述场景描述信息在所述画布生成至少一个场景，包括：获取场景位置和场景大小，在所述画布剪切出与所述场景位置和场景大小对应的第一区域；根据场景视角、光效规则，在所述第一区域绘制场景；根据所述动效规则，为绘制完成的场景设置动画效果。

第二方面，本申请实施例提供了一种场景生成装置，所述装置包括：画布创建模块，用于响应于画布创建操作指令，通过webgl技术创建画布；场景实例创建模块，用于响应于多个场景实例创建操作指令，通过webgl技术在所述画布创建场景实例，并存储所述场景实例对应的场景描述信息；场景生成模块，用于根据所述场景实例以及对应的场景描述信息，在所述画布生成至少一个场景。