CN112540815B - 多Web 3D场景离屏渲染方法 - Google Patents

多Web 3D场景离屏渲染方法 Download PDF

Info

Publication number
CN112540815B
CN112540815B CN202011323030.8A CN202011323030A CN112540815B CN 112540815 B CN112540815 B CN 112540815B CN 202011323030 A CN202011323030 A CN 202011323030A CN 112540815 B CN112540815 B CN 112540815B
Authority
CN
China
Prior art keywords
scene
application
rendering
global
node
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202011323030.8A
Other languages
English (en)
Other versions
CN112540815A (zh
Inventor
韩非
温书豪
马健
赖力鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Jingtai Technology Co Ltd
Original Assignee
Shenzhen Jingtai Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Jingtai Technology Co Ltd filed Critical Shenzhen Jingtai Technology Co Ltd
Priority to CN202011323030.8A priority Critical patent/CN112540815B/zh
Publication of CN112540815A publication Critical patent/CN112540815A/zh
Application granted granted Critical
Publication of CN112540815B publication Critical patent/CN112540815B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

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

Description

多Web 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应用的初始状态并生成快照，进行占位操作。
与现有技术相比，本发明的有益效果是：
本发明通过共享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)

1.多Web 3D场景离屏渲染方法，其特征在于，包括以下步骤：
第一步，一个3D场景作为一个3D应用，当所述的3D应用创建时，首先初始化3D应用的状态参数数据，统一为状态参数进行管理；
第二步，初始化渲染器操作；每一个3D应用存在一个渲染器和一个canvas的节点，所述的canvas节点和webgl上下文为全局所共有，当3D应用初始化时，当前应用会寻找全局的canvas节点和webgl上下文以及全局的渲染时钟函数；当全局的canvas节点和webgl上下文以及全局的渲染时钟函数任意一个不存在时，进行唯一一次的创建，并将所述全局的canvas节点和webgl上下文以及全局的渲染时钟函数挂载到window对象下的某一命名空间中去；
第三步，绑定鼠标事件；针对当前3D场景所在的Dom节点绑定鼠标移入和移出事件；
还包括，渲染首帧；在批量创建3D应用时，对首帧数据进行渲染，展示3D应用的初始状态并生成快照，进行占位操作。
2.根据权利要求1所述的多Web 3D场景离屏渲染方法，其特征在于，所述的第三步，具体包括以下子步骤：
当鼠标移入时，认为用户需要对当前3D场景进行操作，需要从全局获取渲染用的canvas节点、webgl上下文及渲染时钟函数，并从状态管理器中所有的状态参数，进行无缝的渲染切换；
当鼠标移出3D场景所在的dom节点时，认为用户无需对当前3D应用进行交互操作，但是需要保留对3D场景的展示需求，进行状态的快照保存参数，并生成png图片进行占位操作，虽然鼠标移出，但是3D状态的场景以图片快照的形式得以保存，并进行展示。
CN202011323030.8A 2020-11-23 2020-11-23 多Web 3D场景离屏渲染方法 Active CN112540815B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011323030.8A CN112540815B (zh) 2020-11-23 2020-11-23 多Web 3D场景离屏渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011323030.8A CN112540815B (zh) 2020-11-23 2020-11-23 多Web 3D场景离屏渲染方法

Publications (2)

Publication Number Publication Date
CN112540815A CN112540815A (zh) 2021-03-23
CN112540815B true CN112540815B (zh) 2023-05-05

Family

ID=75015081

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011323030.8A Active CN112540815B (zh) 2020-11-23 2020-11-23 多Web 3D场景离屏渲染方法

Country Status (1)

Country Link
CN (1) CN112540815B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113791789B (zh) * 2021-08-13 2023-08-04 成都中鱼互动科技有限公司 一种通用浏览器上检测webgl上下文的方法

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2018050003A1 (zh) * 2016-09-14 2018-03-22 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8368705B2 (en) * 2008-07-16 2013-02-05 Google Inc. Web-based graphics rendering system
EP2538328A1 (en) * 2011-06-21 2012-12-26 Unified Computing Limited A method of provisioning a cloud-based render farm
US9218685B2 (en) * 2012-06-05 2015-12-22 Apple Inc. System and method for highlighting a feature in a 3D map while preserving depth
WO2014014928A2 (en) * 2012-07-18 2014-01-23 Yale University Systems and methods for three-dimensional sketching and imaging
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
KR101559838B1 (ko) * 2014-11-19 2015-10-13 엔쓰리엔 주식회사 4d 데이터를 시각화하기 위한 시각화 방법 및 시스템, 및 통합 데이터 파일 생성 방법 및 장치
US10984579B2 (en) * 2018-08-27 2021-04-20 Microsoft Technology Licensing, Llc Playback for embedded and preset 3D animations
CN109408059B (zh) * 2018-11-12 2022-02-11 成都四方伟业软件股份有限公司 一种场景生成方法及装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2018050003A1 (zh) * 2016-09-14 2018-03-22 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备

Also Published As

Publication number Publication date
CN112540815A (zh) 2021-03-23

Similar Documents

Publication Publication Date Title
DE60109434T2 (de) Systeme und verfahren zur erzeugung von visuellen darstellungen von graphischen daten
US8194075B2 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
US7631252B2 (en) Distributed processing when editing an image in a browser
US7631253B2 (en) Selective image editing in a browser
US8711148B2 (en) Method and system for generating and displaying an interactive dynamic selective view of multiply connected objects
US8775923B1 (en) Web page restoration
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
Bederson et al. Implementing a zooming user interface: experience building pad++
DE102013014846A1 (de) Systeme und Verfahren zur teilweisen Rahmenpufferaktualisierung
DE10138336A1 (de) Verfahren und System zum Aufrechterhalten des Andauerns von graphischen Markierungen in einem kollaborativen Graphikbetrachtungssystem
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
CN112540815B (zh) 多Web 3D场景离屏渲染方法
DE69934174T2 (de) Verfahren und Vorrichtung zur digitalen Bildbearbeitung
DE112018004138T5 (de) Asynchrone aktualisierung von metadatenspuren in reaktion auf einen mittels einer e/a-operation über eine busschnittstelle erzeugten cachetreffer
DE69930352T2 (de) Verfahren und Vorrichtung zur Animierung von Videospezialeffekten
WO2022104786A1 (zh) 多Web 3D场景离屏渲染方法
CN108053464A (zh) 粒子特效处理方法及装置
US20130063482A1 (en) Application programming interface for a bitmap composition engine
CN113253965B (zh) 海量数据多视口可视化交互方法、系统、设备及存储介质
CN111462007B (zh) 图像处理方法、装置、设备及计算机存储介质
Wong et al. Semi-automatic scene generation using the Digital Anatomist Foundational Model.
CN114048110A (zh) 一种基于Antv的自定义可视化拓扑图的实现方法
CN112162805A (zh) 截图方法、装置和电子设备
CN111143018A (zh) 一种前端图像渲染方法、装置和电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant