用于将视频与交互式动态渲染的视觉教具合成的系统

摘要

一种框架包含：场景显示段，该场景显示段被配置成显示场景，所述场景包含背景层、视频层和所述视频层顶部上的三维图形层；以及渲染模块，该渲染模块被配置为添加和移除将被包含用于在所述三维图形层中渲染的对象的守门人。该框架包含：视频模块，该视频模块被配置成跟踪所述视频的定时；以及时刻模块，该时刻模块用于创建用于具有开始时间、结束时间、识别符和状态的时刻的数据模型，所述时刻模块被配置成基于通过所述识别符识别的以及根据所述开始时间和所述结束时间的所述视频播放时序来更新所述时刻的所述状态。被添加以被包含来渲染的对象检查关联的所述时刻的所述状态，且当所述时刻的所述状态被启用时，更新其显示状态。

说明书

技术领域

本公开涉及一种使得能够将视频与交互式动态渲染的视觉教具合成的系统和方法。例如，此类系统和方法可用于增强教育视频。

背景技术

增强教育视频的常规方法包含提供简单伴随文本的辅助教具。其他常规方法包含通过添加伴随的叙述来进行增强。还有其他常规方法已经包含在视频的章节末尾添加多项选择题。随后，虽然常规方法可以帮助观众获得对新思想的更深层次的直观感觉，但是观众只能将纯文本作为辅助材料来阅读，或者简单通过概念被呈现的内容得出自己关于概念的结论。

发明内容

本发明内容以简化形式介绍了一些概念，以便对本公开的一些方面提供基本的理解。本发明内容不是对本公开的广泛概述，且并不旨在识别本公开的关键或重要的元素或描述本公开的范围。本发明内容仅将本公开的一些概念呈现为以下提供的具体实施方式的前序。

本发明的一个方面是可以用于开发与二维和三维可视化系统合成的视频的类的层次结构。本发明的一个方面是片段着色器，其允许交互式可视化系统使用alpha掩码在视频上显示交互式二维和三维图形。本发明的一个方面是提供用于有助于视频与视觉系统之间的定时的函数的类。

本发明的一个方面是当通过鼠标移动从任何角度查看三维图形时的视频播放。本发明的一个方面是与三维图形交互以通过点击各种元素来显示额外的信息层。

本发明的一个方面是用于在Web浏览器中合成视频与三维图形的框架，其包括：一个或多个数据处理设备；至少一个图形处理单元；显示设备；被配置成执行视频的播放的一个或多个数据处理设备，且所述Web浏览器被配置成发送指令到图形处理单元；存储将在Web浏览器中执行的程序的存储器设备；所述程序包含：场景显示段，其被配置成显示包含背景层、视频层和在视频层顶部上的三维图形层的场景；以及渲染模块，其被配置为添加和移除将被包含用于在三维图形层中渲染的对象的守门人。

在本发明的另一方面中，所述框架包含：视频模块，其被配置成跟踪所述视频的播放定时；以及时刻模块，其用于创建用于具有开始时间、结束时间、识别符和状态的时刻的数据模型，所述时刻模块被配置成基于通过所述识别符识别的以及根据所述开始时间和所述结束时间的所述视频播放定时来更新所述时刻的状态,其中被添加以被包含用于渲染的对象检查关联的所述时刻的状态，且当所述时刻的所述状态被启用时，更新其显示状态。

在本发明的另一方面中，所述框架包含场景视频模块，其被配置成通过着色过程来执行着色，所述着色过程渲染对象自身以将对象显示在所述视频层的顶部上，同时在所述对象之间的动画帧的区域中显示所述视频层。

在本发明的另一方面中，所述着色过程包含针对给定坐标计算纹理的颜色值的片段着色器。

在本发明的另一方面中，用于所述时刻的所述数据模型包含相机方向，其中当对象确定关联的时刻的所述状态被启用时，使用相机方向来渲染所述对象。

本发明的一个方面是一种由一个或多个处理器和显示器执行的用于使用交互式动态渲染的三维图形来产生视频的方法，其包括：通过与显示器交互来选择由一个或多个处理器正处理的视频内容的视频帧序列所组成的一个或多个段，所述视频段具有关联的时间段；对于每一选择的视频段：将视频段设置为中间层，添加交互式图形内容作为与所述段相关联的顶部层，配置片段着色器以在视频层顶部上显示交互式图形内容，以及添加背景层；以及根据片段着色器播放与交互式图形内容合成的视频内容，所述交互式图形内容相对于相应视频段的时间段而被渲染。

在本发明的另一方面中，所述方法包含对于每一视频段，将用于相应视频段的时间段存储为时刻数据对象中的开始时间和结束时间，以及使一个或多个图形对象与所述时刻数据对象相关联。

在本发明的另一方面中，所述方法包含将相机方向存储在所述时刻数据对象中。

在本发明的另一方面中，片段着色器针对给定坐标计算纹理的颜色值。

本发明的一个方面是用于使用合成交互式动态渲染的的三维图形来播放视频的方法，其包括：载入具有包含视频内容的一个或多个场景的视频应用；检测场景是否具有关联的交互式图形内容，所述交互式图形内容包含一个或多个三维图形对象和用于与视频内容合成的三维图形对象的着色器；当所述场景包含交互式图形内容时：初始化虚拟相机和渲染器；基于时刻变量的开始时间和结束时间以及视频的定时而周期性地更新时刻变量的状态；同时所述场景正被播放，在场景中的时间点且在一个或多个三维图形对象中确定一个或多个三维图形对象是否将被渲染，在每一视频帧处：将被渲染的三维图形对象检查时刻变量的状态，当时刻变量的状态指示其被启用时更新所述三维图形对象的显示视图，以及使用着色器将三维图形对象的更新视图渲染在场景中。

