CN107707965B - 一种弹幕的生成方法和装置 - Google Patents

Abstract

本申请实施例提供了一种弹幕的生成方法和装置，所述方法包括：接收输入的一条或多条信息；根据所述一条或多条信息，绘制纹理贴图；将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕，使得渲染进程独立于网页进程，二者互相独立，互不干扰，解决了已有技术中在生成弹幕时会触发浏览器的重新绘制排版，需要消耗大量的网页页面资源的问题。

Description

一种弹幕的生成方法和装置

技术领域

本申请涉及计算机技术领域，特别是涉及一种弹幕的生成方法和一种弹幕的生成装置。

背景技术

“弹幕”是将用户评论以动画的形式播放在网页特定区域，以此增强用户娱乐性的功能。弹幕的出现增强了原本单一的视频浏览模式，用户在观看视频时，视屏区域同时会飘过其他用户的相关评论，以此引起用户观影共鸣。目前，大部分视频站点均可以向用户提供弹幕功能。

在已有技术中，大部分视频网站的弹幕均是基于DOM(Document Object Model，文档对象模型)方案实现的，即创建包含用户评论内容的DOM元素，并将这些元素添加到视频播放区域，然后通过调整CSS(Cascading Style Sheets，层叠样式表)属性变换其位置，从而实现动画效果。通过DOM动画的方式生成弹幕简单快捷，但是上述方案会触发浏览器的重新绘制排版，当网页内容较多时，这样的操作需要大量时间，同时，浏览器在绘制时容易出现动画掉帧的情况，使得弹幕在播放时出现严重的卡顿现象，严重的，甚至还会影响原网页的用户交互。

发明内容

鉴于上述问题，提出了本申请实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种弹幕的生成方法和相应的一种弹幕的生成装置。

为了解决上述问题，本申请公开了一种弹幕的生成方法，包括：

接收输入的一条或多条信息；

根据所述一条或多条信息，绘制纹理贴图；

将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕。

可选地，所述根据所述一条或多条信息，绘制纹理贴图的步骤包括：

分别将所述一条或多条信息渲染成一条或多条贴图对象；

采用所述一条或多条贴图对象，生成纹理贴图。

可选地，在采用所述一条或多条贴图对象，生成纹理贴图的步骤前，还包括：

获取终端的屏幕逻辑尺寸大小；

根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小。

可选地，所述根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小的步骤包括：

判断所述终端的屏幕是否为高清屏幕；

若是，则确定所述纹理贴图的大小为所述屏幕逻辑尺寸大小的预设倍数，所述预设倍数大于等于两倍；

若否，则确定所述纹理贴图的大小与所述屏幕逻辑尺寸大小相同。

可选地，所述采用所述一条或多条贴图对象，生成纹理贴图的步骤包括：

按照预设间距对所述一条或多条贴图对象进行排版，形成纹理贴图。

可选地，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕的步骤包括：

获取所述一条或多条贴图对象的位置数据；

分别变换所述一条或多条贴图对象的位置数据，以生成弹幕。

可选地，所述位置数据包括动画可视区域坐标数据，所述分别变换所述一条或多条贴图对象的位置数据，以生成弹幕的步骤包括：

针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

变换所述图形变化矩阵，生成弹幕。

可选地，所述图形变化矩阵中包括多个矩阵数据，所述变换所述图形变化矩阵，生成弹幕的步骤包括：

当所述浏览器触发动画刷新时，按照预设阈值变换所述图形变化矩阵中的多个矩阵数据。

为了解决上述问题，本申请还公开了一种弹幕的生成装置，包括：

接收模块，用于接收输入的一条或多条信息；

绘制模块，用于根据所述一条或多条信息，绘制纹理贴图；

传输模块，用于将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕。

可选地，所述绘制模块包括：

贴图对象渲染子模块，用于分别将所述一条或多条信息渲染成一条或多条贴图对象；

纹理贴图生成子模块，用于采用所述一条或多条贴图对象，生成纹理贴图。

可选地，还包括：

