姑苏城外一茅屋，万树梅花月满天

0%

项目收集 | pose_animator

发表于 更新于 分类于 ， ， Valine：

项目为 2D 的姿态迁移，效果非常惊艳。


项目相关



安装


原始的地址，在下载数据集的时候需要连接外网，如果你是用原始的地址，并且你没有代理，那么，你运行项目，会一直停留在

Loading FaceMesh model ...

而网络上的好心人已经给改进了，就是上面的项目改进地址。

这里假设你已经下载好了相关的项目。

在项目中，我们通过 yarn 来安装相关的东西。

首先我们要先安装 yarn

ubuntu

安装 yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn

安装完之后，如果你 yarn 之后，然后使用 yarn watch 构建的话，此时可能会出现错误。

Cannot resolve dependency 'paper'

这个时候，你可以直接这样修改

yarn remove paper
yarn add paper@0.12.1

因为之前的 paper 是 0.12.4 可能版本不一样，所以，你要换成 0.12.1

修改完这个后，我们还要修改 package.json 的 scripts 模块。

大概在这个文件的第 22 行。

原来的是这样的

"scripts": {
    "watch": "cross-env NODE_ENV=development parcel index.html --no-hmr --open ",
    "build": "cross-env NODE_ENV=production parcel build index.html --public-url ./",
    "build-camera": "cross-env NODE_ENV=production parcel build camera.html --public-url ./",
    "lint": "eslint .",
    "link-local": "yalc link"
  },

要把，里面的 watch 的内容替换为下面

"watch": "cross-env NODE_ENV=development parcel index.html --no-hmr --open --no-source-maps "

推荐使用这个方法

另外，如果，我们想直接 yarn 好的 paper 版本，可以在 yarn.lock 这个文件中，把 paper 版本修改回来

大概在第 4632 行

把

"paper@file:third_party/paper":
  version "0.12.4"

改成

"paper@file:third_party/paper":
  version "0.12.1"

改完这个之后再 yarn，如果，你先 yarn 了，只能按照上面那个 remove 后再 add.

macos

安装 yarn

brew install yarn

其他步骤和 ubuntu 一样。


制作 svg


制作自己的 svg 图画。

先看一下官方给的教程

[Layer 1]
|---- skeleton
|---- illustration
    |---- path 1
    |---- path 2
    |---- path 3

这个指的是 svg 的内部结构。

我使用的软件叫做 Inkscape。

  • layer 1 表示只有一层图层，或者没有图层。整个画面分为两个组。
  • skeleton 和 illustration
    • 名字分别对应组的 ID，这个 ID 也不对，可以参考一下另外成功 svg 的 ID。
    • 一组是骨骼模型 skeleton 「自行向官网上寻找相关文件」
    • 一组是插画模型 illustration,后面的 path 表示，插画内容。

另外，插画不能有镂空，但是可以叠加。

比如，我如果要做一个剪纸，那么，剪纸会有镂空的图案，这个在我们画的 svg 中是不被允许的，可以拿白色的图案进行叠加。

图里面只能有两个组，第一个组是骨骼组，第二个组是插画组。

下面是我和淘宝人员商议的作品要求:

  1. 图里面不能有图层
  2. 图不能有背景色，以白色为底，可以分清主体
  3. 图里面只能有两个组，第一个组是骨骼组，第二个组是绘画组，所以，对于设计师而言，只能有一个组
  4. 只能叠加，不能镂空，即便是一笔画出来也不能有镂空操作。比如说，你画一个圆圈，中间是镂空的，正确的做法是，画一个实心圆，然后，中间用白色填充
  5. 不能用位图代替图形，只能自己勾绘

线上服务器运行


暂时运行

ps:这个是很久之前的方法，因为当时，我 build 的时候，总是出错，所以，用了这个方法，这种方法只在本地测试的时候用，服务器最好不要用这种方法。

因为这个需要开启摄像头，所以，需要 https 传输，如果，实在是没有，可以参考我下面的博文，如何用 http 调用摄像头。

如果你想后台运行「linux」，我使用 yarn build 编译失败了，目前正在钻研这个。

暂时性的办法是

nohup yarn watch &

回车后输入 exit ，就可以了。在 MacBook中，这个操作不行。

具体你可以看我下面的博文。

服务器正确运行

ps: 因为只需要操作皮影，不需要其他的页面，所以，我把原来的 camera.html 改成了 index.html 然后其他都删掉了，所以，下面的命令，要进行对应。

之前，这个项目为什么会出错，错误在下面。

当然，你也会看到类似于英文的乱码，之前，我就是因为这个，没有办法 build 出来。

这是编码的错误，添加下面的编码就好了。

1
2
3
4
<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>

我把 build 给修改了一下「修不修改应该都可以」

原来

"build": "cross-env NODE_ENV=production parcel build index.html --public-url ./",

变成

"build": "parcel build index.html --public-url ./",

然后执行

yarn build

就好了

资源

和淘宝画家探讨后，约的一些画稿

下载ZIP

请我喝杯咖啡吧～