在本发明的另一方面中，所述三维图形对象的显示视图的所述更新包含基于相对于所述时刻变量的所述开始时间和所述结束时间的当前时间来确定所述对象的一个或多个性质。

在本发明的另一方面中，一个或多个性质的性质包含所述对象的位置，且基于所述当前时间与所述开始时间至所述结束时间之间的时间段的比率来确定所述位置。

本公开的方法和系统的适用性的进一步范围将从下文给定的具体实施方式中变得显而易见。然而，应当理解的是，虽然指示方法和系统的实施例的具体实施方式和特定示例仅以说明的方式给出，但是，因为根据具体实施方式，在本文公开的概念的精神和范围内的各种改变和修改对于本领域技术人员将是显而易见的。

关于附图描述了这些和其他方面是。通过考虑以下结合附图的详细描述，所公开的应用的教导可以容易地被理解。

附图说明

图1是根据本发明的方面的系统环境的图；

图2是示出根据本发明的方面的开发环境和用户环境的框图；

图3是示出根据本发明的方面的作为与交互式可视化系统合成的视频的开发的基础的类的类关系图；

图4是示出根据本发明的方面的示例性视频模型类的图；

图5是示出根据本发明的方面的示例渲染类的图；

图6是示出根据本发明的方面的示例时刻类的图；

图7是示出根据本发明的方面的显示层的图；

图8是根据本发明的方面的示例容器类的图；

图9是根据本发明的方面的示例场景类的图；

图10是根据本发明的方面的示例场景视频GL类的图；

图11是示出根据本发明的方面的示例片段着色器的图；

图12是图示根据本发明的方面的片段着色器的操作的显示；

图13是根据本发明的方面的与交互式可视化系统合成的视频的开发的流程图；

图14是示出根据本发明的方面的渲染循环中的时刻模型的图；

图15是根据本发明的方面的用于与交互式可视化系统合成的视频的定时控制的流程图；

图16是示出示例额外视图层的显示；以及

图17是根据本发明的方面的计算机系统实现方式的框图。

附图描述所公开发明的实施例仅用于说明的目的。本领域的技术人员将从以下论述认识到，可在不偏离本文描述的本发明的原理的情况下采用本文示出的结构和方法的替代实施例。

具体实施方式

以下描述参照附图。以下描述并不旨在限制范围。相反，所述范围通过随附权利要求来限定。

<缩写>

SVG–可缩放向量图形。

JSON–JavaScript对象表示法

XML–可扩展标记语言

GPU-图形处理单元

OpenGL–开放式图形库：用于渲染2D和3D向量图形的应用编程接口(具有函数和命名常数的API)，且通常与图形处理单元(GPU)交互。其常用于CAD、虚拟现实、模拟和视频游戏(例如，人们可能会购买需要支持OpenGL版本的视频卡(示例：Nvidia GeForce、AMDRadeon)的视频游戏)。OpenGL的替换品是Direct3D。

WebGL–Web图形库：JavaScript API，基于OpenGL ES 2.0，用于使用web浏览器的3D和2D渲染。WebGL程序包含用于控制的JavaScript和由GPU执行的着色器。WebGL使用GLSL用于着色器代码。

GLSL–OpenGL着色语言：高级着色语言，其简化了为硬件供应商的图形卡(即支持OpenGL着色语言的图形卡)编写着色器的能力。

THREE.js-用于3D图形的JavaScript库。

HTML 5–支持SVG渲染向量图形的HTML版本。

DOM–文档对象模型。

CSS-级联样式表

GLSL着色器–一组字符串，作为使用OpenGL的应用的一部分传递给硬件供应商的驱动程序。

片段–帧缓冲区中单个像素的数据。

片段着色器–用以计算每一片段颜色和其他属性(例如透明度)的GLSL代码。(参见CLSL中的gl_FragColor)。

<系统环境>

诸如因特网的计算机网络实现了各种类型的计算设备的互连。一个方面是可用以开发与交互式动态渲染的视觉教具合成的教育视频的web应用。一个方面是与交互式动态渲染的视觉教具合成的教育视频。

图1示出具有可以互连的一些类型的计算装置的计算机网络。然而，普通技术人员将理解，在计算网络中连接有许多其他类型的计算设备。随后，仅出于说明性目的，图1示出台式计算机150和160、平板型计算机或个人数字助理(PDA)140、智能电话130、膝上型计算机120，其中的每个都能够经由一个或多个服务器设备110通过网络进行连接。服务器设备110可以连接到可以构成数据中心的后端处理器170。

图2示出可用于开发和使用web应用的环境，特别是与交互式视觉教具合成的视频内容。可用以开发web应用的开发软件205的示例可以包含视频播放器211、Web开发工具213和Web浏览器215。Web浏览器215被配置成处理可以处理3D图形的至少一个HTML版本，例如HTML 5。在示例实施例中，3D图形使用WebGL和THREE.js库的版本。Web开发工具213可用于创建HTML、JavaScript、CSS和与Web应用相关联的其他技术。视频播放器211被配置成在显示设备201上播放视频内容。