屏幕逻辑尺寸大小获取子模块，用于获取终端的屏幕逻辑尺寸大小；

纹理贴图大小确定子模块，用于根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小。

可选地，所述纹理贴图大小确定子模块包括：

判断单元，用于判断所述终端的屏幕是否为高清屏幕；

第一确定单元，用于在判断所述终端的屏幕为高清屏幕时，确定所述纹理贴图的大小为所述屏幕逻辑尺寸大小的预设倍数，所述预设倍数大于等于两倍；

第二确定单元，用于在判断所述终端的屏幕不为高清屏幕时，确定所述纹理贴图的大小与所述屏幕逻辑尺寸大小相同。

可选地，所述纹理贴图生成子模块包括：

纹理贴图生成单元，用于按照预设间距对所述一条或多条贴图对象进行排版，形成纹理贴图。

可选地，所述浏览器WebGL接口通过调用如下模块生成弹幕：

位置数据获取模块，用于获取所述一条或多条贴图对象的位置数据；

弹幕生成模块，用于分别变换所述一条或多条贴图对象的位置数据，以生成弹幕。

可选地，所述位置数据包括动画可视区域坐标数据，所述弹幕生成模块包括：

图形变化矩阵生成子模块，用于针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

图形变化矩阵变换子模块，用于变换所述图形变化矩阵，生成弹幕。

可选地，所述图形变化矩阵中包括多个矩阵数据，所述图形变化矩阵变换子模块包括：

变换单元，用于在所述浏览器触发动画刷新时，按照预设阈值变换所述图形变化矩阵中的多个矩阵数据。

与背景技术相比，本申请实施例包括以下优点：

本申请实施例，通过将接收到的一条或多条信息绘制成纹理贴图，并传入浏览器WebGL接口，然后由浏览器WebGL接口根据该纹理贴图生成弹幕，由于本实施例通过GPU进行动画渲染，使得渲染进程独立于网页进程，二者互相独立，互不干扰，解决了已有技术中在生成弹幕时会触发浏览器的重新绘制排版，需要消耗大量的网页页面资源的问题。

附图说明

图1是本申请的一种弹幕的生成方法实施例一的步骤流程图；

图2是本申请的一种纹理贴图的示意图；

图3是本申请的一种弹幕的生成方法实施例二的步骤流程图；

图4是本申请的一种弹幕的生成方法实施例三的步骤流程图；

图5A-5B是采用本申请一种弹幕的生成方法在不同的网站的效果图；

图6是本申请的一种弹幕的生成装置实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

参照图1，示出了本申请的一种弹幕的生成方法实施例一的步骤流程图，具体可以包括如下步骤：

步骤101，接收输入的一条或多条信息；

一般地，用户所输入的信息可以包括文本信息、表情符号、图片或者语音等，本申请对一条或多条信息的具体内容及形式不作限定。

通常，在浏览器的指定位置可以具有弹幕输入窗口，用户在观看视频或浏览网页内容时，能够通过该窗口输入信息，然后通过点击发送按钮完成信息的输入，使浏览器接收到所输入的信息。当然，用户还可以通过其他方式实现信息的输入，例如，通过麦克风等辅助设备输入语音等，本申请对用户完成信息输入的具体方式不作限定。

步骤102，根据所述一条或多条信息，绘制纹理贴图；

纹理贴图也称作纹理，是表示物体表面的一幅或几幅二维图形，绘制纹理贴图是计算机图形系统中一种常见的渲染方法。当把纹理按照特定的方式映射到物体表面上的时候，能使物体看上去更加真实。在理解纹理映射时，可以将纹理看做应用在物体表面的像素颜色。在真实世界中，纹理可以表示一个对象的颜色、图案以及触觉特征，而在计算机图形处理中，纹理只表示对象表面的图案，它不能改变对象的几何形式。更进一步的说，它只是一种高强度的计算行为。

在本申请实施例中，在接收到用户输入的一条或多条信息后，可以分别将一条或多条信息渲染成一条或多条贴图对象，然后采用一条或多条贴图对象，生成纹理贴图。

