CN112419456A - 一种特效画面生成方法和装置 - Google Patents
一种特效画面生成方法和装置 Download PDFInfo
- Publication number
- CN112419456A CN112419456A CN201910784357.6A CN201910784357A CN112419456A CN 112419456 A CN112419456 A CN 112419456A CN 201910784357 A CN201910784357 A CN 201910784357A CN 112419456 A CN112419456 A CN 112419456A
- Authority
- CN
- China
- Prior art keywords
- dynamic effect
- information
- effect information
- screen
- original
- 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
- 230000000694 effects Effects 0.000 title claims abstract description 422
- 238000000034 method Methods 0.000 title claims abstract description 149
- 238000012545 processing Methods 0.000 claims abstract description 104
- 230000008569 process Effects 0.000 claims abstract description 74
- 238000007781 pre-processing Methods 0.000 claims abstract description 42
- 230000002194 synthesizing effect Effects 0.000 claims description 14
- 230000005540 biological transmission Effects 0.000 claims description 11
- 238000012544 monitoring process Methods 0.000 claims description 8
- 230000004044 response Effects 0.000 claims description 8
- 239000000463 material Substances 0.000 claims description 6
- 238000000605 extraction Methods 0.000 claims description 4
- 230000015572 biosynthetic process Effects 0.000 claims description 3
- 238000003786 synthesis reaction Methods 0.000 claims description 3
- 238000013075 data extraction Methods 0.000 claims description 2
- 239000000284 extract Substances 0.000 abstract 1
- 238000009877 rendering Methods 0.000 description 12
- 238000013515 script Methods 0.000 description 8
- 230000010365 information processing Effects 0.000 description 7
- 238000004364 calculation method Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 239000000654 additive Substances 0.000 description 2
- 230000000996 additive effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 208000003028 Stuttering Diseases 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000003139 buffering effect Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Controls And Circuits For Display Device (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种特效画面生成方法和装置,所述方法响应于动效播放指令,查找与动效播放指令匹配的预处理动效信息,若存在则调用所述预处理动效信息进行动效播放,若不存在,则创建离屏进程,在离屏进程中加载与动效播放指令匹配的原始动效信息,并在离屏进程中对原始动效信息进行图像处理,提取原始动效信息中的动效画面数据和遮罩层数据,合成所述动效画面数据和遮罩层数据,获得目标动效信息。传输目标动效信息到缓存区域中并播放所述目标动效信息。所述方法相对于实时处理方案,缓存读取的方法能够保证透明动效播放时帧数的稳定,带给用户流畅舒适的用户体验。
Description
技术领域
本发明涉及特效画面生成领域,尤其涉及一种特效画面生成方法和装置。
背景技术
在视频播放时,透明动效的生成是实时完成的。每次播放动效,都需要读取包含动效内容的原始视频信息,逐帧读取原始视频信息中的像素信息并进行处理,最后输出动效图像到页面上。根据网页中一般显示的刷新频率,每隔一定时间需要切换一帧画面,因此要达到动效流畅的程度,要求对每一帧画面的处理时间都要在预设时间以内。并且可能受到其他因素影响,预设时间会缩短,因此需要提高切换画面时的流畅度,以避免播放受到影响。
但现有方案需要实时逐帧读取像素信息,然后在浏览器引擎中通过脚本语言进行遍历计算,由于有时候脚本语言在面对计算密集型任务时运行效率并不高,当原始视频信息分辨率较高或者动效视频数量较多的时候,现有方案容易出现绘制帧数不稳定,造成透明动效播放不流畅的问题。
发明内容
为了解决实时特效画面生成卡顿和帧数不稳定的问题,得到特效画面流畅进行播放或切换的技术效果,本发明提供了一种特效画面生成方法和装置。
一方面,本发明提供了一种特效画面生成方法,所述方法包括:
响应于动效播放指令,查找预处理动效信息,以得到查找结果,所述预处理动效信息为预先进行原始动效信息的处理并缓存的信息;
若所述查找结果不存在,则根据所述动效播放指令,获取与所述动效播放指令匹配的原始动效信息;
创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息;
传输所述目标动效信息到播放缓存区中进行缓存;
将播放缓存区中缓存的所述目标动效信息绘制到当前播放页面上,以进行所述目标动效信息的播放。
另一方面提供了一种特效画面生成装置,所述装置包括:缓存动效查找模块、原始动效获取模块、离屏图像处理模块、目标动效缓存模块和目标动效播放模块;
所述缓存信息查找模块用于响应于动效播放指令,查找预处理动效信息,以得到查找结果;
所述原始动效获取模块用于若所述查找结果不存在,则根据所述动效播放指令,获取原始动效信息;
所述离屏图像处理模块用于创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息;
所述目标动效缓存模块用于传输所述目标动效信息到播放缓存区中进行缓存;
所述目标动效播放模块用于将播放缓存区中缓存的所述目标动效信息绘制到当前播放页面上,以进行所述目标动效信息的播放。
另一方面提供了一种计算机可读存储介质,用于存储程序,所述程序被执行时实现所述的一种特效画面生成方法。
另一方面提供了一种终端设备,所述终端设备包括上述的一种特效画面生成装置。
本发明提供的一种特效画面生成方法和装置,所述方法响应于动效播放指令,查找与动效播放指令匹配的预处理动效信息,若存在则调用所述预处理动效信息进行动效播放,若不存在,则创建离屏进程,在离屏进程中加载与动效播放指令匹配的原始动效信息,并在离屏进程中对原始动效信息进行图像处理,获得目标动效信息。传输目标动效信息到缓存区域中并播放所述目标动效信息。所述方法将透明动效数据预先处理和缓存,减少了实际播放动效时的调用浏览器数据接口的次数和中央处理器计算开销。所述方法相对于实时处理方案,缓存读取的方法能够保证透明动效播放时帧数的稳定,带给用户流畅舒适的用户体验。此外,所述方法在透明动效分辨率较高和动效种类较多的场景中高效流畅地在网络应用程序中播放和切换多个透明动效。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种特效画面生成方法的应用场景示意图;
图2为本发明实施例提供的一种特效画面生成方法的流程图;
图3为本发明实施例提供的一种特效画面生成方法中存在预处理动效信息时的操作方法的流程图;
图4为本发明实施例提供的一种特效画面生成方法中预处理动效信息的生成方法的流程图;
图5为本发明实施例提供的一种特效画面生成方法中在离屏处理进程中通过离屏渲染的方式处理所述原始动效信息的方法的流程图;
图6为本发明实施例提供的一种特效画面生成方法中提取动效画面数据和遮罩层数据的方法的流程图;
图7为本发明实施例提供的一种特效画面生成方法中合成动效画面数据和遮罩层数据的方法的流程图;
图8为本发明实施例提供的一种特效画面生成方法中在离屏处理进程中通过网络后台进程的方式处理所述原始动效信息的方法的流程图;
图9为本发明实施例提供的一种特效画面生成方法的逻辑示意图;
图10为本发明实施例提供的一种特效画面生成装置的结构示意图;
图11为本发明实施例提供的一种特效画面生成装置中的执行预处理操作的装置的结构示意图;
图12为本发明实施例提供的一种特效画面生成装置中的离屏图像处理模块的结构示意图;
图13为本发明实施例提供的一种用于实现本发明实施例所提供的方法的设备的硬件结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明作进一步地详细描述。显然,所描述的实施例仅仅是本发明的一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。
在本发明的描述中,需要理解的是,术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。而且,术语“第一”、“第二”等适用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的信息在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
首先对本发明实施例中所涉及的相关术语做以下解释:
RGB:指一种加色模型,将红(Red)、绿(Green)、蓝(Blue)三原色的色光以不同的比例相加,以产生多种多样的色光,常用于在电子系统中检测,表示和显示图像。
Alpha通道:指图像的不透明度参数。如果一个像素的alpha通道数值为0%,那它就是完全透明的,而数值为100%则意味着一个完全不透明的像素。
JavaScript:是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,已经被广泛用于网络应用开发,常用来为网页添加各式各样的动态功能。
请参见图1,其显示了本发明实施例提供的一种特效画面生成方法的应用场景示意图,所述应用场景包括用户终端110和浏览器120,所述浏览器获取用户终端发送的动效播放指令,在预存储的动效信息中查找是否存在与所述动效播放指令匹配的预处理动效信息,若存在,则直接调用预存储动效信息,绘制到用户终端的当前播放页面上,以进行特效画面的生成。若不存在,则加载与动效播放指令想匹配的原始动效信息,在离屏处理进程中对原始动效信息进行处理,获得目标动效信息。浏览器将所述目标动效信息从离屏处理进程中传输到播放缓存区中。浏览器调用播放缓存区中的目标动效信息,绘制到用户终端的当前播放页面上,以进行特效画面的生成。
在本说明书的实施例中,用户终端110可以包括智能手机、台式电脑、平板电脑、笔记本电脑、数字助理、智能可穿戴设备等类型的实体设备。
请参见图2,其显示了一种特效画面生成方法,可应用于服务器侧,所述方法包括:
S210.响应于动效播放指令,查找预处理动效信息,以得到查找结果,所述预处理动效信息为预先进行原始动效信息的处理并缓存的信息;
进一步地,请参见图3,所述响应于动效播放指令,查找预处理动效信息,以得到查找结果之后,还包括:
S310.若查找结果存在,则读取所述预处理动效信息;
S320.将所述预处理动效信息绘制到当前播放页面上,以进行所述预处理动效信息的播放。
具体地,预处理动效信息数目不止一个,每个预处理动效信息包含一种特效画面,例如车辆图案的透明动效,或者爱心图案的透明动效。获取的动效播放指令中包括当前需要播放的动效的信息,例如当前需要播放车辆图案的透明动效,则在预处理动效信息中先进行查找,找到所述车辆图案的透明动效时,则直接绘制车辆图案的透明动效到当前播放页面上,若不存在查找结果,则通过离屏处理的方式,调用包括车辆图案的原始动效信息,处理成为所需要的车辆图案的透明动效。
其中,请参见图4,所述预处理动效信息的生成方法包括:
S410.依次加载原始动效信息;
S420.监听每个所述原始动效信息的加载进程,以获取每个所述原始动效信息对应的加载结束信息;
S430.响应于所述加载结束信息,对每个所述原始动效信息进行图像处理,得到每个所述原始动效信息对应的预处理动效信息;
S440.存储所述预处理动效信息。
具体地,逐个加载原始动效视频,当一个视频资源加载完成后,会触发loadeddata消息,所述loadeddata消息为用于提示当前页面已加载的信息。当监听到loadeddata消息,即确认资源加载完毕,开启对原始动效信息进行图像处理。图像处理的部分利用请求动画帧(requestAnimationFrame)进行,requestAnimationFrame是浏览器提供的一个定时器的应用程序编程接口(Application Programming Interface,API),每隔一帧调用一次图像处理的核心离屏渲染方法捕获帧。所述requestAnimationFrame通过系统来决定执行回调函数的时机,保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
所述预处理动效信息存储在播放缓存区中,当在播放缓存区中没有查找到预处理信息时,从播放缓存区中切换到离屏处理进程,对原始动效信息的处理。
通过预处理的步骤,能够减少播放动效时的调用浏览器接口函数的次数和中央处理器计算开销,相对于实时处理方案,缓存读取方案具有高效性,保证了透明动效播放时帧数的稳定,带给用户流畅舒适的用户体验。
S220.若所述查找结果不存在,则根据所述动效播放指令,获取与所述动效播放指令匹配的原始动效信息;
具体地,所述原始动效信息为一种包含了动效画面和遮罩层画面的特殊视频信息。这种视频分为两个部分,一部分是动效本身的画面,里面包含了动效完整的颜色信息,另一部分是遮罩层,遮罩层中以特殊的方式将动效主体部分区分出来,动效主体部分的透明度参数较大,背景部分透明度参数较小。这种特殊视频非常适于生成透明动效,并且很容易通过常见的视频处理软件生成。
S230.创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息;
进一步地,请参见图5,在离屏处理进程中处理所述原始动效信息,可以采用离屏渲染的方法,所述方法包括:
S510.创建离屏处理缓冲区;
S520.切换播放缓存区到所述离屏处理缓冲区,以在离屏处理缓冲区中进行原始动效信息的处理;
S530.加载所述原始动效信息到离屏处理进程中;
S540.提取所述原始动效信息中的动效画面数据和遮罩层数据,所述动效画面数据为待进行特效处理的画面数据,所述遮罩层数据为具有特效素材的数据;
S550.合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息;
S560.切换离屏处理缓冲区到播放缓存区,以将目标动效信息传输到播放缓存区中。
具体地,在进行离屏渲染之前,可以定义特效处理的基类标签,在基类标签中可以完成基础的工作,如变量定义、初始化和特效大小计算等。所述基类信息可以应用于预处理动效信息,也可以用于原始动效信息的处理。在进行特效处理时,在基类信息处理的基础上,增加预处理和播放等方法。
所述基类标签为应用于超文本语言页面的标签,所述标签包括离屏播放(video)标签、离屏图像绘制(originCanvas)标签、非离屏图像绘制(outputCanvas)、离屏图像绘制标签上下文(originCanvasCtx)和非离屏图像绘制标签上下文(outputCanvasCtx),所述基类标签还包括特效数据遮罩层的位置、透明动效宽度、透明动效高度和生命周期。所述生命周期包括开始、结束、错误和加载完毕的操作,这些操作会在动效播放的不同阶段触发。
所述离屏播放标签作为原始动效视频的载体,用于离屏播放原始动效信息,在播放原始动效信息时,只提取画面像素信息但不显示到页面中。所述离屏图像绘制标签用于处理动效视频数据,可以分别提取动效画面数据和遮罩层数据并进行合成处理。所述非离屏图像绘制标签用于从缓存中读取处理好的预处理动效信息,绘制成特效展示到页面上。所述离屏图像绘制标签上下文用于读取原始动效数据的像素信息,所述非离屏图像绘制标签上下文用于绘制特效。
在进行离屏渲染时,可以创建离屏处理缓冲区,离屏渲染的整个过程需要切换上下文环境,首先从播放缓存区切换到离屏处理缓冲区,完成离屏渲染后,再切换到播放缓存区。
进行离屏渲染时,通过离屏播放标签,执行相应的操作脚本显示原始动效视频中的像素信息。根据像素信息,通过离屏图像绘制标签,执行相应的操作脚本将原始动效信息中每帧图像的动效画面数据和遮罩层数据提取出来,并合成处理成为目标动效信息。所述目标动效信息缓存到帧缓存变量(framesCache)中,后续步骤中可以通过非离屏图像绘制标签执行操作脚本,调用所述帧缓存变量。在所述帧缓存变量中,通过设置不同的标识信息来区分不同的目标动效信息,使得调用目标动效信息时能够方便地进行目标动效信息的切换。
进一步地,请参见图6,所述提取所述原始动效信息中的动效画面数据和遮罩层数据包括:
S610.执行预设的离屏图像处理程序进行图像提取参数的设置;
S620.根据所述图像提取参数,提取所述原始动效信息中的动效画面数据和遮罩层数据。
进一步地,请参见图7,所述合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息包括:
S710.获取所述动效画面数据的色值参数;
S720.获取所述遮罩层数据的特效参数;
S730.合成所述色值参数和所述特效参数,以得到目标动效信息。
具体地,在进行离屏渲染时,通过离屏图像绘制标签,读取原始动效信息的像素信息。所述离屏图像绘制标签中,可以执行获取图像数据的操作。所述离屏图像绘制标签为离屏canvas标签。canvas标签用于通过脚本绘制图像,编写脚本的语言通常是JavaScript。Canvas标签是图形的容器,本身并没有绘制能力,必须使用脚本来完成实际的绘图任务。
所述执行获取图像数据的操作可以通过离屏canvas标签中的getImageData方法来获取。通过设置获取图像数据的操作的参数,将原始动效信息中每帧图像的像素信息分为动效画面数据和遮罩层数据。所述动效画面数据中具有RGB视频信息,所述RGB将红(Red)、绿(Green)、蓝(Blue)三原色的色光以不同的比例相加的加色模型。所述遮罩层数据中具有Alpha视频信息,所述Alpha指图像的不透明度参数。在所述动效画面数据中获取R、G、B三个通道的通道值,在所述遮罩层数据中获取最大的作为透明特效的Alpha通道值。合成R、G、B三个通道和Alpha通道的通道值,可以获得目标动效信息的像素信息,组合全部的像素信息即可以得到目标动效信息。
在一个具体的示例中,所述原始动效信息为一个车辆的画面数据和遮罩层数据。因此,提取到的动效画面数据为车辆的画面,遮罩层数据为车辆画面部分是不透明的,而车辆以外的画面是透明的。当获取的像素信息为车辆主体画面部分时,设RGB的通道值分别为0、255、255。由于该像素点位于车辆主体画面部分,是不透明的,因此Alpha通道值为100%。当获取的像素信息为车辆以外的画面,设RGB的通道值分别为255、255、255.由于该像素点位于车辆以外的画面,是透明的,因此Alpha通道值为0%,最终可以合成一个中央车辆主体部分不透明,车辆主体以外的部分透明的透明特效的画面。
可替换地,请参见图8,所述在离屏处理进程中处理所述原始动效信息,可以采用网络工作进程(Web Worker)的方法,所述方法包括:
S810.创建网络后台工作进程;
S820.绑定信息传送事件,以进行数据传输;
S830.切换播放缓存区到网络后台工作进程,以在网络后台工作进程中进行原始动效信息的处理;
S840.加载所述原始动效信息到网络后台工作进程中;
S850.提取所述原始动效信息中的动效画面数据和遮罩层数据,所述动效画面数据为待进行特效处理的画面数据,所述遮罩层数据为具有特效素材的数据;
S860.合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息;
S870.执行所述信息传送事件传输所述目标动效信息到播放缓存区。
具体地,Web Worker为网页内容在后台线程中运行脚本提供了一种简单的方法,线程可以执行任务而不干扰用户界面。因此可以将原始动效视频的图像处理部分交由一个Web Worker来完成,这部分计算量较大的逐帧图像处理任务在另一个线程中完成,处理结束后把数据通过绑定的信息传送事件,传输到主线程并缓存,在播放动效时从缓存中直接读取数据。
S240.传输所述目标动效信息到播放缓存区中进行缓存;
S250.将播放缓存区中缓存的所述目标动效信息绘制到当前播放页面上,以进行所述目标动效信息的播放。
具体地,所述播放目标动效信息的方法可以通过requestAnimationFrame从缓存区中读取处理好的图像信息,图像绘制标签中可以执行将像素信息放到播放画面上的脚本,可以将像素信息转换为对应的动效画面,所以利用非离屏图像绘制标签将动效绘制到页面上。所述图像绘制标签为canvas标签,执行图像绘制方法为putImageData。所述播放方法同样可以应用于预处理动效信息,进行预处理动效信息的播放。
在一个具体的示例中,请参见图9,通过用户的操作触发动效播放指令,例如在直播场景中,用户点击礼物图标给主播送礼,此时礼物的图案会以透明动效的形式出现在用户界面上。用户点击礼物图标的行为相当于触发了动效播放指令。在触发动效播放指令后,寻找在缓存区域内是否存储有预处理动效视频,所述预处理动效视频能够直接进行动画效果的绘制,将礼物图标的效果展现在用户终端的屏幕上。当没有与动效播放指令匹配的预处理动效视频时,创建离屏处理进程,在所述离屏处理进程中加载与动效播放指令匹配的原始动效视频。通过离屏渲染或者Web Worker的方法,提取原始动效视频中每帧像素的动效画面数据和遮罩层数据,并合成所述动效画面数据和遮罩层数据,以获取这帧像素的目标动效视频。将每一帧目标动效视频传输到帧缓存区域进行缓存。调用目标动效视频,将目标动效视频绘制到在用户界面上,逐帧播放,呈现出动画效果。
本实施例提出了一种特效画面生成方法,所述方法响应于动效播放指令,查找与动效播放指令匹配的预处理动效信息,若存在则调用所述预处理动效信息进行动效播放,若不存在,则加载与动效播放指令匹配的原始动效信息,在离屏进程中,通过离屏渲染或者Web Worker的方法对原始动效信息进行图像处理,提取所述原始动效信息中的动效画面数据和遮罩层数据,并合成所述动效画面数据和遮罩层数据,获得目标动效信息。传输目标动效信息到缓存区域中并播放所述目标动效信息。进一步地,所述有益效果包括:
(1)通过预处理和离屏渲染的方法,将透明动效数据预先处理和缓存,减少了实际播放动效时的调用浏览器API的次数和CPU计算开销;
(2)相对于实时处理方案,缓存读取的方法能够保证透明动效播放时帧数的稳定,带给用户流畅舒适的用户体验;
(3)在透明动效分辨率较高和动效种类较多的场景中高效流畅地在网络应用程序中播放和切换多个透明动效。
本发明实施例还提供了一种特效画面生成装置,请参见图10,所述装置包括:缓存动效查找模块1010、原始动效获取模块1020、离屏图像处理模块1030、目标动效缓存模块1040和目标动效播放模块1050;
所述缓存信息查找模块1010用于响应于动效播放指令,查找预处理动效信息,以得到查找结果;
所述原始动效获取模块1020用于若所述查找结果不存在,则根据所述动效播放指令,获取原始动效信息;
所述离屏图像处理模块1030用于创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息;
所述目标动效缓存模块1040用于传输所述目标动效信息到播放缓存区中进行缓存;
所述目标动效播放模块1050用于将播放缓存区中缓存的所述目标动效信息绘制到当前播放页面上,以进行所述目标动效信息的播放。
进一步地,请参见图11,所述装置还包括:基础信息获取模块1110、加载进程执行模块1120、加载进程监听模块1130、预处理模块1140和预设信息存储模块1150;
所述基础信息获取模块用于获取基础动效信息,所述基础动效信息为对图像进行基础处理的信息;
所述加载进程执行模块用于根据所述基础动效信息,加载每个原始动效信息;
所述加载进程监听模块用于监听每个所述原始动效信息的加载进程,以获取每个所述原始动效信息对应的加载结束信息;
所述预处理模块用于响应于所述加载结束信息,对每个所述原始动效信息进行图像处理,得到每个所述原始动效信息对应的预处理动效信息;
所述预设信息存储模块用于存储所述预处理动效信息。
进一步地,请参见图12,所述离屏图像处理模块包括离屏进程创建单元1210、离屏进程切换单元1220、原始动效加载单元1230、数据提取单元1240、数据合成单元1250和数据传输单元1260:
所述离屏进程创建单元1210用于创建离屏处理缓冲区;
所述离屏进程切换单元1220用于切换播放缓存区到所述离屏处理缓冲区,以在离屏处理缓冲区中进行原始动效信息的处理;
所述原始动效加载单元1230用于加载所述原始动效信息到离屏处理进程中;
所述数据提取单元1240用于提取所述原始动效信息中的动效画面数据和遮罩层数据,所述动效画面数据为待进行特效处理的画面数据,所述遮罩层数据为具有特效素材的数据;
所述数据合成单元1250用于合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息;
所述数据传输单元1260用于切换离屏处理缓冲区到播放缓存区,以将目标动效信息传输到播放缓存区中。
上述实施例中提供的装置可执行本发明任意实施例所提供方法,具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节,可参见本发明任意实施例所提供的一种特效画面生成方法。
本实施例还提供了一种计算机可读存储介质,所述存储介质中存储有计算机可执行指令,所述计算机可执行指令由处理器加载并执行本实施例上述的一种特效画面生成方法。
本实施例还提供了一种设备,所述设备包括处理器和存储器,其中,所述存储器存储有计算机程序,所述计算机程序适于由所述处理器加载并执行本实施例上述的一种特效画面生成方法。
所述设备可以为计算机终端、移动终端或服务器,所述设备还可以参与构成本发明实施例所提供的装置或系统。如图13所示,移动终端13(或计算机终端13或服务器13)可以包括一个或多个(图中采用1302a、1302b,……,1302n来示出)处理器1302(处理器1302可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储信息的存储器1304、以及用于通信功能的传输装置1306。除此以外,还可以包括:显示器、输入/输出接口(I/O接口)、网络接口、电源和/或相机。本领域普通技术人员可以理解,图13所示的结构仅为示意,其并不对上述电子装置的结构造成限定。例如,移动设备13还可包括比图13中所示更多或者更少的组件,或者具有与图13所示不同的配置。
应当注意到的是上述一个或多个处理器1302和/或其他信息处理电路在本文中通常可以被称为“信息处理电路”。该信息处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外,信息处理电路可为单个独立的处理模块,或全部或部分的结合到移动设备13(或计算机终端)中的其他元件中的任意一个内。如本申请实施例中所涉及到的,该信息处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。
存储器1304可用于存储应用软件的软件程序以及模块,如本发明实施例中所述的方法对应的程序指令/信息存储装置,处理器1302通过运行存储在存储器1304内的软件程序以及模块,从而执行各种功能应用以及信息处理,即实现上述的一种基于自注意力网络的时序行为捕捉框生成方法。存储器1304可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器1304可进一步包括相对于处理器1302远程设置的存储器,这些远程存储器可以通过网络连接至移动设备13。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输装置1306用于经由一个网络接收或者发送信息。上述的网络具体实例可包括移动终端13的通信供应商提供的无线网络。在一个实例中,传输装置1306包括一个网络适配器(Network Interface Controller,NIC),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,传输装置1306可以为射频(Radio Frequency,RF)模块,其用于通过无线方式与互联网进行通讯。
显示器可以例如触摸屏式的液晶显示器(LCD),该液晶显示器可使得用户能够与移动设备13(或计算机终端)的用户界面进行交互。
本说明书提供了如实施例或流程图所述的方法操作步骤,但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤和顺序仅仅为众多步骤执行顺序中的一种方式,不代表唯一的执行顺序。在实际中的系统或中断产品执行时,可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。
本实施例中所示出的结构,仅仅是与本申请方案相关的部分结构,并不构成对本申请方案所应用于其上的设备的限定,具体的设备可以包括比示出的更多或更少的部件,或者组合某些部件,或者具有不同的部件的布置。应当理解到,本实施例中所揭露的方法、装置等,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述模块的划分仅仅为一种逻辑功能的划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元模块的间接耦合或通信连接。
基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,RandomAccess Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
本领域技术人员还可以进一步意识到,结合本说明书所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、计算机软件或者二者的结合实现,为了清楚地说明硬件和软件的可互换性,在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但这种实现不应认为超出本发明的范围。
以上所述,以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种特效画面生成方法,其特征在于,所述方法包括:
响应于动效播放指令,查找预处理动效信息,以得到查找结果,所述预处理动效信息为预先进行原始动效信息的处理并缓存的信息;
若所述查找结果不存在,则根据所述动效播放指令,获取与所述动效播放指令匹配的原始动效信息;
创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息;
传输所述目标动效信息到播放缓存区中进行缓存;
将播放缓存区中缓存的所述目标动效信息绘制到当前播放页面上,以进行所述目标动效信息的播放。
2.根据权利要求1所述的一种特效画面生成方法,其特征在于,所述响应于动效播放指令,查找预处理动效信息,以得到查找结果之后,还包括:
若查找结果存在,则读取所述预处理动效信息;
将所述预处理动效信息绘制到当前播放页面上,以进行所述预处理动效信息的播放。
3.根据权利要求2所述的一种特效画面生成方法,其特征在于,所述响应于动效播放指令,查找预处理动效信息,以得到查找结果之前,还包括:
依次加载原始动效信息;
监听每个所述原始动效信息的加载进程,以获取每个所述原始动效信息对应的加载结束信息;
响应于所述加载结束信息,对每个所述原始动效信息进行图像处理,得到每个所述原始动效信息对应的预处理动效信息;
存储所述预处理动效信息。
4.根据权利要求1所述的一种特效画面生成方法,其特征在于,所述创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息包括:
创建离屏处理缓冲区;
切换播放缓存区到所述离屏处理缓冲区,以在离屏处理缓冲区中进行原始动效信息的处理;
加载所述原始动效信息到离屏处理进程中;
提取所述原始动效信息中的动效画面数据和遮罩层数据,所述动效画面数据为待进行特效处理的画面数据,所述遮罩层数据为具有特效素材的数据;
合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息;
切换离屏处理缓冲区到播放缓存区,以将目标动效信息传输到播放缓存区中。
5.根据权利要求1所述的一种特效画面生成方法,其特征在于,所述创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息还包括:
创建网络后台工作进程;
绑定信息传送事件,以进行数据传输;
切换播放缓存区到网络后台工作进程,以在网络后台工作进程中进行原始动效信息的处理;
加载所述原始动效信息到网络后台工作进程中;
提取所述原始动效信息中的动效画面数据和遮罩层数据,所述动效画面数据为待进行特效处理的画面数据,所述遮罩层数据为具有特效素材的数据;
合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息;
执行所述信息传送事件传输所述目标动效信息到播放缓存区。
6.根据权利要求4或5所述的一种特效画面生成方法,其特征在于,所述提取所述原始动效信息中的动效画面数据和遮罩层数据包括:
执行预设的离屏图像处理程序进行图像提取参数的设置;
根据所述图像提取参数,提取所述原始动效信息中的动效画面数据和遮罩层数据。
7.根据权利要求4或5所述的一种特效画面生成方法,其特征在于,所述合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息包括:
获取所述动效画面数据的色值参数;
获取所述遮罩层数据的特效参数;
合成所述色值参数和所述特效参数,以得到目标动效信息。
8.一种特效画面生成装置,其特征在于,所述装置包括:缓存动效查找模块、原始动效获取模块、离屏图像处理模块、目标动效缓存模块和目标动效播放模块;
所述缓存信息查找模块用于响应于动效播放指令,查找预处理动效信息,以得到查找结果;
所述原始动效获取模块用于若所述查找结果不存在,则根据所述动效播放指令,获取原始动效信息;
所述离屏图像处理模块用于创建离屏处理进程,并基于所述离屏处理进程对所述原始动效信息进行处理,得到目标动效信息;
所述目标动效缓存模块用于传输所述目标动效信息到播放缓存区中进行缓存;
所述目标动效播放模块用于将播放缓存区中缓存的所述目标动效信息绘制到当前播放页面上,以进行所述目标动效信息的播放。
9.根据权利要求8所述的一种特效画面生成装置,其特征在于,所述装置还包括:基础信息获取模块、加载进程执行模块、加载进程监听模块、预处理模块和预设信息存储模块;
所述基础信息获取模块用于获取基础动效信息,所述基础动效信息为对图像进行基础处理的信息;
所述加载进程执行模块用于根据所述基础动效信息,加载每个原始动效信息;
所述加载进程监听模块用于监听每个所述原始动效信息的加载进程,以获取每个所述原始动效信息对应的加载结束信息;
所述预处理模块用于响应于所述加载结束信息,对每个所述原始动效信息进行图像处理,得到每个所述原始动效信息对应的预处理动效信息;
所述预设信息存储模块用于存储所述预处理动效信息。
10.根据权利要求8所述的一种特效画面生成装置,其特征在于,所述离屏图像处理模块包括离屏进程创建单元、离屏进程切换单元、原始动效加载单元、数据提取单元、数据合成单元和数据传输单元:
所述离屏进程创建单元用于创建离屏处理缓冲区;
所述离屏进程切换单元用于切换播放缓存区到所述离屏处理缓冲区,以在离屏处理缓冲区中进行原始动效信息的处理;
所述原始动效加载单元用于加载所述原始动效信息到离屏处理进程中;
所述数据提取单元用于提取所述原始动效信息中的动效画面数据和遮罩层数据,所述动效画面数据为待进行特效处理的画面数据,所述遮罩层数据为具有特效素材的数据;
所述数据合成单元用于合成所述动效画面数据和所述遮罩层数据,以得到目标动效信息;
所述数据传输单元用于切换离屏处理缓冲区到播放缓存区,以将目标动效信息传输到播放缓存区中。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910784357.6A CN112419456B (zh) | 2019-08-23 | 2019-08-23 | 一种特效画面生成方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910784357.6A CN112419456B (zh) | 2019-08-23 | 2019-08-23 | 一种特效画面生成方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112419456A true CN112419456A (zh) | 2021-02-26 |
CN112419456B CN112419456B (zh) | 2024-04-16 |
Family
ID=74779701
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910784357.6A Active CN112419456B (zh) | 2019-08-23 | 2019-08-23 | 一种特效画面生成方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112419456B (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114257829A (zh) * | 2021-12-20 | 2022-03-29 | 北京字跳网络技术有限公司 | 一种直播间的资源处理方法、装置、设备以及存储介质 |
CN114942795A (zh) * | 2022-04-29 | 2022-08-26 | 湖南茶旅云科技有限公司 | 小程序里直播礼物数据的加载方法、电子装置及存储介质 |
Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2013009090A (ja) * | 2011-06-23 | 2013-01-10 | For-A Co Ltd | 映像特殊効果装置と映像特殊効果装置の映像信号処理方法 |
US20140313231A1 (en) * | 2013-04-08 | 2014-10-23 | Broadcom Corporation | System And Method For Graphics Upscaling |
US20150169535A1 (en) * | 2013-12-13 | 2015-06-18 | impulseGUIDE.com | Method for displaying customized compilation media items on an electronic display device |
CN105933724A (zh) * | 2016-05-23 | 2016-09-07 | 福建星网视易信息系统有限公司 | 视频制作方法、装置及系统 |
CN105976415A (zh) * | 2016-05-20 | 2016-09-28 | 腾讯科技(深圳)有限公司 | 一种遮罩显示处理方法和装置 |
CN107277616A (zh) * | 2017-07-21 | 2017-10-20 | 广州爱拍网络科技有限公司 | 视频特效渲染方法、装置及终端 |
CN108881997A (zh) * | 2018-07-24 | 2018-11-23 | 北京奇艺世纪科技有限公司 | 动画文件生成及播放方法、装置和系统 |
CN108900858A (zh) * | 2018-08-09 | 2018-11-27 | 广州酷狗计算机科技有限公司 | 一种赠送虚拟礼物的方法和装置 |
CN109168068A (zh) * | 2018-08-23 | 2019-01-08 | Oppo广东移动通信有限公司 | 视频处理方法、装置、电子设备及计算机可读介质 |
CN109218802A (zh) * | 2018-08-23 | 2019-01-15 | Oppo广东移动通信有限公司 | 视频处理方法、装置、电子设备及计算机可读介质 |
CN109254747A (zh) * | 2018-09-14 | 2019-01-22 | 三星电子(中国)研发中心 | 控制移动终端屏幕闪烁的方法和设备 |
CN109640173A (zh) * | 2019-01-11 | 2019-04-16 | 腾讯科技(深圳)有限公司 | 一种视频播放方法、装置、设备及介质 |
CN109963162A (zh) * | 2017-12-25 | 2019-07-02 | 阿里巴巴集团控股有限公司 | 一种云导播系统及直播处理方法、装置 |
-
2019
- 2019-08-23 CN CN201910784357.6A patent/CN112419456B/zh active Active
Patent Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2013009090A (ja) * | 2011-06-23 | 2013-01-10 | For-A Co Ltd | 映像特殊効果装置と映像特殊効果装置の映像信号処理方法 |
US20140313231A1 (en) * | 2013-04-08 | 2014-10-23 | Broadcom Corporation | System And Method For Graphics Upscaling |
US20150169535A1 (en) * | 2013-12-13 | 2015-06-18 | impulseGUIDE.com | Method for displaying customized compilation media items on an electronic display device |
CN105976415A (zh) * | 2016-05-20 | 2016-09-28 | 腾讯科技(深圳)有限公司 | 一种遮罩显示处理方法和装置 |
CN105933724A (zh) * | 2016-05-23 | 2016-09-07 | 福建星网视易信息系统有限公司 | 视频制作方法、装置及系统 |
CN107277616A (zh) * | 2017-07-21 | 2017-10-20 | 广州爱拍网络科技有限公司 | 视频特效渲染方法、装置及终端 |
CN109963162A (zh) * | 2017-12-25 | 2019-07-02 | 阿里巴巴集团控股有限公司 | 一种云导播系统及直播处理方法、装置 |
CN108881997A (zh) * | 2018-07-24 | 2018-11-23 | 北京奇艺世纪科技有限公司 | 动画文件生成及播放方法、装置和系统 |
CN108900858A (zh) * | 2018-08-09 | 2018-11-27 | 广州酷狗计算机科技有限公司 | 一种赠送虚拟礼物的方法和装置 |
CN109168068A (zh) * | 2018-08-23 | 2019-01-08 | Oppo广东移动通信有限公司 | 视频处理方法、装置、电子设备及计算机可读介质 |
CN109218802A (zh) * | 2018-08-23 | 2019-01-15 | Oppo广东移动通信有限公司 | 视频处理方法、装置、电子设备及计算机可读介质 |
CN109254747A (zh) * | 2018-09-14 | 2019-01-22 | 三星电子(中国)研发中心 | 控制移动终端屏幕闪烁的方法和设备 |
CN109640173A (zh) * | 2019-01-11 | 2019-04-16 | 腾讯科技(深圳)有限公司 | 一种视频播放方法、装置、设备及介质 |
Non-Patent Citations (2)
Title |
---|
DEQUAL: "关于离屏渲染", pages 1 - 3, Retrieved from the Internet <URL:www.jianshu.com/p/24dac847cfc4> * |
邢素萍: "巧用Flash 移动遮罩技术制作特效动画", 《软件导刊》, vol. 13, no. 12, pages 134 - 136 * |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114257829A (zh) * | 2021-12-20 | 2022-03-29 | 北京字跳网络技术有限公司 | 一种直播间的资源处理方法、装置、设备以及存储介质 |
CN114257829B (zh) * | 2021-12-20 | 2024-02-13 | 北京字跳网络技术有限公司 | 一种直播间的资源处理方法、装置、设备以及存储介质 |
CN114942795A (zh) * | 2022-04-29 | 2022-08-26 | 湖南茶旅云科技有限公司 | 小程序里直播礼物数据的加载方法、电子装置及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN112419456B (zh) | 2024-04-16 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111681167B (zh) | 画质调整方法和装置、存储介质及电子设备 | |
US20220007083A1 (en) | Method and stream-pushing client for processing live stream in webrtc | |
CN106021421B (zh) | 一种加速网页渲染的方法及装置 | |
CN113099298B (zh) | 虚拟形象的改变方法、装置和终端设备 | |
CN110989878B (zh) | 小程序中的动画展示方法、装置、电子设备及存储介质 | |
US20160112757A1 (en) | Server, client and video processing method | |
CN110795097B (zh) | 一种页面处理方法、装置、计算机设备以及存储介质 | |
EP3917131A1 (en) | Image deformation control method and device and hardware device | |
CN110750664B (zh) | 图片的显示方法及装置 | |
CN114331820A (zh) | 图像处理方法、装置、电子设备及存储介质 | |
CN107480153A (zh) | 一种页面数据处理方法、客户端及终端设备 | |
CN109672902A (zh) | 一种视频抽帧方法、装置、电子设备和存储介质 | |
US20240129576A1 (en) | Video processing method, apparatus, device and storage medium | |
CN112419456B (zh) | 一种特效画面生成方法和装置 | |
CN112307403A (zh) | 页面渲染方法、装置、存储介质以及终端 | |
CN114003160A (zh) | 数据可视化展示方法、装置、计算机设备和存储介质 | |
CN109587561A (zh) | 视频处理方法、装置、电子设备及存储介质 | |
CN111107264A (zh) | 图像处理方法、装置、存储介质以及终端 | |
KR102617789B1 (ko) | 픽처 처리 방법 및 디바이스, 저장 매체 그리고 전자 장치 | |
CN111343472B (zh) | 一种图像处理效果的调节方法、装置、设备及介质 | |
CN114489910A (zh) | 一种视频会议数据显示方法、装置、设备及介质 | |
WO2016154816A1 (zh) | 数据处理方法及装置 | |
CN105867769B (zh) | 图片切换方法、装置以及用户终端 | |
CN117437490B (zh) | 一种服装信息的处理方法、装置、电子设备和存储介质 | |
CN112752131B (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 |