由Web浏览器处理的3D图形可以通过GPU 209来处理。其他HTML处理可以通过主处理单元207来处理。

一旦开发，可以在用户设备300的Web浏览器310中执行与交互式动态渲染的视觉教具合成的教育视频，并且显示在显示设备301中。Web浏览器315的处理可以通过主处理单元307来执行，其中3D图形通过GPU 309来处理。

Web应用403可以由Web服务器405来服务。视频内容401可以由服务器系统400来存储和分发。

服务器系统400可以包含若干处理器，用于执行视频内容分发401以及执行Web服务器405和Web应用403。

<合成系统框架>

本发明的一个方面是可以用于开发与交互式可视化系统合成的视频的核心类的层次结构。虽然提供了示例类，但示例类代表了对参数和函数进行分组的方法，而替代分组也是可能的。例如，可以通过将从继承自相应父类的类的函数组合来将类的层次结构变平。

而且，类的层次结构可以用可由Web浏览器215执行的若干语言中的任一种来实现。示例实施例是JavaScript类的层次结构。然而，可以使用可由Web浏览器215处理且可支持3D图形的任何编程语言。JavaScript类可以用网页从Web服务器405下载。或者，JavaScript类可以分布在计算机可读存储介质上，或者可以作为独立应用来分发。

图3示出可以用于开发与交互式可视化系统合成的视频的类的示例。在最顶层的类501(对象501)和类(事件511)下，系统架构可以采用模型-视图-控制器的形式，在MVC类521中，具有依赖类模型541、视图551、控制器561以及组件581。组件类571可以包含与视频或3D图形相关的特殊函数，或者构成场景的对象的视频和3D图形的组合。

MVC类521可以包含用于创建类对象的通用函数，并且提供用于创建具有唯一时间戳的类对象的函数。

时刻模型类543和视频模型类545是类模型541的类型。这些类与渲染类531和场景视频GL类593一起是核心类，能够将视频与交互式动态渲染的3D图形(也称为场景)进行合成。视频模型类545跟踪视频的时间。时刻模型类543使视频播放的定时与3D场景的显示定时相关联。渲染类531使每个3D图形元素能够以彼此同步的方式来更新。场景视频GL类593是用于在3D图形场景中视觉地渲染视频。

图4中示出视频模型类545的示例。视频模型类545可以提供用以创建具有一个或多个章节的新视频对象601的函数，以及用以启用各种事件603(例如调整大小、播放/暂停和寻找)的函数。视频模型类545可以包含用以控制视频的相应函数605以及在视频播放期间跟踪时间的函数607。

如稍后将描述的，借助于渲染循环来执行与3D图形合成的视频的渲染，所述渲染循环在每次遍历循环时渲染场景中的帧。在示例性实施例中，渲染循环使用由浏览器处理的requestAnimationFrame函数来实现。requestAnimationFrame函数可能在浏览器之间有所不同，例如基于WebKit或基于mozilla的浏览器。因而，在示例实施例中，requestAnimationFrame函数可以通过调用浏览器的适当函数来实现。本发明的一个方面是渲染类531。

图5中示出渲染类531的示例。渲染类531充当requestAnimationFrame渲染循环的守门人。图形元素可以通过调用开始循环函数将自身添加到要在渲染循环中渲染的对象列表中。图形元素可以通过调用停止循环函数而将其自身从渲染列表中移除。渲染类531能够在Web应用暂停或终止的情况下控制已被添加到渲染列表中的对象。当应用暂停或终止时，渲染类531被停用，这将停止对渲染列表上所有添加对象的调用。在示例实施例中，渲染类531可以包含可用于控制渲染的函数(包含对requestAnimationFrame 701的调用)，对象可以调用以将自身添加到渲染列表的函数703，对象可以调用将自身从渲染列表中移除的函数705；以及停用渲染的函数707。

时刻模型类543能够创建在视频播放期间出现的3D图形活动的时刻。时刻对象包含开始时间、结束时间、持续时间和名称识别符。开始时间和结束时间对应于视频中的时间点，且可以在视频被编辑期间或之后创建。因此，时刻表示当额外的信息层(包含3D动画)进入和离开场景时的计划的时间。如图6中可见，时刻包含开始时间1011、结束时间1012、指示场景中的时刻的状态的布尔标志--激活1013、名称识别符1014、标题1015、诸如相机方向的场景元数据1016和持续时间1017。

在时刻模型中，与在其中广播事件的典型事件模型不同，创建的每一时刻具有用以指示当前正在发生(激活)的时刻的状态1013。

时刻监视与视频相关联的时钟1025。时刻更新1023其状态，使得当时间在开始时间之后时，时刻的状态将被设置为激活。每一时刻的布尔状态通过在场景的渲染循环的每一周期将自身添加到渲染列表的对象来检查。换句话说，渲染列表中的对象仅需要检查感兴趣的每一时刻的状态以确定其是否可以更新其显示。时刻可以对暂停、恢复、重置函数1021做出反应。

时刻模型类543可以包含将时刻1001的状态设置为激活的函数，以及移除时刻1005或清除所有时刻1007的函数。

可以根据应用程序来创建类视图551的各种视图。视图的类型可以包含场景视图、动画视图和扩展信息视图。

本发明的一个方面是将视图显示为层。图7示出层包含背景层901、视频层903和3D图形层905的示例。可以在基于激活的时刻展示3D动画的情况下包含背景层901和3D图形层。另外，在图形层905中的3D图形的显示元素上接收到选择事件时，可以将额外信息层907添加为3D图形层905上方的层。额外信息层907可以示出文本或视频。