在具体实现中，可以采用Canvas2D对接收到的信息进行Off-Screen(离屏)绘制，从而得到一条或多条贴图对象，然后对绘制好的贴图对象进行排版，从而得到相应的纹理贴图。

Off-Screen绘制，是指GPU(Graphics Processing Unit，图形处理器)在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

Canvas是HTML5(HyperText Markup Language 5，超级文本标记语言第5版)新引入的元素，它是一个画布。开发者可以用JavaScript脚本在该元素上绘制任意图形(2D或者3D)。Canvas元素有两个属性“width”和“height”，用来设置画布的宽度的高度。Canvas本身并没有定义绘制图形的动作和行为，只是提供了一个获取绘图的上下文(context)对象的方法getContext来获取绘制2D或者3D上下文。Canvas的getContext方法包含一个参数，该参数可以用来指定创建上下文对象的类型。对于2D的图形操作，通过传递参数值’2D’，浏览器可以返回一个2D的绘图上下文，称为CanvasRenderingContext2D，它提供了用于绘制2D图形的各种API(Application Programming Interface，应用程序编程接口)，包括基本图形绘制(例如线，矩形，圆弧)，文字绘制，图形变换，图片绘制及合成等，以上这些被统称为Canvas2D。

作为一种本申请实施例的一种示例，可以通过如下代码获得如图2所示的纹理贴图。

步骤103，将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕。

在本申请实施例中，在生成纹理贴图后，可以将该纹理贴图传入浏览器的WebGL接口中，然后由浏览器的WebGL接口根据传入的纹理贴图生成弹幕。

WebGL是一种绘图标准，这种绘图标准允许把JavaScript脚本和OpenGL(OpenGraphics Library，开放图形库)结合在一起，通过增加OpenGL的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示场景和模型了，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂结构的网站页面。

在具体实现中，WebGL接口可以对传入的纹理贴图进行渲染，通过变化贴图对象的位置，使弹幕产生位移，形成动画效果。

在本申请实施例中，通过将接收到的一条或多条信息绘制成纹理贴图，并传入浏览器WebGL接口，然后由浏览器WebGL接口根据该纹理贴图生成弹幕，由于本实施例通过GPU进行动画渲染，使得渲染进程独立于网页进程，二者互相独立，互不干扰，解决了已有技术中在生成弹幕时会触发浏览器的重新绘制排版，需要消耗大量的网页页面资源的问题。

参照图3，示出了本申请的一种弹幕的生成方法实施例二的步骤流程图，具体可以包括如下步骤：

步骤301，接收输入的一条或多条信息；

在本申请实施例中，用户可以通过浏览器指定位置的弹幕输入窗口，输入文本信息、表情符号、图片等信息，作为后续发表的弹幕内容。浏览器能够实时地接收到上述信息。

步骤302，分别将所述一条或多条信息渲染成一条或多条贴图对象；

在本申请实施例中，可以采用Canvas2D对接收到的一条或多条信息进行Off-Screen绘制，得到一条或多条贴图对象。通常，用户所输入的一条信息对应于一条贴图对象。

在具体实现中，可以根据用户输入的信息的内容，例如，用户输入的文本的长度，以及设定的字体、颜色等，将接收到每一条信息转化成相应的贴图对象。

步骤303，采用所述一条或多条贴图对象，生成纹理贴图；

在本申请实施例中，在采用所述一条或多条贴图对象，生成纹理贴图的步骤前，还可以包括如下步骤：

S11，获取终端的屏幕逻辑尺寸大小；

S12，根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小。

在具体实现中，可以通过当前终端屏幕的物理属性，例如，屏幕的显示区域大小，逻辑尺寸大小，分辨率等等，确定所要生成的纹理贴图的大小。

在本申请的一种优选实施例中，所述根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小的步骤具体可以包括如下子步骤：

子步骤S121，判断所述终端的屏幕是否为高清屏幕；

子步骤S122，若是，则确定所述纹理贴图的大小为所述屏幕逻辑尺寸大小的预设倍数，所述预设倍数大于等于两倍；

