CN110968962B - 基于云渲染在移动端或大屏三维展示方法及系统 - Google Patents
基于云渲染在移动端或大屏三维展示方法及系统 Download PDFInfo
- Publication number
- CN110968962B CN110968962B CN201911316321.1A CN201911316321A CN110968962B CN 110968962 B CN110968962 B CN 110968962B CN 201911316321 A CN201911316321 A CN 201911316321A CN 110968962 B CN110968962 B CN 110968962B
- Authority
- CN
- China
- Prior art keywords
- image
- rendering
- frame
- component
- camera
- 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
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 70
- 238000000034 method Methods 0.000 title claims abstract description 52
- 230000008569 process Effects 0.000 claims abstract description 21
- 230000002194 synthesizing effect Effects 0.000 claims abstract description 5
- 230000008859 change Effects 0.000 claims abstract description 4
- 238000013519 translation Methods 0.000 claims abstract description 4
- 230000003993 interaction Effects 0.000 claims description 9
- 238000012544 monitoring process Methods 0.000 claims description 6
- 238000012800 visualization Methods 0.000 claims description 6
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 claims description 4
- 230000006870 function Effects 0.000 claims description 4
- 229910052804 chromium Inorganic materials 0.000 claims description 3
- 239000011651 chromium Substances 0.000 claims description 3
- 238000011423 initialization method Methods 0.000 claims description 2
- 238000010586 diagram Methods 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000015572 biosynthetic process Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000035945 sensitivity Effects 0.000 description 1
- 238000003786 synthesis reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
- G06T17/05—Geographic models
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2210/00—Indexing scheme for image generation or computer graphics
- G06T2210/04—Architectural design, interior design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2210/00—Indexing scheme for image generation or computer graphics
- G06T2210/61—Scene description
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Computer Graphics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Geometry (AREA)
- Software Systems (AREA)
- Remote Sensing (AREA)
- Processing Or Creating Images (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及基于云渲染在移动端或大屏三维展示方法及系统,该方法包括:用户通过浏览器向服务端云渲染发送渲染请求;服务端云渲染软件收到渲染请求后,开启新渲染进程,并转发所述渲染请求到所述新渲染进程中;命名管道进程根据页面地址加载三维页面,并根据所述相机参数、场景参数分别初始化相机和场景;动态设置相机位置和朝向,并进行逐帧截图,最后合成为一张图像,传输到服务端云渲染软件,并转发回客户端;客户端收到图像后,按照图像宽高对图像进行切割和按序标号通过定时器触发前端canvas显示的帧图像序号变更或通过用户的平移操作,引起帧序号的+和‑操作,展示出三维场景。
Description
技术领域
本发明涉及一种BIM模型的展示,具体地指一种基于云渲染在移动端或大屏三维展示方法及系统。
背景技术
目前,在PC端的BIM模型展示,由于PC硬件以及PC周边硬件设备的完善,因此在交互性上具有较好的展示,随着移动通信技术的发展,为了满足在移动端或大屏等BIM应用场景中展示的需求,对BIM模型的展示效率和展示稳定性有很高的要求,但是BIM三维模型数据量都很大,限于移动端设备硬件性能的局限,因而移动端对于复杂BIM模型的展示效率受硬件影响而显得非常低。
发明内容
本发明目的在于克服上述现有技术的不足而提供一种基于云渲染在移动端或大屏三维展示方法及系统,该方法能够将云端渲染方式供前端在移动端或PC大屏等对交互操作要求较低的应用场景进行数据展示,能节省大量流量,降低硬件性能消耗,并有效提高加载速度和稳定性。
实现本发明目的采用的技术方案是一种基于云渲染在移动端或大屏三维展示方法,该方法包括:
用户通过浏览器向服务端云渲染发送渲染请求,所述渲染请求包括但需要渲染的页面地址、相机参数、场景参数、渲染图幅尺寸、帧率的信息;
服务端云渲染软件收到渲染请求后,以命名管道的方式开启新的渲染进程,并转发所述渲染请求到所述新的渲染进程中;
所述新的渲染进程根据所述渲染请求中需要渲染的页面地址加载三维页面,并根据所述相机参数、场景参数分别初始化相机和场景;
动态设置相机位置和朝向,并进行逐帧截图,最后合成为一张图像,从所述新的渲染进程传输到服务端云渲染软件,并转发回客户端;
客户端收到图像后,按照图像宽高对图像进行切割和按序标号通过定时器触发前端Canvas显示的帧图像序号变更或通过用户的平移操作,引起帧序号的加和减操作,展示出三维场景。
此外,本发明还提供一种基于云渲染在移动端或大屏三维展示系统,该系统包括云渲染服务端模块和客户端展示模块;
所述云渲染服务端模块包括CefSharp可视化组件、基于Owin的WebService监听组件;所述CefSharp可视化组件为集成Chromium内核,用于在.Net环境中支持HTML5、Webgl渲染的浏览器组件;所述基于Owin的WebService监听组件用于实现WebApi以实现服务端与客户端之间的数据交换。
所述客户端展示模块包括基于交互控制组件,Canvas展示组件和逻辑组件,其中,所述交互控制组件用于解析服务端返回的全景图片,并将全景图片每一帧图片对应一个序列号,并处理交互事件对当前展示序号的控制;所述 Canvas展示组件用于展示当前需要进行展示的帧序号提取图片并绘制渲染;所述逻辑组件用于进行图片帧的切割、标号、自动旋转播放的逻辑实现。
附图说明
图1为本发明基于云渲染在移动端或大屏三维展示方法的流程示意图。
图2为在渲染进程中根据帧率参数调用定时器对物体做360度全景旋转截图的示意图。
图3为将所有帧率图合并为一张图片的成果示意图。
图4为采用本发明方法后在移动端三维显示示意图。
具体实施方式
下面结合附图和具体实施例对本发明作进一步的详细说明。
本实施例基于云渲染在移动端或大屏三维展示系统包括云渲染服务端软件和客户端展示软件,具体地:
云渲染服务端软件由CefSharp可视化组件、基于Owin的WebService监听组件以组成,其中CefSharp可视化组件是一款集成Chromium内核、允许在.Net环境中支持HTML5、Webgl渲染的浏览器组件。Owin是微软最常用的开放式WebService组件之一。通过Owin组件实现的WebApi可以进行服务端与客户端之间的数据机交。
客户端展示软件:客户端展示软件主要由基于交互控制组件,Canvas展示组件和逻辑组件组成。其中交互控制组件主要负责解析服务端返回的全景图片,并将全景图片每一帧图片对应一个序列号,并处理交互如触摸,鼠标移动的事件对当前展示序号的控制,总之就是控制当前Canvas需要展示的帧图片序号。Canvas展示组件则负责展示当前需要进行展示的帧序号提取图片并绘制渲染。逻辑组件用于进行图片帧的切割、标号、自动旋转播放的逻辑实现。
本发明通过上述基于云渲染在移动端或大屏三维展示方法的流程如图1所示,包括:
用户通过浏览器向服务端云渲染发送渲染请求,所述渲染请求包括需要渲染的页面地址、相机参数、场景参数、渲染图幅尺寸、帧率等信息,其中相机参数包括位置、朝向、Fov角、焦距和宽高比,场景参数包括背景色和场景Lod级别。服务端云渲染软件收到渲染请求后,以命名管道的方式开启新的渲染进程,并转发所述渲染请求到所述新的渲染进程中。
新的渲染进程基于cefsharp组件根据所述渲染请求中需要渲染的页面地址加载三维页面,并根据相机参数和场景参数,通过CefSharp组件中ChromiumWebBrowser对象的ExecuteScriptAsync函数调用所加载三维页面中的初始化方法来初始化相机和场景。
通过CefSharp组件中ChromiumWebBrowser对象的ExecuteScriptAsync函数调用所加载三维页面中的方法动态设置相机位置和朝向,并进行逐帧截图,最后合成为一张图像,传输到服务端云渲染软件,并转发回客户端;具体截图和合成的过程为:根据图像尺寸(w,h),帧率f 即360度分为f等分,纵向每一帧为360/f度,总共生成图像f张,在新的渲染进程中根据帧率参数调用定时器对物体做360全景旋转截图成果的过程如图2所示,最后在内存中合并为一张图像,图幅尺寸为(w*f,h),将所有帧率图合并为一张图片的成果如图3所示。
客户端收到图像后,按照图像宽高对图像进行切割和按序标号通过定时器触发前端Canvas显示的帧图像序号变更或通过用户的平移操作,引起帧序号的+和-操作,展示出三维场景。具体地过程包括:前端根据服务端返回图像宽度对图幅(w*f,h)的图像进行标号,从1至f;在Canvas中通过drawImage方法,封装绘制第i帧的图像;通过setInterval方法做定时器,在每次定时器触发中将当前显示帧号进行自加或自减操作,从而实现图像的顺时针或逆时针的旋转操作;通过监听交互事件,如鼠标或touch事件,前后比较两次移动事件中的屏幕坐标的差值,通过一个灵敏度参数factor将坐标差值换算成显示帧号的差值,如左移5个像素,即帧行号+1。
经过上述方法流程后在移动端三维显示示意图如图4所示。
与现有PC端传统的加载方式相比,本发明方法的加载速度快、稳定性高、性能消耗低,适用于移动端、大屏显示以及Portal门户等应用场景。
Claims (5)
1.一种基于云渲染在移动端或大屏三维展示方法,其特征在于,包括:
用户通过浏览器向服务端云渲染发送渲染请求,所述渲染请求包括需要渲染的页面地址、相机参数、场景参数、渲染图幅尺寸、帧率的信息;
服务端云渲染软件收到渲染请求后,以命名管道的方式开启新的渲染进程,并转发所述渲染请求到所述新的渲染进程中;
所述新渲染进程根据所述渲染请求中需要渲染的页面地址加载三维页面,并根据所述相机参数、场景参数分别初始化相机和场景;
动态设置相机位置和朝向,并进行逐帧截图,最后合成为一张图像,从所述新渲染进程传输到服务端云渲染软件,并转发回客户端;所述进行逐帧截图,最后合成为一张图像包括:在所述新渲染进程中根据图像尺寸(w,h),帧率f 即360度分为f等分,横向每一帧为360/f度,总共生成图像f张,在内存中合并为一张图像,图幅尺寸为(w*f,h);
客户端收到图像后,按照图像宽高对图像进行切割和按序标号通过定时器触发前端Canvas显示的帧图像序号变更或通过用户的平移操作,引起帧序号的加和减操作,展示出三维场景;具体包括:客户端根据服务端云渲染软件返回图像宽度对图幅尺寸(w*f,h)的图像进行标号,从1至f,在canvas中通过drawImage方法,封装绘制第i帧的图像,通过setInterval方法做定时器,在每次定时器触发中将当前显示帧号进行自加或自减操作,从而实现图像的顺时针或逆时针的旋转操作。
2.根据权利要求1所述基于云渲染在移动端或大屏三维展示方法,其特征在于:所述相机参数包括位置、朝向、Fov角、焦距和宽高比;所述场景参数包括背景色和场景Lod级别。
3.根据权利要求2所述基于云渲染在移动端或大屏三维展示方法,其特征在于:所述新渲染进程基于CefSharp组件根据页面地址加载三维页面,并根据相机参数和场景参数,通过CefSharp组件中ChromiumWebBrowser对象的ExecuteScriptAsync函数调用所加载三维页面中的初始化方法来初始化相机和场景。
4.根据权利要求3所述基于云渲染在移动端或大屏三维展示方法,其特征在于:通过CefSharp组件中ChromiumWebBrowser对象的ExecuteScriptAsync函数调用所加载三维页面中的方法动态设置相机位置和朝向。
5.一种基于云渲染在移动端或大屏三维展示系统,其特征在于:包括云渲染服务端模块和客户端展示模块;
所述云渲染服务端模块包括CefSharp可视化组件、基于Owin的WebService监听组件;所述CefSharp可视化组件集成Chromium内核,用于在.Net环境中支持HTML5、Webgl渲染的浏览器组件;所述CefSharp可视化组件用于调用页面js方法动态设置相机位置和朝向,根据图像尺寸(w,h),帧率f 即360度分为f等分,纵向每一帧为360/f度,总共生成图像f张,在渲染进程中根据帧率参数调用定时器对物体做360全景旋转截图,最后在内存中合并为一张图像,图幅尺寸为(w*f,h),传输到服务端云渲染软件,并转发回客户端;所述基于Owin的WebService监听组件用于实现WebApi以实现服务端与客户端之间的数据交换;
所述客户端展示模块包括基于交互控制组件,Canvas展示组件和逻辑组件,其中,所述交互控制组件用于解析服务端返回的全景图片,根据返回图像宽度对图幅尺寸(w*f,h)的图像进行标号,从1至f,在canvas中通过drawImage方法,封装绘制第i帧的图像,通过setInterval方法做定时器,在每次定时器触发中将当前显示帧号进行自加或自减操作,从而实现图像的顺时针或逆时针的旋转操作;所述 Canvas展示组件用于展示当前需要进行展示的帧序号提取图片并绘制渲染;所述逻辑组件用于进行图片帧的切割、标号、自动旋转播放的逻辑实现。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911316321.1A CN110968962B (zh) | 2019-12-19 | 2019-12-19 | 基于云渲染在移动端或大屏三维展示方法及系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911316321.1A CN110968962B (zh) | 2019-12-19 | 2019-12-19 | 基于云渲染在移动端或大屏三维展示方法及系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110968962A CN110968962A (zh) | 2020-04-07 |
CN110968962B true CN110968962B (zh) | 2023-05-12 |
Family
ID=70035137
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911316321.1A Active CN110968962B (zh) | 2019-12-19 | 2019-12-19 | 基于云渲染在移动端或大屏三维展示方法及系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110968962B (zh) |
Families Citing this family (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111627093A (zh) * | 2020-05-13 | 2020-09-04 | 上海识装信息科技有限公司 | 一种配置gif信息的方法、装置和电子设备 |
CN111597005B (zh) * | 2020-05-18 | 2023-09-05 | 深圳航天智慧城市系统技术研究院有限公司 | 一种大数据可视化三维gis云渲染项目生成系统与方法 |
CN112328317A (zh) * | 2020-08-31 | 2021-02-05 | 中盈优创资讯科技有限公司 | 一种基于node-canvas的服务端生成图表方法 |
CN115170713B (zh) * | 2022-06-29 | 2023-05-09 | 光线云(杭州)科技有限公司 | 基于超网络的三维场景云渲染方法和系统 |
CN117437342B (zh) * | 2023-12-20 | 2024-04-30 | 深圳图为技术有限公司 | 一种三维场景渲染方法和存储介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102930592A (zh) * | 2012-11-16 | 2013-02-13 | 李金地 | 基于统一资源定位符解析的云计算渲染方法 |
CN103106680A (zh) * | 2013-02-16 | 2013-05-15 | 赞奇科技发展有限公司 | 基于云计算架构的三维图形渲染的实现方法及云服务系统 |
CN104021585A (zh) * | 2014-06-09 | 2014-09-03 | 苏州明日吉辰软件研发有限公司 | 基于真实场景的三维展示方法 |
CN106096016A (zh) * | 2016-06-24 | 2016-11-09 | 北京建筑大学 | 一种基于网络的三维点云可视化方法以及装置 |
CN109558507A (zh) * | 2017-09-26 | 2019-04-02 | 中建科技有限公司深圳分公司 | 三维模型渲染方法及系统 |
CN110415325A (zh) * | 2019-07-25 | 2019-11-05 | 杭州经纬信息技术股份有限公司 | 云渲染三维可视化实现方法及系统 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2016535370A (ja) * | 2013-09-10 | 2016-11-10 | カルガリー・サイエンティフィック・インコーポレイテッドCalgary Scientific Inc. | 分散型サーバ側及びクライアント側画像データレンダリングのためのアーキテクチャ |
-
2019
- 2019-12-19 CN CN201911316321.1A patent/CN110968962B/zh active Active
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102930592A (zh) * | 2012-11-16 | 2013-02-13 | 李金地 | 基于统一资源定位符解析的云计算渲染方法 |
CN103106680A (zh) * | 2013-02-16 | 2013-05-15 | 赞奇科技发展有限公司 | 基于云计算架构的三维图形渲染的实现方法及云服务系统 |
CN104021585A (zh) * | 2014-06-09 | 2014-09-03 | 苏州明日吉辰软件研发有限公司 | 基于真实场景的三维展示方法 |
CN106096016A (zh) * | 2016-06-24 | 2016-11-09 | 北京建筑大学 | 一种基于网络的三维点云可视化方法以及装置 |
CN109558507A (zh) * | 2017-09-26 | 2019-04-02 | 中建科技有限公司深圳分公司 | 三维模型渲染方法及系统 |
CN110415325A (zh) * | 2019-07-25 | 2019-11-05 | 杭州经纬信息技术股份有限公司 | 云渲染三维可视化实现方法及系统 |
Non-Patent Citations (1)
Title |
---|
马金忠,田彦山.基于云计算的BIM模型轻量化及应用研究综述.《宁夏师范学院学报》.2019,第40卷(第40期),全文. * |
Also Published As
Publication number | Publication date |
---|---|
CN110968962A (zh) | 2020-04-07 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110968962B (zh) | 基于云渲染在移动端或大屏三维展示方法及系统 | |
JP4481166B2 (ja) | ユーザによる合成画像およびビデオ画像のリアルタイムのミキシングを可能にする方法およびシステム | |
US9704229B2 (en) | Post-render motion blur | |
US11711563B2 (en) | Methods and systems for graphics rendering assistance by a multi-access server | |
CN109829964B (zh) | Web增强现实的渲染方法和装置 | |
CN110717963B (zh) | 一种基于WebGL的可替换模型的混合渲染展示方法、系统及存储介质 | |
CN106713968B (zh) | 一种直播数据显示方法和装置 | |
CN115546377B (zh) | 一种视频融合方法、装置、电子设备及存储介质 | |
CN113469883B (zh) | 动态分辨率的渲染方法、装置、电子设备及可读存储介质 | |
CN112669428A (zh) | 一种基于服务器和客户端协作的bim模型渲染方法 | |
CN114928718A (zh) | 视频监控方法、装置、电子设备及存储介质 | |
CN114297546A (zh) | 一种基于WebGL的载入3D模型实现自动生成缩略图的方法 | |
US20050219418A1 (en) | Dynamic cross fading method and apparatus | |
CN114428573B (zh) | 特效图像处理方法、装置、电子设备及存储介质 | |
CN116330275A (zh) | 一种工业机器人快速实现数字孪生的方法及系统 | |
CN110662099B (zh) | 用于显示弹幕的方法和装置 | |
CN117173378B (zh) | 基于CAVE环境的WebVR全景数据展现方法、装置、设备及介质 | |
CN113821345B (zh) | 游戏中的移动轨迹渲染方法、装置及电子设备 | |
CN112752131B (zh) | 弹幕信息的显示方法和装置、存储介质及电子装置 | |
CN111729304B (zh) | 一种展示海量对象的方法 | |
CN110083231B (zh) | 一种面向安卓VR一体式头显的WebGL全景显示方法 | |
CN108805964B (zh) | 基于OpenGL ES的VR机顶盒启动动画制作方法及系统 | |
US20120120197A1 (en) | Apparatus and method for sharing hardware between graphics and lens distortion operation to generate pseudo 3d display | |
CN115797172A (zh) | 一种实时电子游戏渲染图像的超分辨率训练集生成系统 | |
CN113034367A (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 | ||
PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: A Method and System for 3D Display on Mobile or Large Screen Based on Cloud Rendering Effective date of registration: 20231222 Granted publication date: 20230512 Pledgee: Guanggu Branch of Wuhan Rural Commercial Bank Co.,Ltd. Pledgor: WUHAN INS ENGINEERING TECHNOLOGY Corp. Registration number: Y2023980073664 |