在实施例中，视频层903是隐藏层，且所述层的视频内容通过WebGL管线中的着色器来渲染。其他3D图形层通过同一WebGL管线中的其相应着色器来渲染，使得3D图形层在视频的顶部上显示为层。

如图8中示出的容器类569可以包含用以检测场景包含3D图形或者是独立的视频的一部分的函数1051。某一类型的控制器561(例如场景控制器565)可以包含用于包含3D图形的视频段的函数，而替代控制器561(例如场景视频控制器573)可用以控制所述视频。

图9示出场景控制器类565的示例。在场景控制器类565的情况下，将3D图形595的场景渲染器类初始化1101，将场景视图515初始化1103，将3D图形593的场景视频类初始化1104，将时刻初始化1105。而且，视频被指示播放1106。用于3D图形的场景视频类593包含用于建立包含视频和3D图形两者的场景的函数。

图10示出用于3D图形的场景视频类593的示例。设置着色器材料的函数可以包含在此类中。用于3D图形的场景视频类593可以设置顶点着色器1203和片段着色器1205，并且使用视频注册着色器1207。被称为均匀性的参数集合1201可以被着色器用于执行它们各自的计算。

着色器通常用以在显示中创建效果。在用于3D图形的场景视频类593的情况下，着色器用于将3D图形显示为视频层903顶部上的层905。

图11示出计算给定坐标的纹理的颜色值的示例片段着色器，其使得3D图形能够被显示为在视频层顶部上的层，使得在显示对象之间的动画帧的区域中的视频层的同时，对象本身被渲染。

例如，如图12中可见，除了3D对象1302自身之外，视频层1301将通过3D图形层可见。可以显示3D图形对象并与之进行交互，而由着色器形成的透明度允许将视频显示在没有3D对象1302的区域中。随后，3D对象1302看起来流经视频1301。

<与交互式动态渲染的视觉教具的合成视频的创建>

一个方面是与交互式动态渲染的3D图形合成的视频的创建(开发)。图13是用于创建与3D图形合成的视频的流程图。一个方面是从希望利用深入探索视频内容的能力来增强的教育视频开始。视频播放器(例如基于软件的视频播放器211)可用以控制播放视频S1401。视频播放器211可以提供诸如暂停、备份、恢复等函数，以及提供关于暂停帧的帧id的指示。

当正在播放视频时，可以在步骤S1403选择帧作为起始帧，在所述起始帧，3D图形可以与可以用从选定的帧开始的场景来增强用户体验的视频合成。在步骤S1403，可以指定开始时间用于时刻。在步骤S1405，随着视频从选定的帧恢复播放，在步骤S1407，可以选择结束帧作为合成3D图形的终点。另外，在步骤S1407，将指定结束时间用于时刻。在步骤S1409，可以继续播放，以便选择要合成3D图形的其他起始帧和结束帧，并指定时刻的开始时间和结束时间。

一个方面是3D图形的创建，其可以在先前已经选定的特定起始帧和结束帧的持续时间内被并入。作为替代，可以创建3D图形而不事先确定起始帧和结束帧。可以在没有3D图形的特定知识的情况下被创建的交互式3D图形可以被并入视频时间线。一个方面可以是选择可能最适合于先前创建的3D图形的视频帧序列。

假定起始帧和结束帧，可以在步骤S1451设置一个或多个时刻。可以将此点的时刻设置为包含识别符、起始时间和结束时间。时刻表示与时刻相关联的3D图形对象将被更新和渲染的时间段。

在步骤S1453，可能需要提供特定的着色器。着色器可以使用GLSL来编程。图11中示出示例片段着色器。

在步骤S1455，可以为视频段创建交互式3D图形。图3的类框架可以充当创建交互式3D图形的基础。可以添加新元素作为组件类581的子类，或者基础元素类589的特定子类。而且，在步骤S1455，所创建的3D图形可以与步骤S1451中设置的一个或多个时刻相关联。

在步骤S1457，可以创建背景层901作为可以从视频层903后方显示的层。背景层可以是简单的静止图像。

类框架提供在选择特定3D对象或3D对象组之后显示额外层907作为3D图形层905上方的层的能力。在步骤S1459，可以创建一个或多个额外层。

在步骤S1461，可以执行用于创建其他时刻的3D图形的步骤。

<与交互式动态渲染的视觉教具合成教育视频>

在视频播放期间，3D图形可以独立于视频来渲染，作为示出视频的显示屏幕的专用部分中的动画帧。通常，显示屏幕的专用部分是矩形，且矩形部分阻挡视频的所述部分被显示。或者，显示屏幕可以分为多个区域，一个区域用于显示视频，且另一区域用于显示3D图形。划分的区域可能具有不同的处理事件的函数。

本发明的一个方面是以使得3D图形对象看起来显示在视频的顶部的方式将视频与交互式动态渲染的3D图形合成，并且可以在视频播放期间与之进行交互。换句话说，如关于图11和12所讨论的，应用片段着色器而使得仅3D图形对象自身显示在视频的顶部。

本发明的另一方面是3D图形与视频播放之间的定时协调。在示例实施例中，通过在每一帧执行渲染循环，在3D图形环境中渲染视频，例如在WebGL中渲染视频。在示例实施例中，Three.js库用于在WebGL中执行3D图形。Three.js提供用于创建场景、相机和渲染器的函数，以便用相机渲染场景。在渲染循环的每一周期的开头，调用requestAnimationFrame。接着，在每个3D图形对象和Three.js渲染函数中调用函数，所述函数包含用于添加3D视图对象的函数和用于以例如每秒60帧的间隔从被调用的函数移除3D视图对象的函数。

