Loading...
墨滴

张春成

2021/12/14  阅读:51  主题:默认主题

每日一图

每日一图

不得不说BING的每日一图是真的好看。 不妨以为契机,记录一下前端绘图的一些经验和坑点。


图像的三维化

图像一般都是图片, 由颜色组成的矩阵,就构成了一幅图像。

假如按照一定的规律给图像加入第三个维度, 就能让图片里的物体“站”起来。

Bing Pic
Bing Pic

而为了让物体站起来, 我写了一段前面代码[1]

它支持以URL的方式从互联网上自动下载图片并进行三维化呈现

【这是一段棒到不行的视频】

由于要满足在线获取图像、实时计算和渲染等等要求, 下面将记录本工程的一些坑点。

异步获取

一般的程序脚本以同步的方式逐行执行

console.log('Method A')
console.log('Method B')
console.log('Method C')

而为了达到实时获取图像的目的,需要使用异步机制

console.log('Method A')

imgOnload = () => {
    // Do something amazing with the fetched image
}

const img = new Image();
img.src = url;
img.crossOrigin = "Disable the Raw Origin";
img.onload = () => {
  // The scripts will be operated when the image is loaded
  imgOnload();
  console.log('Image is loaded')
}

console.log('Method B')

异步机制的目的是使程序不必费时间等待图像加载完毕, 因为没有人知道它什么时候加载完毕, 甚至根本无法获取该资源。

而异步机制的实现方式是注册一个异步函数imgOnLoad, 当图像加载完毕后随即执行, 从而保证后续程序能够正常运行。

高性能计算包

PCA是经典的机器学习算法“主成分分析”的简称, 本示例的像素高度计算就是基于它的计算结果。

我将图像中每个像素的RGB颜色值排列为 大小的矩阵, 对该矩阵进行PCA计算, 就能给每个像素分配一个权重系数, 这个系数则用于指定该像素在第三个维度上的高度。

具体的算法并不重要。 重要的是, 由于图像像素数量巨大, 比如 , 此时就不得不考虑到算法的执行效率。

幸好我找到一个性能很棒的PCA开源计算包[2], 并通过bundle方式[3]引入, 其性能足以完成本例要求。

参考资料

[1]

前面代码: https://observablehq.com/@listenzcc/pixel-segment-using-pca

[2]

PCA开源计算包: https://github.com/mljs/pca

[3]

bundle方式: "https://bundle.run/ml-pca@4.0.2"

张春成

2021/12/14  阅读:51  主题:默认主题

作者介绍

张春成