Products
GG网络技术分享 2025-03-18 16:14 0
有没有想过把身边的物件儿转成 3D 动画，在网页上实现一把？本期特推的项目 Three.js 就是帮你创建 3D 页面的知名开源项目，好玩的 3D 世界在向你招手。除了打开浏览器 3D 世界的钥匙外，还有担心你吃不好的 HowToCook 手把手带你摆脱吃泡面过上煮饭、烹饪居家生活。
说到吃饭的家伙，B站开源了他们用百万动漫素材训练而成的图像清晰化利器——ailab，你可以来实地感受一下 B站硬核的图像技术。
选项标准：新发布 | 实用 | 有趣，根据项目 release 时间分类，发布时间不超过 14 day 的项目会标注 New，无该标志则说明项目 release 超过半月。由于本文篇幅有限，还有部分项目未能在本文展示，望周知
上周一 2 月 14 号，GitHub 的产品更新博客中提到借助 Mermaid，GitHub 支持将图表嵌入到 Markdown 中，从此你就可以直接用 Markdown 来绘制流程图、有向图等等。
顺带一提，使用 Markdown 语法绘制图表和流程图的 Mermaid 本周获得了 3k+ 颗 star。
Star 增长：100+｜语言：JavaScript
Three.js 是 WebGL 的高级封装库，让用户更加方便在浏览器上创建和展示 3D 动画。可以访问 threejs.org 在浏览器打开梦幻的 3D 世界大门。
Star 增长：1000+｜语言：Python
ailab 收录了 B 站开源的 Real-CUGAN，Real CUGAN 是一个使用百万级动漫数据进行训练的，结构与 Waifu2x 兼容的通用动漫图像超分辨率模型。它支持 2x\\3x\\4x 倍超分辨率，其中 2 倍模型支持 4 种降噪强度与保守修复，3 倍 / 4 倍模型支持 2 种降噪强度与保守修复。下图给出了 B 站视频中用该软件提高图像清晰度的对比图，已经画好重点圈了，记得查看。
Star 增长：1,150+｜语言：Swift
DevToysMac 是为用 Mac 本开发代码的研发同学准备的“瑞士军刀”，收录大量实用开发小工具，包括：JSON 格式化工具、Base 64 编码、JSON 转 Yaml 工具等等。
Star 增长：1,000+｜语言：JavaScript
Font-Awesome 拥有大量高颜值图标，作为设计师、开发的工具箱，你可以直接使用上面的图标 HTML、CSS 代码构建你自己有意思的网站。
Star 增长：400+｜语言：Python
New SAHI 一个轻量级视觉库，用于执行大规模的目标检测和实例分割。
Star 增长：2,350+｜语言：TypeScript
Newunredacter 是一个破解马赛克图片原始信息的项目，它旨在展示用马赛克给图片“加密”是多么不可靠，下图显示了它是如何猜测某张文字（英文）马赛克图原始信息的过程。
Star 增长：650+｜语言：Markdown
HowToCook 项目发起人在家做饭过程中发现网上菜谱制作过程中会多出一些材料，对于习惯了形式语言的他非常的不友好，于是他发起了做饭指南项目，结合实际做菜经验用更精准的方式来做常见菜。
- END -
这篇文章主要介绍了three.js 将图片马赛克化的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
这篇郭先生来说说BufferGeometry，类型化数组和粒子系统的使用，并且让图片有马赛克效果（同理可以让不清晰的图片清晰化），如图所示
1. 解析图片
解析图片和上一篇一样
| initCanvas() { canvas = document.createElement(\'canvas\'); content = canvas.getContext(\'2d\'); canvas.width = 1600; canvas.height = 1200; img = new Image(); img.crossOrigin = \'*\'; img.src = \"/static/images/base/girl.jpg\"; img.onload = () => { content.drawImage(img, 0, 0, canvas.width, canvas.height); imgDate = content.getImageData(0, 0, canvas.width, canvas.height); this.createPotCloud(); //创建点云 }; } |
2. 操作像素点
| createPotCloud() { if (points) { scene.remove(points) } let cw = Math.floor(canvas.width / size); let ch = Math.floor(canvas.height / size); particles = cw * ch; geometry = new THREE.BufferGeometry(); positions = new Float32Array(Math.floor(particles * 3)); positions_af = new Float32Array(Math.floor(particles * 3)); var colors = new Float32Array(Math.floor(particles * 3)); for (var i = 0; i < positions.length; i += 1) { positions[3 * i] = - canvas.width / 2 + (i % cw) * size; positions[3 * i + 1] = canvas.height / 2 + Math.floor((-1 - i) / cw) * size; positions[3 * i + 2] = 0; let selectPos = size * (i % cw) + Math.floor(i / cw) * cw * size * size; colors[3 * i] = imgDate.data[4 * selectPos] / 255.0; colors[3 * i + 1] = imgDate.data[4 * selectPos + 1] / 255.0; colors[3 * i + 2] = imgDate.data[4 * selectPos + 2] / 255.0; } geometry.setAttribute(\'position\', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute(\'color\', new THREE.BufferAttribute(colors, 3)) geometry.dynamic = true; geometry.attributes.position.needsUpdate = true; var material = new THREE.PointsMaterial({ size: size, vertexColors: THREE.VertexColors }) points = new THREE.Points(geometry, material); points.name = \'points\'; scene.add(points); loaded = true; }, |
可以不用纠结代码，核心思想其实我们只需要每隔一定的颜色点取出一个颜色点，然后将这个颜色赋予到geometry的color属性上，就可以了，也可以每隔两行、两列取一个点，但是图片上面的点是一维的，所以需要一些数学方法，
如图所示，原理很简单哦。将不清晰的图片清晰化，就是需要插入更多的像素点，插入的像素点，需要根据已存在的像素点的颜色进行插值，比如原图的像素点1为0xffffff，像素点2的颜色为0xdddddd，则插在两个像素点之间像素点的颜色为0xeeeeee，以此类推。
以上就是three.js 将图片马赛克化的示例代码的详细内容，更多关于three.js 将图片马赛克化的资料请关注其它相关文章！
Demand feedback