借助于相关联的时刻来进行3D图形对象的渲染定时与视频播放定时的协调。图14示出时刻与3D视图对象之间的协调的实例。并非在事件发生时广播事件的典型事件模型，3D视图对象自身检查变量中列出的时刻状态的全局时刻变量。可能存在3D视图对象与之相关联的一个或多个时刻。如果存在3D视图对象与之相关联的至少一个时刻(激活)，则3D视图对象更新其视图并进行渲染。此类模型使得在播放视频的同时能够使例如3D对象移动到任何角度。在此类情况下，只要3D对象的关联时刻是激活的，即可渲染3D对象。时刻模型的使用提供改进的性能，这是因为在回调栈上没有事件传播添加侦听器函数调用。

在示例实施例中，3D视图对象是涉及WebGL缓冲区对象的Three.js对象。在运行期间，这些对象可能被显示或隐藏，修改其坐标位置或直接使其着色器均匀性被修改。在一些情况下，3D视图对象可以是基于其当前状态而使其CSS由JavaScript修改的DOM元素。

在示例实施例中，渲染循环负责在每个3D视图对象上重复调用函数。渲染类531包含渲染开始函数和渲染停止函数，用于在间隔(例如每秒60帧)上从被调用的函数添加和移除3D对象视图。所述函数检查关联的一个或多个时刻的状态，并基于所述状态来执行3D视图对象的更新。

如图14中可见，已被添加到渲染列表的3D视图对象1520检查一个或多个关联时刻1510的状态1503。在示例实施例中，可以将时刻维持在全局时刻变量所含的列表中。在关联的时刻被激活的情况下，3D视图对象将进行更新1505。3D视图对象的更新可以根据关联时刻中的开始时间和结束时间。另外，每一时刻可以包含标题1015和场景元数据1016，例如相机方向。作为示例，3D视图对象的位置可以根据从存储在关联时刻中的开始时间起经过的时间量来确定。时刻模型1501跟踪视频的播放时间，且基于所述时间来更新时刻的状态。

图15示出从流程图的角度来看的图14的视频播放和3D图形的渲染之间的协调。实时执行3D图形的渲染。在此情况下，实时意味着在视频播放的定时(例如，60fps)内渲染3D图形。在步骤S1601，载入视频应用以由Web浏览器(例如Web浏览器315)执行。视频应用可以包括包含3D图形的一个或多个场景。在载入后，在包含3D图形的场景的情况下，在步骤S1603中，可以创建场景对象、相机对象和WebGLRenderer对象。WebGLRender是THREE.js库中提供的一组函数。可以使用替代函数来提供3D图形的渲染。

在示例实施例中，通过时刻模型543来监视视频播放的定时。因此，在步骤S1621，监视视频时间，且在S1627，基于其各自的开始时间和结束时间来更新时刻的状态。

渲染对象531充当用于添加和移除将被包含在场景中的3D视图对象的守门人。在示例实施例中，已被添加到场景的3D视图对象最初被隐藏。随后，在步骤S1625，将3D视图对象作为要在场景中渲染的对象进行添加或移除。

在步骤S1605，基于调用requestAnimationFrame来执行每一帧的渲染循环。在步骤S1607，进行检查以确定是否存在将被渲染的3D视图对象。如果在步骤S1607为否，则在步骤S1619进行场景结束的检查。如果在步骤S1607为是，则在步骤S1609检查与视图对象相关联的任何时刻对象，以确定其是否被激活。如果时刻对象指示激活，在步骤S1611为是，则在步骤S1613更新3D视图对象。3D视图对象的更新可以包含更新对象的属性，例如均匀性和透明度。更新对象的属性，而不是添加或移除对象，对于性能是有好处的，因为可以避免在播放期间构建对象，这可能导致视频播放关闭。而且，因为不会频繁地创建和移除对象，因此避免了不必要的垃圾收集。另外，3D视图对象的更新可以基于关联时刻对象的开始时间与结束时间之间的当前时间来更新对象的性质，例如位置、大小。

在步骤S1615，检查是否存在更多的视图。如果在场景中不存在更多视图对象，则在步骤S1617，渲染场景。否则，可以针对场景中的其他视图对象重复步骤。

当场景正在运行时，在步骤S1619，确定场景是否已经结束。如果在步骤S1619为是，则渲染循环针对所述场景结束。否则(在步骤S1619为否)，在场景正在运行时，重复渲染循环，包含调用每个3D视图对象的渲染函数，并调用Three.js WebGLRenderers渲染(场景、相机)函数。

本发明的一个方面是包含可以通过点击交互式3D图形的各种元素来查看的额外信息层的能力。图16示出可以在点击太阳对象1701时显示的额外层1703的示例。

<示例1>

已使用如图3中所示的框架来增强关于空间卫星的教育视频。教育视频被实现为基于web的交互式纪录片，所述纪录片遵循丢失的卫星的故事。用户体验包含交互式3D图形，以说明NASA科学家在航天器旅程路线中使用的轨道、推进和数据采集机制的概念。当用户与这些教具交互时，他们将会从那个负责教学创新的天体物理学家那里得到电影版的解释。额外信息层可以通过选择特定的3D元素来被访问。

