[发明专利]多Web 3D场景离屏渲染方法

说明书

本发明公开了一种多Web 3D场景离屏渲染方法，包括以下步骤：3D应用创建时，首先初始化3D应用的状态参数数据，统一为状态参数进行管理；初始化渲染器操作；每一个3D应用存在一个渲染器和一个canvas的节点，当3D应用初始化时，当前应用会寻找全局的canvas节点和webgl上下文以及全局的渲染时钟函数；当不存在时，进行唯一一次的创建，并挂载到window对象下的某一命名空间中去；绑定鼠标事件；针对当前3D场景所在的Dom节点绑定鼠标移入和移出事件。本发明可以进行多于16个的Web3D场景的展示，各场景保留了自己独立的模型状态和相机视角，通过共用canvas节点节约了dom的开销。复用webgl上下文，实现了渲染与数据的分离，实现了任意数量3D场景的展示。

技术领域

本发明属于浏览器技术领域，具体涉及一种多Web 3D场景离屏渲染方法。

背景技术

在建模、化学医药等领域的web应用之中，常常存在有大量的web 3D程序，传统的web 3d程序需要针对对应的程序，创建canvas节点，并获取对应canvas中的webgl上下文环境，渲染及交互时调用对应的webgl上下文环境进行渲染操作。

目前，当在一个单页应用之中仅仅存在不多于16个的webgl的3d场景时，页面中的3d应用场景均可正常工作，但是当某一单页应用中存在有超过16个的3D应用时，使用传统的一个场景对应一个canvas+webgl上下文的方式创建的3d程序，就会由于浏览器自身的限制导致最先初始化的webgl上下文环境丢失或被舍弃，也即在当前页面，最多只能同时存在16个3D应用场景，但是在复杂的单页应用中，有可能存在有大于16个3D程序的场景，由于传统的因素，会导致当前应用中可以展示的3D程序受限，无法展示出全量的3D信息。

发明内容

针对上述技术问题，本发明的目的在于提供一种多Web 3D场景离屏渲染方法，用于解决在单页应用内显示大量可交互的3D应用（数目大于16个）。其技术方案如下：

第一步，一个3D场景作为一个3D应用，当所述的3D应用创建时，首先初始化3D应用的场景（用于承载模型数据）、相机（用于进行视野切换等操作）、灯光（用于辅助高级显示的渲染效果）、状态参数（场景的尺寸及分辨率等）数据，统一为状态参数进行管理；

第二步，初始化渲染器操作；每一个3D应用存在一个渲染器和一个canvas的节点，所述的canvas节点和webgl上下文为全局所共有，当3D应用初始化时，当前应用会寻找全局的canvas节点和webgl上下文以及全局的渲染时钟函数；当全局的canvas节点和webgl上下文以及全局的渲染时钟函数不存在时，进行唯一一次的创建，并挂载到window对象下的某一命名空间中去；

第三步，绑定鼠标事件；针对当前3D场景所在的Dom节点绑定鼠标移入和移出事件；

具体的：

当鼠标移入时，认为用户需要对当前3D场景进行操作，需要从全局获取渲染用的canvas节点、webgl上下文及渲染时钟函数，并从状态管理器中获取模型、相机、灯光等所有的状态参数，进行无缝的渲染切换；

当鼠标移出3D场景所在的dom节点时，认为用户无需对当前3D应用进行交互操作，但是需要保留对3D场景的展示需求，进行状态的快照保存参数，并生成png图片进行占位操作，虽然鼠标移出，但是3D状态的场景以图片快照的形式得以保存，并进行展示；

还包括，渲染首帧；在批量创建3D应用时，对首帧数据进行渲染，展示3D应用的初始状态并生成快照，进行占位操作。

与现有技术相比，本发明的有益效果是：