CN111724462A - 在Chrome浏览器中三维渲染的方法 - Google Patents
在Chrome浏览器中三维渲染的方法 Download PDFInfo
- Publication number
- CN111724462A CN111724462A CN202010558506.XA CN202010558506A CN111724462A CN 111724462 A CN111724462 A CN 111724462A CN 202010558506 A CN202010558506 A CN 202010558506A CN 111724462 A CN111724462 A CN 111724462A
- Authority
- CN
- China
- Prior art keywords
- window
- chrome
- visualization engine
- dimensional visualization
- page
- 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.)
- Granted
Links
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 title claims abstract description 112
- 238000000034 method Methods 0.000 title claims abstract description 93
- 238000009877 rendering Methods 0.000 title claims abstract description 63
- 238000012800 visualization Methods 0.000 claims abstract description 108
- 230000008569 process Effects 0.000 claims abstract description 52
- 230000008859 change Effects 0.000 claims description 8
- 238000004806 packaging method and process Methods 0.000 claims description 6
- 238000004891 communication Methods 0.000 claims description 5
- 230000000694 effects Effects 0.000 abstract description 13
- 230000009191 jumping Effects 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 35
- 238000010586 diagram Methods 0.000 description 26
- 239000000463 material Substances 0.000 description 12
- 238000010276 construction Methods 0.000 description 8
- 238000013507 mapping Methods 0.000 description 5
- 239000002245 particle Substances 0.000 description 4
- 238000013499 data model Methods 0.000 description 3
- 238000007726 management method Methods 0.000 description 3
- 230000007246 mechanism Effects 0.000 description 3
- 239000003607 modifier Substances 0.000 description 3
- 238000010422 painting Methods 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 238000004088 simulation Methods 0.000 description 2
- 239000000779 smoke Substances 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 241001550224 Apha Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000005034 decoration Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000001151 other effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000013519 translation Methods 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
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/04—Texture mapping
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/50—Lighting effects
Landscapes
- Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供一种在Chrome浏览器中三维渲染的方法,包括如下步骤:步骤一:在Chrome中安装三维可视化引擎的扩展程序,在计算机上安装三维可视化引擎进程;步骤二:在Chrome浏览器接收到要渲染3D画面的页面时跳转至Chrome扩展页面;步骤三:Chrome扩展页面调用三维可视化引擎进程并建立起通道,待三维可视化引擎进程启动完成进行通信,传递场景初始化的数据;步骤四:三维可视化引擎进程加载三维可视化引擎的OCX插件;步骤五:三维可视化引擎进程通过三维可视化引擎加载3D场景内容,进行3D渲染;步骤六:Chrome浏览器接收并展示三维可视化引擎传输的渲染结果。本发明通过在Chrome上通过OpenGL或者Direct3D接口渲染3D画面,性能高,效果好。
Description
技术领域
本发明涉及图像处理技术领域,尤其涉及一种在Chrome浏览器中三维渲染的方法。
背景技术
由于Chrome浏览器停止支持NPAPI插件(插件标准,Netscape PluginApplication Programming),使得NPAPI插件实现的3D程序面临无法运行的问题,如果全面升级插件到HTML5(Web页面标准)会耗费很大的人力资源,有些功能无法实现,也无法达到性能的要求。
现有技术中Chrome浏览器访问相对应的页面时,Chrome地址栏会跳转成扩展地址:“chrome-extension://xxxx”,而不是页面原有的http://xxxx或https://xxxx的地址。
发明内容
本发明之目的是提供一种在Chrome浏览器中三维渲染的方法,其能够解决现有Chrome浏览器无法高性能渲染3D画面的问题。
本发明提供一种在Chrome浏览器中三维渲染的方法,包括如下步骤:
步骤一:在Chrome浏览器中安装三维可视化引擎的扩展程序,以及在计算机上安装三维可视化引擎进程;
步骤二:在Chrome浏览器接收到来自于服务器的要渲染3D画面的页面时,初始化逻辑对当前页面地址进行场景初始化,并跳转至Chrome扩展页面;
步骤三:所述Chrome扩展页面接收到要渲染3D画面的信息,会调用所述三维可视化引擎进程并建立起通道,待所述三维可视化引擎进程启动完成进行通信,传递场景初始化的数据;
步骤四:所述三维可视化引擎进程加载所述三维可视化引擎的OCX插件,并创建一无边框窗口,将所述三维可视化引擎的窗口作为子窗口进行嵌入设置;
步骤五:所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,进行3D渲染得到渲染结果;
步骤六:所述Chrome浏览器接收并展示所述三维可视化引擎传输的渲染结果。
优选地,所述步骤二在Chrome浏览器接收到来自于服务器的要渲染3D画面的页面时,初始化逻辑对当前页面地址进行场景初始化,并跳转至Chrome扩展页面包括:
用户打开要渲染3D画面的页面,初始化逻辑对当前页面地址进行判断;
如果当前页面不是Chrome扩展页面,页面会自动跳转至Chrome扩展页面,并将用户打开的页面作为iframe嵌入到Chrome扩展页面中。
优选地,所述步骤二还包括:
Web页面引用JS文件,并调用启动函数,将渲染的位置、大小与内容通过iframe间通信,传递给最外层的Chrome扩展页面。
优选地,所述步骤五所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,进行3D渲染得到渲染结果包括:
所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,开始渲染;
所述三维可视化引擎进程通过遍历窗口属性,获取需要渲染3D画面的目标Chrome窗口句柄,并通过设置层级将其显示在页面上方;
通过原生OpenGL和Direct3D接口进行3D渲染,得到渲染结果。
优选地,所述三维可视化引擎进程通过遍历窗口属性,获取需要渲染3D画面的目标Chrome窗口句柄,并通过设置层级将其显示在页面上方,包括:
所述三维可视化引擎进程通过遍历窗口名称、窗口大小、窗口位置、窗口可见性或窗口样式属性,定位目标窗口;
获取目标窗口的窗口名称、窗口大小、窗口位置、窗口可见性或窗口样式属性,通过Windows编程接口SetParent将所述三维可视化引擎进程的窗口以子窗口的形式附加到Chrome浏览器上,使得所述三维可视化引擎的窗口显示在对应页面上方。
优选地,所述三维可视化引擎扩展程序实时监控所述Chrome浏览器的运行状态,并将运行状态实时发送至所述三维可视化引擎进程,实现运行状态信息同步;
所述运行状态包括标签页切换、标签页关闭、标签页大小改变或需要渲染3D画面位置的变化。
优选地,所述三维可视化引擎进程实时监控所述Chrome窗体的运行状态,并将运行状态实时发送至所述三维可视化引擎扩展程序,实现运行状态信息同步;
所述Chrome窗体的运行状态包括窗体的大小、父子窗口、目标窗口的显示隐藏状态以及贴附窗口状态的变化。
优选地,所述步骤五还包括:
通过所述Web页面获取需要显示的页面标签的位置,传递给所述三维可视化引擎进程;
所述三维可视化引擎进程通过设置异形窗口或多边形窗口,将底下的页面元素显示出来。
优选地,所述步骤二还包括:
通过所述三维可视化引擎扩展程序注入代码到原有Chrome页面获取标题和图标,发送至最外层Chrome扩展页面,并设置Chrome扩展页面的标题和图标与被嵌入的页面一致。
优选地,所述三维可视化引擎包括:
接口模块,用于对外开放至少一个功能接口,所述功能接口通过对底层实现的功能模块进行组合封装实现。
本发明提供的一种在Chrome浏览器中三维渲染的方法,相比于现有技术具有如下有益效果:
1、本发明通过在Chrome上通过OpenGL或者Direct3D接口,渲染3D画面,性能高,效果好。
2、本发明支持多开,每个Chrome页面都可以打开大型3D场景。
3、本发明稳定性高,采用多进程架构,一个页面崩溃不会影响到其他页面。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅用于解释本发明的构思。
图1为本发明的在Chrome浏览器中三维渲染的方法流程示意图;
图2为通过本发明的在Chrome浏览器中三维渲染的方法得到的运行结果示意图;
图3为本发明提供的三维可视化引擎构建方法的流程示意图;
图4为本发明的三维可视化引擎构建方法中的摄影机/视口展示功能的示意图;
图5为本发明的三维可视化引擎构建方法中的动画展示功能的示意图;
图6为本发明的三维可视化引擎构建方法中的材质和光影展示效果的示意图;
图7为本发明的三维可视化引擎构建方法中的输入与控制台功能的示意图;
图8为本发明的三维可视化引擎构建方法中的场景节点管理功能的示意图;
图9为本发明的三维可视化引擎构建方法中的渲染功能的示意图;
图10为本发明的三维可视化引擎构建方法中的拾取与选择功能的示意图;
图11为本发明的三维可视化引擎构建方法中的自定义数据模4型功能的示意图;
图12为本发明的三维可视化引擎构建方法中的界面GUI与2D功能的示意图;
图13为本发明的三维可视化引擎构建方法中的嵌入第三方库功能的示意图;
图14为本发明的三维可视化引擎构建方法中的实现渲染功能的示意图;
图15为本发明的三维可视化引擎构建方法中的实现画布功能的示意图;
图16为通过本发明的三维可视化引擎构建方法得到的最终窗口结构示意图。
具体实施方式
在下文中,将参照附图描述本发明的一种在Chrome浏览器中三维渲染的方法的实施例。
在此记载的实施例为本发明的特定的具体实施方式,用于说明本发明的构思,均是解释性和示例性的,不应解释为对本发明实施方式及本发明范围的限制。除在此记载的实施例外,本领域技术人员还能够基于本申请权利要求书和说明书所公开的内容采用显而易见的其它技术方案,这些技术方案包括对在此记载的实施例做出任何显而易见的替换和修改的技术方案。
本说明书的附图为示意图,辅助说明本发明的构思,示意性地表示各部分之间的相互关系。
如图1所示,本发明提供一种在Chrome浏览器(谷歌浏览器)中三维渲染的方法,包括如下步骤:
步骤一:在Chrome浏览器中安装三维可视化引擎(T3DContainer)的扩展程序,以及在计算机上安装三维可视化引擎进程(T3DContainer.exe)或三维可视化引擎可执行程序;
步骤二:在Chrome浏览器接收到来自于服务器的要渲染3D画面的页面时,初始化逻辑对当前页面地址进行场景初始化,并跳转至Chrome扩展页面;
步骤三:所述Chrome扩展页面接收到要渲染3D画面的信息,会调用所述三维可视化引擎进程并建立起通道(Windows进程通信机制),待所述三维可视化引擎进程启动完成进行通信,传递场景初始化的数据;其中,T3DContainer.exe启动完成之后,建立和Chrome扩展页面通信,并获取到Chrome扩展页面传递过来的初始化的信息,例如:渲染内容,位置和大小等;
步骤四:所述三维可视化引擎进程加载所述三维可视化引擎的OCX插件,并创建一无边框窗口,将所述三维可视化引擎的窗口作为子窗口进行嵌入设置;
步骤五:所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,进行3D渲染得到渲染结果,如图2所示;
步骤六:所述Chrome浏览器接收并展示所述三维可视化引擎传输的渲染结果。
由于Chrome禁用了插件机制,所以不能直接运行在Chrome上,本发明的三维可视化引擎T3DContainer以Window组件OCX插件的形式存在,用来渲染3D画面,支持切换OpenGL和Direct3D渲染接口,由此使得三维渲染的过程并不需要Chrome浏览器参与,故在进行三维渲染时能够避免受到浏览器的限制,提高了三维渲染的渲染效率。
需要说明的是,所述三维可视化引擎包括:接口模块,用于对外开放至少一个功能接口,所述功能接口通过对底层实现的功能模块进行组合封装实现。
以及,如图3所示,上述三维可视化引擎(T3DContainer)的构建方法具体包括:
S101、对底层实现的功能模块进行组合封装,形成至少一个功能接口。
S102、对外开放所述功能接口。
其中,上述功能模块采用C++语言实现,包括以下至少一项:摄像机/视口展示功能、动画展示功能、材质和光影展示功能、输入与控制台功能、场景节点管理功能、渲染功能、拾取与选择功能、自定义数据模型功能、界面GUI与2D功能、嵌入第三方库功能、浏览器下载、加载、更新插件的脚本、宏定义、辅助函数、实例和工具库。
可选的,所述功能接口包括以下至少一项:实现公告板的功能接口、实现拾取的功能接口、实现渲染的功能接口和实现画布的功能接口。
上述步骤S101的一种可选的实现方式是,采用JavaScript对底层实现的功能模块进行组合封装,形成至少一个JavaScript接口。在JavaScript层面对3D插件接口进行的封装,包括浏览器下载、加载、更新插件的脚本;各种宏定义、辅助函数、实例和工具库。
具体的,图4是摄影机/视口展示功能的示意图,支持摄影机多视口、鼠标球控制摄影机、宏观俯视角控制摄影机、摄影机飞到某位置、摄影机缩放等;支持摄影机轨迹动画,可控制位置、旋转;支持截取后背缓冲截图功能,可修改截图尺寸,可超过显示区域分辨率截图;支持正交摄影机,支持正交远近缩放,包括3D摄影机到正交摄影机的切换。
图5是动画展示功能的示意图,支持人物角色的骨骼动画、场景节点的关键帧动画,动画保存为XML文件。
图6是材质和光影展示效果的示意图,支持点光、方向光、泛光,可控制灯光位置、强弱、范围、颜色等基本参数,灯光可挂在场景节点下面,实现运动效果;材质支持反射、环境贴图、光线图、多层贴图、多通道Pass渲染;支持各种贴图混合与半透明效果;支持贴图层的滚动、缩放、旋转等贴图动画,以及贴图起始位置偏移量、缩放量、旋转量设置;材质支持镂空贴图,apha_reject,可用于植物、装饰等镂空效果;支持贴图的图片格式:*.tga,*.bmp,*.dds,*.jpg,*.png;支持Alpha通道;支持从指定的url位置下载模型、下载贴图到内存,并进行解压、加载;支持由关键帧控制的材质动画,材质动画保存于XML文件,每个材质动画可针对场景中的一个存在材质。
图7是输入与控制台功能的示意图,支持DirectInput的硬件输入的读取,和Windows消息返回的鼠标键盘消息,分别适用于摄影机操作和GUI上的输入响应;提供控制台输出打印log,以及log文件,独立于浏览器开启的控制台窗口(只读窗口)。
图8是场景节点管理功能的示意图,支持复杂的场景链接关系、层次结构,场景节点父子关系,移动、旋转、缩放父节点影响节点变换;支持对物体的镜像、旋转、缩放和平移等操作。
图9是渲染功能的示意图,支持实体显示、线框显示、点显示等显示方式;支持天空盒、天空球,天空效果资源打包后可动态下载并切换;支持雾效果,可设置雾远近等参数;支持多轴向公告板(Billboard)、公告板树,支持面向摄影机、沿公共轴、和自身轴几种;支持粒子系统,提供天气模仿、烟雾、火等模拟,可调整粒子系统的发射率、发射数量、粒子大小、粒子贴图、粒子颜色、生命周期等参数;支持效果修改器,批量对场景节点进行材质修改,把场景节点级别的对象添加到修改器中立即可具有修改器中的效果。
图10是拾取与选择功能的示意图,支持射线拾取、矩形圈选,并返回丰富的拾取信息,包括:点信息、面索引信息、法线、贴图坐标。可以设置拾取标志,以排除不需要拾取到的部分;支持多选标记,给对象分组标记,用于选择时候用以区分。
图11是自定义数据模型功能的示意图,支持手绘物体(ManualObject)手动填点、法线、贴图等信息的自定义模型。每个ManualObject可以设置多个材质;支持任意空间线条绘制,用于线路、指示箭头灯,线条绘制可以改变颜色以及动态流动等效果;支持各种形状的线框绘制,矩形、圈、圆环等,可以改变颜色以及动态流动等效果、调整缩放比例;支持体积数据切面,可用于温度、烟气等点数据生成体积的横切面,可设置颜色取值范围,数据的宽、高、深度,以及切面位置;支持简单的放样物体Loft,根据2D的包围边框,沿路径生成网格。路径支持旋转缩放等,可增加路径上的变换效果。
图12是界面GUI与2D功能的示意图,支持2D的GUI,GUI具有层次结构、按钮、图片框等基本元素;支持画布(Canvas),在2D上绘制线、矩形、椭圆、扇形、箭头等,画布输出的结果为Texture,可用于任何材质;支持2D Sprite,可以把2D的文字、图形等,关联到在3D场景中的节点上。
图13是嵌入第三方库功能的示意图,支持内嵌Flash到GUI或者到材质,并支持Flash与鼠标交互,并支持AS调用和回调;支持内嵌浏览器,到GUI或者到材质,并提供JavaScript调用和回调功能。
其中,各功能接口通过封装上述至少一个功能模块形成,包括以下至少一项:实现公告板的功能接口、实现拾取的功能接口、实现渲染的功能接口和实现画布的功能接口。
其中,公告板Billboard,由t3djs.sceneManager管理,var bbs=t3djs.sceneManager.createBillboardSet(1),用于控制场景中的一个平面,让他始终以一定的角度对着我们的镜头(一般是垂直于镜头)。T3D的Billboard支持面向摄影机、沿公共轴、和自身轴几种,常用于警示标志、树木等。
其中,拾取包括射线拾取和矩形拾取。射线拾取检测一条射线穿过场景中对象,并返回对象身上多边形、贴图坐标等;射线拾取由t3djs.picking提供接口:var pickInfo=t3djs.picking.pick(pt);矩形拾取是用来检测在屏幕空间中的一个矩形区域内所包含的对象;矩形拾取由t3djs.SelectController提供接口:var selector=newt3djs.SelectController()。
其中,如图14所示,渲染窗口指插件的整个区域,由t3djs.renderWindow对象提供接口,唯一的;视口指渲染窗口内的矩形区域,默认有一个,可以有多个,每个视口需要对应一个摄影机;默认视口由t3djs.viewport对象提供接口,可以由t3djs.renderWindow.addViewport添加多个视口。
其中,如图15所示,画布提供在贴图(Texture)上绘制图形的接口;管理器为:t3djs.canvasManager,Canvas在绘制之后需要调用updateTexture()来更新贴图;画布主要提供:文字:写文字,支持字体、颜色和阴影;画笔:用于线、边框;画刷:用于填充图形;最终应用画布的结果是将是材质。
本实施例通过封装底层实现的功能模块,对外提供功能接口,使得研发人员直接调用相应的功能接口即可实现相应的功能,无需再编写大量的代码,可以提高三维可视化引擎构建效率。
优选地,所述步骤二在Chrome浏览器接收到来自于服务器的要渲染3D画面的页面时,初始化逻辑对当前页面地址进行场景初始化,并跳转至Chrome扩展页面包括:
用户打开要渲染3D画面的页面,初始化逻辑对当前页面地址进行判断;
如果当前页面不是Chrome扩展页面,页面会自动跳转至Chrome扩展页面,并将用户打开的页面作为iframe(HTML5标签)嵌入到Chrome扩展页面中。
优选地,所述步骤二还包括:
Web页面引用JS文件,并调用启动函数,将渲染的位置、大小与内容通过iframe间通信,传递给最外层的Chrome扩展页面。
优选地,所述步骤五所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,进行3D渲染得到渲染结果包括:
所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,开始渲染;
所述三维可视化引擎进程通过遍历窗口属性,获取需要渲染3D画面的目标Chrome窗口句柄,并通过设置层级将其显示在页面上方;
通过原生OpenGL和Direct3D接口进行3D渲染,得到渲染结果。
在本发明的进一步实施例中,所述三维可视化引擎进程通过遍历窗口属性,获取需要渲染3D画面的目标Chrome窗口句柄,并通过设置层级将其显示在页面上方,包括:
所述三维可视化引擎进程通过遍历窗口名称、窗口大小、窗口位置、窗口可见性或窗口样式属性,定位目标窗口;
获取目标窗口的窗口名称、窗口大小、窗口位置、窗口可见性或窗口样式属性,通过Windows编程接口SetParent将所述三维可视化引擎进程的窗口以子窗口的形式附加到Chrome浏览器上,使得所述三维可视化引擎的窗口显示在对应页面上方。
具体地,以一个Chrome主窗体(类型为:Chrome_WidgetWin_1)为例,每个标签页分别对应一个窗体(类型:Chrome_RenderWidgetHostHWND),要通过遍历找特征(比如窗口标题,窗口大小,窗口样式等)的方式,定位到目标窗口,获取到目标窗口的位置等属性,由于Chrome页面的渲染机制,不能将T3DContainer窗口以子窗口的形式附加到Chrome_RenderWidgetHostHWND上,所以只能以子窗口的形式附加到Chrome_WidgetWin_1上,和Chrome_RenderWidgetHostHWND的关系是兄弟窗口,但是通过设置层级会高于Chrome_RenderWidgetHostHWND,所以显示在其之上。通过Windows编程接口SetParent将T3DContainer.exe的窗口附加到Chrome页面上,这样T3DContainer的窗口就像是“飘”在了对应的页面上,即显示在页面上方,即得到最终的窗口结构,如图16所示,进而通过原生的OpenGL和Direct3D接口对要渲染3D画面进行3D渲染。
另外,所述步骤二还包括:
通过所述三维可视化引擎扩展程序注入代码到原有Chrome页面获取标题和图标,发送至最外层Chrome扩展页面,并设置Chrome扩展页面的标题和图标与被嵌入的页面一致,这样可以提高用户的体验度。
在本发明的进一步实施例中,所述三维可视化引擎扩展程序实时监控所述Chrome浏览器的运行状态,并将运行状态实时发送至所述三维可视化引擎进程,实现运行状态信息同步。所述运行状态包括标签页切换、标签页关闭、标签页大小改变或需要渲染3D画面位置的变化。
同时,所述三维可视化引擎进程实时监控所述Chrome窗体的运行状态,并将运行状态实时发送至所述三维可视化引擎扩展程序,实现运行状态信息同步。所述Chrome窗体的运行状态包括窗体的大小、父子窗口、目标窗口的显示隐藏状态以及贴附窗口状态的变化。
由于窗口贴附和覆盖是系统级的,页面上的标签无法突破系统窗口层级的限制,为此上述步骤五还包括:通过所述Web页面获取需要显示的页面标签的位置,传递给所述三维可视化引擎进程;所述三维可视化引擎进程通过设置异形窗口或多边形窗口,将底下的页面元素显示出来。
以上对本发明的一种在Chrome浏览器中三维渲染的方法进行了说明。而且,上述披露的各技术特征并不限于已披露的与其它特征的组合,本领域技术人员还可根据本发明之目的进行各技术特征之间的其它组合,以实现本发明之目的为准。
Claims (10)
1.一种在Chrome浏览器中三维渲染的方法,其特征在于,包括如下步骤:
步骤一:在Chrome浏览器中安装三维可视化引擎的扩展程序,以及在计算机上安装三维可视化引擎进程;
步骤二:在Chrome浏览器接收到来自于服务器的要渲染3D画面的页面时,初始化逻辑对当前页面地址进行场景初始化,并跳转至Chrome扩展页面;
步骤三:所述Chrome扩展页面接收到要渲染3D画面的信息,会调用所述三维可视化引擎进程并建立起通道,待所述三维可视化引擎进程启动完成进行通信,传递场景初始化的数据;
步骤四:所述三维可视化引擎进程加载所述三维可视化引擎的OCX插件,并创建一无边框窗口,将所述三维可视化引擎的窗口作为子窗口进行嵌入设置;
步骤五:所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,进行3D渲染得到渲染结果;
步骤六:所述Chrome浏览器接收并展示所述三维可视化引擎传输的渲染结果。
2.根据权利要求1所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述步骤二在Chrome浏览器接收到来自于服务器的要渲染3D画面的页面时,初始化逻辑对当前页面地址进行场景初始化,并跳转至Chrome扩展页面包括:
用户打开要渲染3D画面的页面,初始化逻辑对当前页面地址进行判断;
如果当前页面不是Chrome扩展页面,页面会自动跳转至Chrome扩展页面,并将用户打开的页面作为iframe嵌入到Chrome扩展页面中。
3.根据权利要求2所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述步骤二还包括:
Web页面引用JS文件,并调用启动函数,将渲染的位置、大小与内容通过iframe间通信,传递给最外层的Chrome扩展页面。
4.根据权利要求3所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述步骤五所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,进行3D渲染得到渲染结果包括:
所述三维可视化引擎进程通过所述三维可视化引擎加载3D场景内容,开始渲染;
所述三维可视化引擎进程通过遍历窗口属性,获取需要渲染3D画面的目标Chrome窗口句柄,并通过设置层级将其显示在页面上方;
通过原生OpenGL和Direct3D接口进行3D渲染,得到渲染结果。
5.根据权利要求4所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述三维可视化引擎进程通过遍历窗口属性,获取需要渲染3D画面的目标Chrome窗口句柄,并通过设置层级将其显示在页面上方,包括:
所述三维可视化引擎进程通过遍历窗口名称、窗口大小、窗口位置、窗口可见性或窗口样式属性,定位目标窗口;
获取目标窗口的窗口名称、窗口大小、窗口位置、窗口可见性或窗口样式属性,通过Windows编程接口SetParent将所述三维可视化引擎进程的窗口以子窗口的形式附加到Chrome浏览器上,使得所述三维可视化引擎的窗口显示在对应页面上方。
6.根据权利要求1-5任一项所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述三维可视化引擎扩展程序实时监控所述Chrome浏览器的运行状态,并将运行状态实时发送至所述三维可视化引擎进程,实现运行状态信息同步;
所述运行状态包括标签页切换、标签页关闭、标签页大小改变或需要渲染3D画面位置的变化。
7.根据权利要求1-5任一项所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述三维可视化引擎进程实时监控所述Chrome窗体的运行状态,并将运行状态实时发送至所述三维可视化引擎扩展程序,实现运行状态信息同步;
所述Chrome窗体的运行状态包括窗体的大小、父子窗口、目标窗口的显示隐藏状态以及贴附窗口状态的变化。
8.根据权利要求5所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述步骤五还包括:
通过所述Web页面获取需要显示的页面标签的位置,传递给所述三维可视化引擎进程;
所述三维可视化引擎进程通过设置异形窗口或多边形窗口,将底下的页面元素显示出来。
9.根据权利要求2所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述步骤二还包括:
通过所述三维可视化引擎扩展程序注入代码到原有Chrome页面获取标题和图标,发送至最外层Chrome扩展页面,并设置Chrome扩展页面的标题和图标与被嵌入的页面一致。
10.根据权利要求1-5与8-9任一项所述的在Chrome浏览器中三维渲染的方法,其特征在于,所述三维可视化引擎包括:
接口模块,用于对外开放至少一个功能接口,所述功能接口通过对底层实现的功能模块进行组合封装实现。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010558506.XA CN111724462B (zh) | 2020-06-18 | 2020-06-18 | 在Chrome浏览器中三维渲染的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010558506.XA CN111724462B (zh) | 2020-06-18 | 2020-06-18 | 在Chrome浏览器中三维渲染的方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111724462A true CN111724462A (zh) | 2020-09-29 |
CN111724462B CN111724462B (zh) | 2021-07-20 |
Family
ID=72567394
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010558506.XA Active CN111724462B (zh) | 2020-06-18 | 2020-06-18 | 在Chrome浏览器中三维渲染的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111724462B (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112184874A (zh) * | 2020-10-20 | 2021-01-05 | 国网湖南省电力有限公司 | 一种轻量化三维模型高性能图形标记、进度模拟及导航方法 |
CN112700555A (zh) * | 2020-12-31 | 2021-04-23 | 珠海派诺科技股份有限公司 | 高可配组态化3d数据可视化实现方法、电子设备、存储介质 |
CN113160241A (zh) * | 2021-03-18 | 2021-07-23 | 苏州云图健康科技有限公司 | 医学影像的容积渲染显示方法以及装置、存储介质、电子装置 |
CN116484452A (zh) * | 2023-04-26 | 2023-07-25 | 上海索辰信息科技股份有限公司 | 一种低代码三维数字可视化系统 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101067827A (zh) * | 2007-06-14 | 2007-11-07 | 上海创图网络科技发展有限公司 | 一种基于浏览器的三维网页实现方法 |
US20150161277A1 (en) * | 2011-03-14 | 2015-06-11 | Browsium, Inc. | Methods and systems for one browser version to use a rendering engine of another browser version for displaying information |
CN108647066A (zh) * | 2018-03-23 | 2018-10-12 | 深圳航天智慧城市系统技术研究院有限公司 | 在浏览器中弹出html页面遮盖citymaker三维引擎的方法 |
CN108958724A (zh) * | 2018-06-26 | 2018-12-07 | 北京优锘科技有限公司 | 三维可视化引擎构建方法、装置、引擎、浏览器、设备及存储介质 |
-
2020
- 2020-06-18 CN CN202010558506.XA patent/CN111724462B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101067827A (zh) * | 2007-06-14 | 2007-11-07 | 上海创图网络科技发展有限公司 | 一种基于浏览器的三维网页实现方法 |
US20150161277A1 (en) * | 2011-03-14 | 2015-06-11 | Browsium, Inc. | Methods and systems for one browser version to use a rendering engine of another browser version for displaying information |
CN108647066A (zh) * | 2018-03-23 | 2018-10-12 | 深圳航天智慧城市系统技术研究院有限公司 | 在浏览器中弹出html页面遮盖citymaker三维引擎的方法 |
CN108958724A (zh) * | 2018-06-26 | 2018-12-07 | 北京优锘科技有限公司 | 三维可视化引擎构建方法、装置、引擎、浏览器、设备及存储介质 |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112184874A (zh) * | 2020-10-20 | 2021-01-05 | 国网湖南省电力有限公司 | 一种轻量化三维模型高性能图形标记、进度模拟及导航方法 |
CN112700555A (zh) * | 2020-12-31 | 2021-04-23 | 珠海派诺科技股份有限公司 | 高可配组态化3d数据可视化实现方法、电子设备、存储介质 |
CN112700555B (zh) * | 2020-12-31 | 2023-11-14 | 珠海派诺科技股份有限公司 | 高可配组态化3d数据可视化实现方法、电子设备、存储介质 |
CN113160241A (zh) * | 2021-03-18 | 2021-07-23 | 苏州云图健康科技有限公司 | 医学影像的容积渲染显示方法以及装置、存储介质、电子装置 |
CN113160241B (zh) * | 2021-03-18 | 2024-05-10 | 苏州云图健康科技有限公司 | 医学影像的容积渲染显示方法以及装置、存储介质、电子装置 |
CN116484452A (zh) * | 2023-04-26 | 2023-07-25 | 上海索辰信息科技股份有限公司 | 一种低代码三维数字可视化系统 |
Also Published As
Publication number | Publication date |
---|---|
CN111724462B (zh) | 2021-07-20 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111724462B (zh) | 在Chrome浏览器中三维渲染的方法 | |
CN109646955B (zh) | 游戏界面生成方法、装置和存储介质 | |
RU2324229C2 (ru) | Визуальный и пространственный графические интерфейсы | |
JP4796499B2 (ja) | 映像およびシーングラフインターフェイス | |
KR101525906B1 (ko) | 그래픽 객체의 조작 | |
US8368705B2 (en) | Web-based graphics rendering system | |
US5555368A (en) | Object-oriented multi-tasking view framework | |
MXPA06012368A (es) | Integracion de jerarquia de escena tridimensional en sistema de composicion bidimensional. | |
JP2001509620A (ja) | コンピュータ・グラフィックス・システム | |
CN110134025B (zh) | 一种小型分布式高超声速飞行器实时仿真系统 | |
CN108958724A (zh) | 三维可视化引擎构建方法、装置、引擎、浏览器、设备及存储介质 | |
Eck | Introduction to Computer Graphics | |
Rudomín et al. | Fragment shaders for agent animation using finite state machines | |
US5524200A (en) | Object-oriented non-rectilinear viewing framework | |
CN106846431B (zh) | 一种支持多表现形式的统一Web图形绘制系统 | |
CN111324381A (zh) | 开发系统、方法、装置、计算机设备及存储介质 | |
Maloney | Morphic: The self user interface framework | |
CN111459369B (zh) | 一种界面元素的筛选方法、智能终端及存储介质 | |
CN114924712A (zh) | 一种基于域控制器平台的aui模块化实现方法及系统 | |
CN114048110A (zh) | 一种基于Antv的自定义可视化拓扑图的实现方法 | |
Mena-Quintero et al. | The {GNOME} Canvas: A Generic Engine for Structured Graphics | |
CN118071895A (zh) | 动画生成方法、装置、非易失性存储介质和计算机设备 | |
CN115292403A (zh) | 知识图谱的可视化展示方法 | |
CN115131473A (zh) | 一种将动画添加到地图的实现方法及智能终端 | |
Lapalme | The Development of an Application in Java |
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 | ||
CP03 | Change of name, title or address | ||
CP03 | Change of name, title or address |
Address after: 100102 No.308, 3rd floor, building 14, Huajiadi Beili, Chaoyang District, Beijing Patentee after: Beijing Youhao Technology Co.,Ltd. Country or region after: China Address before: 100102 No.308, 3rd floor, building 14, Huajiadi Beili, Chaoyang District, Beijing Patentee before: BEIJING YOUNUO TECHNOLOGY Co.,Ltd. Country or region before: China |