图书馆网站建设的项目报告,坪山网站建设渠道,国外做珠宝的网站有哪些,域名注册好了怎么打开网站前言
近段时间一直在玩MindAR的功能#xff0c;之前一直在弄图片识别追踪的功能#xff0c;发现其强大的功能还有脸部识别和追踪的功能#xff0c;就基于其面部网格的例子修改了一个国粹京剧的换脸程序。如果你不了解MindAR的环境配置可以先参考这篇文章#xff1a;基于Mi…前言
近段时间一直在玩MindAR的功能之前一直在弄图片识别追踪的功能发现其强大的功能还有脸部识别和追踪的功能就基于其面部网格的例子修改了一个国粹京剧的换脸程序。如果你不了解MindAR的环境配置可以先参考这篇文章基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能其中包含了大致的配置步骤和图片识别的功能。本文就以仓库中的面网案例的基础上进行了修改将部分托管在cdn服务器的脚本库进行了本地化关联解决加载太慢的问题同时在网上随便找了个京剧面具图片利用了笔者的超低PS技术进行了京剧面网的p图实现了该效果。按MindAR作者的说法是可以在手机上运行但是笔者在进行手机测试的时候一直在转圈加载中并未在手机上成功使用该功能如果有大佬知道是啥问题也请指点一下。
效果 开发工作
主要还是在准备面网贴图上还有进行代码修改的工作通过mindar-face-three添加面网然后替换面网材质的贴图并设置透明属性transparent和需要更新属性needsUpdate再把面网添加到三维场景中即可。
面网贴图准备
面部网格贴图是贴在三维网格上的图这个的准备还是比较费事的主要笔者ps技术超低从上面的效果能看出来贴图比较粗糙如果更精细的贴图效果会更出色。案例中给出了标准的人脸模型可视化uv贴图canonical_face_model_uv_visualization.png
将上面的面网图放大不难看出每个顶点都有编号
MindAR在脸上提供了486个锚点您可以将3D模型或者贴图对象挂接定在任何一个锚点上这里使用面部网格贴图就不用单个锚点的挂接了因为面部识别后会自动将面部uv贴图拉伸贴合在对应的顶点上。但是我们的贴图也需要按标准的人脸模型可视化uv贴图进行制作例如眼睛、鼻子等部位的贴图和网格的位置得对应上不然会出现贴图便宜等情况笔者使用的ps方法就是将标准的面网作为底图层将京剧的面网的贴图新建个图层盖上去然后对该图层进行缩放、拉伸和变形使其各个部位与标准的面网的部位对应上。 如下制作方式
关闭背景和标准的面网导出png即可。
编码
该功能基于mind-ar-js-master\examples\face-tracking\example1.html案例修改而来主要是将部分托管在cdn服务器的脚本库进行了本地化关联解决加载太慢的问题和替换了面部网格贴图。核心代码如下 import * as THREE from three;import {MindARThree} from mindar-face-three;const mindarThree new MindARThree({container: document.querySelector(#container),});const { renderer, scene, camera } mindarThree;const light new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);scene.add(light);const faceMesh mindarThree.addFaceMesh();const texture new THREE.TextureLoader().load(./assets/京剧面具.png); faceMesh.material.map texture;faceMesh.material.transparent true;faceMesh.material.needsUpdate true;scene.add(faceMesh);const start async () {await mindarThree.start();renderer.setAnimationLoop(() {renderer.render(scene, camera);});}start();主要是通过const texture THREE.TextureLoader().load(‘./assets/京剧面具.png’)加载了京剧面具贴图并且faceMesh.material.map texture;将贴图赋值。
服务器部署
我这里直接使用了IIS作为了本地的服务器在打开网页测试之前还需要进行MIME类型的添加 application/binarypb:
application/wasm: application/data:
如果有其它的后缀名类型需要自行添加上去不然没办法运行网页或者功能不正常。 同时需要配置SSL证书这个教程网上多自行搜索配置吧
源码
https://download.csdn.net/download/qq_33789001/87554552 打不开说明暂未通过审核
