在 3D 场景中实时导入您的脸部!
这个 JavaScript 库:
所有这些都是在标准网络浏览器中实时完成的。我们提供了一个 THREE.js 演示,其中用户的 3D 面孔被插入到 3D 场景中。但是,这个库与框架无关,可以与任何 Web 3D 引擎一起使用。
/demos/
: 演示源代码,/dist/
:库的核心:
WebARRocksFaceDepth.js
:主要缩小脚本,WebARRocksFaceDepth.module.js
:用于模块使用的主要缩小脚本(使用import
或require
),/helpers/
:可以帮助您在某些特定用例中使用此库的脚本,
WebARRocksFaceDepthThreeHelper.js
: 在THREE.js和这个库之间架起桥梁,/neuralNets/
:神经网络模型,
NN_FACEDEPTH_DEPTH_<version>.json
:神经网络计算面部裁剪图像的深度,NN_FACEDEPTH_TRACK_<version>.json
:神经网络检测和跟踪人脸,/libs/
:演示中使用的第 3 方库和 3D 引擎,以下是此存储库中包含的演示:
最好的入门方法是参加演示。
<function> callbackReady
:初始化 lib 时调用此函数,带有 2 个参数:<string|false> errorCode, <object> spec
。如果发生错误,将再次调用此函数。该对象spec
具有以下属性:
GL
: WebGL 上下文。渲染 3D 引擎应该使用这个 WebGL 上下文,canvasElement
:<canvas>
元素,videoTexture
:显示相机视频的 WebGL 纹理。它与摄像机视频具有相同的分辨率,[<float>, <float>, <float>, <float>]
videoTransformMat2:展平 2x2 矩阵编码缩放和旋转。我们应该将此矩阵应用于视口坐标以videoTexture
在视口中渲染,<HTMLVideoElement> video
:用作 webgl 纹理源的视频videoTexture
,<function> callbackTrack
:在每个迭代循环中调用此函数,将对象作为具有以下属性的参数:
<float> detected
: 人脸检测概率,介于0
和 之间1
,<boolean> isDetected
:是否检测到人脸<float> x
, <float> y
: 视口中检测框中心的二维坐标(分别在-1和1之间,x
从左到右,y
从下到上),<float> s
: 沿检测框水平轴的比例,介于 0 和 1 之间(1 为全宽)。检测框总是方形的,<float> rx
, <float> ry
, <float> rz
: 头部旋转的欧拉角,以弧度为单位,<Uint8Array> RGBDBuf
:人脸的RGBD缓冲区,<int> RGBDRes
:RGBD缓冲区的分辨率。<string> canvasId
or <HTMLCanvasElement> canvas
:将执行计算的画布,
<string>NNTrackPath
or <object> NNTrack
: 用于人脸检测和跟踪的神经网络模型,
<string>NNDepthPath
or <object> NNDepth
: 用于深度推理的神经网络模型,
<integer> animateDelay
:使用此语句,您可以准确设置浏览器在渲染循环结束时等待开始另一次检测之前的毫秒数。如果您将此库的画布用作次要元素(例如在PACMAN或EARTH NAVIGATION演示中),则应设置一个较小的animateDelay
值(例如 2 毫秒)以避免渲染延迟。
<function> onWebcamAsk
:在要求用户允许其相机访问之前启动的功能,
<function> onWebcamGet
:功能在用户同意分享其视频后立即启动。它以视频元素作为参数调用,
<dict> videoSettings
:覆盖 MediaStream API 指定的视频设置,默认情况下为:
{
'videoElement' // not set by default. <video> element used
// If you specify this parameter,
// all other settings will be useless
// it means that you fully handle the video aspect
'deviceId' // not set by default
'facingMode': 'user', // to use the rear camera, set to 'environment'
'idealWidth': 800, // ideal video width in pixels
'idealHeight': 600, // ideal video height in pixels
'minWidth': 480, // min video width in pixels
'maxWidth': 1280, // max video width in pixels
'minHeight': 480, // min video height in pixels
'maxHeight': 1280, // max video height in pixels,
'rotate': 0 // rotation in degrees possible values: 0,90,-90,180
},
<dict> scanSettings
:覆盖面部扫描设置 -set_scanSettings(...)
有关详细信息,请参阅方法。<dict> stabilizationSettings
:覆盖跟踪稳定设置 -set_stabilizationSettings(...)
有关更多信息,请参阅方法。<boolean> isKeepRunningOnWinFocusLost
:即使用户切换浏览器选项卡或最小化浏览器窗口,我们是否应该保持检测循环运行。默认值为false
。此选项对于视频会议应用程序很有用,如果FaceFilter窗口不是活动窗口,则仍应计算面罩。即使启用此选项,当 FaceFilter 窗口未处于活动状态时,面部跟踪仍然会变慢。初始化函数(callbackReady
在代码片段中)将被调用并带有错误代码 ( errCode
)。它可以具有以下值:
false
: 没有错误发生,"GL_INCOMPATIBLE"
: WebGL不可用,或者这个WebGL配置不够(没有WebGL2,或者有没有OES_TEXTURE_FLOAT或者OES_TEXTURE_HALF_FLOAT扩展名的WebGL1),"ALREADY_INITIALIZED"
: 库已经初始化,"NO_CANVASID"
: 未指定画布 ID,"INVALID_CANVASID"
<canvas>
:在 DOM 中找不到元素,"INVALID_CANVASDIMENSIONS"
:未指定画布的尺寸width
和尺寸,height
"WEBCAM_UNAVAILABLE"
: cannot get access to the camera (用户没有相机,或者没有接受共享设备,或者相机已经忙),"GLCONTEXT_LOST"
: WebGL 上下文丢失。如果上下文在初始化后丢失,该callbackReady
函数将以该值作为错误代码第二次启动,resize()
<canvas>
:应在调整元素大小以适应视频剪辑后调用,
toggle_pause(<boolean> isPause)
:暂停/恢复,
set_animateDelay(<integer> delay)
:改变animateDelay
(见init()
参数),
set_inputTexture(<WebGLTexture> tex, <integer> width, <integer> height)
:通过 WebGL Texture 实例更改视频输入。应提供纹理的尺寸(以像素为单位),
reset_inputTexture()
: 返回到用户的视频作为输入纹理,
get_videoDevices(<function> callback)
: 应该在init
方法之前调用。向回调函数提供了 2 个参数:
<array> mediaDevices
:包含所有设备的数组。每个设备都是一个具有deviceId
字符串属性的 javascript 对象。可以将该值提供给init
使用特定相机的方法。如果发生错误,此值设置为false
,<string> errorLabel
:如果发生错误,错误的标签。它可以是:NOTSUPPORTED
,NODEVICESFOUND
或PROMISEREJECTED
。set_scanSettings(<object> scanSettings)
:覆盖扫描设置。scanSettings
是具有以下属性的字典:
<float> threshold
: 检测阈值,介于0
和 之间1
。默认值为0.75
。如果你想让检测更敏感,你可以减少它(但它会增加误报检测),<int> nDetectsPerLoop
:指定每个绘图循环的检测次数。0
为适应价值。默认:0
<int> nScaleLevels
: 尺度的检测步骤数。默认值:3
,[<float>, <float>, <float>] overlapFactors
X
:在和Y
的2 个扫描位置之间重叠scale
。默认值:[2, 2, 3]
,<float> scale0Factor
:最大扫描级别的比例因子。默认为0.8
。set_stabilizationSettings(<object> stabilizationSettings)
:覆盖检测稳定设置。神经网络的输出总是有噪声,所以我们需要使用浮动平均值来稳定它以避免抖动伪影。内部算法首先计算和k
之间的稳定因子。如果,则检测效果不好,我们倾向于响应度而不是稳定性。当用户快速移动、旋转头部或检测不良时,就会发生这种情况。相反,如果接近,则检测效果很好,用户不会移动太多,因此我们可以稳定很多。是具有以下属性的字典:0
1
k==0.0
k
1
stabilizationSettings
[<float> minValue, <float> maxValue] translationFactorRange
:乘以一个取决于头部平移速度的k
系数(相对于视口)。如果和如果。回归是线性的。默认值:,kTranslation
kTranslation=0
translationSpeed<minValue
kTranslation=1
translationSpeed>maxValue
[0.0015, 0.005]
[<float> minValue, <float> maxValue] rotationFactorRange
:类似于translationFactorRange
但用于旋转速度。默认值:[0.12, 0.25]
,[<float> minValue, <float> maxValue] qualityFactorRange
:类似于translationFactorRange
头部检测系数。默认值:[0.85, 0.95]
,[<float> minValue, <float> maxValue] alphaRange
: 它指定了如何申请k
。在 2 次连续检测之间,我们detectState
使用混合因子将先前值与当前检测值混合alpha
。alpha=<minValue>
如果k<0.0
和alpha=<maxValue>
如果k>1.0
。在这两个值之间,变化是二次的。默认值为[0.05, 0.9]
,它仅适用于全局姿态稳定。使用助手 ( ) 稳定地标/helpers/WebARRocksLMStabilizer<X>.js
。update_videoElement(<video> vid, <function|False> callback)
: 将用于面部检测的视频元素(可以通过 提供VIDEOSETTINGS.videoElement
)更改为另一个视频元素。完成后可以调用回调函数。
update_videoSettings(<object> videoSettings)
:动态更改视频设置(请参阅可选的初始化参数了解属性videoSettings
)。将相机从自拍相机(用户)更改为后置(环境)相机很有用。Promise
返回A。如果videoSettings = null
,则视频停止并关闭相机。
destroy()
: 清除图形内存和 JavaScript 内存,取消初始化库。之后你需要再次初始化库。Promise
返回A。
is_winFocus()
:如果当前窗口有焦点则返回(例如,如果用户更改了浏览器选项卡,则返回false
)。此功能仅在 init 选项isKeepRunningOnWinFocusLost
设置为时有效true
。
您应该使用 HTTPS 静态服务器托管此存储库的内容。
请注意为 JSON 和 JS 文件启用 gzip HTTP/HTTPS 压缩。确实,神经元网络 JSON 文件neuralNets/NN_<xxx>.json
非常重,但使用 GZIP 压缩得很好。您可以在此处检查服务器的 gzip 压缩。
该库依赖于WebAR.rocks WebGL 深度学习技术,使用神经网络检测和跟踪用户的面部。精度是自适应的:最好的是硬件,每秒处理的检测越多。一切都在客户端完成。
WebGL2
可用,它会使用WebGL2
并且不需要特定的扩展名,WebGL2
不可用但是WebGL1
,我们需要OES_TEXTURE_FLOAT
延期或OES_TEXTURE_HALF_FLOAT
延期,WebGL2
不可用,并且如果WebGL1
不可用或两者均未OES_TEXTURE_FLOAT
实现OES_HALF_TEXTURE_FLOAT
,则用户不兼容。如果触发兼容性错误,请在此存储库上发布问题。如果这是相机访问的问题,请先关闭所有可能使用您设备的应用程序(Skype、Messenger、其他浏览器选项卡和窗口,...)后重试。请包括:
WebGL1
实现),WebGL2
实现),