子步骤S123，若否，则确定所述纹理贴图的大小与所述屏幕逻辑尺寸大小相同。

在具体实现中，可以首先判断终端的显示屏幕是否为高清屏幕，例如是否为Retina屏幕。Retina是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素，也被称为视网膜显示屏。当然，高清屏幕不仅仅局限于Retina屏幕，还可以是其他类型的较高分辨率的屏幕，本领域技术人员可以根据实际需要确定本实施例中高清屏幕的分辨率的具体数值大小，本申请对此不作限定。

通常，在普通的显示屏幕下，设备显示像素和设备物理像素相同，通过Off-Screen绘制的纹理贴图和动画呈现的视窗大小相同即可，而在高清屏幕下，一个设备的显示像素可以包含多个设备物理像素，如果在高清屏幕下根据显示像素绘制弹幕文字，就会出现严重的锯齿效果。

因此，为了避免所生成的弹幕在高清屏幕出现锯齿，在实际绘制中，可以确定所要绘制的纹理贴图的大小为屏幕逻辑尺寸大小的一定倍数，例如两倍或三倍，然后在呈现动画效果时，将动画播放的视窗缩小相应的倍数，使得与设备的显示区域大小相同，以避免锯齿的出现。

在确定出所要绘制的纹理贴图的大小后，可以按照预设间距对渲染出的一条或多条贴图对象进行排版，形成纹理贴图。

步骤304，将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕。

在本申请实施例中，在生成纹理贴图后，可以将该纹理贴图传入浏览器的WebGL接口中，然后由浏览器的WebGL接口根据传入的纹理贴图生成弹幕。

在本申请实施例中，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕具体可以包括如下步骤：

S21，获取所述一条或多条贴图对象的位置数据；

S22，分别变换所述一条或多条贴图对象的位置数据，以生成弹幕。

在具体实现中，在采用Canvas2D对接收到的信息进行Off-Screen绘制生成贴图对象，并绘制出纹理贴图后，可以从每一条贴图对象中获得其相应的位置数据。通常，贴图对象的位置数据可以包括动画可视区域坐标数据以及对应的纹理贴图位置坐标数据。

动画可视区域坐标数据是指该贴图对象相对于终端屏幕的显示区域的坐标，而纹理贴图位置坐标数据则是该贴图对象在所绘制的纹理贴图中的位置的坐标数据，一般地，对于同一个贴图对象，其纹理贴图位置坐标数据是固定不变的。

然后，在浏览器触发动画刷新时，可以按照预设阈值变换每一条贴图对象的动画可视区域坐标数据，通过动画可视区域坐标数据的改变，使得贴图对象在终端屏幕上出现相应阈值的位移，从而生成弹幕。

在本申请的一种优选实施例中，所述分别变换所述一条或多条贴图对象的位置数据，以生成弹幕的步骤可以进一步包括如下子步骤：

子步骤S221，针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

子步骤S222，变换所述图形变化矩阵，生成弹幕。

通常，一条贴图对象的动画可视区域坐标数据可以包括四个位置的坐标数据，从而根据该四个位置的坐标数据可以确定一条贴图对象在终端屏幕上的具体位置。

在本申请实施例中，为了减少生成弹幕时对动画可视区域坐标数据的变换次数，可以根据每一条贴图对象的动画可视区域坐标数据生成图形变化矩阵，通过设置一个全局变量，在浏览器每次触发动画刷新时，通过对全局变量进行变换，使每一条贴图对象的动画可视区域坐标数据均变换相同的数值，从而呈现出弹幕在浏览器显示区域中进行位移的动画效果。

在本申请实施例中，通过使用WebGL技术，充分利用显卡加速，对于极其复杂的弹幕效果，仍能保证在高效率渲染的同时所内存占用较小，而且，基于WebGL技术生成弹幕的过程，只需要在页面中插入一个Canvas元素，不会改变网页本身的结构，通过对于Canvas的灵活定位，能够实现弹幕在不同页面位置的播放。

