CN110377861A - 场景间元素互动方法、装置、存储介质和计算机设备 - Google Patents

场景间元素互动方法、装置、存储介质和计算机设备 Download PDF

Info

Publication number
CN110377861A
CN110377861A CN201910666331.1A CN201910666331A CN110377861A CN 110377861 A CN110377861 A CN 110377861A CN 201910666331 A CN201910666331 A CN 201910666331A CN 110377861 A CN110377861 A CN 110377861A
Authority
CN
China
Prior art keywords
scene
interactive
painting canvas
visual angle
interaction
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
Application number
CN201910666331.1A
Other languages
English (en)
Other versions
CN110377861B (zh
Inventor
黄剑鑫
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201910666331.1A priority Critical patent/CN110377861B/zh
Publication of CN110377861A publication Critical patent/CN110377861A/zh
Application granted granted Critical
Publication of CN110377861B publication Critical patent/CN110377861B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请涉及一种场景间元素互动方法、装置、计算机可读存储介质和计算机设备,方法包括:获取第一场景中第一元素被触发时生成的互动请求,解析互动请求,获取与第一元素关联的第二场景,第一场景与第二场景渲染在层级叠加的不同画布中,获取第一场景与第二场景的位置参数转换关系,根据位置数据转换关系,确定第一元素在第二场景中的互动位置,将第一元素添加至第二场景中的互动位置,进行第一元素与第二场景之间的互动处理。实现了不同场景之间的元素互动,满足多场景下的互动需求。

Description

场景间元素互动方法、装置、存储介质和计算机设备
技术领域
本申请涉及计算机技术领域,特别是涉及一种场景间元素互动方法、装置、计算机可读存储介质和计算机设备。
背景技术
随着计算机技术的发展,Web技术得到了广泛的应用,HTML5(HyperText MarkupLanguage 5.0,超文本5.0)是构建Web内容的一种语言描述方式。WebGL(Web GraphicsLibrary)是一种3D(3Dimensions,三维)绘图协议,允许通过JavaScript在浏览器内渲染3D场景模型,为HTML5Canvas(画布)提供硬件3D加速渲染,在浏览器里更流畅地展示3D场景和模型。画布是在HTML5中新增的标签,用于在网页实时生成图像,并且可以操作图像内容,是一个可以用JavaScript操作的位图。
传统技术中,单一画布只能渲染一个3D场景,如果想要多视角3D场景,即在同一画面中,呈现不同视角的3D场景,则需要停止当前场景的渲染,切换到另一个3D场景中。单画布无法同时渲染多视角的3D场景,故多场景间的元素也无法在画面上呈现互动的效果。
发明内容
基于此,有必要针对多场景间元素无法实现互动的技术问题,提供一种场景间元素互动方法、装置、计算机可读存储介质和计算机设备。
一种场景间元素互动方法,包括:
获取第一场景中第一元素被触发时生成的互动请求;
解析所述互动请求,获取与所述第一元素关联的第二场景,所述第一场景与所述第二场景渲染在层级叠加的不同画布中;
获取所述第一场景与所述第二场景的位置参数转换关系;
根据所述位置数据转换关系,确定所述第一元素在所述第二场景中的互动位置;
将所述第一元素添加至所述第二场景中的互动位置,进行所述第一元素与所述第二场景之间的互动处理。
在其中一个实施例中,所述第一场景与所述第二场景对应相同的世界坐标系。
在其中一个实施例中,所述方法还包括:
当检测到互动处理完成时,移除所述第二场景中新增的第一元素,并恢复所述第一场景中隐藏的第一元素。
一种场景间元素互动装置,所述装置包括:
请求获取模块,用于获取第一场景中第一元素被触发时生成的互动请求;
请求解析模块,用于解析所述互动请求,获取与所述第一元素关联的第二场景,所述第一场景与所述第二场景渲染在层级叠加的不同画布中;
转换关系获取模块,用于获取所述第一场景与所述第二场景的位置参数转换关系;
互动位置确定模块,用于根据所述位置数据转换关系,确定所述第一元素在所述第二场景中的互动位置;
元素添加模块,用于将所述第一元素添加至所述第二场景中的互动位置,进行所述第一元素与所述第二场景之间的互动处理。。
一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行以下步骤:
获取第一场景中第一元素被触发时生成的互动请求;
解析所述互动请求,获取与所述第一元素关联的第二场景,所述第一场景与所述第二场景渲染在层级叠加的不同画布中;
获取所述第一场景与所述第二场景的位置参数转换关系;
根据所述位置数据转换关系,确定所述第一元素在所述第二场景中的互动位置;
将所述第一元素添加至所述第二场景中的互动位置,进行所述第一元素与所述第二场景之间的互动处理。
一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行以下步骤:
获取第一场景中第一元素被触发时生成的互动请求;
解析所述互动请求,获取与所述第一元素关联的第二场景,所述第一场景与所述第二场景渲染在层级叠加的不同画布中;
获取所述第一场景与所述第二场景的位置参数转换关系;
根据所述位置数据转换关系,确定所述第一元素在所述第二场景中的互动位置;
将所述第一元素添加至所述第二场景中的互动位置,进行所述第一元素与所述第二场景之间的互动处理。
上述场景间元素互动方法、装置、计算机可读存储介质和计算机设备,基于在层级叠加的不同画布中渲染的不同场景,使得多场景同时渲染,以满足多场景间的元素互动条件,通过触发第一场景中的第一元素,生成的互动请求,解析确定互动对象,以确定存在互动关系的多个场景,以此为依据,获取到不同场景间的位置参数转换关系,进一步确定第一元素在第二场景中的互动位置,从而将第一元素添加至第二场景,通过位置参数转换来克服不同场景间无法直接互动的障碍,实现了不同场景之间的元素互动,满足多场景下的互动需求。
附图说明
图1为一个实施例中场景间元素互动方法的应用环境图;
图2为一个实施例中场景间元素互动方法的流程示意图;
图3为一个实施例中场景间元素互动界面的画布叠加示意图;
图4为一个实施例中获取位置参数转换关系步骤的流程示意图;
图5为一个实施例中互动处理步骤的流程示意图;
图6为一个实施例中画布创建与场景渲染步骤的流程示意图;
图7为一个实施例中场景渲染步骤的流程示意图;
图8为另一个实施例中场景间元素互动方法的流程示意图;
图9为另一个实施例中场景间元素互动方法的流程示意图;
图10为一个应用实例中场景间元素互动界面示意图;
图11为一个实施例中场景间元素互动装置的结构框图;
图12为一个实施例中计算机设备的结构框图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
在一个实施例中场景间元素互动方法的应用环境如图1所示。应用环境涉及终端102,终端102提供Web界面,在Web界面通过叠加的透明背景画布,在画布中渲染不同的3D场景。各场景可以通过绑定的视角控制器进行视角变换,实现多视角的场景,使用多画布同时渲染不同场景的方案,支持不同场景绑定不同的视角控制器,同时在单一场景产生视角转换时保证不影响到其他场景的视角。而不同视角的场景也可以位置参数转换,实现元素互通,可以让元素无缝在多场景间切换。在实施例中,终端102通过获取用户触发第一场景中第一元素时生成的互动请求,解析互动请求,获取与第一元素关联的第二场景,第一场景与第二场景渲染在层级叠加的不同画布中,然后,获取第一场景与第二场景的位置参数转换关系,根据位置数据转换关系,确定第一元素在第二场景中的互动位置,最后,将第一元素添加至第二场景中的互动位置,进行第一元素与第二场景之间的互动处理。终端102具体可以是台式终端或移动终端,移动终端具体可以手机、平板电脑、笔记本电脑等中的至少一种。
在一个实施例中,提供了一种场景间元素互动方法。本实施例主要以该方法应用于上述图1中的终端102来举例说明。参照图2,该场景间元素互动方法具体包括步骤S202至S210。
S202,获取第一场景中第一元素被触发时生成的互动请求。
场景是指画布中的渲染对象,一个场景中包括一个或多个元素,画布是场景的渲染载体,一个画布中对应渲染一个场景。画布是HTML5的一部分,用于在网页渲染携带有一个或多个元素的场景,并且可以操作场景中各元素,是一个可以用JavaScript操作的位图。通过WebGL技术在画布渲染场景,不同的场景可以对应展示不同的视角。第一场景与第二场景是一种相对概念,可以理解,在其他实施例中,也可以将第二场景作为第一场景,例如,当用户触发第二场景中的元素时,也可以生成互动请求,从而根据互动请求执行对应处理,实现场景间的元素互动。第一元素的触发方式包括多种,可以是人为触发和自动触发,人为触发可以通过触摸屏、鼠标、键盘等对第一元素进行操作进行触发,也可以是通过定时器或设置其他触发条件进行触发。当检测到第一元素被触发时,根据触发操作数据生成互动请求,触发操作数据可以包括触发时长、触发角度等。
S204,解析互动请求,获取与第一元素关联的第二场景,第一场景与第二场景渲染在层级叠加的不同画布中。
通过对互动请求的解析,确定被触发的元素,通过查找预先配置的互动对象关系,可以确定该元素关联的场景,即该元素被触发时的互动对象。层级叠加的画布是将宽高一致的多个背景透明的画布按层级顺序进行叠加得到的画布集合,不同的画布中渲染不同的场景,如图3所示,在第一画布中渲染有第一场景,第一场景中包括第一元素1,在第二画布中渲染有第二场景,第二场景中包括第二元素2,层级叠加的画布显示在同一个画面中,画布叠加后,可以在同一画面中显示第一元素1和第二元素2。此外,场景可以绑定有不同的视角控制器,通过视角控制器,通过视角控制器的视角控制信号对场景视角进行控制,从而使在同一画面中可以显示不同视角的场景。在一个实施例中,场景控制器可以是陀螺仪,通过建立场景与陀螺仪的关联关系,将场景与陀螺仪绑定,以终端为移动终端为例,叠加的画布可以展示在移动终端的相机画面中,当用户控制移动终端的相机视角变化时,绑定陀螺仪的场景中各元素相对于相机视角发生相对位移,即当陀螺仪转动时生成的位置信号会同步至绑定有陀螺仪的场景中的元素,从而使得该元素会在相机画面中移动,呈现成元素出现或消失的效果。场景控制信号还可以是通过键盘、鼠标、触摸屏等其他外部输入方式设定的对场景视角进行控制产生的信号。
S206,获取第一场景与第二场景的位置参数转换关系。
由于第一场景与第二场景处于不同的画布,对应有不同的视角,通过响应控制操作指令,使其中一个场景的当前视角发生变化时,第一场景与第二场景的相对位置也随之发生变化。位置参数转换关系,是指同一元素在不同场景中的位置参数之间的转换关系。在一个实施例中,如图4所示,获取第一场景与第二场景的位置参数转换关系包括步骤S402至S406。
S402,获取第一场景的当前视角信息与第二场景的当前视角信息。
S404,根据第一场景的当前视角信息与第二场景的当前视角信息相对于同一基准位置的视角偏移,确定第一场景与第二场景的视角差值。
S406,根据视角差值,确定第一场景与第二场景的位置数据转换关系。
场景对应绑定有视角控制器,当用户对其中一个场景对应视角控制器的操作,通过响应该操作使得该场景的视角发生偏移时,该场景与其他场景的相对位置也发生了偏移,当前视角信息是指在当前画面中展示的场景对应的视角。基准位置是一个参考系,是指独立于第一场景与第二场景以外,不随场景视角变化改变的位置信息。根据第一场景的当前视角信息相对于该基准位置的视角偏移以及第二场景的当前视角信息相对于该基准位置的第二视角偏移,确定第一场景与第二场景的视角差值。具体来说,当第一视角与第二视角相对与基准位置的偏移方向相同时,第一场景与第二场景的视角差值为,第一场景的当前视角信息相对于该基准位置的视角偏移的第一偏移数据,与第一场景的当前视角信息相对于该基准位置的视角偏移的第二偏移数据的偏移角度差。当第一视角与第二视角相对与基准位置的偏移方向为互为逆向时,第一场景与第二场景的视角差值为第一偏移数据与第二偏移数据的偏移角度和。当第一视角与第二视角相对与基准位置的偏移方向不在同一直线上,即第一视角与第二视角相对与基准位置的偏移方向成一定夹角时,第一场景与第二场景的视角差值为各场景对应的相机坐标原点相对于绝对坐标系的距离差对应的视角偏差。在第一场景和第二场景中,有一个场景视角固定的情况下,第一场景与第二场景的视角差值即为另一个场景的视角变化对应的视角偏移值。例如,当第一场景视角相对固定,当用户向左转动移动终端,转移角度为30°,使得绑定有陀螺仪的第二场景同步转动30°,则第一场景与第二场景的视角差值为30°。根据第一场景与第二场景的视角差值,进行场景间的位置换算,得到位置数据转换关系。
S208,根据位置数据转换关系,确定第一元素在第二场景中的互动位置。
互动位置是指将第一场景中的第一元素置入第二场景时,在第二场景中对应的存在位置。在一个实施例中,第一场景和第二场景有对应的相机坐标系,第一元素在第一场景中对应有第一相机坐标,位置数据转换关系为相机坐标系之间的转换关系,根据相机坐标系之间的转换关系,对第一相机坐标进行坐标换算,即可得到第一元素在第二场景中对应的第二相机坐标,即为互动位置。
在一个实施例中,第一场景与第二场景对应相同的世界坐标系,通过获取第一元素值的第一世界坐标,该第一世界坐标在第一场景和第二场景是通用的,根据世界坐标即可确定第一元素在第二场景中的互动位置。
S210,将第一元素添加至第二场景中的互动位置,进行第一元素与第二场景之间的互动处理。
在一个实施例中,在确定了第一元素在第二场景中的互动位置时,在第二场景中新增第一元素,并在第二场景中隐藏第一元素,从而将第一元素与第二元素置于同一场景中,实现不同场景间的元素互动,其中,场景间的元素互动,可以是分别处于不同场景的元素之间的互动,也可以是元素与场景间的互动。在其中一个实施例中,当第一场景中的第一元素被操作触发时,通过分析确定第一元素在待互动场景中的互动位置,并将第一元素添加到该场景时,可以通过配置数据,获取到触发操作对应的操作数据并分析该操作数据对应的操作结果,同时,检测该操作结果对应目的位置,是否存在其他元素,当目的位置存在其他元素时,查找该元素与第一元素的互动动作数据,以使得第一元素与该元素呈现互动动作,实现第一元素与不同场景中其他元素间的互动。当目的位置不存在其他元素时,查找第一元素的操作数据对应的执行动作,以使得第一元素呈现执行动作,实现第一元素与不同场景间的互动。
上述场景间元素互动方法,基于在层级叠加的不同画布中渲染的不同场景,使得多场景同时渲染,以满足多场景间的元素互动条件,通过触发第一场景中的第一元素,生成的互动请求,解析确定互动对象,以确定存在互动关系的多个场景,以此为依据,获取到不同场景间的位置参数转换关系,进一步确定第一元素在第二场景中的互动位置,从而将第一元素添加至第二场景,通过位置参数转换来克服不同场景间无法直接互动的障碍,实现了不同场景之间的元素互动,满足多场景下的互动需求。
在一个实施例中,如图5所示,进行第一元素与第二场景的互动处理包括步骤S502至S504。
S502,当检测到第二场景中存在与第一元素互动的第二元素时,读取预先配置的互动动作信息。
将第一元素添加至第二场景中的互动位置时,按照预设的触发响应规则,通过对第一元素被触发时采集的触发操作数据进行分析,例如触发时长、触发角度等,确定第一元素在第二场景中的互动轨迹,将第一元素在第二场景中的互动轨迹对应的移动数据分配第一场景中的第一元素,以使第二场景中的第一元素按互动轨迹移动,通过检测互动轨迹对应的线路位置是否存在元素,来判断第二场景中是否存在与第一元素互动的第二元素。预先配置的互动动作信息是指当第一元素与第二元素进行互动时,控制第一元素与第二元素在画面中对应展示互动动作的控制数据。
S504,根据互动动作信息,分配第一互动数据至第二场景中的第一元素,分配第二互动数据至第二元素,第一互动数据和第二互动数据用于使第一元素与第二元素在第二场景中执行互动动作。
互动动作信息包括第一元素对应的第一互动信息和第二元素对应的第二互动信息,分配第一互动数据至第二场景中的第一元素,使第二场景中的第一元素执行第一互动动作,分配第二互动数据至第二元素,使第二元素执行第二互动动作,互动动作包括第一元素执行的第一互动动作和第二元素执行的第二互动动作。
在其中一个实施例中,当检测到第二场景中不存在与第一元素互动的第二元素时,当第二场景中的第一元素完成按互动轨迹的移动时,确定为互动处理完成。
在一个实施例中,场景间元素互动方法还包括:当检测到互动处理完成时,将第一元素从第二场景中移除,并恢复第一场景中隐藏的第一元素。
互动处理完成的检测条件包括不存在互动的第二元素且第二场景中的第一元素完成按互动轨迹的移动,以及存在互动的第二元素且第二场景中的第一元素和第二元素完成互动动作。当满足检测条件即检测到互动处理完成时,将第一元素从第二场景中移除,并恢复第一场景中隐藏的第一元素。具体来说,根据第一场景与第二场景的相机坐标转换关系,确定第一元素在第一场景中的恢复位置,并将恢复的第一元素置于恢复位置。
在一个实施例中,如图6所示,获取第一场景中第一元素被触发时生成的互动请求之前,还包括步骤S602至S606。
S602,创建多个层级叠加的画布。
S604,读取画布背景配置参数,将画布的背景更新为透明背景。
S606,在背景更新的画布中渲染对应的场景,场景中至少包括一个元素。
具体地,响应于画布创建操作指令,通过WebGL技术创建多个画布canvas标签,根据创建的先后顺序,对画布进行叠加,通过读取画布背景配置参数,将画布的背景更新为透明背景,然后,响应于多个场景渲染操作指令,通过WebGL技术背景更新的画布中渲染对应的场景,其中,场景渲染过程包括读取渲染参数,渲染参数包括场景中各元素的元素位置、元素大小、元素视角、光效规则、动效规则等,画布叠加后,可以在画面中显示各层级中渲染的所有场景。
在一个实施例中,如图7所示,在背景更新的画布中渲染对应的场景包括步骤S702至S704。
S702,根据预设配置数据中元素对应的画布层级需求信息,确定元素所在场景对应的画布层级。
S704,将场景渲染至对应层级的背景更新的画布。
在场景中设置有一个或多个元素,其中多个元素可以是相同元素也可以是不同元素,但不同的元素的在画面中的呈现效果与元素对应场景所在画布层级有关,最底层的画布在画面中呈现的效果为距离更远,最上层的画布在画面中呈现的效果为距离更近。根据互动需求,设置配置数据,配置数据中包括元素对应的画布层级需求信息,通过读取预先设置的配置数据,确定元素所在场景对应的层级画布,从而将场景渲染至对应层级的画布中,背景更新为透明的画布,可以避免背景干扰,同时呈现各层级的画布中渲染的场景。
在一个实施例中,将场景渲染至对应层级的背景更新的画布之后,还包括获取与场景对应的场景视角控制参数,场景视角控制参数包括待关联视角控制器标识,建立场景与视角控制器标识对应视角控制器之间的关联关系。
场景视角控制参数用于描述场景的视角控制方式,包括待关联视角控制器标识,根据关联视角控制器标识,建立场景与视角控制器标识对应视角控制器之间的关联关系,通过关联关系,视角控制器被触发时,将视角调整指令同步至关联的场景,实现场景的视角控制。
图8为一个实施例中场景间元素互动方法的流程示意图。应该理解的是,虽然图8的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,图8中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些子步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中,如图8所示,提供了一种场景间元素互动方法,包括步骤S802至S830。
S802,创建多个层级叠加的画布。
响应于画布创建操作指令,通过WebGL技术创建多个画布canvas标签,按标签创建顺序,得到多个层级叠加的画布。
S804,读取画布背景配置参数,将画布的背景更新为透明背景。
通过画布背景配置参数更新画布背景为透明背景,使得在画面中显示各层级中渲染的所有场景。
S806,根据预设配置数据中元素对应的画布层级需求信息,确定元素所在场景对应的画布层级。
S808,将场景渲染至对应层级的背景更新的画布。
根据互动需求,设置配置数据,配置数据中包括元素对应的画布层级需求信息,通过读取预先设置的配置数据,确定元素所在场景对应的层级画布,从而将场景渲染至对应层级的画布中,背景更新为透明的画布,可以避免背景干扰,同时呈现各层级的画布中渲染的场景。
S810,获取与场景对应的场景视角控制参数,场景视角控制参数包括待关联视角控制器标识。
S812,建立场景与视角控制器标识对应视角控制器之间的关联关系。
场景视角控制参数用于描述场景的视角控制方式,包括待关联视角控制器标识,根据关联视角控制器标识,建立场景与视角控制器标识对应视角控制器之间的关联关系,通过关联关系,视角控制器被触发时,将视角调整指令同步至关联的场景,实现场景的视角控制。
S814,获取第一场景中第一元素被触发时生成的互动请求。
第一元素的触发方式包括多种,可以是人为触发和自动触发,人为触发可以通过触摸屏、鼠标、键盘等对第一元素进行操作进行触发,也可以是通过定时器或设置其他触发条件进行触发。当检测到第一元素被触发时,根据触发操作数据生成互动请求,触发操作数据可以包括触发时长、触发角度等。
S816,解析互动请求,获取与第一元素关联的第二场景,第一场景与第二场景渲染在层级叠加的不同画布中。
通过对互动请求的解析,确定被触发的元素,通过查找预先配置的互动对象关系,可以确定该元素关联的场景,即该元素被触发时的互动对象。
S818,获取第一场景的当前视角信息与第二场景的当前视角信息。
场景对应绑定有视角控制器,当用户对其中一个场景对应视角控制器的操作,通过响应该操作使该场景的视角发生偏移时,该场景与其他场景的相对位置也发生了偏移,当前视角信息是指在当前画面中展示的场景对应的视角。
S820,根据第一场景的当前视角信息与第二场景的当前视角信息相对于同一基准位置的视角偏移,确定第一场景与第二场景的视角差值。
基准位置是一个参考系,是指独立于第一场景与第二场景以外,不随场景视角变化改变的位置信息。根据第一场景的当前视角信息相对于该基准位置的视角偏移以及第二场景的当前视角信息相对于该基准位置的第二视角偏移,确定第一场景与第二场景的视角差值。
S822,根据视角差值,确定第一场景与第二场景的位置数据转换关系。
根据第一场景与第二场景的视角差值,进行场景间的位置换算,得到位置数据转换关系。
S824,根据位置数据转换关系,确定第一元素在第二场景中的互动位置。
互动位置是指将第一场景中的第一元素置入第二场景时,在第二场景中对应的存在位置。在一个实施例中,第一场景和第二场景有对应的相机坐标系,第一元素在第一场景中对应有第一相机坐标,位置数据转换关系为相机坐标系之间的转换关系,根据相机坐标系之间的转换关系,对第一相机坐标进行坐标换算,即可得到第一元素在第二场景中对应的第二相机坐标,即为互动位置。
S826,当检测到第二场景中存在与第一元素互动的第二元素时,读取预先配置的互动动作信息。
将第一元素添加至第二场景中的互动位置时,按照预设的触发响应规则,通过对第一元素被触发时采集的触发操作数据进行分析,例如触发时长、触发角度等,确定第一元素在第二场景中的互动轨迹,将第一元素在第二场景中的互动轨迹对应的移动数据分配第一场景中的第一元素,以使第二场景中的第一元素按互动轨迹移动,通过检测互动轨迹对应的线路位置是否存在元素,来判断第二场景中是否存在与第一元素互动的第二元素。预先配置的互动动作信息是指当第一元素与第二元素进行互动时,控制第一元素与第二元素在画面中对应展示互动动作的控制数据。
S828,根据互动动作信息,分配第一互动数据至第二场景中的第一元素,分配第二互动数据至第二元素,第一互动数据和第二互动数据用于使第一元素与第二元素在第二场景中执行互动动作。
互动动作信息包括第一元素对应的第一互动信息和第二元素对应的第二互动信息,分配第一互动数据至第二场景中的第一元素,使第二场景中的第一元素执行第一互动动作,分配第二互动数据至第二元素,使第二元素执行第二互动动作,互动动作包括第一元素执行的第一互动动作和第二元素执行的第二互动动作。
S830,当检测到互动处理完成时,将第一元素从第二场景中移除,并恢复第一场景中隐藏的第一元素。
互动处理完成的检测条件包括不存在互动的第二元素且第二场景中的第一元素完成按互动轨迹的移动,以及存在互动的第二元素且第二场景中的第一元素和第二元素完成互动动作。当满足检测条件即检测到互动处理完成时,将第一元素从第二场景中移除,并恢复第一场景中隐藏的第一元素。据第一场景与第二场景的相机坐标转换关系,确定第一元素在第一场景中的恢复位置,并将恢复的第一元素置于恢复位置。
在一个实施例中,场景间元素互动的流程图如图9所示,首先进行初始化处理,创建画布1和画布2,在画布中渲染或创建对应场景,即,在画布1中创建场景1,在画布2中创建场景2,各场景中的元素可以从元素模型库中添加获得,以场景1中添加的元素为模型1为例,当模型1被触发,后台根据模型1在场景1中的位置信息以及场景2的缓存视角信息,确定模型1在场景2中的置入位置,然后将模型1置入场景2,最后,在互动完成时,将模型1返回场景1,结束模型1与场景2的互动。在其他实施例中,创建多个画布,在画布中渲染3D场景,具体来说,是创建多个画布canvas标签,将画布更新为透明背景,每个画布独立渲染一个场景。将渲染不同的3D场景的叠加画布显示到屏幕画面中,其中一个场景的相机绑定有陀螺仪,各场景中加载有不同的元素。响应第一场景中第一元素与第二场景中第二元素互动触发操作指令,根据第一场景与第二场景的视角差值对第一元素的位置信息进行重置,再置入第二场景中。具体来说,获取两个场景的相机数据以及元素数据,相机数据包括相机坐标,元素数据包括元素在相机坐标系中的坐标。在第二场景中根据第一场景和第二场景的相机坐标的转换关系,初始化第一场景中第一元素在第二场景中的位置。若第一场景与第二场景的世界坐标一致,则第一元素可保留世界坐标,再置入第二场景中对应的互动位置,若第一元素需要置于第二场景的视角中心位置,则获取第二场景相机的朝向向量和距离,将朝向向量乘以距离得到的值作为第一元素的互动位置。若元素转移场景时需要在屏幕中无缝切换,则获取第一元素相对第一场景的相机坐标原点的位置,将这个位置相对于第二场景的相机坐标原点进行重新计算,获取的坐标设为第一元素在第二场景中的互动位置。将第一场景中第一元素添加进第二场景,并在第一场景隐藏第一元素。判断第一元素与第二元素在第二场景中的相对位置,进行互动,当互动完成,从第二场景中移除添加的第一元素,在第一场景中恢复隐藏的第一元素,并根据第一场景与第二场景的相机坐标初始化第一元素在第一场景中的位置。在一个应用实例中,第一参见图10,第一场景为图10中球所在的场景,球为第一场景中的第一元素,第二场景为图10中精灵所在的场景,精灵为第二场景中的第二元素。具体来说,精灵所在的第二场景中绑定了陀螺仪,当陀螺仪转动后,精灵将会在画面中出现或消失,如果此时球与精灵处于同一3D场景中,则球也也会在画面中呈现出现消失的情况,无法满足固定在场景中的效果。但是如果简单的把球放到单独的场景中,则当用户触发操作,将球抛出后,由于球所在的场景与精灵所在场景的相机角度不同,球无法砸中精灵,并且球砸出后需要出现随着陀螺仪转动而改变球在场景中移动的效果,在球的原场景中无法实现,所以需要在抛出后,将球无缝的置入精灵所在的场景,并达到绑定相机的旋转效果。在其他应用实例中,第二场景中可以设置多个精灵。
在一个实施例中,如图11所示,提供了一种场景间元素互动装置1100,装置包括:
请求获取模块1102,用于获取第一场景中第一元素被触发时生成的互动请求。
请求解析模块1104,用于解析互动请求,获取与第一元素关联的第二场景,第一场景与第二场景渲染在层级叠加的不同画布中。
转换关系获取模块1106,用于获取第一场景与第二场景的位置参数转换关系。
互动位置确定模块1108,用于根据位置数据转换关系,确定第一元素在第二场景中的互动位置。
元素添加模块1110,用于将第一元素添加至第二场景中的互动位置,进行第一元素与第二场景之间的互动处理。
在一个实施例中,转换关系获取模块1106,还用于获取第一场景的当前视角信息与第二场景的当前视角信息,根据第一场景的当前视角信息与第二场景的当前视角信息相对于同一基准位置的视角偏移,确定第一场景与第二场景的视角差值,根据视角差值,确定第一场景与第二场景的位置数据转换关系。
在一个实施例中,转换关系获取模块1106,还用于当第一场景与第二场景对应相同的世界坐标系,判定第一场景与第二场景的位置参数转换关系为位置参数相同。
在一个实施例中,元素添加模块1110,还用于在第二场景中的互动位置新增第一元素,并隐藏第一场景中的第一元素。
在一个实施例中,场景间元素互动装置1100还包括元素恢复模块,用于当检测到互动处理完成时,将第一元素从第二场景中移除,并恢复第一场景中隐藏的第一元素。
在一个实施例中,元素添加模块1110,还用于当检测到第二场景中存在与第一元素互动的第二元素时,读取预先配置的互动动作信息,根据互动动作信息,分配第一互动数据至第二场景中的第一元素,分配第二互动数据至第二元素,第一互动数据和第二互动数据用于使第一元素与第二元素在第二场景中执行互动动作。
在一个实施例中,场景间元素互动装置1100还包括画布创建与场景渲染模块,用于创建多个层级叠加的画布,读取画布背景配置参数,将画布的背景更新为透明背景,在背景更新的画布中渲染对应的场景,场景中至少包括一个元素。
在一个实施例中,画布创建与场景渲染模块,还用于根据预设配置数据中元素对应的画布层级需求信息,确定元素所在场景对应的画布层级,将场景渲染至对应层级的背景更新的画布。
在一个实施例中,画布创建与场景渲染模块,还用于获取与场景对应的场景视角控制参数,场景视角控制参数包括待关联视角控制器标识,建立场景与视角控制器标识对应视角控制器之间的关联关系。
图12示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端102。如图12所示,该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中,存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统,还可存储有计算机程序,该计算机程序被处理器执行时,可使得处理器实现场景间元素互动方法。该内存储器中也可储存有计算机程序,该计算机程序被处理器执行时,可使得处理器执行场景间元素互动方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图12中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,本申请提供的场景间元素互动装置可以实现为一种计算机程序的形式,计算机程序可在如图12所示的计算机设备上运行。计算机设备的存储器中可存储组成该场景间元素互动装置的各个程序模块,比如,图11所示的请求获取模块1102、请求解析模块1104、转换关系获取模块1106、互动位置确定模块1108和元素添加模块1110,用于。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的场景间元素互动方法中的步骤。
例如,图12所示的计算机设备可以通过如图11所示的场景间元素互动装置中的请求获取模块1102执行获取第一场景中第一元素被触发时生成的互动请求。计算机设备可通过请求解析模块1104执行解析互动请求,获取与第一元素关联的第二场景,第一场景与第二场景渲染在层级叠加的不同画布中。计算机设备可通过转换关系获取模块1106执行获取第一场景与第二场景的位置参数转换关系。计算机设备可通过互动位置确定模块1108执行根据位置数据转换关系,确定第一元素在第二场景中的互动位置。计算机设备可通过元素添加模块1110执行将第一元素添加至第二场景中的互动位置,进行第一元素与第二场景之间的互动处理。
在一个实施例中,提供了一种计算机设备,包括存储器和处理器,存储器存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述场景间元素互动方法的步骤。此处场景间元素互动方法的步骤可以是上述各个实施例的场景间元素互动方法中的步骤。
在一个实施例中,提供了一种计算机可读存储介质,存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述场景间元素互动方法的步骤。此处场景间元素互动方法的步骤可以是上述各个实施例的场景间元素互动方法中的步骤。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,的程序可存储于一非易失性计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种场景间元素互动方法,包括:
获取第一场景中第一元素被触发时生成的互动请求;
解析所述互动请求,获取与所述第一元素关联的第二场景,所述第一场景与所述第二场景渲染在层级叠加的不同画布中;
获取所述第一场景与所述第二场景的位置参数转换关系;
根据所述位置数据转换关系,确定所述第一元素在所述第二场景中的互动位置;
将所述第一元素添加至所述第二场景中的互动位置,进行所述第一元素与所述第二场景之间的互动处理。
2.根据权利要求1所述的方法,其特征在于,所述获取所述第一场景与所述第二场景的位置参数转换关系包括:
获取所述第一场景的当前视角信息与所述第二场景的当前视角信息;
根据所述第一场景的当前视角信息与所述第二场景的当前视角信息相对于同一基准位置的视角偏移,确定所述第一场景与所述第二场景的视角差值;
根据所述视角差值,确定所述第一场景与所述第二场景的位置数据转换关系。
3.根据权利要求1所述的方法,其特征在于,将所述第一元素添加至所述第二场景中的互动位置包括:
在所述第二场景中的互动位置新增所述第一元素,并隐藏所述第一场景中的第一元素。
4.根据权利要求1所述的方法,其特征在于,所述进行第一元素与第二场景的互动处理包括:
当检测到所述第二场景中存在与所述第一元素互动的第二元素时,读取预先配置的互动动作信息;
根据所述互动动作信息,分配第一互动数据至所述第二场景中的第一元素,分配第二互动数据至第二元素,所述第一互动数据和所述第二互动数据用于使所述第一元素与所述第二元素在第二场景中执行互动动作。
5.根据权利要求1所述的方法,其特征在于,所述获取第一场景中第一元素被触发时生成的互动请求之前,还包括:
创建多个层级叠加的画布;
读取画布背景配置参数,将所述画布的背景更新为透明背景;
在背景更新的画布中渲染对应的场景,所述场景中至少包括一个元素。
6.根据权利要求5所述的方法,其特征在于,所述在背景更新的画布中渲染对应的场景包括:
根据预设配置数据中元素对应的画布层级需求信息,确定所述元素所在场景对应的画布层级;
将所述场景渲染至对应层级的背景更新的画布。
7.根据权利要求6所述的方法,其特征在于,所述将所述场景渲染至对应层级的背景更新的画布之后,还包括:
获取与所述场景对应的场景视角控制参数,所述场景视角控制参数包括待关联视角控制器标识;
建立所述场景与所述视角控制器标识对应视角控制器之间的关联关系。
8.一种场景间元素互动装置,其特征在于,所述装置包括:
请求获取模块,用于获取第一场景中第一元素被触发时生成的互动请求;
请求解析模块,用于解析所述互动请求,获取与所述第一元素关联的第二场景,所述第一场景与所述第二场景渲染在层级叠加的不同画布中;
转换关系获取模块,用于获取所述第一场景与所述第二场景的位置参数转换关系;
互动位置确定模块,用于根据所述位置数据转换关系,确定所述第一元素在所述第二场景中的互动位置;
元素添加模块,用于将所述第一元素添加至所述第二场景中的互动位置,进行所述第一元素与所述第二场景之间的互动处理。
9.一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。
10.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。
CN201910666331.1A 2019-07-23 2019-07-23 场景间元素互动方法、装置、存储介质和计算机设备 Active CN110377861B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910666331.1A CN110377861B (zh) 2019-07-23 2019-07-23 场景间元素互动方法、装置、存储介质和计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910666331.1A CN110377861B (zh) 2019-07-23 2019-07-23 场景间元素互动方法、装置、存储介质和计算机设备

Publications (2)

Publication Number Publication Date
CN110377861A true CN110377861A (zh) 2019-10-25
CN110377861B CN110377861B (zh) 2023-11-07

Family

ID=68255122

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910666331.1A Active CN110377861B (zh) 2019-07-23 2019-07-23 场景间元素互动方法、装置、存储介质和计算机设备

Country Status (1)

Country Link
CN (1) CN110377861B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112099713A (zh) * 2020-09-18 2020-12-18 腾讯科技(深圳)有限公司 一种虚拟元素的展示方法以及相关装置
CN114816202A (zh) * 2022-05-09 2022-07-29 广州市易工品科技有限公司 tab组件里的图表跨界交互方法、装置、设备及介质
CN115412862A (zh) * 2022-08-04 2022-11-29 广州市明道文化产业发展有限公司 基于lbs的多角色去中心化情节互动方法、装置及存储介质
CN115808974A (zh) * 2022-07-29 2023-03-17 深圳职业技术学院 沉浸式指挥中心构建方法、系统及存储介质
CN116617658A (zh) * 2023-07-20 2023-08-22 腾讯科技(深圳)有限公司 一种图像渲染方法及相关装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106861184A (zh) * 2016-12-28 2017-06-20 北京乐动卓越科技有限公司 一种在沉浸式vr游戏中实现人机交互的方法和系统
US20180096453A1 (en) * 2016-10-05 2018-04-05 Hidden Path Entertainment, Inc. System and method of capturing and rendering a stereoscopic panorama using a depth buffer
CN108289220A (zh) * 2018-01-15 2018-07-17 深圳市奥拓电子股份有限公司 虚拟图像处理方法、图像处理系统及存储介质
CN109782901A (zh) * 2018-12-06 2019-05-21 网易(杭州)网络有限公司 增强现实交互方法、装置、计算机设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180096453A1 (en) * 2016-10-05 2018-04-05 Hidden Path Entertainment, Inc. System and method of capturing and rendering a stereoscopic panorama using a depth buffer
CN106861184A (zh) * 2016-12-28 2017-06-20 北京乐动卓越科技有限公司 一种在沉浸式vr游戏中实现人机交互的方法和系统
CN108289220A (zh) * 2018-01-15 2018-07-17 深圳市奥拓电子股份有限公司 虚拟图像处理方法、图像处理系统及存储介质
CN109782901A (zh) * 2018-12-06 2019-05-21 网易(杭州)网络有限公司 增强现实交互方法、装置、计算机设备及存储介质

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112099713A (zh) * 2020-09-18 2020-12-18 腾讯科技(深圳)有限公司 一种虚拟元素的展示方法以及相关装置
CN112099713B (zh) * 2020-09-18 2022-02-01 腾讯科技(深圳)有限公司 一种虚拟元素的展示方法以及相关装置
CN114816202A (zh) * 2022-05-09 2022-07-29 广州市易工品科技有限公司 tab组件里的图表跨界交互方法、装置、设备及介质
CN115808974A (zh) * 2022-07-29 2023-03-17 深圳职业技术学院 沉浸式指挥中心构建方法、系统及存储介质
CN115808974B (zh) * 2022-07-29 2023-08-29 深圳职业技术学院 沉浸式指挥中心构建方法、系统及存储介质
CN115412862A (zh) * 2022-08-04 2022-11-29 广州市明道文化产业发展有限公司 基于lbs的多角色去中心化情节互动方法、装置及存储介质
CN115412862B (zh) * 2022-08-04 2024-04-30 广州市明道文化产业发展有限公司 基于lbs的多角色去中心化情节互动方法、装置及存储介质
CN116617658A (zh) * 2023-07-20 2023-08-22 腾讯科技(深圳)有限公司 一种图像渲染方法及相关装置
CN116617658B (zh) * 2023-07-20 2023-10-20 腾讯科技(深圳)有限公司 一种图像渲染方法及相关装置

Also Published As

Publication number Publication date
CN110377861B (zh) 2023-11-07

Similar Documents

Publication Publication Date Title
CN110377861A (zh) 场景间元素互动方法、装置、存储介质和计算机设备
US10863168B2 (en) 3D user interface—360-degree visualization of 2D webpage content
CN107219916B (zh) 基于多平台的体验生成
Williams et al. BIM2MAR: an efficient BIM translation to mobile augmented reality applications
US10831334B2 (en) Teleportation links for mixed reality environments
US9224237B2 (en) Simulating three-dimensional views using planes of content
US9437038B1 (en) Simulating three-dimensional views using depth relationships among planes of content
CN107890671B (zh) Web端的三维模型渲染方法、装置、计算机设备及存储介质
US10620778B2 (en) Augmentable and spatially manipulable 3D modeling
WO2023020622A1 (zh) 一种显示方法、装置、电子设备、计算机可读存储介质、计算机程序及计算机程序产品
US20180143757A1 (en) 3D User Interface
EP3036718A1 (en) Approaches for simulating three-dimensional views
CN108133454B (zh) 空间几何模型图像切换方法、装置、系统及交互设备
CN109582311A (zh) 一种游戏中ui编辑的方法及装置、电子设备、存储介质
KR20120010041A (ko) 이동 단말 환경에서 증강 현실 콘텐츠를 저작하는 방법 및 시스템
US10623713B2 (en) 3D user interface—non-native stereoscopic image conversion
Toumpalidis et al. VR Binoculars: an immersive visualization framework for IoT data streams
CN110990106B (zh) 数据展示方法、装置、计算机设备及存储介质
Gomes Jr et al. Semi-automatic methodology for augmented panorama development in industrial outdoor environments
CN106125937B (zh) 一种信息处理方法和处理器
KR101909994B1 (ko) 나노블럭을 이용한 3d 증강현실 서비스 제공 방법
CN104615398A (zh) 一种立方体显示方法及装置
EP4325344A1 (en) Multi-terminal collaborative display update method and apparatus
Cristina et al. 3D mobile prototype for basic algorithms learning
Ha et al. DigiLog Space: Real-time dual space registration and dynamic information visualization for 4D+ augmented reality

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