[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-hiukim--mind-ar-js":3,"tool-hiukim--mind-ar-js":62},[4,18,26,36,46,54],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",158594,2,"2026-04-16T23:34:05",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":42,"last_commit_at":43,"category_tags":44,"status":17},8272,"opencode","anomalyco\u002Fopencode","OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。\n\n这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。\n\n在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信",144296,1,"2026-04-16T14:50:03",[13,45],"插件",{"id":47,"name":48,"github_repo":49,"description_zh":50,"stars":51,"difficulty_score":32,"last_commit_at":52,"category_tags":53,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":55,"name":56,"github_repo":57,"description_zh":58,"stars":59,"difficulty_score":32,"last_commit_at":60,"category_tags":61,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[45,13,15,14],{"id":63,"github_repo":64,"name":65,"description_en":66,"description_zh":67,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":78,"owner_email":77,"owner_twitter":77,"owner_website":76,"owner_url":79,"languages":80,"stars":97,"forks":98,"last_commit_at":99,"license":100,"difficulty_score":32,"env_os":101,"env_gpu":102,"env_ram":103,"env_deps":104,"category_tags":111,"github_topics":112,"view_count":32,"oss_zip_url":77,"oss_zip_packed_at":77,"status":17,"created_at":119,"updated_at":120,"faqs":121,"releases":162},8260,"hiukim\u002Fmind-ar-js","mind-ar-js","Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js","mind-ar-js 是一款专为网页打造的增强现实（AR）开源库，让开发者无需安装额外插件，即可在浏览器中实现图像追踪和人脸追踪功能。它主要解决了传统 AR 开发依赖原生应用或复杂环境的痛点，让用户通过简单的网页链接就能体验交互式 AR 内容，如虚拟试戴、图片识别互动等。\n\n这款工具非常适合前端开发者、创意设计师以及希望快速构建 Web AR 原型的技术人员使用。即便你是 AR 新手，借助其提供的 AFRAME 扩展，仅需寥寥数行代码即可搭建出完整的 AR 应用。\n\nmind-ar-js 的技术亮点在于完全由纯 JavaScript 编写，从底层计算机视觉引擎到前端展示均自主可控。为了保障流畅体验，它巧妙利用 WebGL 调用 GPU 加速运算，并结合 Web Worker 进行多线程处理，有效提升了在移动设备上的运行性能。作为目前少数持续维护且功能媲美商业方案的开源 Web AR SDK，mind-ar-js 为社区提供了一个免费、高效且易于上手的开发选择，帮助创作者轻松将虚实融合的创意带入现实。","# MindAR\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_444cb5cefc5a.gif\" height=\"250\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_bbf239b13615.gif\" height=\"250\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_d32658a22297.gif\" height=\"250\">\n\n\nMindAR is a web augmented reality library. Highlighted features include:\n\n:star: Support Image tracking and Face tracking. For Location or Fiducial-Markers Tracking, checkout [AR.js](https:\u002F\u002Fgithub.com\u002FAR-js-org\u002FAR.js)\n\n:star: Written in pure javascript, end-to-end from the underlying computer vision engine to frontend\n\n:star: Utilize gpu (through webgl) and web worker for performance\n\n:star: Developer friendly. Easy to setup. With AFRAME extension, you can create an app with only 10 lines of codes\n\n# Fund Raising\n\nMindAR is the only actively maintained web AR SDK which offer comparable features to commercial alternatives. This library is currently maintained by me as an individual developer. To raise fund for continuous development and to provide timely supports and responses to issues, here is a list of related projects\u002F services that you can support.\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Unity WebAR Foundation\u003C\u002Fh2>\n        \u003Cp>\n          \u003Ca href=\"https:\u002F\u002Fassetstore.unity.com\u002Fpackages\u002Ftools\u002Fintegration\u002Fwebar-foundation-250806\">WebAR Foundation\u003C\u002Fa> is a unity package that allows Unity developer to build WebGL-platform AR applications. It acts as a Unity Plugin that wraps around popular Web SDK.\n        \u003C\u002Fp>\n        \u003Cp>\n          If you are a Unity developer, check it out! \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhiukim\u002Funity-webar-foundation\" target=\"_blank\">https:\u002F\u002Fgithub.com\u002Fhiukim\u002Funity-webar-foundation\u003C\u002Fa>\n        \u003C\u002Fp>\n        \u003Cp>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_fa05a027f5fb.png\" border=\"10\"\u002F>\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Web AR Development Course\u003C\u002Fh2>\n        \u003Cp>I'm offering a WebAR development course in Udemy. It's a very comprehensive guide to Web AR development, not limited to MindAR.\u003C\u002Fp>\n        \u003Cp>Check it out if you are interested: \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.udemy.com\u002Fcourse\u002Fintroduction-to-web-ar-development\u002F?referralCode=D2565F4CA6D767F30D61\">https:\u002F\u002Fwww.udemy.com\u002Fcourse\u002Fintroduction-to-web-ar-development\u002F?referralCode=D2565F4CA6D767F30D61\u003C\u002Fa>\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd width=\"50%\">\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_3e1fda06eadb.jpg\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>MindAR Studio\u003C\u002Fh2>\n        \u003Cp>\n          MindAR Studio allows you to build Face Tracking AR without coding. You can build AR effects through a drag-n-drop editor and export static webpages for self-host. Free to use!\n        \u003C\u002Fp>\n        \u003Cp>\n          Check it out if you are interested! \u003Ca href=\"https:\u002F\u002Fstudio.mindar.org\" target=\"_blank\">https:\u002F\u002Fstudio.mindar.org\u003C\u002Fa>\n        \u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_03b7a5d40829.png\" border=\"10\"\u002F>\u003C\u002Ftd>\n    \u003C\u002Ftr>    \n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Pictarize\u003C\u002Fh2>\n        \u003Cp>\n          Pictarize is a hosted platform for creating and publishing Image Tracking AR applications. Free to use!\n        \u003C\u002Fp>\n        \u003Cp>\n          Check it out if you are interested! \u003Ca href=\"https:\u002F\u002Fpictarize.com\" target=\"_blank\">https:\u002F\u002Fpictarize.com\u003C\u002Fa>\n        \u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_35137981c0e8.png\" border=\"10\"\u002F>\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n# Documentation\n\nOfficial Documentation: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\n\n# Demo - Try it yourself\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd valign=\"top\" width=\"50%\">\n        \u003Ch2>Image Tracking - Basic Example\u003C\u002Fh2>\n        \u003Cp>Demo video: https:\u002F\u002Fyoutu.be\u002FhgVB9HpQpqY \u003C\u002Fp>\n        \u003Cp>Try it yourself: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fbasic\u002F\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_09c58355f4da.gif\" width=\"300px\">\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Image Tracking - Multiple Targets Example\u003C\u002Fh2>\n        \u003Cp>Try it yourself: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fmulti-tracks\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_444cb5cefc5a.gif\" width=\"300px\">\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Image Tracking - Interactive Example\u003C\u002Fh2>\n        \u003Cp>Demo video: https:\u002F\u002Fyoutu.be\u002Fgm57gL1NGoQ\u003C\u002Fp>\n        \u003Cp>Try it yourself: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Finterative\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_bbf239b13615.gif\" width=\"300px\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Face Tracking - Virtual Try-On Example\u003C\u002Fh2>\n        \u003Cp>Try it yourself: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fface-tracking-examples\u002Ftryon\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_d32658a22297.gif\"  width=\"300px\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Face Tracking - Face Mesh Effect\u003C\u002Fh2>\n        \u003Cp>Try it yourself: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fmore-examples\u002Fthreejs-face-facemesh\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_62a73d84b60a.gif\"  width=\"300px\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n### More examples\n\nMore examples can be found here: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fsummary\n\n\n# Quick Start\nLearn how to build the Basic example above in 5 minutes with a plain text editor! \n\nQuick Start Guide: https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fquick-start\u002Foverview\n\nTo give you a quick idea, this is the complete source code for the Basic example. It's static HTML page, you can host it anywhere.\n\n```\n\u003Chtml>\n  \u003Chead>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image.prod.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"https:\u002F\u002Faframe.io\u002Freleases\u002F1.2.0\u002Faframe.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image-aframe.prod.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ca-scene mindar-image=\"imageTargetSrc: https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fcard.mind;\" color-space=\"sRGB\" renderer=\"colorManagement: true, physicallyCorrectLights\" vr-mode-ui=\"enabled: false\" device-orientation-permission-ui=\"enabled: false\">\n      \u003Ca-assets>\n        \u003Cimg id=\"card\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_ee5eee6cbe63.png\" \u002F>\n        \u003Ca-asset-item id=\"avatarModel\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fsoftmind\u002Fscene.gltf\">\u003C\u002Fa-asset-item>\n      \u003C\u002Fa-assets>\n\n      \u003Ca-camera position=\"0 0 0\" look-controls=\"enabled: false\">\u003C\u002Fa-camera>\n      \u003Ca-entity mindar-image-target=\"targetIndex: 0\">\n        \u003Ca-plane src=\"#card\" position=\"0 0 0\" height=\"0.552\" width=\"1\" rotation=\"0 0 0\">\u003C\u002Fa-plane>\n        \u003Ca-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\">\n      \u003C\u002Fa-entity>\n    \u003C\u002Fa-scene>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n# Target Images Compiler\nYou can compile your own target images right on the browser using this friendly Compiler tools. If you don't know what it is, go through the Quick Start guide \n\nhttps:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Ftools\u002Fcompile\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_86824fcef27e.png\" width=\"300\"\u002F>\n\n# Roadmaps\n1. Supports more augmented reality features, like Hand Tracking, Body Tracking and Plane Tracking\n\n2. Research on different state-of-the-arts algorithms to improve tracking accuracy and performance\n\n3. More educational references.\n\n# Contributions\nI personally don't come from a strong computer vision background, and I'm having a hard time improving the tracking accuracy. I could really use some help from computer vision expert. Please reach out and discuss.\n\nAlso welcome javascript experts to help with the non-engine part, like improving the APIs and so.\n\nIf you are graphics designer or 3D artists and can contribute to the visual. Even if you just use MindAR to develop some cool applications, please show us!\n\nWhatever you can think of. It's an opensource web AR framework for everyone!\n\n# Development Guide\n\n#### Directories explained\n\n1. `\u002Fsrc` folder contains majority of the source code\n2. `\u002Fexamples` folder contains examples to test out during development\n\n#### To create a production build\n\nrun `> npm run build`. the build will be generated in `dist` folder\n\n#### For development\n\nTo develop threeJS version, run `> npm run watch`. This will observe the file changes in `src` folder and continuously build the artefacts in `dist-dev`.\n\nTo develop AFRAME version, you will need to run `>npm run build-dev` everytime you make changes. The `--watch` parameter currently failed to automatically generate `mindar-XXX-aframe.js`. \n\nAll the examples in the `examples` folder is configured to use this development build, so you can open those examples in browser to start debugging or development.\n\nThe examples should run in desktop browser and they are just html files, so it's easy to start development. However, because it requires camera access, so you need a webcam. Also, you need to run the html file with some localhost web server. Simply opening the files won't work.\n\nFor example, you can install this chrome plugin to start a local server: `https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-server-for-chrome\u002Fofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en`\n\nYou most likely would want to test on mobile device as well. In that case, it's better if you could setup your development environment to be able to share your localhost webserver to your mobile devices. If you have difficulties doing that, perhaps behind a firewall, then you could use something like `ngrok` (https:\u002F\u002Fngrok.com\u002F) to tunnel the request. But this is not an ideal solution, because the development build of MindAR is not small (>10Mb), and tunneling with free version of `ngrok` could be slow.\n\n#### webgl backend\nThis library utilize tensorflowjs (https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs) for webgl backend. Yes, tensorflow is a machine learning library, but we didn't use it for machine learning! :) Tensorflowjs has a very solid webgl engine which allows us to write general purpose GPU application (in this case, our AR application). \n\nThe core detection and tracking algorithm is written with custom operations in tensorflowjs. They are like shaders program. It might looks intimidating at first, but it's actually not that difficult to understand.\n\n# Credits\nThe computer vision idea is borrowed from artoolkit (i.e. https:\u002F\u002Fgithub.com\u002Fartoolkitx\u002Fartoolkit5). Unfortunately, the library doesn't seems to be maintained anymore.\n\nFace Tracking is based on mediapipe face mesh model (i.e. https:\u002F\u002Fgoogle.github.io\u002Fmediapipe\u002Fsolutions\u002Fface_mesh.html)\n\n","# MindAR\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_444cb5cefc5a.gif\" height=\"250\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_bbf239b13615.gif\" height=\"250\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_d32658a22297.gif\" height=\"250\">\n\n\nMindAR 是一个基于 Web 的增强现实库。其突出特点包括：\n\n:star: 支持图像跟踪和人脸跟踪。如需进行位置或标识标记跟踪，请查看 [AR.js](https:\u002F\u002Fgithub.com\u002FAR-js-org\u002FAR.js)。\n\n:star: 完全使用纯 JavaScript 编写，从底层计算机视觉引擎到前端实现端到端集成。\n\n:star: 利用 GPU（通过 WebGL）和 Web Worker 提升性能。\n\n:star: 对开发者友好，易于设置。借助 AFRAME 扩展，仅需 10 行代码即可创建一个应用。\n\n# 资金募集\n\nMindAR 是目前唯一一个仍在积极维护的 Web AR SDK，其功能可与商业解决方案相媲美。该库目前由我作为个人开发者维护。为筹集持续开发所需的资金，并及时提供支持与问题响应，以下列出了一些您可以支持的相关项目和服务。\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Unity WebAR 基金会\u003C\u002Fh2>\n        \u003Cp>\n          \u003Ca href=\"https:\u002F\u002Fassetstore.unity.com\u002Fpackages\u002Ftools\u002Fintegration\u002Fwebar-foundation-250806\">WebAR Foundation\u003C\u002Fa> 是一个 Unity 插件包，允许 Unity 开发者构建 WebGL 平台上的 AR 应用程序。它作为一个 Unity 插件，封装了流行的 Web SDK。\n        \u003C\u002Fp>\n        \u003Cp>\n          如果您是 Unity 开发者，不妨试试！\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhiukim\u002Funity-webar-foundation\" target=\"_blank\">https:\u002F\u002Fgithub.com\u002Fhiukim\u002Funity-webar-foundation\u003C\u002Fa>\n        \u003C\u002Fp>\n        \u003Cp>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_fa05a027f5fb.png\" border=\"10\"\u002F>\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Web AR 开发课程\u003C\u002Fh2>\n        \u003Cp>我在 Udemy 上开设了一门 WebAR 开发课程。这是一本非常全面的 WebAR 开发指南，不仅限于 MindAR。\u003C\u002Fp>\n        \u003Cp>如果您感兴趣，可以看看： \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.udemy.com\u002Fcourse\u002Fintroduction-to-web-ar-development\u002F?referralCode=D2565F4CA6D767F30D61\">https:\u002F\u002Fwww.udemy.com\u002Fcourse\u002Fintroduction-to-web-ar-development\u002F?referralCode=D2565F4CA6D767F30D61\u003C\u002Fa>\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd width=\"50%\">\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_3e1fda06eadb.jpg\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>MindAR Studio\u003C\u002Fh2>\n        \u003Cp>\n          MindAR Studio 允许您无需编码即可构建人脸跟踪 AR。您可以通过拖放式编辑器制作 AR 效果，并导出静态网页自行托管。完全免费！\n        \u003C\u002Fp>\n        \u003Cp>\n          如果您感兴趣，不妨试试！\u003Ca href=\"https:\u002F\u002Fstudio.mindar.org\" target=\"_blank\">https:\u002F\u002Fstudio.mindar.org\u003C\u002Fa>\n        \u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_03b7a5d40829.png\" border=\"10\"\u002F>\u003C\u002Ftd>\n    \u003C\u002Ftr>    \n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>Pictarize\u003C\u002Fh2>\n        \u003Cp>\n          Pictarize 是一个用于创建和发布图像跟踪 AR 应用程序的托管平台。完全免费！\n        \u003C\u002Fp>\n        \u003Cp>\n          如果您有兴趣，不妨试试！\u003Ca href=\"https:\u002F\u002Fpictarize.com\" target=\"_blank\">https:\u002F\u002Fpictarize.com\u003C\u002Fa>\n        \u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_35137981c0e8.png\" border=\"10\"\u002F>\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n# 文档\n\n官方文档：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\n\n# 演示 - 亲自试一试\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd valign=\"top\" width=\"50%\">\n        \u003Ch2>图像跟踪 - 基础示例\u003C\u002Fh2>\n        \u003Cp>演示视频：https:\u002F\u002Fyoutu.be\u002FhgVB9HpQpqY \u003C\u002Fp>\n        \u003Cp>亲自尝试：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fbasic\u002F\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_09c58355f4da.gif\" width=\"300px\">\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>图像跟踪 - 多目标示例\u003C\u002Fh2>\n        \u003Cp>亲自尝试：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fmulti-tracks\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_444cb5cefc5a.gif\" width=\"300px\">\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>图像跟踪 - 交互式示例\u003C\u002Fh2>\n        \u003Cp>演示视频：https:\u002F\u002Fyoutu.be\u002Fgm57gL1NGoQ\u003C\u002Fp>\n        \u003Cp>亲自尝试：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Finterative\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_bbf239b13615.gif\" width=\"300px\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>人脸跟踪 - 虚拟试穿示例\u003C\u002Fh2>\n        \u003Cp>亲自尝试：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fface-tracking-examples\u002Ftryon\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_d32658a22297.gif\"  width=\"300px\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Ch2>人脸跟踪 - 面部网格效果\u003C\u002Fh2>\n        \u003Cp>亲自尝试：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fmore-examples\u002Fthreejs-face-facemesh\u003C\u002Fp>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_62a73d84b60a.gif\"  width=\"300px\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n### 更多示例\n\n更多示例请访问：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fsummary\n\n# 快速入门\n使用纯文本编辑器，只需5分钟即可学会构建上面的基础示例！\n\n快速入门指南：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fquick-start\u002Foverview\n\n为了让你快速了解，以下是基础示例的完整源代码。这是一个静态HTML页面，你可以将其托管在任何地方。\n\n```\n\u003Chtml>\n  \u003Chead>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image.prod.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"https:\u002F\u002Faframe.io\u002Freleases\u002F1.2.0\u002Faframe.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image-aframe.prod.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ca-scene mindar-image=\"imageTargetSrc: https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fcard.mind;\" color-space=\"sRGB\" renderer=\"colorManagement: true, physicallyCorrectLights\" vr-mode-ui=\"enabled: false\" device-orientation-permission-ui=\"enabled: false\">\n      \u003Ca-assets>\n        \u003Cimg id=\"card\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_ee5eee6cbe63.png\" \u002F>\n        \u003Ca-asset-item id=\"avatarModel\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fsoftmind\u002Fscene.gltf\">\u003C\u002Fa-asset-item>\n      \u003C\u002Fa-assets>\n\n      \u003Ca-camera position=\"0 0 0\" look-controls=\"enabled: false\">\u003C\u002Fa-camera>\n      \u003Ca-entity mindar-image-target=\"targetIndex: 0\">\n        \u003Ca-plane src=\"#card\" position=\"0 0 0\" height=\"0.552\" width=\"1\" rotation=\"0 0 0\">\u003C\u002Fa-plane>\n        \u003Ca-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\">\n      \u003C\u002Fa-entity>\n    \u003C\u002Fa-scene>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n# 目标图像编译器\n你可以使用这个友好的编译工具，在浏览器中直接编译自己的目标图像。如果你还不清楚这是什么，请先阅读快速入门指南：\n\nhttps:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Ftools\u002Fcompile\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_readme_86824fcef27e.png\" width=\"300\"\u002F>\n\n# 路线图\n1. 支持更多增强现实功能，如手势追踪、人体追踪和平面追踪。\n2. 研究不同的前沿算法，以提高追踪精度和性能。\n3. 提供更多教育性参考资料。\n\n# 贡献\n我个人并没有很强的计算机视觉背景，因此在提升追踪精度方面遇到了一些困难。非常希望能得到计算机视觉专家的帮助。请随时与我联系讨论。\n\n同时也欢迎JavaScript专家帮助改进非引擎部分，比如优化API等。\n\n如果你是平面设计师或3D艺术家，并且能够为视觉效果做出贡献，或者只是用MindAR开发了一些很酷的应用程序，请务必展示给我们看！\n\n无论你能想到什么，这都是一个面向所有人的开源Web AR框架！\n\n# 开发指南\n\n#### 目录说明\n\n1. `\u002Fsrc` 文件夹包含大部分源代码。\n2. `\u002Fexamples` 文件夹包含用于开发期间测试的示例。\n\n#### 创建生产版本\n\n运行 `> npm run build`。生成的文件将位于 `dist` 文件夹中。\n\n#### 开发环境\n\n要开发three.js版本，运行 `> npm run watch`。这会监视 `src` 文件夹中的文件变化，并持续构建 `dist-dev` 文件夹中的产物。\n\n对于AFRAME版本的开发，每次修改后都需要运行 `>npm run build-dev`。目前 `--watch` 参数无法自动生成 `mindar-XXX-aframe.js` 文件。\n\n`examples` 文件夹中的所有示例都配置为使用此开发版本，因此你可以在浏览器中打开这些示例来开始调试或开发。\n\n这些示例可以在桌面浏览器中运行，它们只是简单的HTML文件，所以很容易上手。然而，由于需要访问摄像头，你需要一台网络摄像头。此外，还需要通过本地服务器来运行这些HTML文件，直接打开文件是无法正常工作的。\n\n例如，你可以安装以下Chrome插件来启动本地服务器：`https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-server-for-chrome\u002Fofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en`\n\n你很可能也希望在移动设备上进行测试。在这种情况下，最好能设置你的开发环境，以便将本地服务器共享到你的移动设备上。如果遇到困难，比如被防火墙阻挡，可以使用 `ngrok`（https:\u002F\u002Fngrok.com\u002F）来实现端口转发。不过这不是理想的解决方案，因为MindAR的开发版本并不小（超过10MB），而使用免费版的`ngrok`进行隧道传输可能会比较慢。\n\n#### WebGL后端\n本库利用TensorFlow.js（https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs）作为WebGL后端。是的，TensorFlow是一个机器学习库，但我们并没有将其用于机器学习！:) TensorFlow.js拥有非常强大的WebGL引擎，使我们能够编写通用GPU应用程序（在本例中就是我们的AR应用）。\n\n核心的检测和追踪算法是用TensorFlow.js中的自定义操作编写的，它们类似于着色器程序。刚开始可能会觉得有些复杂，但实际上并不难理解。\n\n# 致谢\n计算机视觉的思想借鉴自ARToolKit（即https:\u002F\u002Fgithub.com\u002Fartoolkitx\u002Fartoolkit5）。遗憾的是，该库似乎已经不再维护了。\n\n面部追踪基于MediaPipe的面部网格模型（即https:\u002F\u002Fgoogle.github.io\u002Fmediapipe\u002Fsolutions\u002Fface_mesh.html）。","# MindAR-JS 快速上手指南\n\nMindAR 是一个纯 JavaScript 编写的 Web 增强现实（AR）库，支持图像追踪和人脸追踪。它利用 WebGL 和 Web Worker 进行 GPU 加速，无需安装复杂的本地环境，即可在浏览器中构建 AR 应用。\n\n## 1. 环境准备\n\n*   **操作系统**：Windows、macOS 或 Linux（无特殊要求）。\n*   **浏览器**：推荐使用最新版本的 Chrome、Firefox 或 Safari（需支持 WebGL 2.0）。\n*   **前置依赖**：\n    *   无需安装 Node.js 即可通过 CDN 直接使用（推荐初学者）。\n    *   若需本地开发调试，需要一个本地 Web 服务器（因为浏览器安全策略限制，直接打开 HTML 文件无法调用摄像头）。\n        *   推荐插件：Chrome \"Web Server for Chrome\"\n        *   或使用命令行工具：`npx http-server` \u002F `python -m http.server`\n*   **硬件**：带有摄像头的电脑或移动设备。\n\n## 2. 安装步骤\n\nMindAR 主要通过 CDN 引入，无需执行 `npm install` 命令。只需在 HTML 文件的 `\u003Chead>` 标签中按顺序引入以下三个脚本：\n\n1.  **MindAR 核心库** (图像追踪版)\n2.  **A-Frame 库** (用于 3D 场景渲染)\n3.  **MindAR A-Frame 扩展** (连接两者)\n\n请将以下代码添加到你的 HTML 文件中：\n\n```html\n\u003Chead>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n  \u003C!-- 1. 引入 MindAR 图像追踪核心库 -->\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image.prod.js\">\u003C\u002Fscript>\n  \n  \u003C!-- 2. 引入 A-Frame (3D 引擎) -->\n  \u003Cscript src=\"https:\u002F\u002Faframe.io\u002Freleases\u002F1.2.0\u002Faframe.min.js\">\u003C\u002Fscript>\n  \n  \u003C!-- 3. 引入 MindAR 与 A-Frame 的集成插件 -->\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image-aframe.prod.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n```\n\n> **注意**：如果你需要人脸追踪功能，请将 `mindar-image.prod.js` 和 `mindar-image-aframe.prod.js` 替换为对应的 `mindar-face` 版本。\n\n## 3. 基本使用\n\n以下是一个完整的“最小化可行示例”。该代码实现了一个基础的图像追踪 AR 场景：当摄像头识别到指定的目标图片时，会在图片上方显示一个 3D 模型并伴随浮动动画。\n\n### 第一步：准备目标图片\nMindAR 需要使用编译后的 `.mind` 文件作为追踪目标。你可以使用官方在线编译器将普通图片转换为 `.mind` 文件：\n*   **编译器地址**：https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Ftools\u002Fcompile\n*   本示例直接使用官方提供的演示资源。\n\n### 第二步：创建 HTML 文件\n新建一个 `index.html` 文件，粘贴以下完整代码：\n\n```html\n\u003Chtml>\n  \u003Chead>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image.prod.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"https:\u002F\u002Faframe.io\u002Freleases\u002F1.2.0\u002Faframe.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fdist\u002Fmindar-image-aframe.prod.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003C!-- \n      mindar-image: 指定目标图片的 .mind 文件 URL \n      vr-mode-ui=\"enabled: false\": 隐藏 VR 按钮\n      device-orientation-permission-ui=\"enabled: false\": 隐藏方向权限提示\n    -->\n    \u003Ca-scene mindar-image=\"imageTargetSrc: https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fcard.mind;\" color-space=\"sRGB\" renderer=\"colorManagement: true, physicallyCorrectLights\" vr-mode-ui=\"enabled: false\" device-orientation-permission-ui=\"enabled: false\">\n      \n      \u003C!-- 定义资源：2D 图片和 3D 模型 -->\n      \u003Ca-assets>\n        \u003Cimg id=\"card\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fcard.png\" \u002F>\n        \u003Ca-asset-item id=\"avatarModel\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fsoftmind\u002Fscene.gltf\">\u003C\u002Fa-asset-item>\n      \u003C\u002Fa-assets>\n\n      \u003C!-- 相机设置 -->\n      \u003Ca-camera position=\"0 0 0\" look-controls=\"enabled: false\">\u003C\u002Fa-camera>\n      \n      \u003C!-- 追踪目标实体：targetIndex 对应图片在编译时的索引，从 0 开始 -->\n      \u003Ca-entity mindar-image-target=\"targetIndex: 0\">\n        \u003C!-- 显示原始目标图片（可选，用于调试或覆盖） -->\n        \u003Ca-plane src=\"#card\" position=\"0 0 0\" height=\"0.552\" width=\"1\" rotation=\"0 0 0\">\u003C\u002Fa-plane>\n        \n        \u003C!-- 显示 3D 模型并添加浮动动画 -->\n        \u003Ca-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\">\n      \u003C\u002Fa-entity>\n    \u003C\u002Fa-scene>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 第三步：运行与测试\n1.  启动本地 Web 服务器（例如在文件目录下运行 `npx http-server`）。\n2.  在浏览器中访问 `http:\u002F\u002Flocalhost:8080` (端口视服务器而定)。\n3.  允许浏览器访问摄像头。\n4.  将摄像头对准以下目标图片（或屏幕显示该图片）：\n    *   **目标图预览**：[点击查看示例目标图](https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fhiukim\u002Fmind-ar-js@1.1.4\u002Fexamples\u002Fimage-tracking\u002Fassets\u002Fcard-example\u002Fcard.png)\n5.  识别成功后，你将看到 3D 角色出现在图片上。\n\n### 下一步\n*   **自定义目标**：上传自己的图片到 [MindAR 编译器](https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Ftools\u002Fcompile) 生成 `.mind` 文件，并修改代码中的 `imageTargetSrc` 和资源路径。\n*   **更多示例**：访问 [官方文档示例汇总](https:\u002F\u002Fhiukim.github.io\u002Fmind-ar-js-doc\u002Fexamples\u002Fsummary) 学习多目标追踪、人脸试戴等高级功能。","一家初创教育公司希望在其在线绘本平台中，让用户通过手机摄像头扫描纸质书上的插图，即可在网页端直接观看对应的 3D 动画讲解，无需下载任何 App。\n\n### 没有 mind-ar-js 时\n- **开发门槛极高**：团队需分别寻找图像识别和 3D 渲染方案，并花费数周时间编写底层 WebGL 代码来桥接两者。\n- **性能体验糟糕**：纯 CPU 运算导致识别延迟高，低端安卓机型上画面卡顿严重，甚至无法运行。\n- **用户流失严重**：强制要求用户下载专用 App 才能体验 AR 功能，导致 80% 的用户在第一步就放弃尝试。\n- **维护成本高昂**：缺乏统一的开源社区支持，遇到兼容性 bug 只能靠团队自行摸索解决，迭代速度缓慢。\n\n### 使用 mind-ar-js 后\n- **极速落地开发**：借助其纯 JavaScript 架构和 AFRAME 扩展，前端工程师仅用约 10 行代码就完成了图像追踪与 3D 内容的绑定。\n- **流畅硬件加速**：mind-ar-js 自动调用 WebGL 利用 GPU 运算，并启用 Web Worker 多线程处理，确保在普通手机上也能流畅运行。\n- **即开即用体验**：用户只需点击网页链接即可通过浏览器启动 AR，无需安装任何东西，大幅提升了互动转化率。\n- **生态完善省心**：依托活跃的开源社区和详尽文档，团队快速解决了多目标追踪等复杂场景问题，专注于内容创作而非底层调试。\n\nmind-ar-js 将原本需要原生 App 才能实现的复杂增强现实体验，转化为轻量、高性能且零安装的网页交互，彻底打破了 Web AR 的落地壁垒。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fhiukim_mind-ar-js_d32658a2.gif","hiukim","HiuKim Yuen","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fhiukim_5dacb586.jpg","https:\u002F\u002Fhiukim.com",null,"Vancouver, Canada","https:\u002F\u002Fgithub.com\u002Fhiukim",[81,85,89,93],{"name":82,"color":83,"percentage":84},"JavaScript","#f1e05a",95,{"name":86,"color":87,"percentage":88},"HTML","#e34c26",4.1,{"name":90,"color":91,"percentage":92},"SCSS","#c6538c",0.6,{"name":94,"color":95,"percentage":96},"CSS","#663399",0.3,2661,503,"2026-04-13T14:29:12","MIT","跨平台 (任何支持现代浏览器的操作系统)","非必需独立显卡，但需设备支持 WebGL (通过浏览器调用集成显卡或独立显卡均可)","未说明 (取决于浏览器及运行的 3D 内容复杂度)",{"notes":105,"python":106,"dependencies":107},"这是一个纯 JavaScript 编写的 Web AR 库，无需安装 Python 或配置本地开发环境。运行仅需现代浏览器（支持 WebGL）和网络摄像头。开发测试时需在本地搭建 Web 服务器（如 localhost）以获取摄像头权限，直接打开 HTML 文件无法运行。人脸追踪功能基于 MediaPipe 模型，图像追踪算法基于 TensorFlow.js 的 WebGL 后端。","不需要",[108,109,110],"mindar-image.prod.js","aframe.min.js","tensorflowjs (内部依赖)",[14,45],[113,114,115,116,117,118],"webar","threejs","aframe","tensorflowjs","augmented-reality","mediapipe","2026-03-27T02:49:30.150509","2026-04-17T09:54:09.209790",[122,127,132,137,142,147,152,157],{"id":123,"question_zh":124,"answer_zh":125,"source_url":126},36984,"如何在 Node.js 或浏览器环境中编译图像目标文件？","虽然官方示例链接可能已失效，但核心功能是 `compileFiles` 函数。你可以参考旧版示例代码 (https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fblob\u002Fmaster\u002Fexamples\u002Fcompile.html)。对于自定义编译器，目前主要通过在浏览器环境中运行该函数来实现，也可以尝试在无头浏览器（headless browser）中运行以处理用户生成的图像集。","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F18",{"id":128,"question_zh":129,"answer_zh":130,"source_url":131},36985,"MindAR 是否支持基于位置（Location Based）的 AR 功能？","目前 MindAR 不支持基于位置的 AR 功能。维护者明确表示短期内没有合并 AR.js 相关功能的计划。如果需要此功能，可能需要单独使用 AR.js 库。","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F54",{"id":133,"question_zh":134,"answer_zh":135,"source_url":136},36986,"在 Android 浏览器上进行人脸追踪时，模型出现偏移或尺寸过大怎么办？","这通常是因为相机实体（camera entity）中缺少特定的配置属性。请确保在 A-Frame 的相机实体中添加 `look-controls=\"enabled: false\"`。例如：`\u003Ca-camera look-controls=\"enabled: false\" ...>`。这可以修复 Android 设备上模型偏移和比例异常的问题。","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F316",{"id":138,"question_zh":139,"answer_zh":140,"source_url":141},36987,"如何在项目中解耦 Three.js，以便使用特定版本的 Three.js？","MindAR 的某些版本将 Three.js 打包在内，导致版本冲突。用户报告指出，直接更改导入版本（如从 r132 改为 r173）可能导致加载失败。目前建议检查是否有外部依赖配置选项，或者等待库更新以完全支持外部 Three.js 依赖。如果遇到兼容性问题，可能需要暂时使用库绑定的 Three.js 版本或寻找社区提供的变通方案（hacks）。","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F104",{"id":143,"question_zh":144,"answer_zh":145,"source_url":146},36988,"在 iPhone 上运行基本示例时卡在等待动画且报错 TensorFlow WebGL 后端初始化失败，如何解决？","这是 iOS 上 TensorFlow WebGL 后端初始化的已知问题。解决方案是注释掉部分涉及底层纹理处理的代码。具体操作是在源码中找到类似以下的代码块并将其注释掉，因为旧的 `loadInput` 方法不需要它们：\n```\n\u002F*\nthis.program = this.buildProgram(width, height);\nconst backend = tf.backend();\nthis.tempPixelHandle = backend.makeTensorInfo(this.texShape, 'int32');\nbackend.texData.get(this.tempPixelHandle.dataId).usage = 2;\n*\u002F\n```","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F19",{"id":148,"question_zh":149,"answer_zh":150,"source_url":151},36989,"遇到 'Error compiling fragment shader: integer constant overflow' GPU 编译错误怎么办？","该错误通常出现在较旧的 Android 设备或特定的 GPU 驱动上，源于对 GPU.js 的依赖。维护者已经发布了重大更新，完全移除了 GPU.js 依赖以解决此类问题。请务必升级到最新版本的 MindAR，并重新测试示例，这通常能解决大部分着色器编译错误。","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F5",{"id":153,"question_zh":154,"answer_zh":155,"source_url":156},36990,"如何在 WebAR 中播放 GIF 动画或视频？","直接使用 `\u003Ca-plane>` 标签加载 GIF 通常只会显示静态帧。要播放动画，建议使用 `\u003Ca-video>` 标签并将源文件转换为视频格式（如 MP4），或者确保 GIF 在 A-Frame 资产管理系统中被正确解析为视频纹理。对于音频播放，特别是在 iOS 上，需要用户交互事件（如点击）才能触发，可以通过注册自定义组件监听实体可见性来控制播放。参考示例：https:\u002F\u002Fcodepen.io\u002Fbostonleek\u002Fpen\u002FabPZVvY","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F449",{"id":158,"question_zh":159,"answer_zh":160,"source_url":161},36991,"如何减少 AR 追踪过程中的抖动（Jittering）现象？","可以通过插值算法来平滑目标的位置和旋转数据。基本思路是利用 `targetFound` 和 `targetLost` 事件，不直接更新物体的变换属性，而是在每一帧中对当前位置和目标位置进行线性插值（Lerp）。虽然具体的实现代码需要根据项目调整，但核心逻辑是模拟真实物体的运动惯性，避免帧间数值的剧烈跳变。","https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fissues\u002F146",[163,168,173,178,183,188,193,198,203,208,213,217],{"id":164,"version":165,"summary_zh":166,"released_at":167},297394,"v1.2.5","亮点：已更新至最新版 MediaPipe，用于人脸追踪。因此，它还会为检测到的人脸公开 52 个表情混合形状。\n\n**完整更新日志**：https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcompare\u002Fv1.2.3...v1.2.5","2024-01-16T07:43:09",{"id":169,"version":170,"summary_zh":171,"released_at":172},297395,"v1.2.3","将人脸追踪自拍模式默认设置为水平翻转\n\n**完整更新日志**: https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcompare\u002Fv1.2.2...v1.2.3","2023-06-11T06:25:45",{"id":174,"version":175,"summary_zh":176,"released_at":177},297396,"v1.2.2","错误修复：\n- 方向变化导致追踪中断\n- iOS 16.4 自拍模式\n- 点击事件无法正常触发\n- 部分导入错误\n\n改进：\n- 允许选择摄像头设备（主要用于多摄像头设备，此前库可能选择了错误的摄像头）\n\n**完整更新日志**：https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcompare\u002Fv1.2.1...v1.2.2","2023-06-04T07:19:49",{"id":179,"version":180,"summary_zh":181,"released_at":182},297397,"v1.2.1","## 变更内容\n* 修复：由 @jmswrnr 在 https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fpull\u002F340 中修复了 WebGL TensorFlow 内核缓存键问题\n* [修复开发示例库的安装问题](https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcommit\u002F287b5d0fb77a8de1d9e16d4ab4865399b5f13b6b)\n* [更新人脸示例，使其在显示时水平翻转](https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcommit\u002F38266e62ced01279236c524db6c87eabf0159a19)\n* [修复图像追踪扫描界面在目标丢失后不重新出现的问题](https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcommit\u002F1efb686f8a699417dc04cc6f62c980f66772e0ac)\n* [修复图像目标在丢失后 A-Frame 对象仍可点击的问题](https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcommit\u002F270c3416a47892b8781d44d5aed762dcbe311ecf)\n* [为图像追踪添加了 onTargetUpdate 事件](https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcommit\u002F7740932205a0bb9591d3b99ea2610cc0a1d4fb2d)\n* [更新了依赖包](https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcommit\u002Ff3f13c63fe5eb5af41dc7b858990df6b1442cc12)\n\n## 新贡献者\n* @jmswrnr 在 https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fpull\u002F340 中完成了首次贡献\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcompare\u002Fv1.2.0...v1.2.1","2023-03-06T04:22:14",{"id":184,"version":185,"summary_zh":186,"released_at":187},297398,"v1.2.0","这是 MindAR 向前迈进的重要一步。我们已迁移到 ES 模块，这使得与 Node.js 应用程序的集成更加便捷。因此，我们也把 Three.js 降级为外部依赖，这样我们可以自由选择使用的 Three.js 版本。感谢 @jmschrack 的辛勤工作！\n\n## 变更内容\n* 使用 ES 模块，解耦 Three.js，切换至 Vite 构建工具。由 @jmschrack 在 https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fpull\u002F311 中实现离线编译器。\n* 修复或移除 Web Worker，由 @jotatoledo 在 https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fpull\u002F314 中完成。\n\n## 新贡献者\n* @jmschrack 在 https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fpull\u002F311 中完成了首次贡献。\n* @jotatoledo 在 https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fpull\u002F314 中完成了首次贡献。\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fhiukim\u002Fmind-ar-js\u002Fcompare\u002Fv1.1.5...v1.2.0","2022-12-16T04:28:06",{"id":189,"version":190,"summary_zh":191,"released_at":192},297399,"v1.1.5","主要是修复 bug","2022-08-02T02:30:56",{"id":194,"version":195,"summary_zh":196,"released_at":197},297400,"v1.1.4","实现 oneEuroFilter 以平滑跟踪","2022-02-15T11:18:27",{"id":199,"version":200,"summary_zh":201,"released_at":202},297401,"v1.1.3","- 修复了一些 bug\n- 为图像跟踪添加了一些跟踪配置参数","2022-02-12T09:54:26",{"id":204,"version":205,"summary_zh":206,"released_at":207},297402,"v1.1.2","使用MediaPipe和OpenCV重写了人脸追踪功能。","2022-01-31T14:05:30",{"id":209,"version":210,"summary_zh":211,"released_at":212},297403,"v1.1.0","增加了对Three.js的内置支持","2021-12-11T08:49:31",{"id":214,"version":215,"summary_zh":77,"released_at":216},297404,"v1.0.1","2021-10-06T00:13:33",{"id":218,"version":219,"summary_zh":220,"released_at":221},297405,"v1.0.0","This is a major release, not compatible with the older version\r\n\r\n- refactor image tracking\r\n- added face tracking\r\n- remove aframe from the production build, and separate aframe extension from the core \r\n","2021-10-04T01:26:17"]