使用编程技能解决生活中遇到的问题。



最初的想法：我想提升一下英语单词的词汇量，可以是传统的背单词方式太枯燥，所以我在想可以是不是把单词分类记忆。分类后的单词彼此相关性会强一些，便于记忆。

当我在网上搜索时，发现了一本《老外每天在用的生活词汇》满足我刚刚的想法，非常好，现在单词已经有人帮我分好类了。可惜的是我只找到一本扫描版的 PDF，书本知识的缺点是没有发音和例句，虽然我在网上找到了这本书配套的 Mp3 音频，可是里面也只有发音，且需要像磁带一样一个章节一个章节的顺序播放。

这时我想到了常用的浏览器插件“沙拉查词”，要是这个 PDF 是线上的，鼠标点击单词给个弹窗就好了，这样不仅可以查看发音和例句，内容也可以更丰富。这学习体验多好啊，单词肯定记得也快！

好了，决定了，背单词的事情先放一放，我们先磨刀。

想把刚刚的想法实现，不是一个简单的事情，现在我们尝试把他分解一下：

- 扫描版的 PDF 上传网页方式
	- 图片
	- OCR 识别转文字
- 既然我们想保持书籍原本的布局和插画，就只能选图片了；
- OCR 可以用来处理每页出现的单词；
- 如何确定单词的位置？经调查（不要小瞧这轻描淡写的三个字），OCR 可以实现！
- 妥了！单词和位置能确定了就好说了，html、弹窗这些就都是小事了；

ok，下一步，找一个开源的好用的 OCR 库，尝试处理一下。

