mind-ar-js
mind-ar-js 是一款专为网页打造的增强现实（AR）开源库，让开发者无需安装额外插件，即可在浏览器中实现图像追踪和人脸追踪功能。它主要解决了传统 AR 开发依赖原生应用或复杂环境的痛点，让用户通过简单的网页链接就能体验交互式 AR 内容，如虚拟试戴、图片识别互动等。
这款工具非常适合前端开发者、创意设计师以及希望快速构建 Web AR 原型的技术人员使用。即便你是 AR 新手，借助其提供的 AFRAME 扩展，仅需寥寥数行代码即可搭建出完整的 AR 应用。
mind-ar-js 的技术亮点在于完全由纯 JavaScript 编写，从底层计算机视觉引擎到前端展示均自主可控。为了保障流畅体验，它巧妙利用 WebGL 调用 GPU 加速运算，并结合 Web Worker 进行多线程处理，有效提升了在移动设备上的运行性能。作为目前少数持续维护且功能媲美商业方案的开源 Web AR SDK，mind-ar-js 为社区提供了一个免费、高效且易于上手的开发选择，帮助创作者轻松将虚实融合的创意带入现实。
使用场景
一家初创教育公司希望在其在线绘本平台中，让用户通过手机摄像头扫描纸质书上的插图，即可在网页端直接观看对应的 3D 动画讲解，无需下载任何 App。
没有 mind-ar-js 时
- 开发门槛极高：团队需分别寻找图像识别和 3D 渲染方案，并花费数周时间编写底层 WebGL 代码来桥接两者。
- 性能体验糟糕：纯 CPU 运算导致识别延迟高，低端安卓机型上画面卡顿严重，甚至无法运行。
- 用户流失严重：强制要求用户下载专用 App 才能体验 AR 功能，导致 80% 的用户在第一步就放弃尝试。
- 维护成本高昂：缺乏统一的开源社区支持，遇到兼容性 bug 只能靠团队自行摸索解决，迭代速度缓慢。
使用 mind-ar-js 后
- 极速落地开发：借助其纯 JavaScript 架构和 AFRAME 扩展，前端工程师仅用约 10 行代码就完成了图像追踪与 3D 内容的绑定。
- 流畅硬件加速：mind-ar-js 自动调用 WebGL 利用 GPU 运算，并启用 Web Worker 多线程处理，确保在普通手机上也能流畅运行。
- 即开即用体验：用户只需点击网页链接即可通过浏览器启动 AR，无需安装任何东西，大幅提升了互动转化率。
- 生态完善省心：依托活跃的开源社区和详尽文档，团队快速解决了多目标追踪等复杂场景问题，专注于内容创作而非底层调试。
mind-ar-js 将原本需要原生 App 才能实现的复杂增强现实体验，转化为轻量、高性能且零安装的网页交互，彻底打破了 Web AR 的落地壁垒。
运行环境要求
- 跨平台 (任何支持现代浏览器的操作系统)
非必需独立显卡，但需设备支持 WebGL (通过浏览器调用集成显卡或独立显卡均可)
未说明 (取决于浏览器及运行的 3D 内容复杂度)
快速开始
MindAR
MindAR 是一个基于 Web 的增强现实库。其突出特点包括：
:star: 支持图像跟踪和人脸跟踪。如需进行位置或标识标记跟踪，请查看 AR.js。
:star: 完全使用纯 JavaScript 编写，从底层计算机视觉引擎到前端实现端到端集成。
:star: 利用 GPU（通过 WebGL）和 Web Worker 提升性能。
:star: 对开发者友好，易于设置。借助 AFRAME 扩展，仅需 10 行代码即可创建一个应用。
资金募集
MindAR 是目前唯一一个仍在积极维护的 Web AR SDK，其功能可与商业解决方案相媲美。该库目前由我作为个人开发者维护。为筹集持续开发所需的资金，并及时提供支持与问题响应，以下列出了一些您可以支持的相关项目和服务。
Unity WebAR 基金会WebAR Foundation 是一个 Unity 插件包，允许 Unity 开发者构建 WebGL 平台上的 AR 应用程序。它作为一个 Unity 插件，封装了流行的 Web SDK。 如果您是 Unity 开发者，不妨试试！https://github.com/hiukim/unity-webar-foundation
|
 |
Web AR 开发课程我在 Udemy 上开设了一门 WebAR 开发课程。这是一本非常全面的 WebAR 开发指南，不仅限于 MindAR。 如果您感兴趣，可以看看： https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61 |
|
MindAR StudioMindAR Studio 允许您无需编码即可构建人脸跟踪 AR。您可以通过拖放式编辑器制作 AR 效果，并导出静态网页自行托管。完全免费！ 如果您感兴趣，不妨试试！https://studio.mindar.org |
 |
PictarizePictarize 是一个用于创建和发布图像跟踪 AR 应用程序的托管平台。完全免费！ 如果您有兴趣，不妨试试！https://pictarize.com |
 |
