打破次元壁，让游戏角色在指尖跳舞，简易的 AR 教程

本文介绍如何通过 Windows 自带的 Xbox Game Bar 录制游戏视频，并通过 Python 使用 u2net 的 AI 模型对视频进行背景去除，生成含有透明通道的视频。最后结合 Html5 的相机并播放 webm 视频，实现简单的 AR 能力。

前言

作为一个天涯明月刀游戏的端游老玩家，天刀的画质是没的说的。玩天刀的七年，我唯一最大的收获就是拐了女朋友回家。至此，双十一来临之际，我紧急把之前想写的教程赶了出来。为了让单身的少侠可以在现实世界有自己游戏角色的陪伴，不再那么孤单，我可真是操碎了心，半夜把网页赶了出来。其实单身和非单身的双十一区别不是很大，只是吃土的方式不一样罢了。话不多说，我们先来看下效果：

啊，不对，放错图了，下面这个，下面这个……

在线演示地址：https://sangyuxiaowu.github.io/Wuxia_AR/

实现思路

增强现实（AR）这个概念想必大家都不陌生，根据其定义我们只需要将虚拟信息与真实世界融合就算的上是 AR 啦，这里我们不会用到三维建模、空间注册定位、智能交互等高大上的技术，也不会用到 ARCore、ARKit、Vuforia 等相关平台，今天仅实现简单的视频叠加效果。

在最终呈现上，我们通过天涯明月刀客户端提供的天涯一瞬功能录制视频素材，然后使用 AI 去除视频中的背景，生成含有 alpha 透明通道的视频。接着设计一个网页，打开摄像头并播放这个视频，这样一来，一个简单的 AR 功能就实现了。

录制素材

在游戏中打开天涯一瞬拍照系统，使用自由镜头，将视角画面翻转 90 度，在装饰中更改画面背景为第一个，这样便于后期抠图处理。关于灯光效果等其他设置大家按照自己的喜好来设置即可，当然衣服配饰什么的，优先考虑下后期抠图的效果。

设置完成播放自己想录制的动作就可以准备录制了，这里我使用的是 Windows 系统自带的 Xbox Game Bar ，按住 Win + G 呼出录制界面，点击录制按钮即可开始录制，你也可以直接按 Win + Alt + R 使用快捷按键直接开始录制。对于 N 卡的用户，也可直使用 NVIDIA GeForce Experience 的游戏录制功能进行录制。

这里我选择的动作是晨夕杏时茶时装的春时舞，动作拖放后会重复执行，但是音乐只有一次，开始录制的时机可能会不好把握，那么动作可以在结束前开始录制，然后记得要 Ctrl + U 隐藏游戏 UI ，后期做裁剪就可以了。后期处理可以使用 必剪 等工具进行，导出 mov 格式。

视频处理

视频帧提取

视频抠图我们使用 Python 处理，当然为什么不用 After Effect 或是其他处理软件，甚至必剪都带有抠图。话不能这么说，软件自己扣了，哪轮得到我写点代码呢？

这里会用到 OpenCV 、rembg 、PIL 等库。关于 AI 去背景可以看这一篇文章：《AI一键去背景》。

#导入所需的库
import cv2
import os
import math
from PIL import Image
from rembg import remove
1
2
3
4
5
6

接下来，我们定义视频转换图片函数，先使用 cv2 将视频文件逐帧存储为 .jpg 文件

def getFrame(video_name, save_path):

    video = cv2.VideoCapture(video_name)

    # 获取视频帧率
    fps = video.get(cv2.CAP_PROP_FPS)
    print(fps)

    # 获取画面大小
    width = int(video.get(cv2.CAP_PROP_FRAME_WIDTH))
    height = int(video.get(cv2.CAP_PROP_FRAME_HEIGHT))
    size = (width, height)

    # 获取帧数
    frame_num = str(video.get(7))
    name = int(math.pow(10, len(frame_num)))
    ret, frame = video.read()
    while ret:
        cv2.imwrite(save_path + str(name) + '.jpg', frame)
        ret, frame = video.read()
        name += 1
    video.release()
    return fps, size, frame_num
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

执行调用后，程序会将 video.mov 视频逐帧：

#将视频按帧保存为图片
frame_path = "./frames/"
if not os.path.exists(frame_path):
    os.makedirs(frame_path)
fps, size, frame_number = getFrame("video.mov", frame_path)
print(fps, size, frame_number)
1
2
3
4
5
6

逐帧去背景

对逐帧保存的所有图片逐个进行去除背景操作：

def getRemoveBg(frames):

    output_dir='./output/'
    if not os.path.exists(output_dir):
        os.makedirs(output_dir)

    files = [frames + i for i in os.listdir(frames)]
    for fi in files:
        fisave = fi.replace("frames","output").replace("jpg","png")
        if not os.path.exists(fisave):
            input =Image.open(fi)
            output=remove(input)
            output.save(fisave)

getRemoveBg("./frames/")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

图片背景处理好的放在文件夹 output，上面的逐帧抠图确实很慢，反正还要写文章，一边写一边等了，没必要现在优化成多线程了。

视频合并

在我们得到一堆透明 PNG 的序列图后，只需要通过 ffmpeg 工具将其合并成视频即可。

需要安装有 ffmpeg 软件，Windows 电脑需要配置好环境变量。

ffmpeg -r 30 -i output/1%06d.png -i music.mp3 -y output.webm
1

参数解释： 生成 30 帧的视频，输入一个是 png 序列，一个是 music.mp3 配乐文件，最后导出为 webm 格式。

网页效果

网页的设计非常简单，提供了强制的手机背面摄像头画面的渲染，以及 webm 视频文件的播放。操作控制按钮提供了全屏，视频文件的放大和缩小，以及开始播放功能。轻触角色会询问是否允许访问摄像头，点击允许，之后就可以点击角色，将其拖放到合适位置了。

食用教程

1. 克隆或下载存储库 https://github.com/sangyuxiaowu/Wuxia_AR/
2. VsCode 打开该存储库文件夹，访问 main.ipynb
3. 下载或生成 video.mov 录制的角色视频，放到这个文件夹中
4. 执行 main.ipynb 中的代码块
5. 打开或部署 index.html 文件

网页视频的图片预览可替换 1000000.png 文件。

注意

需要注意的是，经过测试，因为摄像头调用和视频播放没有适配 IOS设备，另外是透明背景视频 webm 的视频编码 VP9 是一个由 Google 开发的开放格式，只有在 webkit 内核的浏览器才可以播放，所以这个网页仅有安卓用户可以正常访问，在微信中或是手机版的 Chrome，Edge 浏览器访问即可看到效果。

总结

录制的素材和春时舞的配乐大家可前往 Github 仓库，或前往 CSDN 下载 。

总体来说，最终的效果还算可以，就是抠图确实还是存在很大的瑕疵。

希望天刀天涯一瞬功能后期可以将背景增加一个绿幕，或者可以直接录制透明背景的视频，为少侠们创造更多的快乐和灵感。另外，N 卡的亮点，自动录制，图片模式等各种功能在 64 位出现后就一直没再支持了，现在 32 位也没有就彻底用不了了。

“掌中舞罢箫声绝，三十六宫秋夜长。”

正午的阳光真好，少侠们，带上自己的游戏角色，去尽情起舞吧！