疫情仍然在继续，但是维州已经开始恢复生机。我大概又歇了小半年，除了工作时间，下班之余几乎没有碰与技术相关的东西。同时由于近来关注了太多社会新闻，反而让自己陷入了政治性抑郁。刷推的时候刷到一个无聊的放置类手游竟随手下载来玩了一个星期，也算放空一下自己，转移注意力，好重振旗鼓。 回顾了一下半年多以前开发的 Axidraw Web，有不少可以分享的点东西，准备挑几个记录一下。

AxiDraw 是一个双电机的二维绘图仪。可以将 SVG 绘制到纸面上。在研究完它的底层串口协议后，我尝试用 javascript 实现了一个能在网页上运行的 Web 小程序，能通过 WebUSB API 与 AxiDraw 单片机直接进行通讯，同时实现了 SVG 的绘制功能。

¶WebUSB

在开发 Axidraw Web 的时候，由于 WebUSB API 需要在安全的浏览器环境下（Secure Contexts）才能使用。在较早的 Chrome 浏览器上（version 83 之前），localhost 是否属于 Secure Contexts 尚未确定。而这类 API 默认只对 https://localhost 开放。在我写这篇文章的时候，文档中已经明确将 localhost 定义为安全环境。如果在开发环境中使用了较老的浏览器或者其它的自定域名，还是需要自行提供 TLS 支持。主要工作就是提供一个自签名证书，然后在 web server 中使用:

import express from 'express';
import https from 'https';
import fs from 'fs';

const app = express();
app.use(express.static('dist'));

const options = {};

try {
  options.key = fs.readFileSync('server/cert/dev.key');
  options.cert = fs.readFileSync('server/cert/dev.crt');
} catch (e) {
  console.error('Please create and install the SSL cert first.');
  process.exit(1);
}

const server = https.createServer(options, app).listen(8443);

前阵子在处理动森二维码的服装预览模型的时候，玩了一下 Blender。于是又勾起了我小时候玩 3D Max 的回忆。于是好想给手上这台 Macbook Pro 2016 配个显卡，深入学习一下 3D 建模。

于是在网络上搜索了好一阵，发现可以使用 eGPU（外置显卡坞）将独立显卡接到 Macbook 上使用。苹果的官网有一篇文章介绍了目前各个版本的系统支持的 eGPU 以及显卡的情况。

仔细看了一圈下来，发现由于历史原因近几年新出的 Macbook 并不支持 nvidia 显卡。看来是没法享受最近要发布的 RTX 3080 系列，只能选择 AMD 显卡。经过简单的预算，最终选择了 Razer Core X 和 AMD RX 5700 XT 来体验一番。

继上回给 Apollo Link 打补丁过去了几个月，本想翻看一下之前的那个 Pull Request 是否已经被 Merge，结果没想到原来的 Apollo Link 库已经被弃用了。新版的 Apollo Link 被重构后集成到了 @apollo/client 包中。不过并没有修复前面 PR 提到的问题。更糟糕的是之前使用的打补丁的方式无法起作用了。新的 selectHttpOptionsAndBody() 函数被专门放置到一个独立的 module 文件中。并且在提供的 cjs bundle 里，它直接被 createHttpLink 函数引用。所以之前的替换方法没办法在函数被引用前进行「狸猫换太子」。

那么是否有其它成本比较低的方式进行补救？于是我简单的搜索了一下 Webpack 的官方文档，很快找到了一个叫 NormalModuleReplacementPlugin 的内置插件。使用它可以非常方便地替换指定的模块文件。

new webpack.NormalModuleReplacementPlugin(
  resourceRegExp,
  newResource
);

前篇写到动森二维码生成器的二维码划分规则以及预览模型的 UV 贴图。根据我的设想，接下来我要在 Aseprite 画板上将这个模型渲染出来，并将用户绘制的图案通过 UV 贴图的方式绘制到模型上。而目前我所拥有的东西只有：调整过 UV 贴图坐标的 6 个衣服模型、在 Aseprite 读取和写入像素的 Lua API，还有记忆中模糊的图形学知识。本文简单记录一下我当时的思路，以及遇到的一些细节问题，如果对实现有兴趣，可以直接访问 Github 上的该项目。

在开发动森二维码生成器的时候，对于服装类设计的生成，一开始我并没有很好的想法。游戏中对贴图的是分块绘制的，并且有一个动态模型可以展示衣服绘制的效果。对比同类工具 Animal Crossing Pattern Tool（下称 ACPT），他们也提供了 3D 模型用于展示贴图效果。但要如何在 Aseprite 中实现展示 3D 模型，我并不是很有把握，毕竟这是一款用于绘制 2D 像素图的工具。另外如何给贴图分块，也需要深入分析。本文先记录一下贴图的划分，之后再写一篇分析 3D 模型的渲染。

最近翻到一本不错的像素书：由 Nostarch Press 出版的 Make Your Own Pixel Art。Nostrach Press 专门出版极客类的书籍，里面有很多看到标题就有兴趣读下去的书，非常适合我。

而这本 Make Your Own Pixel Art 的作者 Janeifer 拥有 30 年的像素画经验，在书中非常系统地讲解了像素画入门的各个方面，还提供了不错的练习素材。并且书中使用的编辑器正是我非常喜欢的 Aseprite。正好最近时间比较多，就又拿起来画板和鼠标瞎画点东西。

而更让我惊喜的是，这款买了很久的小而专业的像素绘画软件，居然支持自己编写插件。从 Aseprite v1.2.10-beta2 版本开始，作者引入了 Lua 语言来扩展编辑器，允许用户编写一些定制化的功能。

于是我开始琢磨着用它做点什么。正好最近在玩动物森友会，游戏里允许玩家自己创做像素风格的图案用来装饰各种物品、衣服、地面。另外，新版的 Animal Crossing: New Horizons 可以通过手机 App 扫描早期版本的 Animal Crossing: New Leaf （下称 ACNL） 玩家绘制的图案的二维码，导入这些现存的图案。

但要知道，不像 3DS 上的 ACNL 可以使用双屏 + 画笔来做画。在 Nintendo Switch 上使用手柄做画有多难受，可想而知。虽然基础画板只有 32 x 32 像素，但是切换颜色、工具等操作，实再不如在电脑上作画来得舒服。我想，如果能直接在 Aseprite 这种专业软件中作画，然后直接生成二维码，再传送到游戏里使用，岂不是非常方便。