基于浏览器三维引擎和Websocket的多终端可变式交互方法及系统与流程

目前部署在游乐场或门店的娱乐系统或交互系统可以是单端离线式或者是多端在线式系统，这些系统的输入设备侵入性不统一，强侵入性的输入设备(即用户必须要携带某种装置，例如手柄、键盘、甚至是穿戴设备等)意味着依赖特定的娱乐内容和设备，这些设备的部署和安装比较复杂，且容易场地受限，依赖特定场景进行游玩；而弱侵入性的输入设备(即用户不需要携带设备，或者是设备本身可以是用户自己的设备，例如手机)交互点匮乏，导致用户在使用弱侵入性设备进行交互时交互流程较短，沉浸感弱。

技术实现要素：

本发明的目的是提供一种多终端可变式交互系统，解决现有强侵入性与弱侵入性的输入设备存在的问题。

网页作为信息化时代的数据载体，能够随时随地呈现用户所需的数据信息。它拥有轻量化的特性，不需要使用特殊的软件程序，只需要网页浏览器即可查看所需资料。网页以及浏览器引擎的发展日渐强大，一方面，目前可以在浏览器中查看三维场景和物体，用户可以直接通过浏览器以及基于threejs框架等浏览器三维引擎浏览基于三维场景的网站或者游玩基于三维引擎和物理引擎的网页游戏；另一方面，http协议是浏览器通信基础协议，通常浏览器通信过程中会涉及大量的消息封装以及消息拆解过程，在短时间高度密集的通信过程中会导致额外的性能以及带宽消耗，而websocket协议作为一种传输层tcp协议的轻量封装，浏览器之间通过websocket进行握手之后，后续的数据能够基于tcp协议进行传输，从而减少性能损耗并减少带宽占用。

本发明基于上述特征，提供一种基于浏览器三维引擎和websocket的多终端可变交互方法，包括以下步骤：

s1、启动过程；

1.1)、交互系统远程服务器端与移动终端建立基于websocket协议的连接；交互系统远程服务器端向移动终端提供呈现交互内容列表的页面；

1.2)、远程服务器端向移动终端提供与移动终端选择的交互内容对应的本地服务器地址，使得移动终端与本地服务器端websocket协议直接连接；

1.3)、本地服务器端显示移动终端打开本地服务器页面时的本地交互内容的页面；

s2、开始交互；

2.1)、移动终端按照本地服务器端提供的默认操作方式操作虚拟对象；

2.2)、本地服务器端实时更新渲染的交互内容；

2.3)、判断是否达到特定流程或虚拟对象是否到达特定场景，若是，进入步骤2.4)，若否，进入步骤2.5)；

2.4)、本地服务器端接收移动终端向本地服务器端发送请求改变当前操作方式的消息，对移动设备当前操作方式进行改变；

2.5)、按照本地服务器端改变后的特定操作方式进行交互；

2.6)、判断否给予当前操作方式达成目标，若是，本地服务器端还原默认操作方式，保存移动终端发送的当前进度消息；远程服务器端保存移动终端发送的当前用户信息；若否，本地服务器端保持当前操作方式，直至当前操作方式达成目标；

2.7、是否结束整个流程，若是，结束交互过程，本地服务器端保存移动终端发送的当前进度消息，远程服务器端保存移动终端发送的用户信息；若否，返回步骤2.2)。

进一步地，用户可以选择向交互系统投放自定义虚拟对象，在步骤2.1)之前还可以包括：

本地服务器端通过显示设备显示移动终端自定义创建的虚拟对象，并将创建的虚拟对象发送至远程服务器端进行保存。

本发明还提供一种基于浏览器三维引擎和websocket的多终端可变交互系统，其特殊之处在于，包括远程服务器、本地服务器及输出设备；上述本地服务器与远程服务器中存储交互程序，并且在用户访问时提供交互网页，交互程序在服务器中运行时，实现上述的方法。

进一步地，为了尽量缩短数据拆解和封装时间，同样保证低延迟传输体验，本地服务器与远程服务器采用websocket、tcp或udp传输层连接方式连接。

进一步地，输出设备包括显示设备、音频设备及其他设备。

进一步地，音频设备包括音响、耳机；

其他设备包括基于嵌入式设备的交互装置、发声装置。

进一步地，选择threejs为三维引擎。

本发明的有益效果是：

1、本发明交互系统的输入设备介于强侵入性和弱侵入性之间，用户可以使用自己的移动终端参与交互流程，能够向系统中投放自定义内容或控制虚拟对象，同时在交互过程中系统后端通过交互进度来反馈给用户的移动终端，使移动终端的操作方式发生变化，既能够在弱侵入的状态下长时间参与交互体验流程，也能够通过不断改变的操作方式提升沉浸感。