去 github 搜索一番，找到了 star 数量相对最多的 [tesseract](https://github.com/tesseract-ocr/tesseract)。这个库不仅可以本地命令行处理，也可以调用 API，那不得找一个熟悉的语言来处理啊，C++ 咱可玩不转。果然，被我找到了 [node-tesseract-ocr](https://github.com/zapolnoch/node-tesseract-ocr) ，哈哈哈哈，天助我也~

在查阅了两个库的文档之后，先写个简单的 index.js 测试一下效果吧！

```js
const Tesseract = require('node-tesseract-ocr');
const fs = require('fs');

const config = {
  lang: 'eng', // 识别语言
  oem: 1, // OCR 引擎模式
  psm: 3, // 页面分割模式
  tessedit_create_hocr: '1' // 生成 hOCR 输出格式
};

// 读取图片文件
const image = fs.readFileSync('test001.png');

// 调用 OCR API 进行识别
Tesseract.recognize(image, config)
  .then((res) => {
    // 将识别结果保存为 HTML 文件
    fs.writeFileSync('result.html', res);
    console.log('OCR result saved as result.html');
  })
  .catch(error => {
    console.error(error);
  });
```

使用 node 执行这个文件，我们得到一个 html 文件，里面代码是这样的：

```html
<div class='ocr_carea'
      id='block_1_5'
      title="bbox 72 558 427 581">
  <p class='ocr_par'
      id='par_1_3'
      lang='eng'
      title="bbox 72 558 427 581">
      <span class='ocrx_word'
            id='word_1_7'
            title='bbox 103 564 148 577; x_wconf 95'
            style="position: absolute; top: 564px; left: 103px;background-color: yellow;">taste</span>
      <span class='ocrx_word'
            id='word_1_8'
            title='bbox 156 561 258 581; x_wconf 67'
            style="position: absolute; top: 561px; left: 156px;background-color: yellow;">good/bad</span>
    </span>
  </p>
</div>
```

这里并没有放出全部代码，主体代码基本规律是：有多个 ocr_carea 类名的 div，里面包含若干个 ocr_par 类名的 p 标签，然后里面包含若干个类名 ocrx_word 的 span 标签。

span 标签上的 title 属性就是文本的边界框，style 属性是我加上去测试这个边界框位置的（下图黄色部分）。其实这个位置测不测都行，因为如果有偏差那肯定是所有文本都有偏差，统一调整就可以。下图是统一调整之后的效果，看起来还不错，可以满足我们的需求。

<img alt="b24678df9c3ca1cf32de1dbed1d98c92.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/OCR-Ebook/b24678df9c3ca1cf32de1dbed1d98c92.png" style="max-height: 300px">

ok，取得阶段性胜利 ✌ 

还有一个问题，tesseract 识别出来的结果太碎了，需要筛选一下，我们只需要完整的单词！不知道正则能不能行 🤔 这个咱也玩不转，找 chatGPT 写一个吧！

我们来完善一下刚刚的代码，把 chatGPT 写的正则加上，在解析玩 DOM 之后我们对其中的文本进行筛选，不合格的行直接删掉！

```js
...
    const traverse = node => {
      if (node.type === 'tag') {
        if (node.name === 'span' && node.attribs.class === 'ocrx_word') {
          const word = node.children.filter(child => child.type === 'text')[0].data;
          // 正则过滤正常的英文单词，长度大于 2，不符合条件的将此行删掉
          if (/[a-z]+[\-\']?[a-z]*/ig.test(word) && word.length > 2) {
            lines.push(word)
            const titleArr = node.attribs.title.split(' ');
            // 减掉的是偏移量
            const top = titleArr[2] - 9;
            const left = titleArr[1] - 10;
            node.attribs.style = `position: absolute; top: ${top}px; left: ${left}px;background-color: skyblue;`
          } else {
            const index = node.parent.children.indexOf(node);
            node.parent.children.splice(index, 1); // 从父节点中删除该节点
          }
        } else {
          node.children.forEach(child => traverse(child));
        }
      }
    };
...
```

看看结果 😀

<img alt="66ed45cdec96147665e8470198c38233.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/OCR-Ebook/66ed45cdec96147665e8470198c38233.png" style="max-height: 300px">

哦，nice！虽然还是有很多乱码，但好了很多了，有可能是我测试的截图太糊了。没关系，我们再看看文档，优化一下。

后续图像识别方面优化：

- 添加了语言目录；
- 特殊符号使用正则筛掉；
- 识别正确率在 80 以上的才显示。

```js
...
const config = {
  lang: 'eng', // 识别语言
  oem: 1, // OCR 引擎模式
  psm: 3, // 页面分割模式
  tessedit_create_hocr: '1', // 生成 hOCR 输出格式
  tessdata: './tessdata' // 语言目录
};
...
const traverse = node => {
  if (node.type === 'tag') {
    if (node.name === 'span' && node.attribs.class === 'ocrx_word') {
      const word = node.children.filter(child => child.type === 'text')[0].data;
      const titleObj = parseStrToObj(node.attribs.title);
      const { bbox, x_wconf } = titleObj;

      // 正则过滤正常的英文单词+长度大于 2+正确率大于 80，不符合条件的将此行删掉
      if (/[a-z]+[\-\']?[a-z]*/ig.test(word) && word.length > 2 && Number(x_wconf) > 80) {
        const newWord = word.replace(/@/g, '');
        lines.push(newWord)

        const index = node.parent.children.indexOf(node);
        node.parent.children[index].children[0].data = newWord;
        // 减掉的是偏移量
        const top = bbox.split(' ')[1] / imgHeight * 100;
        const left = bbox.split(' ')[0] / imgWidth * 100;
        node.attribs.style = `display: inline-block; position: absolute; top: ${top}%; left: ${left}%;background-color: skyblue;padding: 0 3px;border-radius: 3px;border: 1px solid #F56C6C`;
      } else {
        const index = node.parent.children.indexOf(node);
        node.parent.children.splice(index, 1); // 从父节点中删除该节点
      }
    } else {
      node.children.forEach(child => traverse(child));
    }
  }
};
...
```

<img alt="dac6323dae83f20fa81eef052bf91215.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/OCR-Ebook/dac6323dae83f20fa81eef052bf91215.png" style="max-height: 300px">

嗯，好太多了 🎉！

识别的问题先到这，目前的结果已经能够满足我们的需求了，我们继续。

每本书肯定是有多张图片的，批量处理的话我们就用 fs 模块读取循环就好，处理之后结果就是若干个 html 文件。

那如何弄成一本书的形式？常见的方式，用 iframe 嵌套 html，左侧再加个目录，点击目录修改 iframe 的 src。

```html
...
<body>
  <div class="page-wrap">
    <ul id="menu"
        class="menu"></ul>
    <div class="content">
      <iframe id="myIframe"
              src="./output/1.html"
              frameborder="0"
              style="width: 100%;height: 100%;"></iframe>
    </div>
  </div>

  <script src="./script.js"></script>