文档
官方文档：https://hiukim.github.io/mind-ar-js-doc
演示 - 亲自试一试
图像跟踪 - 基础示例演示视频：https://youtu.be/hgVB9HpQpqY 亲自尝试：https://hiukim.github.io/mind-ar-js-doc/examples/basic/ |
|
图像跟踪 - 多目标示例亲自尝试：https://hiukim.github.io/mind-ar-js-doc/examples/multi-tracks |
|
图像跟踪 - 交互式示例演示视频：https://youtu.be/gm57gL1NGoQ 亲自尝试：https://hiukim.github.io/mind-ar-js-doc/examples/interative |
|
人脸跟踪 - 虚拟试穿示例亲自尝试：https://hiukim.github.io/mind-ar-js-doc/face-tracking-examples/tryon |
|
人脸跟踪 - 面部网格效果亲自尝试：https://hiukim.github.io/mind-ar-js-doc/more-examples/threejs-face-facemesh |
|
更多示例
更多示例请访问：https://hiukim.github.io/mind-ar-js-doc/examples/summary
快速入门
使用纯文本编辑器，只需5分钟即可学会构建上面的基础示例！
快速入门指南：https://hiukim.github.io/mind-ar-js-doc/quick-start/overview
为了让你快速了解，以下是基础示例的完整源代码。这是一个静态HTML页面，你可以将其托管在任何地方。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<img id="card" src="https://oss.gittoolsai.com/images/hiukim_mind-ar-js_readme_ee5eee6cbe63.png" />
<a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
<a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate">
</a-entity>
</a-scene>
</body>
</html>
目标图像编译器
你可以使用这个友好的编译工具，在浏览器中直接编译自己的目标图像。如果你还不清楚这是什么，请先阅读快速入门指南：
https://hiukim.github.io/mind-ar-js-doc/tools/compile
路线图
- 支持更多增强现实功能，如手势追踪、人体追踪和平面追踪。
- 研究不同的前沿算法，以提高追踪精度和性能。
- 提供更多教育性参考资料。
贡献
我个人并没有很强的计算机视觉背景，因此在提升追踪精度方面遇到了一些困难。非常希望能得到计算机视觉专家的帮助。请随时与我联系讨论。
同时也欢迎JavaScript专家帮助改进非引擎部分，比如优化API等。
如果你是平面设计师或3D艺术家，并且能够为视觉效果做出贡献，或者只是用MindAR开发了一些很酷的应用程序，请务必展示给我们看！
无论你能想到什么，这都是一个面向所有人的开源Web AR框架！
开发指南
目录说明
/src文件夹包含大部分源代码。/examples文件夹包含用于开发期间测试的示例。
创建生产版本
运行 > npm run build。生成的文件将位于 dist 文件夹中。
开发环境
要开发three.js版本，运行 > npm run watch。这会监视 src 文件夹中的文件变化，并持续构建 dist-dev 文件夹中的产物。
对于AFRAME版本的开发，每次修改后都需要运行 >npm run build-dev。目前 --watch 参数无法自动生成 mindar-XXX-aframe.js 文件。
examples 文件夹中的所有示例都配置为使用此开发版本，因此你可以在浏览器中打开这些示例来开始调试或开发。
这些示例可以在桌面浏览器中运行，它们只是简单的HTML文件，所以很容易上手。然而，由于需要访问摄像头，你需要一台网络摄像头。此外，还需要通过本地服务器来运行这些HTML文件，直接打开文件是无法正常工作的。
例如，你可以安装以下Chrome插件来启动本地服务器：https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
你很可能也希望在移动设备上进行测试。在这种情况下，最好能设置你的开发环境，以便将本地服务器共享到你的移动设备上。如果遇到困难，比如被防火墙阻挡，可以使用 ngrok（https://ngrok.com/）来实现端口转发。不过这不是理想的解决方案，因为MindAR的开发版本并不小（超过10MB），而使用免费版的`ngrok`进行隧道传输可能会比较慢。
WebGL后端
本库利用TensorFlow.js（https://github.com/tensorflow/tfjs）作为WebGL后端。是的，TensorFlow是一个机器学习库，但我们并没有将其用于机器学习！:) TensorFlow.js拥有非常强大的WebGL引擎，使我们能够编写通用GPU应用程序（在本例中就是我们的AR应用）。
核心的检测和追踪算法是用TensorFlow.js中的自定义操作编写的，它们类似于着色器程序。刚开始可能会觉得有些复杂，但实际上并不难理解。
致谢
计算机视觉的思想借鉴自ARToolKit（即https://github.com/artoolkitx/artoolkit5）。遗憾的是，该库似乎已经不再维护了。
面部追踪基于MediaPipe的面部网格模型（即https://google.github.io/mediapipe/solutions/face_mesh.html）。
版本历史
v1.2.52024/01/16v1.2.32023/06/11v1.2.22023/06/04v1.2.12023/03/06v1.2.02022/12/16v1.1.52022/08/02v1.1.42022/02/15v1.1.32022/02/12v1.1.22022/01/31v1.1.02021/12/11v1.0.12021/10/06v1.0.02021/10/04常见问题
相似工具推荐
openclaw
OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上
opencode
OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。 这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。 在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。
gemini-cli
gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。 这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。 它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。