2、本发明的交互方法不需要用户安装特定的软件，只需要运行浏览器即可完成整个流程，移动终端能够根据不同特性(例如传统的触摸方式、陀螺仪、摄像头拍摄、录音等)转换成不同的交互过程。而交互系统中本地服务器端的输出内容既可以使用浏览器呈现，也可以使用传统的软件进行处理和显示(也就是说服务端运行并显示在显示器上的交互程序，也可以跟移动终端运行的网页保持一致，也可以使用其他方式开发的桌面应用程序，因为websocket协议不仅支持浏览器也可以支持普通的应用程序)。从而减少用户学习成本并提升新鲜感，同时能够实现灵活部署和自定义定制化。

3、用户通过该系统，可以在不需要任何软件安装的情况下，使用更轻量的形式参与到各种线下游戏环节中。结合了用户随身携带的设备，虚实结合，提升了用户体验的同时可以减少部分道具开发的成本。

4、本申发明主要应用于线下娱乐环节或系统，能够结合各类输出设备和终端来提供更加丰富以及意想不到的交互内容和环节，让娱乐场景借助信息技术提高到一定层次。

5、本发明交互内容的技术路线选择灵活，可以基于传统游戏引擎进行开发，也可以进行网页开发，根据更灵活的选择能够降低制作成本。

6、部分交互内容可以不依赖特定的硬件系统，交互系统的输出设备可以选择投影仪或其他传统输出设备，灵活性更高。

附图说明

图1为本发明实施例系统示意图；

图2为本发明实施例方法流程示意图；

具体实施方式

以下结合附图及具体实施例对本发明做进一步地描述。

实施例一

本发明可以是任一的浏览器三维引擎，本实施例以threejs浏览器三维引擎为例进行说明。

从图1可以看出，本实施例基于threejs和websocket的多终端可变式交互系统，主要包括远程服务器、本地服务器及输出设备。

该系统中，为了提供低延迟的数据传输体验，远程服务器能够与移动终端通过websocket连接，并向用户移动终端提供网页，该网页能够向用户展示交互面板，用户使用移动设备打开远程服务器提供的网页。远程服务器还能够接收用户通过交互面板发送的消息，根据消息发送给与用户相近的本地服务器端，本地服务器端将根据消息内容影响本地显示设备、音响设备以及其他装置的内容和行为。

本地服务器端与用户移动设备处在同一空间当中，本地服务端能够监听移动设备的消息或发送消息，用户针对交互面板的行为会直接反应到本地输出设备，如显示设备和音频设备，其中显示设备可以包括各类监视器、投影、led灯矩阵等等，音频设备可以包括音响、耳机等等，其他设备可以包括基于嵌入式设备的交互装置、发声装置等等。本地服务器可以与远程服务器采用websocket、tcp、udp等传输层连接方式，尽量缩短数据拆解和封装时间，同样保证低延迟传输体验。

本系统中移动设备主要充当一种类似遥控器的角色，然后该虚拟遥控器的形式会根据在本地服务器环境中的体验过程而随时变化。移动设备的交互面板提供一种接近游戏交互的体验，可以呈现例如类似游戏手柄(带有虚拟摇杆和虚拟按键的面板)、蓄力滑动条(用户通过连续点击屏幕的形式使得滑条发生变化)、密码转盘(类似保险柜门的转动锁)等等的操作方式。根据设计人员的想象力和交互流程需求，这种交互面板类型可以一直扩充，并且在用户体验交互流程的过程中随时变化。

根据用户在移动终端上的操作，能够给予本地服务器端中的输出设备影响。根据用户的操作，用户实际上是在参与操纵角色、操纵装置、解谜等流程。例如，用户可以通过交互面板来影响与本地服务器端连接的交互装置(这里的交互装置指的是输出设备中的一部分，与本地服务端连接)的升降，而升降的过程会影响显示器显示的画面中角色是否能通过某一特定区域。这种流程可以通过设计人员的设计进行扩充，而所有设计都围绕着该系统作为支撑去实现。

从图2可以看出，本实施例交互方法通过以下步骤实现：

步骤一、启动过程；

1.1、用户通过移动设备参与到交互流程中，在启动过程中用户的移动设备与交互系统远程服务端建立基于websocket协议的连接；

1.2、连接完成后，用户打开移动终端上显示的远程服务端页面，远程服务器端向移动终端发送呈现交互内容列表的网页；用户在该页面上选择交互内容，远程服务器端根据用户选择的交互内容向移动终端提供本地服务器地址，用户打开本地服务器页面，此时，本地服务器端通过输出设备呈现本地交互内容页面。

步骤二、交互；

2.1、移动设备显示基于浏览器三维引擎框架的三维场景，指导用户创建虚拟对象，或者提供基于三维物体的操作方式；期间本地服务器将与远程服务器保持通信，并向远程服务器发送用户的基本信息，远程服务器将适时保存用户的各项数据，包括进度、自定义内容等等。用户可以选择向本地服务器投放自定义虚拟对象，显示设备显示自定义虚拟对象，例如用户可以通过手机上的网页创建一个自己的虚拟形象放入其中；也可以选择直接操纵系统提供的虚拟对象。用户投放完毕后，用户的移动设备界面会转换成控制虚拟对象的操作界面，例如显示虚拟摇杆来控制虚拟对象的移动。

