引言
你是否留神到，这些年咱们越来越少在演讲中看到演讲人用激光笔给观众批示所讲的内容。先说激光笔，激光笔的工作原理是射出一束激光，照射到幕布上并反射到观众的眼睛里，于是大家能够看到一个很亮的红色光点。但当初因为大尺寸屏幕越来越便宜，咱们越来越少应用幕布这种传统投影显示设施了，毕竟屏幕的显示成果要更好。而屏幕为了保障良好的显示成果，往往都会在外表的玻璃上应用大量抗反射技术。这些抗反射技术的使用大大削弱了激光的反射，所以最终用户看到的红色光点就不那么显眼了，激光笔的成果大打折扣。
那么有没有可能用大家出门惟一违心携带的手机来代替激光笔呢？我尝试了上面两种计划。
3D 模仿计划
简略来说就是用手机内置的姿势传感器和加速度传感器来构建出手机和显示屏在三维空间中的方位和姿势，再以此模拟计算如果从手机收回一束激光，会照射到屏幕上的哪个地位，并在屏幕上的相应地位绘制一个红点，这样来实现手机模仿激光笔的成果。
如上图所示，假如一块屏幕的两条邻边别离平行与 X 轴和 Z 轴。当手机从 A 点沿着屏幕的一条边挪动到 B 点，再从 B 点沿着屏幕的另一条边挪动到 C 点，咱们就能够计算出屏幕在以 A 点为原点的三维空间中的具体位置。
计算方法其实很简略，比方当咱们计算从 A 到 B 的过程时，只须要用手机上的加速度传感器取出时时刻刻手机在 x 轴方向上的加速度，再乘以工夫，就能够失去手机时时刻刻在 x 轴方向的速度，速度再乘以工夫就能够得出手机在 x 轴方向挪动了多少间隔。简略说就是对手机在 x 轴方向的加速度做了两次工夫维度上的积分。
可能通过把手机从 A 点挪动到 B 点和 C 点来计算出屏幕的地位，天然也能够在接下来计算出任意时刻手机绝对屏幕的空间地位和姿势方向，并模拟计算从手机射出一束激光会照射到屏幕的哪个地位。
可是，试验过后我发现这个计划尽管在实践上是可行的，但因为累积误差的存在，理论并不可行。
咱们拿手机从 A 点挪动到 B 点这个最根底的场景来举例。当一个人拿着手机从 A 挪动到 B 的时候，手机的加速度、速度和挪动间隔能够用上面三幅图来形容。
横轴 t 示意工夫，纵轴 a、v、d 别离示意手机在 x 方向的加速度、速度和挪动间隔。
第一幅图中，加速度前半程是正的，后半程是负的，所以手机在 x 方向上先减速后加速，速度从 0 增长到最大，后又缓缓减为 0，而挪动间隔一开始因为速度比较慢，所以增长慢，两头速度达到最大值，挪动间隔也增长得最快，最初速度归 0，挪动间隔也不在增长。
可问题就出在加速度上。原本加速度正的局部的积分和负的局部的积分，也就是蓝色区域的面积和黄色区域的面积，是完全一致的，这样当静止过程完结时手机的速度就会复原为 0，但理论状况并非如此。
首先，真实世界的物理量是间断的，加速度当然也是间断的，但在手机上通过操作系统提供的各种接口取到的加速度是不可能间断的，而是每 16ms 能力取一个值。于是在计算蓝色和黄色区域的面积的时候，只能通过计算若干个矩形的面积并求和来失去一个近似值。
其次，手机操作系统通过接口提供的加速度和实在的加速度必然是有差异的，任何测量都有误差，只有实在的值才会使得蓝色和黄色区域的面积完全相同。
所以，因为上述的两个起因，在手机从 A 点挪动到 B 点后，咱们通过测量加速度和计算速度，最初会发现手机达到 B 点后速度仍然没有归 0，而速度没有归 0 意味着零碎认为手机仍然在匀速沿 x 轴挪动，最终使得整个零碎都不可用。
3D 模仿计划的基本问题在于咱们须要对一个存在误差的量做工夫上的积分，咱们都晓得误差并不可怕，简直所有的测量量都有误差，比拟可怕的是累积误差，它会让你的零碎运行一段时间后齐全失控，而 3D 模仿计划更蹩脚的中央在于这个误差是在工夫维度上累积的，而工夫不会进行。
姿势模仿计划
在 3D 模仿计划失败后，我又想到一个简化版的计划，既然加速度因为有误差而无奈应用，那能不能思考简略一点，只用没有累积误差的方向传感器来实现管制呢？
假如手机的初始地位是正对屏幕的正核心，那么只有晓得手机到屏幕的间隔，以及手机绕 x 轴旋转的角度 beta，就能够算出红色光电会向上挪动多少间隔了。但咱们没有间隔传感器，后面也说了不能用加速度来计算间隔，那咱们罗唆再进一步简化，不思考间隔，只思考角度。
咱们认为设定手机手机初始地位正对屏幕正中，绕 x 轴向上旋转 25 度时，红点从屏幕正中挪动到屏幕顶部，绕 x 轴向下旋转 25 度时，红点挪动到屏幕底部。手机绕 z 轴左右旋转 25 度时，红点别离挪动到屏幕的最右边和最左边。这样，咱们就能够只用一个简略的姿势传感器实现模仿激光笔的成果了。
试验表明，这种计划齐全可行，而且代码逻辑简略。当然，这种形式假设了手机的初始姿势，其实也假设了手机到屏幕的间隔 (能够思考一下为啥也假设了手机到屏幕的间隔 ^\_^)，用户在应用的时候可能会略微感到有一点点不天然。同时，为了更好更不便的管制体验，还须要加一些让用户重置手机姿势的性能。
Demo
本文中所讲的姿势模仿计划，大家能够在 Laser Pen Demo 体验，相干代码在 Laser Pen – Github 的 example 目录下。
在 pc 浏览器中关上 demo 页面后稍等几秒，你应该会看到页面的头部生成了一个二维码。
当手机上的管制页面显示「Connected」的时候，你就能够尝试挥动手机来管制 pc 页面上的小红点啦。
对于这个 demo 还有两点阐明。
首先，demo 中获取的手机姿势数据是通过 WebRTC 技术间接发到 pc 页面的，所以你齐全不必放心有集体敏感信息泄露的问题。
其次，demo 的次要通信伎俩尽管是 WebRTC，但 WebRTC 链接建设的过程是须要一些音讯推送伎俩的，所以 demo 也用到了 socket.io
最初，demo 用了一个收费的后端服务，这个服务一段时间没有人拜访后会主动进行，下次再拜访就得等将近两分钟服务能力启起来。所以如果你关上 pc 页面后发现二维码没有显示进去，能够先去喝杯水，再回来刷新一下页面试试。
最初
欢送大家 star、pr、issue 我的我的项目 Laser Pen – Github
也欢送大家关注我的公众号：老虎的小窝