纪录片视频分为多个章节，且在一些情况下章节内有多个段。使用WebGL作为基础元素类589的子类创建了基本元素，例如彗星、点、地球、卫星、太阳、星星和轨迹。提供了基础元素后，将用于章节和章节内的段的交互式动态渲染的3D图形创建为时间控制器类587的子类。将动画创建为视图类551的子类。

纪录片视频可以包含章节“慧星追击者”。(参见图12)。所述章节可以具有时刻“慧星时刻”，其中慧星将其位置移动到视图中且稍后移出视图。章节可以具有另一时刻，其中标题进入视图以引入视频中的发言者。章节可以参考全局元素，例如彗星元素、星星元素、太阳元素、地球元素以及被绘制来展示轨迹的线路。动画循环可以包含对象的旋转，以及基于所述时刻期间的进度的轨迹线路的绘制。

<示例2>

通过使用与图3中展示的相同的框架，任何教育背景都可能受益于与视频的交互性的组合。例如，电子教科书、流行科学纪录片、在线学习、出版物通用的交互式信息图表、智能电话的硬件特征的说明。

作为示例，人们可以想象人类武器(Human Weapon)，探索不同武术实践背后的科学、解剖学和物理学的广播电视节目。

可以准备电影版的片段，展示现场表演武术家展示他们特定的“学校”战术的技巧。

根据这些电影版的片段，可以使用计算机产生的渲染在Web上重新创建实践。计算机产生的渲染可能会展示慢动作动画或显示给定动作中涉及的骨头或肌群的切换镜头。

此现场表演视频内容可以结合交互式版本的计算机图形渲染来播放。

可以向用户提供在武术家的3D模型周围虚拟轨道的能力。

用户可以选择不同级别的切换镜头：皮肤、肌肉系统、骨骼。

用户可以选择解剖3D模型的不同部分来获取有关人体相关部分的信息：这块肌肉产生多少力量？这个肢体的速度是多少？

<示例计算设备>

图17是图示被布置用于在Web上创建和执行与交互式动态渲染的视觉教具合成的教育视频的示例性计算设备2000的框图。在非常基本的配置2001中，计算设备2000通常包含一个或多个处理器2010和系统存储器2020。存储器总线2030可以用于在处理器2010与系统存储器2020之间通信。

根据期望的配置，处理器2010可以是任何类型，包含但不限于微处理器(μP)、微控制器(μC)、数字信号处理器(DSP)或其任何组合。处理器2010可以包含一个多个级别的缓存，例如一级高速缓冲存储器2011和二级高速缓冲存储器2012、处理器核心2013和寄存器2014。处理器核心2013可以包含算术逻辑单元(ALU)、浮点单元(FPU)、数字信号处理核心(DSP核心)或其任何组合。存储器控制器2015也可以与处理器2010一起使用，或者在一些实现方式中存储器控制器2015可以是处理器2010的内部部分。

根据期望的配置，系统存储器2020可以是任何类型，包含但不限于易失性存储器(例如RAM)、非易失性存储器(例如ROM、快闪存储器等)或其任何组合。系统存储器2020通常包含操作系统2021、一个或多个应用2022和程序数据2024。应用2022包含可以访问GPU和Web应用2023的Web浏览器。程序数据2024包含结构化数据对象2025，如上所述。在一些实施例中，应用2022可以被布置成与操作系统2021上的程序数据2024一起操作。此处描述的基本配置在图17中通过虚线2001内的那些组件来示出。

计算设备2000可以具有额外的特征或功能以及额外的接口，从而有助于基本配置2001与任何所需的设备和接口之间的通信。例如，总线/接口控制器2040可用以经由存储接口总线2041来有助于基本配置2001与一个或多个数据存储设备2050之间的通信。数据存储设备2050可以是可移除存储设备2051、不可移除存储设备2052或其组合。可移除存储设备和不可移除存储设备的示例包含例如软盘驱动器和硬盘驱动器(HDD)的磁盘设备，诸如高密度光盘(CD)驱动器或数字通用光盘(DVD)驱动器的光盘驱动器、固态驱动器(SSD)、以及磁带驱动器等等。示例计算机存储介质可以包含以任何方法或技术实现的用于存储诸如计算机可读指令、数据结构、程序模块或其他数据的信息的易失性和非易失性、可移除和不可移除介质。

系统存储器2020、可移除存储器2051和不可移除存储器2052都是计算机存储介质的示例。计算机存储介质包含但不限于RAM、ROM、EEPROM、快闪存储器或其他存储器技术、CD-ROM、数字通用光盘(DVD)或其他光学存储器、磁盒、磁带、磁盘存储器或其他磁性存储设备、或可用于存储所需信息并且可由计算设备2000访问的任何其他介质。任何此类计算机存储介质都可以是设备2000的部分。