2.2、本地服务器端实时更新渲染交互内容，用户浏览交互内容。

2.3、用户通过操纵对象在交互系统提供的场景中漫游，当进行到特定流程，或者漫游到特定场景时，移动设备向本地服务器端发动请求改变当前的操作方式的消息，本地服务器端更改当前操作方式，移动设备显示更改后的操作方式；进入步骤2.4；举例说明，用户在默认情况下，会使用虚拟摇杆使得虚拟对象在场景中的陆地上进行移动，当场景中的虚拟角色接触到河水时，交互系统会通知移动设备改变操作方式，让用户通过摇晃手机的方式让虚拟角色进行游泳的动作，使其能够游过河水。若没有进行到特定流程，或者漫游到特定场景时，进入步骤2.4。

2.4、当用户通过当前操作完成某一目标后，交互系统本地服务器端会通知移动终端并还原用户的操作方式。举例说明，当用户通过摇晃手机的方式帮助虚拟角色游过河水后，交互系统能检测到虚拟对象回到陆地，并且通知移动设备将操作方式还原成虚拟摇杆，继续使用虚拟摇杆在陆地上漫游。如果没有完成目标，则保持当前操作方式(即继续晃动手机)；上述流程将在交互系统中以不同形式多次呈现，直到用户以及虚拟角色达成了特定目的，或用户选择退出。期间本地服务器会持续与远程服务器保持连接，在关键节点时向远程服务器发送数据，使其保存用户的交互流程进度。

实施例二

本实施例交互方法以本地服务端与远程服务端为对象进行说明，其过程与实施例一相同，只是通过不同的角度进行描述。

包括以下过程：

s1、启动过程；

1.1)、交互系统远程服务器端与移动终端建立基于websocket协议的连接；交互系统远程服务器端向移动终端提供呈现交互内容列表的页面；

1.2)、远程服务器端向移动终端提供与移动终端选择的交互内容对应的本地服务器地址，使得移动终端与本地服务器端通过websocket协议直接连接；

1.3)、本地服务器端显示移动终端打开本地服务器页面时的本地交互内容的页面；

s2、开始交互；

2.1)、本地服务器端通过显示设备显示移动终端自定义创建的虚拟对象，并将创建的虚拟对象发送至远程服务器端进行保存；移动终端也可以按照本地服务器端提供的默认操作方式操作虚拟对象；

2.2)、本地服务器端实时更新渲染的交互内容；

2.3)、判断是否达到特定流程或虚拟对象是否到达特定场景，若是，进入步骤2.4)，若否，进入步骤2.5)；

2.4)、本地服务器端接收移动终端向本地服务器端发送请求改变当前操作方式的消息，对移动设备当前操作方式进行改变；

2.5)、按照本地服务器端改变后的特定操作方式进行交互；

2.6)、判断否给予当前操作方式达成目标，若是，本地服务器端还原默认操作方式，保存移动终端发送的当前进度消息；远程服务器端保存移动终端发送的当前用户信息；若否，本地服务器端保持当前操作方式，直至当前操作方式达成目标；

2.7)、是否结束整个流程，若是，结束交互过程，本地服务器端保存移动终端发送的当前进度消息，远程服务器端保存移动终端发送的用户信息；若否，返回步骤2.2)。

实施例三

本实施例交互方法以移动终端为对象进行说明，其过程与实施例一相同，只是通过不同的角度进行描述。

包括以下步骤：

s1、启动过程；

1.1)、移动终端与交互系统远程服务器端建立基于websocket协议的连接；移动终端打开远程服务器端向移动终端发送的呈现交互内容列表的网页；

1.2)、选择交互内容，移动终端通过远程服务器端获得本地服务器的地址，移动终端与本地服务器websocket直接连接；

1.3)、移动终端打开本地服务器端向移动终端发送的呈现本地交互内容页面；

s2、开始交互；

2.1)、根据呈现在移动终端上的页面，创建虚拟对象；并将创建好的虚拟对象发送至本地服务器端通过显示设备进行显示，同时本地服务器端将创建的虚拟对象发送至远程服务器端进行保存；也可以按照本地服务器端提供的默认操作方式操作虚拟对象；

2.2)、浏览本地服务器端实时更新渲染的交互内容；

2.3)、判断是否达到特定流程或虚拟对象是否到达特定场景，若是，进入步骤2.4)，若否，进入步骤2.5)；

2.4)、移动终端向本地服务器端发送请求改变当前操作方式的消息，后按照本地服务器端改变后的特定操作方式进行交互；

2.5)、判断否给予当前操作方式达成目标，若是，还原默认操作方式，并向本地服务器端发送保存当前进度的消息，同时向远程服务器端发送保存用户信息的消息；若否，直至当前操作方式达成目标；

2.6)、是否结束整个流程，若是，结束交互过程，并向本地服务器端发送保存当前进度的消息，同时向远程服务器端发送保存用户信息的消息；若否，返回步骤2.2)。