WO2022104786A1 - 多Web 3D场景离屏渲染方法 - Google Patents
多Web 3D场景离屏渲染方法 Download PDFInfo
- Publication number
- WO2022104786A1 WO2022104786A1 PCT/CN2020/130852 CN2020130852W WO2022104786A1 WO 2022104786 A1 WO2022104786 A1 WO 2022104786A1 CN 2020130852 W CN2020130852 W CN 2020130852W WO 2022104786 A1 WO2022104786 A1 WO 2022104786A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- application
- rendering
- scene
- global
- node
- Prior art date
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 37
- 238000000034 method Methods 0.000 title claims abstract description 11
- 230000027455 binding Effects 0.000 abstract description 3
- 238000009739 binding Methods 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 7
- 230000000694 effects Effects 0.000 description 6
- 238000000926 separation method Methods 0.000 description 4
- 230000002452 interceptive effect Effects 0.000 description 3
- 239000003814 drug Substances 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 229940079593 drug Drugs 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- SYSQUGFVNFXIIT-UHFFFAOYSA-N n-[4-(1,3-benzoxazol-2-yl)phenyl]-4-nitrobenzenesulfonamide Chemical class C1=CC([N+](=O)[O-])=CC=C1S(=O)(=O)NC1=CC=C(C=2OC3=CC=CC=C3N=2)C=C1 SYSQUGFVNFXIIT-UHFFFAOYSA-N 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种多Web 3D场景离屏渲染方法，包括以下步骤：3D应用创建时，首先初始化3D应用的状态参数数据，统一为状态参数进行管理；初始化渲染器操作；每一个3D应用存在一个渲染器和一个canvas的节点，当3D应用初始化时，当前应用会寻找全局的canvas节点和webgl上下文以及全局的渲染时钟函数；当不存在时，进行唯一一次的创建，并挂载到window对象下的某一命名空间中去；绑定鼠标事件；针对当前3D场景所在的Dom节点绑定鼠标移入和移出事件。本发明可以进行多于16个的Web3D场景的展示，各场景保留了自己独立的模型状态和相机视角，通过共用canvas节点节约了dom的开销。复用webgl上下文，实现了渲染与数据的分离，实现了任意数量3D场景的展示。
Description
本发明属于浏览器技术领域，具体涉及一种多Web 3D场景离屏渲染方法。
在建模、化学医药等领域的web应用之中，常常存在有大量的web 3D程序，传统的web3d程序需要针对对应的程序，创建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应用的初始状态并生成快照，进行占位操作。
与现有技术相比，本发明的有益效果是：
本发明通过共享WebGL上下文环境及canvas节点的方式，实现Web 3D应用渲染与数据的分离，可以进行多于16个的Web3D场景的展示，各场景保留了自己独立的模型状态和相机视角，同时进行了多于16个的3D场景的展示，通过公用canvas节点节约了dom的开销。复用webgl上下文，实现了渲染与数据的分离，实现了任意数量3D场景的展示。
图1为本发明的流程图；
图2为实施例1中本发明技术方案处理的Web3D场景的展示效果；
图3为实施例1采用从现有技术处理的效果；
图4为实施例2的视图；
图4.a为实施例2的视图，图中横坐标表示分子密度，纵坐标表示分子的相对能量，三点图中每一个点均表示一个分子结构；
图4.b为点击图4.a中散点对应分子的三维结构，在图4.a中点击对应的散点之后，会在该部分显示该分子的三维结构，方便研究人员观测，在4.a散点图中切换不同的散点是，三维结构视图会随之更新；
图5为实施例3的视图，为一个批量展示3D应用的场景；
图5.a为点击图5中一个场景所对应的三维模型；
图6为3D分子结构A、B部分的展示图；
图6.a为图6中A部分展示分子的结构，该图对应图6中箭头所示的部分，在一个药物数据的编辑界面存在着大量的该程序，用于展示分子的结构，调整角度及缩放后可导出为pdf中的图片，便于传阅。
图7为实施例4的3D柱状图展示图，该图水平面方向的两个维度表示的是柔性角分布情况，纵向表示对应柔性角的同分异构体的分子数量。
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本 发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明提供的就输方案，用于解决在单页应用内显示大量可交互的3D应用(数目大于16个)。
如图1所示，本发明提供的就输方案的实施主要经过以下步骤：
第一步，一个3D场景就是一个3D应用，当该3D应用创建时，首先会初始化3D应用的场景(用于承载模型数据)、相机(用于进行视野切换等操作)、灯光(用于辅助高级显示的渲染效果)、状态参数(场景的尺寸及分辨率等)，以上的种种数据，会统一为状态参数进行管理，以保证后续可以根据当前的状态参数可以还原出唯一的3D场景。
第二步，初始化渲染器操作。每一个3D应用都会存在一个渲染器，和一个canvas的节点，与传统的方式不同的是，该canvas节点和webgl上下文为全局所共有，当3D应用初始化是，当前应用会寻找全局的canvas节点和webgl上下文以及全局的渲染时钟函数，当不存在时，进行唯一一次的创建，并将以上三者挂载到window对象下的某一命名空间中去。
第三步，绑定鼠标事件。针对当前3D场景所在的Dom节点绑定鼠标移入和移出事件，当鼠标移入时，认为用户需要对当前3D场景进行操作，需要从全局获取渲染用的canvas节点、webgl上下文及渲染时钟函数，并从该程序的状态管理器中获取模型、相机、灯光等所有的状态参数，进行无缝的渲染切换。当鼠标移出3D场景所在的dom节点时，认为用户无需对当前3D应用进行交互操作，但是需要保留对3D场景的展示需求，进行状态的快照保存参数，并生成png图片进行占位操作，虽然鼠标移出，但是3D状态的场景以图片快照的形式得以保存，并进行展示。
还包括，渲染首帧。在批量创建3D应用时，往往无法伴随鼠标操作，因而需要对首帧数据进行渲染，展示3D应用的初始状态并生成快照，进行占位操作。
实施例1
本实施例通过共享WebGL上下文环境及canvas节点的方式，实现Web 3D应用渲染与数据的分离，可以进行多于16个的Web3D场景的展示，效果如图2，各场景保留了自己独立的模型状态和相机视角，同时进行了多于16个的3D场景的展示，通过公用canvas节点节约了dom的开销。复用webgl上下文，实现了渲染与数据的分离，实现了任意数量3D场景的展示。
使用传统的webgl+canvas和3D应用绑定的形式的3D场景，在场景数目多于16个时会出现以下展示的问题：单页应用中始终保持着最多16个的3D场景展示，最初始的3D 场景相机丢失，如图3所示。
实施例2
如图4中，某一应用程序中点击图中左上侧散点图中的点，例如点击图中标识的A点，右侧3DView视图会随着不同点对应的结构进行3D结构的更新。在传统的技术方案中，当出现多于16个的结构切换行为时，会导致其他模块的3D可视化部分受到干扰，失去渲染能力，使用本发明的技术方案处理，无论进行多少次切换均不会对其他部分的3D可视化应用产生影响。图4.a中散点图上每一个点均表示某一分子，点击该点可以在图4.b中显示对应的分子结构。
实施例3
如图5所示，图5中所示为一个批量展示3D应用的场景，其中每一个场景如图5.a所示，为一个独立的三维结构的应用，该应用中的三维模型可以旋转和缩放。某一webapp应用需要对大量的3d模型进行可交互的展示及示例，图中每一深色背景的矩形中为单独的3D模型展示，使用基础的webgl方法会导致可展示的模型数目受限，无法展示多于16个模型数据，而使用本发明的技术方案可以展示任意多个模型示例程序。
实施例4
在某一web应用中，存在大量多种形式的3D展示效果，如图6中标识的3D分子结构A、B部分的展示及如图7的3D柱状图展示，并且配以文字，需要在调整图表及结构良好的观测视角后，以pdf的形式导出以供阅览，以基础的webgl展示的方式，该程序所能展示的结构及3D图标也会受限于16个，但是使用本发明的技术方案就可以实现任意数量的3D图表的展示。
Claims (2)
- 多Web 3D场景离屏渲染方法，其特征在于，包括以下步骤：第一步，一个3D场景作为一个3D应用，当所述的3D应用创建时，首先初始化3D应用的状态参数数据，统一为状态参数进行管理；第二步，初始化渲染器操作；每一个3D应用存在一个渲染器和一个canvas的节点，所述的canvas节点和webgl上下文为全局所共有，当3D应用初始化时，当前应用会寻找全局的canvas节点和webgl上下文以及全局的渲染时钟函数；当全局的canvas节点和webgl上下文以及全局的渲染时钟函数不存在时，进行唯一一次的创建，并挂载到window对象下的某一命名空间中去；第三步，绑定鼠标事件；针对当前3D场景所在的Dom节点绑定鼠标移入和移出事件；还包括，渲染首帧；在批量创建3D应用时，对首帧数据进行渲染，展示3D应用的初始状态并生成快照，进行占位操作。
- 根据权利要求1所述的多Web 3D场景离屏渲染方法，其特征在于，所述的第三步，具体包括以下子步骤：当鼠标移入时，认为用户需要对当前3D场景进行操作，需要从全局获取渲染用的canvas节点、webgl上下文及渲染时钟函数，并从状态管理器中所有的状态参数，进行无缝的渲染切换；当鼠标移出3D场景所在的dom节点时，认为用户无需对当前3D应用进行交互操作，但是需要保留对3D场景的展示需求，进行状态的快照保存参数，并生成png图片进行占位操作，虽然鼠标移出，但是3D状态的场景以图片快照的形式得以保存，并进行展示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| PCT/CN2020/130852 WO2022104786A1 (zh) | 2020-11-23 | 2020-11-23 | 多Web 3D场景离屏渲染方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| PCT/CN2020/130852 WO2022104786A1 (zh) | 2020-11-23 | 2020-11-23 | 多Web 3D场景离屏渲染方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2022104786A1 true WO2022104786A1 (zh) | 2022-05-27 |
Family
ID=81708284
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2020/130852 WO2022104786A1 (zh) | 2020-11-23 | 2020-11-23 | 多Web 3D场景离屏渲染方法 |
Country Status (1)
| Country | Link |
|---|---|
| WO (1) | WO2022104786A1 (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116402937A (zh) * | 2023-03-30 | 2023-07-07 | 中国舰船研究设计中心 | 一种基于web的复杂数据3D可视化简化开发方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140100834A1 (en) * | 2012-10-04 | 2014-04-10 | Macromoltek | Computational methods for analysis and molecular design of antibodies, antibody humanization, and epitope mapping coupled to a user-interactive web browser with embedded three- dimensional rendering |
| CN107832108A (zh) * | 2016-09-14 | 2018-03-23 | 阿里巴巴集团控股有限公司 | 3D canvas网页元素的渲染方法、装置及电子设备 |
| CN109408059A (zh) * | 2018-11-12 | 2019-03-01 | 成都四方伟业软件股份有限公司 | 一种场景生成方法及装置 |
| CN111275782A (zh) * | 2020-01-17 | 2020-06-12 | 广州图匠数据科技有限公司 | 一种图形绘制方法、装置、终端设备及存储介质 |
| CN111598988A (zh) * | 2020-05-19 | 2020-08-28 | 北京海致星图科技有限公司 | 一种基于d3的知识图谱数据节点渲染方法及系统 |
-
2020
- 2020-11-23 WO PCT/CN2020/130852 patent/WO2022104786A1/zh active Application Filing
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140100834A1 (en) * | 2012-10-04 | 2014-04-10 | Macromoltek | Computational methods for analysis and molecular design of antibodies, antibody humanization, and epitope mapping coupled to a user-interactive web browser with embedded three- dimensional rendering |
| CN107832108A (zh) * | 2016-09-14 | 2018-03-23 | 阿里巴巴集团控股有限公司 | 3D canvas网页元素的渲染方法、装置及电子设备 |
| CN109408059A (zh) * | 2018-11-12 | 2019-03-01 | 成都四方伟业软件股份有限公司 | 一种场景生成方法及装置 |
| CN111275782A (zh) * | 2020-01-17 | 2020-06-12 | 广州图匠数据科技有限公司 | 一种图形绘制方法、装置、终端设备及存储介质 |
| CN111598988A (zh) * | 2020-05-19 | 2020-08-28 | 北京海致星图科技有限公司 | 一种基于d3的知识图谱数据节点渲染方法及系统 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116402937A (zh) * | 2023-03-30 | 2023-07-07 | 中国舰船研究设计中心 | 一种基于web的复杂数据3D可视化简化开发方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| DE60109434T2 (de) | Systeme und verfahren zur erzeugung von visuellen darstellungen von graphischen daten | |
| US8775923B1 (en) | Web page restoration | |
| US20200126285A1 (en) | Frameworks for Graphics Animation and Compositing Operations | |
| RU2360290C2 (ru) | Интеграция иерархии трехмерной сцены в двумерную систему компоновки изображений | |
| US6487565B1 (en) | Updating animated images represented by scene graphs | |
| US9183672B1 (en) | Embeddable three-dimensional (3D) image viewer | |
| US7688317B2 (en) | Texture mapping 2-D text properties to 3-D text | |
| DE102013014846A1 (de) | Systeme und Verfahren zur teilweisen Rahmenpufferaktualisierung | |
| DE202008018628U1 (de) | System zur Wiedergabe, Ansicht und Kommentierung von Panoramabildern und dazugehörige Anwendungen | |
| JP6230076B2 (ja) | 仮想サーフェス割り当て | |
| US20160231870A1 (en) | Systems and methods for composite applications | |
| DE102019127726A1 (de) | Für fernarbeitsplatz-anwendungen geeignetes streaming individueller anwendungsfenster | |
| DE202016107451U1 (de) | Systeme zur interaktiven Darstellung eines sichtbaren Teils einer Rendering-Oberfläche auf einem Benutzergerät | |
| WO2022104786A1 (zh) | 多Web 3D场景离屏渲染方法 | |
| Barladian et al. | Integration of realistic computer graphics into computer-aided design and product lifecycle management systems | |
| DE112018004138T5 (de) | Asynchrone aktualisierung von metadatenspuren in reaktion auf einen mittels einer e/a-operation über eine busschnittstelle erzeugten cachetreffer | |
| CN112540815B (zh) | 多Web 3D场景离屏渲染方法 | |
| DE69930352T2 (de) | Verfahren und Vorrichtung zur Animierung von Videospezialeffekten | |
| CN109408059A (zh) | 一种场景生成方法及装置 | |
| DE102019112595A1 (de) | Geführte halluzination für fehlende bildinhalte unter verwendung eines neuronalen netzes | |
| CN115311397A (zh) | 用于图像渲染的方法、装置、设备和存储介质 | |
| CN114048110A (zh) | 一种基于Antv的自定义可视化拓扑图的实现方法 | |
| EP1579391A1 (en) | A unified surface model for image based and geometric scene composition | |
| Hering et al. | 3DCIS: A real-time browser-rendered 3d campus information system based on webgl | |
| CN112464126B (zh) | 一种基于Threejs生成全景图表的方法、终端设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 20962077 Country of ref document: EP Kind code of ref document: A1 |
|
| NENP | Non-entry into the national phase |
Ref country code: DE |
|
| 32PN | Ep: public notification in the ep bulletin as address of the adressee cannot be established |
Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 02.10.2023) |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 20962077 Country of ref document: EP Kind code of ref document: A1 |