</body>
</html>
```

css 代码极其简单，就不放了，页面大概长下面这样，丑点，我们先实现功能。

<img alt="70b4470430f3afd662148c58d11b87d1.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/OCR-Ebook/70b4470430f3afd662148c58d11b87d1.png" style="max-height: 300px">

刚刚的 html 中我们引入了一个 script.js 文件，想要自动化可以在图片识别处理完成后修改 script.js 文件的内容即可：

```js
// 替换 script.js 中的内容为指定的 JavaScript 代码
function setScript () {
  const newScript = `
  const menu = document.querySelector('#menu');
  const iframe = document.querySelector('#myIframe');
  const items = ${JSON.stringify(outPutFiles)}

  // 动态生成菜单项
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.label;
    li.addEventListener('click', () => {
      iframe.src = item.value;
    });
    menu.appendChild(li);
  });
  `;
  // 将替换后的代码写回到 script.js 文件中
  fs.writeFileSync('./script.js', newScript, 'utf8');
  console.log('script 替换成功')
}
```

其中的变量 outPutFiles 就是左侧目录的数据。

到这里，我们的主体功能基本已经实现了，现在已经可以翻页、可以使用沙拉查词来选取单词发音了 🎉

<img alt="4fa2605ad6495102f79e12d77883542d.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/OCR-Ebook/4fa2605ad6495102f79e12d77883542d.png" style="max-height: 300px">

虽然还是有点粗糙，这个后续我们再优化吧，我先去把单词背了 🙃

代码地址：[maqingbo/OCR-Ebook](https://github.com/maqingbo/OCR-Ebook)

扫描版 PDF 识别单词读音

什么是贴图？为什么渲染一个物体要贴那么多层贴图？他们都是起的什么作用？



## 什么是贴图

物体是三维的，但物体的表面是二维的，所以我们可以使用图片来铺满物体的表面，图片上的每个点跟物体表面上的每个点一一映射，这个图片就叫颜色纹理或者叫 UV 贴图。根据这种映射关系，计算机就可以从颜色纹理当中，找到坐标点的颜色信息映射到三维物体表面某个点上去。颜色纹理保存的就是每个点的 RGB 颜色。

但是三维物体表面的细节，不仅仅只是有颜色，可能还需要包括物体的其它特性：金属度、粗糙程度、透明程度、凹凸感等等。那么这些材质和几何信息该如何表达呢？

如果能够把这些信息以类似颜色纹理的形式保存成一个贴图的话，就可以同样的通过 UV 布局去映射到物体的表面。

我们可以把从 0 到 1 渐变的数值区间，用从黑到白渐变的颜色区间把他们对应起来，这样参数滑条当中表示的某一个数值，就可以用从黑到白当中的某个灰度值来表示。

<img alt="21345f2fa1f2164102647d40b5107492.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/21345f2fa1f2164102647d40b5107492.png" style="max-height: 300px">

然后在纹理空间中，每个 UV 坐标点的灰度，以图像的形式存储在贴图当中。计算机就可以根据贴图的灰度，对应的计算出相应三维座标点的材质参数值，并且渲染相应的材质效果。

常见的物体表面特性与灰度图的关系如下所示：

- 纹理贴图：表示表面的颜色和纹理图案，用于增加表面的细节和视觉效果（不一定是灰度图）。
- 光滑度贴图：表示表面的光滑度，黑色表示最粗糙，白色表示最光滑。
- 金属度贴图：表示表面的金属度，黑色表示非金属，白色表示全金属。
- 透明度贴图：表示表面的透明度，黑色表示完全不透明，白色表示完全透明。
- 高度图/凹凸贴图：表示表面的凹凸不平程度，黑色表示最低点，白色表示最高点。
- 法线贴图：表示表面的法线方向，用于模拟高精度几何细节，增加真实感（不是灰度图）。
- 环境光遮蔽贴图：表示表面在环境光遮蔽下的亮度变化，黑色表示最暗，白色表示最亮。

为了更简明的说明这个关系，我们可以在 Blender 中新建一个纹理，用一个黑白对比明显的函数纹理：棋盘格。棋盘格纹理的灰度值不是 0 就是 1，没有 0-1 中间的灰度值。在人眼看来，棋盘格是一张黑白交错的图像，但计算机看到的是一个 0101 的数值矩阵。

<img alt="edbbf66917fb60a01f567551a1e5f595.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/edbbf66917fb60a01f567551a1e5f595.png" style="max-height: 300px">

同一张棋盘格图片，当我们将其作为不同类型的贴图来使用时，渲染出来的效果也是不一样的。

<img alt="颜色-粗糙度.jpg" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/颜色-粗糙度.jpg" style="max-height: 300px">

_示意图 1：纹理贴图效果/粗糙度贴图效果_

<img alt="颜色-金属度.jpg" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/颜色-金属度.jpg" style="max-height: 300px">

_示意图 2：纹理贴图效果/金属度贴图效果_

下面我们再来看一个具体的木质纹理贴图例子。

<img alt="木质纹理.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/木质纹理.png" style="max-height: 300px">

如上图所示，左侧球体是渲染后的结果，它有彩色的木纹图案，有高光，如果放大看还能看到表面的粗糙度。这其实就是右侧四张贴图综合表现的结果！不同于刚刚的棋盘格，一张贴图已经不能满足不同特性的渲染了，所以每个特性需要有一张自己的图。

可是刚刚我们说的不是灰度图吗，为什么法线贴图是蓝紫色的？？

这是因为法线贴图是一种特殊的贴图，它存储的是物体表面法线的信息，法线贴图中的颜色值表示法线向量在三个分量上的值，而不是颜色本身。

如下图所示，物体表面一个点的法线（紫色线段）是一个三维向量，包含了三个分量 (T,B,N)，无论紫色线如何变化，都可以使用切线空间中的 TBN 三个向量来表示（线性代数），法线贴图存储的就是 TBN 的值。

<img alt="3454c30496a84b8478a4c9ae989997d3.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/3454c30496a84b8478a4c9ae989997d3.png" style="max-height: 300px">

三个值使用灰度图就不好存储了，所以我们换了个方式，把三个向量对应到 RGB 颜色值上来存储。法线的取值范围是 `-1~1`，RGB 取值范围 0~255。当法线没有偏移时候，RGB 对应的值为 (127,127,255)，是一种蓝紫色，有偏移时会偏红或偏绿，所以法线贴图普遍为稍微带点红绿色的蓝紫色图片。

<img alt="f2691efcc6d3ee7455322192818b323b.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/f2691efcc6d3ee7455322192818b323b.png" style="max-height: 300px">

> 其实其他几种贴图也可以使用彩色图来表示，但是灰度图就已经够了，没有必要增加计算量。

## 常见的起凹凸作用的贴图

> 一共四种：凹凸贴图、法线贴图、位移贴图、AO 贴图

人眼的成像也是二维的，那大脑是如何判断物体表面的凹凸的？答案是阴影！

<img alt="6b1dbd2c574de068c4c6637e923a7133.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/6b1dbd2c574de068c4c6637e923a7133.png" style="max-height: 300px">

比如上面这幅图（左侧），感觉上有很多凸起的圆和三角结构，这是因为在这些结构右下方的部分变暗了。而我们生活的世界多数光源比如说阳光、灯光都是来自斜上方，所以只要把这一部分变暗，即使它只是一个二维的平面图像也会让我们产生凹凸的感觉。

现在我把这幅图，旋转 180 度（上图右侧），这样感觉上原来凸起的部分，恰好就变成凹下去的。产生这种变化的原因，还是因为阴影的位置。所以只要给出一个高度值，让计算机计算出因高度变化而产生的法线改变，进而根据光线的方向和法线的夹角，自动计算出哪些区域需要变暗，**就可以在平滑的面上模拟出凹凸感**，这也就是凹凸贴图的基本原理。

最开始人们使用凹凸贴图通过记录相邻点之间的高度差，来模拟凹凸感的，所以也叫“高度图”。高度图通常使用灰度图像来表示，每个像素值表示该像素所在位置的高度值。为了将高度图转化为凹凸贴图，可以通过计算相邻像素之间的高度差来计算出法线向量，然后根据法线向量和光线的入射角度计算出光照强度。但由于凹凸贴图只存储了高度信息，因此**无法准确地模拟表面的细节，而且需要较高分辨率的高度图才能获得较为真实的效果**。

为了解决这些问题，后来的凹凸贴图改用法线贴图来表示表面的凹凸感。法线贴图存储了表面每个点的法线向量，可以更加准确地模拟表面的细节，并且相对于高度图来说，**法线贴图需要的存储空间更小，处理速度更快**。

<img alt="textures_height_map.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/textures_height_map.png" style="max-height: 300px">

_左：法线贴图；右：高度图_

<img alt="d230e62b3fe90dbc685253498d685da3.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/d230e62b3fe90dbc685253498d685da3.png" style="max-height: 300px">

_法线贴图示意_

凹凸贴图和法线贴图都是通过扰动法线，在视觉上产生凹凸的假象，并没有使物体表面产生真正的凹凸。如下图所示，当把物体放平或在球体上渲染时，凹凸感消失了。

<img alt="96ae3c93553dbf125a13a25683e35e8d.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/96ae3c93553dbf125a13a25683e35e8d.png" style="max-height: 300px">

这时候就该位移贴图 (displacement mapping) 出场了，位移贴图可以让物体表面的点的位置移动一个距离，产生真正的凹凸。

<img alt="05327a95f4752172a42b79d44ea8cf3d.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/05327a95f4752172a42b79d44ea8cf3d.png" style="max-height: 300px">

_位移贴图原理示意_

位移贴图改变了网格中的顶点位置，每个点的位移量由位移贴图中的灰度值决定，位移贴图和凹凸贴图一样也是高度图，用灰度值保存位移的距离也就是高度差，所以也可以直接使用凹凸贴图进行置换。

<img alt="4c70df24b54db7fe0513a7610507f853.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/4c70df24b54db7fe0513a7610507f853.png" style="max-height: 300px">

_各类贴图表现对比，左起：基本模型、凹凸贴图、法线贴图、位移贴图_

接下来说说环境光遮蔽贴图。在现实世界中，光线在通过空气和其他物体时会受到散射和吸收，因此物体表面受到的光照不是均匀的，有些区域会比其他区域更暗。

环境光遮蔽就是用来模拟这种效果的技术。它通过检测物体表面上每个点周围的遮蔽情况来计算该点受到的环境光照强度。具体来说，它通过发射多个光线来检测该点与周围物体之间的遮蔽情况，从而计算出该点的环境光照强度。环境光遮蔽通常用于实时渲染中，可以使场景看起来更加逼真。它可以用于模拟各种不同的环境光照条件，如室内、室外、阴天、晴天等。

在贴图中，环境光遮蔽通常被称为 AO 贴图（Ambient Occlusion Map），它是一种基于物体表面的几何形状信息计算出的灰度图像。AO 贴图中，黑色表示物体表面上的点周围有很多遮蔽物，而白色则表示该点周围没有遮蔽。灰度值的深浅程度表示遮蔽的程度，越浅越少遮蔽，越深则越多遮蔽。

<img alt="57e1178f1cab642302534ed0c8bb57e3.png" src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/f9325612/57e1178f1cab642302534ed0c8bb57e3.png" style="max-height: 300px">

_使用了 AO 贴图的场景（右），物体连接处呈现出环境光遮蔽效果_

在渲染过程中，AO 贴图会和其他贴图一起被应用到物体表面上。AO 贴图可以用于增加物体表面的细节，使其看起来更加真实。同时，AO 贴图也可以用于计算阴影，因为它可以提供物体表面各点之间的遮蔽情况，可以用来计算出阴影的强度。

## 参考

- [B 站 - 小昕讲堂](https://www.bilibili.com/video/BV1rt4y1t7Z1/?spm_id_from=333.788&vd_source=a2c1c0a490a3abd28ff7603744293cc6)
- [https://www.blend4web.com/doc/en/textures.html](https://www.blend4web.com/doc/en/textures.html)