参照图4，示出了本申请的一种弹幕的生成方法实施例三的步骤流程图，具体可以包括如下步骤：

步骤401，接收输入的一条或多条信息；

在本申请实施例中，用户可以通过浏览器指定位置的弹幕输入窗口，输入文本信息、表情符号、图片等信息，作为后续发表的弹幕内容。浏览器能够实时地接收到上述信息。

步骤402，分别将所述一条或多条信息渲染成一条或多条贴图对象；

在具体实现中，可以采用Canvas2D对接收到的一条或多条信息进行Off-Screen绘制，得到一条或多条贴图对象。

步骤403，按照预设间距对所述一条或多条贴图对象进行排版，形成纹理贴图；

在本申请实施例中，在获得一条或多条贴图对象后，可以按照预设间距采用CSS(Cascading Style Sheets，层叠样式表)属性进行排版，从而获得纹理贴图。

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言，CSS能够保证网页表现与内容分离。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计。

步骤404，将所述纹理贴图传入浏览器WebGL接口；

步骤405，获取所述一条或多条贴图对象的位置数据；

在本申请实施例中，贴图对象的位置数据可以包括动画可视区域坐标数据。通常，一条贴图对象的动画可视区域坐标数据可以包括四个位置的坐标数据，从而根据该四个位置的坐标数据可以确定一条贴图对象在终端屏幕上的具体位置。

步骤406，针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

步骤407，变换所述图形变化矩阵，生成弹幕。

在本申请实施例中，为了减少生成弹幕时对动画可视区域坐标数据的变换次数，可以根据每一条贴图对象的动画可视区域坐标数据生成一个4×4的图形变化矩阵，图形变化矩阵中包括位移，旋转和缩放等多个矩阵数据，通过设置一个全局变量，在浏览器每次触发动画刷新时，通过对全局变量进行变换，使每一条贴图对象的动画可视区域坐标数据均变换相同的数值，从而呈现出弹幕在浏览器显示区域中进行位移的动画效果。

在本申请的一种优选实施例中，所述变换所述图形变化矩阵，生成弹幕的步骤具体可以包括如下子步骤：

子步骤4071，当所述浏览器触发动画刷新时，按照预设阈值变换所述图形变化矩阵中的多个矩阵数据。

在具体实现中，当浏览器触发动画刷新时，可以按照预设阈值变换图形变化矩阵中的多个矩阵数据，从而触发贴图对象在产生位移，旋转，和/或，缩放的动画效果。

在本申请实施例中，可以以CSS属性对贴图对象进行排版，更符合Web程序员的编程模式，同时也能够自定义出更多不同的样式。此外，在浏览器对每帧动画进行刷新前对贴图对象的位置数据进行变换，保证了生成弹幕的高效性。

为了便于理解，下面分别使用WebGL动画方案和DOM动画方案，在不同的网站中插入弹幕动画的实现效果做一对比。其中，测试电脑为一台笔记本电脑，其配置为CPU 1.1GHzIntel Core M，集成显卡Intel HD Graphics5300，内存8G。

