fix: face found

example/assets/pages/facemesh-with-machine-learning/shaders/fragmentShader.frag

@@ -1,15 +1,20 @@
-// VSCode Frag
-#pragma vscode_glsllint_stage : frag
-
 // Const
 const float PI = 3.1415926535897932384626433832795;
 
 // Varying
-varying vec3 vPos;
+varying vec4 vPos;
+varying vec2 vUv;
 
 // Main
 void main () {
 
-    gl_FragColor = vec4( gl_PointCoord, 1., 1. ) * vec4( vPos, 1. );
+    // Make point rounded
+    float dist = length( gl_PointCoord - vec2( 0.5 ) );
+    float alpha = 1. - smoothstep( 0.45, 0.5, dist );
+
+    // Bring back pixels
+    // gl_FragColor = vec4( gl_PointCoord, 1., alpha ) * vPos;
+    // gl_FragColor = vec4( vPos.xyz, alpha );
+    gl_FragColor = vec4( vUv, 1., alpha );
 
 }

example/assets/pages/facemesh-with-machine-learning/shaders/vertexShader.vert

@@ -2,16 +2,18 @@
 #pragma vscode_glsllint_stage : vert
 
 // Varying
-varying vec3 vPos;
+varying vec4 vPos;
+varying vec2 vUv;
 
 // Main
 void main () {
 
-    vPos = position.xyz;
+   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
-   vec4 mvPosition = modelViewMatrix * vec4( position.xyz, 1.0 );
+    vUv = uv;
+    vPos = mvPosition;
 
-    gl_PointSize = 2. * ( 1. / - mvPosition.z );
+    gl_PointSize = 10. * ( 1. / - mvPosition.z );
 
     gl_Position = projectionMatrix * mvPosition;
 

example/assets/style.css

@@ -60,6 +60,34 @@ video {
 
 }
 
+button {
+
+    width: 100%;
+    max-width: 354px;
+    margin: 16px auto;
+    padding: 8px;
+    color: #f05;
+    font-weight: bold;
+    line-height: 1.36;
+    text-align: center;
+    background-color: #f3f0f1;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+    opacity: .9;
+    transition: all .27s ease-in-out;
+    appearance: none;
+
+}
+
+button:hover,
+button:active,
+button:focus {
+
+    opacity: 1;
+
+}
+
 .opacity-50 {
 
     opacity: .5;