计算设备2000还可以包含用于有助于经由总线/接口控制器2040从各种接口设备(例如，输出接口、外围接口和通信接口)到基本配置2001的通信的接口总线2042。示例输出设备2060包含图形处理单元2061和音频处理单元2062，其可以被配置成经由一个或多个A/V端口2063来与诸如显示器或扬声器的各种外部设备通信。示例外围接口2070包含串行接口控制器2071或并行接口控制器2072，其可以被配置成经由一个或多个I/O端口2073来与诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触控输入设备等)的外部设备或其他外围设备(例如，打印机、扫描仪等)通信。示例通信设备2080包含网络控制器2081，其可以被布置成有助于经由一个或多个通信端口2082通过网络通信来与一个或多个其他计算设备2090通信。通信连接是通信媒介的一个示例。通信媒介通常可以通过计算机可读指令、数据结构、程序模块或诸如载波或其他传输机制的调制的数据信号中的其他数据来体现，并且包含任何信息传送媒介。“调制的数据信号”可以是以对信号中的信息进行编码的方式设置或改变其特性中的一个或多个的信号。通过示例的方式而非限制，通信媒介可以包含诸如有线网络或直接有线连接的有线媒介，以及诸如声学、射频(RF)、红外线(IR)和其他无线媒介的无线媒介。如本文所使用的术语计算机可读介质可以包含存储介质和通信媒介两者。

计算设备2000可以被实现为小型便携式(或移动)电子设备的一部分，例如蜂窝电话、个人数据助理(PDA)、个人媒体播放器设备、无线web表设备、个人耳机设备、专用设备、或包括上述任何功能的混合设备。计算设备2000也可以被实现为包含膝上型计算机和非膝上型计算机配置两者的个人计算机。

系统方面的硬件和软件实现方式之间几乎没有差别；硬件或软件的使用通常(但不总是，因为在某些情况下，硬件和软件之间的选择可能变得重要)是代表成本与效率折衷的设计选择。存在可以实现本文描述的过程和/或系统和/或其他技术(例如，硬件、软件和/或固件)的各种手段，并且优选的手段将随着其中布署过程和/或系统和/或其他技术的背景而变化。例如，如果实施者确定速度和准确性是至关重要的，则实施者可以选择主要硬件和/或固件手段；如果灵活性是至关重要的，那么实施者可以选择主要软件实现方式；或者，再一次地，实施者可以选择硬件、软件和/或固件的一些组合。

先前详细的描述已经由使用框图、流程图和/或示例来阐明设备和/或过程的各种实施例。只要此类框图、流程图和/或示例含有一个或多个功能和/或操作，则本领域技术人员将会理解，通过范围广泛的硬件、软件、固件或其实际上的任何组合可以单独地和/或共同地实现此类框图、流程图或示例内的每一功能和/或操作。在一个实施例中，本文描述的主题的若干部分可以通过专用集成电路(ASIC)、现场可编程门阵列(FPGA)、数字信号处理器(DSP)或其他集成格式来实现。然而，本领域的技术人员将认识到，作为在一个或多个计算机上运行的一个或多个计算机程序(例如，作为在一个或多个计算机系统上运行的一个或多个程序)，作为在一个或多个处理器上运行的一个或多个程序(例如，作为在一个或多个微处理器上运行的一个或多个程序)，作为固件或作为其实际上的任何组合，本文所公开的实施例的一些方面可以整体或部分地等效实现在集成电路中，并且，根据本公开，设计电路和/或编写软件和或固件的代码属于本领域的技术人员的技术范围。另外，本领域技术人员将了解，本文描述的主题的机制能够以多种形式作为程序产品而分布，且无论实际用于进行分布的信号承载媒介的特定类型如何，本文描述的主题的说明性实施例都适用。信号承载媒介的示例包含但不限于以下：可记录类型介质，例如软盘、硬盘驱动器、紧密光盘(CD)、数字视频盘(DVD)、数字磁带、计算机存储器等；以及传输类型媒介，例如数字和/或模拟通信媒介(例如，光纤电缆、波导、有线通信链路、无线通信链路等)。

本领域技术人员将认识到，在本领域中以本文所阐述的方式描述设备和/或过程是常见的，且其后使用工程实践来将此类所描述的设备和/或过程整合到数据处理系统中。也就是说，本文所描述的设备和/或过程中的至少一部分可以通过合理的实验量而被整合到数据处理系统中。本领域技术人员将认识到，典型的数据处理系统通常包含以下各项中的一个或多个：系统单元外壳、视频显示设备、诸如易失性和非易失性存储器的存储器、诸如微处理器和数字信号处理器的处理器、诸如操作系统、驱动器、图形用户接口以及应用程序的计算实体、诸如触控板或屏幕的一个或多个交互设备、和/或包含反馈回路和控制马达的控制系统(例如，用于感测位置和/或速度的反馈；用于移动和/或调整部件和/或数量的控制马达)。典型的数据处理系统可以利用任何合适的市售部件来实现，例如通常在数据计算/通信和/或网络计算/通信系统中发现的那些部件。

关于在本文中实质使用的任何复数和/或单数术语，本领域技术人员可以从复数转变为单数形式和/或从单数转变为复数形式，只要适用于上下文和/或应用。为了清楚起见，本文可以明确地阐述各种单数/复数置换。

虽然本文已经公开了各个方面和实施例，但是其他方面和实施例对于本领域技术人员将是显而易见的。本文公开的各个方面和实施例是为了说明的目的，而不是限制性的，其真实范围和精神由所附权利要求指示。

权利要求书(按照条约第19条的修改)

1.一种用于合成视频与三维图形的装置，包括：

一个或多个数据处理设备，所述一个或多个数据处理设备被配置成执行所述视频的播放；

至少一个图形处理单元；

显示设备；

Web浏览器，所述Web浏览器被配置成发送指令到所述图形处理单元；以及

存储器设备，所述存储器设备存储将在所述Web浏览器中执行的程序，所述程序包括：