1、腾讯新闻网(http://news.qq.com/)，每天有大量的用户在新闻内容后面跟帖评论，网页本身比较简洁，页面元素不复杂，使用DOM动画进行弹幕播放，网页动画维持在50-60FPS(Frames Per Second，每秒传输帧数)之间，在滚动时也不会出现卡顿。使用WebGL动画时，网页一直维持在60FPS，滚动也没有卡顿，不过通过对比，能够发现使用WebGL技术的弹幕在放大缩小动画时更加细腻，如图5A所示，是采用本申请一种弹幕的生成方法在腾讯新闻网的效果图。

2、游民星空(http://www.gamersky.com/)是一个游戏资讯网站，与腾讯新闻网不同的地方在于，其页面中有较多浮动的广告，且浮动的广告偶尔就会出现卡顿，使用DOM弹幕的动画基本维持在40-55FPS之间，在滚动页面时会出现卡顿现象，而使用WebGL技术时则表现流畅，能够稳定在60FPS，滚动页面也没有出现页面卡顿的现象，如图5B所示，是采用本申请一种弹幕的生成方法在游民星空网的效果图。

3、淘宝网(https://www.taobao.com/)页面结构复杂，页面中有大量的图片。在浏览淘宝商品时，网页的内存开销大，淘宝站点本身浏览不会出现卡顿感，但是在使用DOM弹幕之后，网页卡顿明显，网页滚动时甚至出现屏幕闪烁的情况，因此DOM弹幕根本无法在该网站上使用，严重影响网页本身体验。但是使用WebGL动画时则表现良好，维持60FPS，也没有给网页本身增加负担。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。

参照图6，示出了本申请的一种弹幕的生成装置实施例的结构框图，具体可以包括如下模块：

接收模块601，用于接收输入的一条或多条信息；

绘制模块602，用于根据所述一条或多条信息，绘制纹理贴图；

传输模块603，用于将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕。

在本申请实施例中，所述绘制模块602具体可以包括如下子模块：

贴图对象渲染子模块6021，用于分别将所述一条或多条信息渲染成一条或多条贴图对象；

纹理贴图生成子模块6022，用于采用所述一条或多条贴图对象，生成纹理贴图。

在本申请实施例中，所述绘制模块602还可以包括如下子模块：

屏幕逻辑尺寸大小获取子模块6023，用于获取终端的屏幕逻辑尺寸大小；

纹理贴图大小确定子模块6024，用于根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小。

在本申请实施例中，所述纹理贴图大小确定子模块6024具体可以包括如下单元：

判断单元，用于判断所述终端的屏幕是否为高清屏幕；

第一确定单元，用于在判断所述终端的屏幕为高清屏幕时，确定所述纹理贴图的大小为所述屏幕逻辑尺寸大小的预设倍数，所述预设倍数可以大于等于两倍；

第二确定单元，用于在判断所述终端的屏幕不为高清屏幕时，确定所述纹理贴图的大小与所述屏幕逻辑尺寸大小相同。

在本申请实施例中，所述纹理贴图生成子模块6022具体可以包括如下单元：

纹理贴图生成单元，用于按照预设间距对所述一条或多条贴图对象进行排版，形成纹理贴图。

在本申请实施例中，所述浏览器WebGL接口可以通过调用如下模块生成弹幕：

位置数据获取模块604，用于获取所述一条或多条贴图对象的位置数据；

弹幕生成模块605，用于分别变换所述一条或多条贴图对象的位置数据，以生成弹幕。

在本申请实施例中，所述位置数据可以包括动画可视区域坐标数据，所述弹幕生成模块605具体可以包括如下子模块：

图形变化矩阵生成子模块6051，用于针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

图形变化矩阵变换子模块6052，用于变换所述图形变化矩阵，生成弹幕。

在本申请实施例中，所述图形变化矩阵可以中包括多个矩阵数据，所述图形变化矩阵变换子模块6052具体可以包括如下单元：

变换单元，用于在所述浏览器触发动画刷新时，按照预设阈值变换所述图形变化矩阵中的多个矩阵数据。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中，所述计算机设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非持续性的电脑可读媒体(transitory media)，如调制的数据信号和载波。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种弹幕的生成方法和一种弹幕的生成装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (12)

1.一种弹幕的生成方法，其特征在于，包括：

接收经由弹幕输入窗口输入的一条或多条信息；其中，所述一条或多条信息包括文本信息、表情符号、图片或者语音；

根据所述一条或多条信息，绘制纹理贴图；

将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕；

其中，所述根据所述一条或多条信息，绘制纹理贴图的步骤包括：

分别对所述一条或多条信息进行Off-Screem离屏绘制，得到一条或多条贴图对象；

采用所述一条或多条贴图对象，生成纹理贴图；

其中，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕的步骤，包括：

获取所述一条或多条贴图对象的位置数据；

分别变换所述一条或多条贴图对象的位置数据，以生成弹幕。

2.根据权利要求1所述的方法，其特征在于，在采用所述一条或多条贴图对象，生成纹理贴图的步骤前，还包括：

获取终端的屏幕逻辑尺寸大小；

根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小。

3.根据权利要求2所述的方法，其特征在于，所述根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小的步骤包括：

判断所述终端的屏幕是否为高清屏幕；

若是，则确定所述纹理贴图的大小为所述屏幕逻辑尺寸大小的预设倍数，所述预设倍数大于等于两倍；

若否，则确定所述纹理贴图的大小与所述屏幕逻辑尺寸大小相同。

4.根据权利要求2所述的方法，其特征在于，所述采用所述一条或多条贴图对象，生成纹理贴图的步骤包括：

按照预设间距对所述一条或多条贴图对象进行排版，形成纹理贴图。

5.根据权利要求1所述的方法，其特征在于，所述位置数据包括动画可视区域坐标数据，所述分别变换所述一条或多条贴图对象的位置数据，以生成弹幕的步骤包括：

针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

变换所述图形变化矩阵，生成弹幕。

6.根据权利要求5所述的方法，其特征在于，所述图形变化矩阵中包括多个矩阵数据，所述变换所述图形变化矩阵，生成弹幕的步骤包括：

当所述浏览器触发动画刷新时，按照预设阈值变换所述图形变化矩阵中的多个矩阵数据。

7.一种弹幕的生成装置，其特征在于，包括：

接收模块，用于接收经由弹幕输入窗口输入的一条或多条信息；其中，所述一条或多条信息包括文本信息、表情符号、图片或者语音；

绘制模块，用于根据所述一条或多条信息，绘制纹理贴图；

传输模块，用于将所述纹理贴图传入浏览器WebGL接口，所述浏览器WebGL接口用于根据所述纹理贴图生成弹幕；

其中，所述绘制模块包括：

贴图对象渲染子模块，用于分别对所述一条或多条信息进行Off-Screem离屏绘制，得到一条或多条贴图对象；

纹理贴图生成子模块，用于采用所述一条或多条贴图对象，生成纹理贴图；

其中；所述浏览器WebGL接口通过调用如下模块生成弹幕：

位置数据获取模块，用于获取所述一条或多条贴图对象的位置数据；

弹幕生成模块，用于分别变换所述一条或多条贴图对象的位置数据，以生成弹幕。

8.根据权利要求7所述的装置，其特征在于，还包括：

屏幕逻辑尺寸大小获取子模块，用于获取终端的屏幕逻辑尺寸大小；

纹理贴图大小确定子模块，用于根据所述屏幕逻辑尺寸大小，确定所述纹理贴图的大小。

9.根据权利要求8所述的装置，其特征在于，所述纹理贴图大小确定子模块包括：

判断单元，用于判断所述终端的屏幕是否为高清屏幕；

第一确定单元，用于在判断所述终端的屏幕为高清屏幕时，确定所述纹理贴图的大小为所述屏幕逻辑尺寸大小的预设倍数，所述预设倍数大于等于两倍；

第二确定单元，用于在判断所述终端的屏幕不为高清屏幕时，确定所述纹理贴图的大小与所述屏幕逻辑尺寸大小相同。

10.根据权利要求8所述的装置，其特征在于，所述纹理贴图生成子模块包括：

纹理贴图生成单元，用于按照预设间距对所述一条或多条贴图对象进行排版，形成纹理贴图。

11.根据权利要求7所述的装置，其特征在于，所述位置数据包括动画可视区域坐标数据，所述弹幕生成模块包括：

图形变化矩阵生成子模块，用于针对所述一条或多条贴图对象的动画可视区域坐标数据，生成图形变化矩阵；

图形变化矩阵变换子模块，用于变换所述图形变化矩阵，生成弹幕。

12.根据权利要求11所述的装置，其特征在于，所述图形变化矩阵中包括多个矩阵数据，所述图形变化矩阵变换子模块包括：

变换单元，用于在所述浏览器触发动画刷新时，按照预设阈值变换所述图形变化矩阵中的多个矩阵数据。

Images