create-shaderpad 1.0.0-beta.67

package/template-face-js/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "shaderpad-template-face-js",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@mediapipe/tasks-vision": "^0.10.32",
+		"shaderpad": "1.0.0-beta.67"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-basic-ssl": "^2.2.0",
+		"vite": "^7.3.1",
+		"vite-plugin-glsl": "^1.5.6"
+	}
+}

package/template-face-js/public/favicon.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill="#000" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h1024v1024h-1024z" fill="none"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 -182.973 319.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 73.0271 1087.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 438.973 192.61)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 -182.973 831.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 438.973 704.61)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 694.973 -63.3896)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 73.0271 575.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 694.973 448.61)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 585.027 1087.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 1206.97 -63.3896)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 585.027 575.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 1206.97 448.61)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 329.027 319.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 950.973 192.61)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 -.492608 .492608 0 329.027 831.39)"/><path d="m583.404 728.719h-389.762c0-107.63 87.251-194.881 194.881-194.881s194.881 87.251 194.881 194.881z" transform="matrix(0 .492608 -.492608 0 950.973 704.61)"/></svg>

package/template-face-js/src/main.js

@@ -0,0 +1,51 @@
+import ShaderPad from 'shaderpad';
+import autosize from 'shaderpad/plugins/autosize';
+import face from 'shaderpad/plugins/face';
+import helpers from 'shaderpad/plugins/helpers';
+import { createFullscreenCanvas } from 'shaderpad/util';
+
+import fragmentShaderSrc from './shaders/fragment.glsl';
+
+async function getWebcam() {
+	const video = document.createElement('video');
+	video.autoplay = true;
+	video.muted = true;
+	video.playsInline = true;
+
+	const stream = await navigator.mediaDevices.getUserMedia({
+		video: {
+			facingMode: 'user',
+		},
+		audio: false,
+	});
+	video.srcObject = stream;
+	await video.play();
+	return video;
+}
+
+async function main() {
+	const video = await getWebcam();
+	const canvas = createFullscreenCanvas();
+	const shader = new ShaderPad(fragmentShaderSrc, {
+		plugins: [
+			autosize(),
+			helpers(),
+			face({
+				textureName: 'u_webcam',
+				options: {
+					maxFaces: 1,
+				},
+			}),
+		],
+		canvas,
+	});
+
+	shader.initializeTexture('u_webcam', video);
+	shader.play(() => {
+		shader.updateTextures({ u_webcam: video });
+	});
+}
+
+main().catch(error => {
+	console.error(error);
+});

package/template-face-js/src/shaders/fragment.glsl

@@ -0,0 +1,17 @@
+#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+uniform sampler2D u_webcam;
+out vec4 outColor;
+
+void main() {
+	vec2 webcamUV = fitCover(vec2(1.0 - v_uv.x, v_uv.y), vec2(textureSize(u_webcam, 0)));
+	vec3 color = texture(u_webcam, webcamUV).rgb;
+	color = mix(color, vec3(0.0, 1.0, 0.0), inFace(webcamUV));
+	color = mix(color, vec3(1.0, 0.0, 0.0), inMouth(webcamUV));
+	color = mix(color, vec3(0.0), inInnerMouth(webcamUV));
+	color = mix(color, vec3(1.0), inEye(webcamUV));
+	color = mix(color, vec3(0.0, 0.0, 1.0), inEyebrow(webcamUV));
+	outColor = vec4(color, 1.0);
+}

package/template-face-js/vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+import glsl from 'vite-plugin-glsl';
+
+const isStackBlitz = 'STACKBLITZ' in process.env;
+
+export default defineConfig({
+	plugins: [glsl(), ...(isStackBlitz ? [] : [basicSsl()])],
+	server: {
+		host: true,
+		...(isStackBlitz ? {} : { https: true }),
+	},
+});

package/template-face-ts/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<title>Built with ShaderPad</title>
+	</head>
+	<body>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>