场景显示段，所述场景显示段被配置成使所述图形处理单元在所述显示设备上显示场景，所述场景包括背景层、在所述背景层的顶部上的视频层和在所述视频层的顶部上的三维图形层，所述背景层包括没有视频内容的层；以及

渲染模块，所述渲染模块被配置成添加和移除将被包括用于在所述三维图形层中渲染的对象。

2.根据权利要求1所述的装置，其中，所述程序进一步包括：

视频模块，所述视频模块被配置成跟踪所述视频的播放定时；以及

时刻模块，所述时刻模块用于创建用于具有在所述视频内的开始时间、在所述视频内的结束时间、识别符和状态的时刻的数据模型，所述时刻模块被配置成基于通过所述识别符识别的以及根据所述开始时间和所述结束时间的所述视频播放定时来更新所述时刻的所述状态，

其中，被添加以被包括来用于渲染的对象检查关联的所述时刻的所述状态，且当所述时刻的所述状态被启用时，更新其显示状态。

3.根据权利要求1或2所述的装置，其中所述程序进一步包括：

场景视频模块，所述场景视频模块被配置成通过着色过程来执行着色，所述着色过程渲染对象自身以将所述对象显示在动画帧中的所述视频层的顶部上，同时在所述对象之间的所述动画帧的区域中显示所述视频层。

4.根据权利要求3所述的装置，其中，所述着色过程包括针对给定坐标计算纹理的颜色值的片段着色器。

5.根据权利要求2所述的装置，其中，用于所述时刻的所述数据模型包括相机方向，其中，当将被添加的对象确定关联的所述时刻的所述状态被启用时，使用所述相机方向来渲染所述对象。

6.一种由一个或多个处理器和显示器执行的用于利用交互式动态渲染的三维图形内容向用户显示视频的方法，包括：

由与所述显示器交互的所述用户接收对由所述一个或多个处理器正处理的视频内容的视频帧序列所组成的一个或多个段的选择，所述视频段中的每一个具有关联的时间段；

对于每一选择的视频段：

将所述视频段设置为中间层，

将交互式图形内容添加为与所述段相关联的顶部层，

配置片段着色器以在所述视频层的顶部上展现所述交互式图形内容，以及

添加背景层；以及

根据所述片段着色器向所述用户播放与所述交互式图形内容合成的所述视频内容，所述交互式图形内容相对于相应视频段的所述时间段被渲染。

7.根据权利要求6所述的方法，进一步包括：对于每一视频段，将用于相应视频段的所述时间段存储为时刻数据对象中的开始时间和结束时间，以及使一个或多个图形对象与所述时刻数据对象相关联。

8.根据权利要求7所述的方法，进一步包括将相机方向存储在所述时刻数据对象中。

9.根据权利要求6至8中的任一项所述的方法，其中，所述片段着色器针对给定坐标计算纹理的颜色值。

10.一种用于利用合成的交互式动态渲染的三维图形来播放视频的方法，包括：

载入具有包括视频内容的一个或多个场景的视频应用；

检测场景是否具有关联的交互式图形内容，所述交互式图形内容包括一个或多个三维图形对象、以及用于展现与所述视频内容合成的所述三维图形对象的着色器；

当所述场景包括交互式图形内容时：

初始化虚拟相机和渲染器；

基于时刻变量的开始时间和结束时间以及所述视频的定时来周期性地更新所述时刻变量的状态；

同时所述场景正被播放，

在所述场景中的时间点，且在所述一个或多个三维图形对象中，确定一个或多个三维图形对象是否将被渲染，

在每一视频帧：

将被渲染的所述三维图形对象检查所述时刻变量的所述状态，

当所述时刻变量的所述状态指示其被启用时，更新所述三维图形对象的显示视图，以及

使用所述着色器在所述场景中渲染所述三维图形对象的更新的视图。

11.根据权利要求10所述的方法，其中，所述三维图形对象的所述显示视图的所述更新包括基于相对于所述时刻变量的所述开始时间和所述结束时间的当前时间来确定所述对象的一个或多个性质。

12.根据权利要求11所述的方法，其中，所述一个或多个性质中的一个性质包括所述对象的位置，且基于所述当前时间与所述开始时间至所述结束时间之间的时间段的比率来确定所述位置。

13.一种用于在用户设备的Web浏览器中执行的计算机程序代码，所述用户设备包括图形处理单元和显示设备，所述计算机程序代码包括：

场景显示段，所述场景显示段被配置成使所述图形处理单元在所述显示设备上显示场景，所述场景包括背景层、在所述背景层的顶部上的视频层和在所述视频层的顶部上的三维图形层，所述背景层包括没有视频内容的层；以及

渲染模块，所述渲染模块被配置成添加和移除将被包括来用于在所述三维图形层中渲染的3D图形对象。

14.根据权利要求13所述的计算机程序代码，其中，所述计算机程序代码进一步包括：

视频模块，所述视频模块被配置成跟踪所述视频层中显示的视频的播放定时；以及

时刻模块，所述时刻模块用于管理具有在所述视频内的开始时间、在所述视频内的结束时间、识别符和状态的时刻对象，所述时刻模块被配置成基于通过所述识别符识别的以及根据所述开始时间和所述结束时间的所述视频播放定时来更新所述时刻的状态，

所述计算机程序代码被布置为使得被添加以被包括来用于渲染的3D图形对象检查关联的所述时刻对象的状态，且当所述时刻对象的所述状态被启用时，更新其显示状态。

15.一种包括根据权利要求13或14所述的计算机程序代码的计算机可读介质。