Spaces:

vivien
/

trompeloeil

Running

@@ -1,24 +1,53 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>
-				You can modify this app directly by editing <i>index.html</i> in the
-				Files and versions tab.
-			</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank"
-					>Spaces documentation</a
-				>.
-			</p>
-		</div>
-	</body>
 </html>

 <!DOCTYPE html>
 <html>
+<head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-C0Q8V7CMP9"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'G-C0Q8V7CMP9');
+  </script>
+  <title>3D In Your Browser</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="UTF-8" />
+  <link href="./styles/main.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <div id="scene-container">
+    <!-- Our <canvas> will be inserted here -->
+  </div>
+  <div id="controls" style="visibility:hidden">
+    <div style="z-index: 1; color:white; position: absolute; top: 20px; width: 100%; text-align: center; font-family: sans-serif">A 3D image with just a browser and a webcam<br>Press "C" to only keep the 3D image</div>
+    <div id="video-container" style="position:absolute; left:0; bottom:0;">
+      <video autoplay="true" style="width:200px; margin:10px;" id="video">
+      </video>
+    </div>
+    <div style="z-index: 1; position:absolute; top:0; right: 0; margin: 20px;">
+      <select id="object">
+        <option value="0">Spaceship</option>
+        <option value="1">Parrot</option>
+        <option value="2">Van Gogh</option>
+      </select>
+    </div>
+  </div>
+</body>
+<script src="https://unpkg.com/@tensorflow/tfjs-core@2.4.0/dist/tf-core.js"></script>
+<script src="https://unpkg.com/@tensorflow/tfjs-converter@2.4.0/dist/tf-converter.js"></script>
+<script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@2.4.0/dist/tf-backend-webgl.js"></script>
+<script src="https://unpkg.com/@tensorflow-models/face-landmarks-detection@0.0.1/dist/face-landmarks-detection.js">
+</script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
+<script type="module" src="./src/main.js"></script>
 </html>
+<!-- Cf. https://github.com/vivien000/trompeloeil for a write-up and the credits -->

src/World/World.js ADDED Viewed

	@@ -0,0 +1,75 @@

+import {
+  loadObjects
+} from './components/objects/objects.js';
+import {
+  createCamera
+} from './components/camera.js';
+import {
+  createLights
+} from './components/lights.js';
+import {
+  createScene
+} from './components/scene.js';
+import {
+  FaceTracker
+} from './components/geometry/geometry.js';
+import {
+  createRenderer
+} from './systems/renderer.js';
+import {
+  Resizer
+} from './systems/Resizer.js';
+import {
+  Loop
+} from './systems/Loop.js';
+let camera;
+let renderer;
+let scene;
+let loop;
+class World {
+  constructor(container) {
+    camera = createCamera(0, 1);
+    renderer = createRenderer();
+    scene = createScene();
+    container.append(renderer.domElement);
+    const {
+      ambientLight,
+      mainLight
+    } = createLights();
+    scene.add(ambientLight, mainLight);
+    loop = new Loop(camera, scene, renderer, new FaceTracker());
+    const resizer = new Resizer(container, camera, renderer, loop);
+  }
+  async init() {
+    const object = await loadObjects();
+    if (typeof (object.tick) == "function") {
+      loop.updatables.push(object);
+    }
+    scene.add(object);
+    await loop.init();
+  }
+  render() {
+    renderer.render(scene, camera);
+  }
+  start() {
+    loop.start();
+  }
+  stop() {
+    loop.stop();
+  }
+}
+export {
+  World
+};

src/World/components/camera.js ADDED Viewed

	@@ -0,0 +1,10 @@

+import { PerspectiveCamera } from 'https://unpkg.com/three@0.117.0/build/three.module.js';
+function createCamera(cameraPosition, fov, aspectRatio) {
+  const camera = new PerspectiveCamera(fov, aspectRatio, 0.1, 100);
+  camera.position.set(cameraPosition[0], cameraPosition[1], cameraPosition[2]);
+  camera.lookAt(0, 0, 0);
+  return camera;
+}
+export { createCamera };

src/World/components/geometry/geometry.js ADDED Viewed

	@@ -0,0 +1,160 @@

+const MAX_WIDTH = 1280;
+const FOCAL_LENGTH = 1430;
+const DFOV = Math.PI / 3;
+const parameter = (location.search.split('distanceMethod=')[1] || '').split('&')[0]
+const distanceMethod = parameter ? parameter : 0;
+const DEFAULT_DISTANCE = 0.5;
+const IRIS_SIZE = 0.0117;
+const NUM_KEYPOINTS = 468;
+const NUM_IRIS_KEYPOINTS = 5;
+const SMOOTHING = 0;
+const HALF_DIAGONAL = 0.2;
+const parameter2 = (location.search.split('blaze=')[1] || '').split('&')[0]
+const BLAZE = (parameter2.length > 0);
+let model, HFOV, VFOV;
+let canvas, video;
+let width, height;
+function distance(a, b) {
+    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
+}
+function fov(dfov, w, h) {
+    const hypothenuse = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
+    const tan_dfov = Math.tan(dfov / 2);
+    return [2 * Math.atan(w * tan_dfov / hypothenuse), 2 * Math.atan(h * tan_dfov / hypothenuse)];
+}
+async function getLocation(ctx, width, height) {
+    let predictions;
+    if (BLAZE) {
+        predictions = await model.estimateFaces(ctx.getImageData(0, 0, width, height), false);
+    } else {
+        predictions = await model.estimateFaces({
+            input: ctx.getImageData(0, 0, width, height),
+            predictIrises: (distanceMethod == 1),
+            flipHorizontal: false
+        });
+    }
+    let centerX, centerY, keypoints, foreheadX, foreheadY;
+    if (predictions.length > 0) {
+        if (BLAZE) {
+            centerX = (predictions[0].landmarks[0][0] + predictions[0].landmarks[1][0])/2;
+            centerY = (predictions[0].landmarks[0][1] + predictions[0].landmarks[1][1])/2;
+        } else {
+            keypoints = predictions[0].scaledMesh;
+            centerX = keypoints[168][0];
+            centerY = keypoints[168][1];
+            foreheadX = keypoints[10][0];
+            foreheadY = keypoints[10][1];
+        }
+        let d;
+        if (distanceMethod == 0) {
+            d = DEFAULT_DISTANCE;
+        } else if (distanceMethod == 2) {
+            d = 0.06 * FOCAL_LENGTH * canvas.width / MAX_WIDTH / Math.sqrt(Math.pow(centerX - foreheadX, 2) + Math.pow(centerY - foreheadY, 2));
+        } else if (keypoints.length > NUM_KEYPOINTS) {
+            const leftDiameterY = distance(
+                keypoints[NUM_KEYPOINTS + 4],
+                keypoints[NUM_KEYPOINTS + 2]);
+            const leftDiameterX = distance(
+                keypoints[NUM_KEYPOINTS + 3],
+                keypoints[NUM_KEYPOINTS + 1]);
+            let diameter = Math.max(leftDiameterX, leftDiameterY);
+            if (keypoints.length > NUM_KEYPOINTS + NUM_IRIS_KEYPOINTS) {
+                const rightDiameterY = distance(
+                    keypoints[NUM_KEYPOINTS + NUM_IRIS_KEYPOINTS + 2],
+                    keypoints[NUM_KEYPOINTS + NUM_IRIS_KEYPOINTS + 4]);
+                const rightDiameterX = distance(
+                    keypoints[NUM_KEYPOINTS + NUM_IRIS_KEYPOINTS + 3],
+                    keypoints[NUM_KEYPOINTS + NUM_IRIS_KEYPOINTS + 1]);
+                diameter = Math.max(diameter, rightDiameterX, rightDiameterY);
+            }
+            d = IRIS_SIZE * FOCAL_LENGTH * canvas.width / MAX_WIDTH / diameter;
+        }
+        return [Math.atan(2 * (centerX - width / 2) / width * Math.tan(HFOV / 2)),
+            Math.atan(2 * (centerY - height / 2) / height * Math.tan(VFOV / 2)),
+            d
+        ]
+    }
+    return null;
+}
+class FaceTracker {
+    constructor(container) {
+        this.angle1 = 0;
+        this.angle2 = 0;
+        this.distance = 0;
+        this.step = 1;
+    }
+    async init() {
+        await tf.setBackend('webgl');
+        if (BLAZE) {
+            model = await blazeface.load();
+        } else {
+            model = await faceLandmarksDetection.load(
+                faceLandmarksDetection.SupportedPackages.mediapipeFacemesh, {
+                    shouldLoadIrisModel: (distanceMethod > 0),
+                    maxFaces: 1
+                });
+        }
+        if (navigator.mediaDevices.getUserMedia) {
+            video = document.querySelector('#video');
+            await navigator.mediaDevices.getUserMedia({
+                    video : { facingMode : 'user' }
+                })
+                .then(function (stream) {
+                    video.srcObject = stream;
+                    width = stream.getTracks()[0].getSettings().width;
+                    height = stream.getTracks()[0].getSettings().height;
+                    [HFOV, VFOV] = fov(DFOV, width, height);
+                })
+                // permission denied:
+                .catch(function (error) {
+                    document.body.textContent = 'Could not access the camera. Error: ' + error.name;
+                });
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        video.addEventListener('click', this.locateFace);
+    }
+    async getCameraParameters(outputWidth, outputHeight) {
+        let context = canvas.getContext('2d');
+        context.drawImage(video, 0, 0, width, height);
+        const result = await getLocation(context, width, height);
+        if (result !== null) {
+            const [angle1, angle2, distance] = result;
+            this.angle1 = angle1;
+            this.angle2 = angle2;
+            this.distance = (1 - SMOOTHING) * distance + SMOOTHING * this.distance;
+            if (this.step <= 10) {
+                this.distance = this.distance / (1 - Math.pow(SMOOTHING, this.step))
+            }
+            this.step = this.step + 1;
+        } else {
+            return null;
+        }
+        let d = this.distance;
+        const tan1 = -Math.tan(this.angle1);
+        const tan2 = -Math.tan(this.angle2);
+        const z = Math.sqrt(d * d / (1 + tan1 * tan1 + tan2 * tan2))
+        const cameraPosition = [z * tan1, z * tan2, z];
+        const fov = 180 / Math.PI * 2 * Math.atan(HALF_DIAGONAL / d);
+        return [cameraPosition, fov];
+    }
+}
+export {
+    FaceTracker
+};

src/World/components/lights.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import { DirectionalLight, HemisphereLight } from 'https://unpkg.com/three@0.117.0/build/three.module.js';
+function createLights() {
+  const ambientLight = new HemisphereLight(
+    'white',
+    'darkslategrey',
+    5,
+  );
+  const mainLight = new DirectionalLight('white', 4);
+  mainLight.position.set(10, 10, 10);
+  return { ambientLight, mainLight };
+}
+export { createLights };

src/World/components/objects/objects.js ADDED Viewed

	@@ -0,0 +1,30 @@

+import { GLTFLoader } from 'https://unpkg.com/three@0.117.0/examples/jsm/loaders/GLTFLoader.js';
+import { setupModel } from './setupModel.js';
+async function loadObjects() {
+  const objectID = parseInt(document.querySelector('#object').value);
+  const loader = new GLTFLoader();
+  let object;
+  if (objectID == 0) {
+    const data = await loader.loadAsync('https://vivien000.github.io/trompeloeil/models/tie.glb');
+    object = setupModel(data);
+    object.scale.set(0.00002, 0.00002, 0.00002);
+    object.position.set(0, 0, -0.05);
+  } else if (objectID == 1) {
+    const data = await loader.loadAsync('https://vivien000.github.io/trompeloeil/models/parrot.glb');
+    object = setupModel(data);
+    object.scale.set(0.15, 0.15, 0.15);
+    object.position.set(0, 0, -0.02);
+  } else {
+    const data = await loader.loadAsync('https://vivien000.github.io/trompeloeil/models/vangogh.glb');
+    object = setupModel(data);
+    object.scale.set(0.2, 0.2, 0.2);
+    object.position.set(0, -0.3, -0.5);
+  }
+  return object;
+}
+export { loadObjects };

src/World/components/objects/setupModel.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import { AnimationMixer } from 'https://unpkg.com/three@0.117.0/build/three.module.js';
+function setupModel(data) {
+  const model = data.scene.children[0];
+  if (data.animations.length >= 1) {
+    const clip = data.animations[0];
+    const mixer = new AnimationMixer(model);
+    const action = mixer.clipAction(clip);
+    action.play();
+    model.tick = (delta) => mixer.update(delta);
+  }
+  return model;
+}
+export { setupModel };

src/World/components/scene.js ADDED Viewed

	@@ -0,0 +1,11 @@

+import { Color, Scene } from 'https://unpkg.com/three@0.117.0/build/three.module.js';
+function createScene() {
+  const scene = new Scene();
+  scene.background = new Color('#282828');
+  return scene;
+}
+export { createScene };

src/World/systems/Loop.js ADDED Viewed

	@@ -0,0 +1,69 @@

+import {
+  Clock
+} from 'https://unpkg.com/three@0.117.0/build/three.module.js';
+import {
+  createCamera
+} from '../components/camera.js';
+const clock = new Clock();
+class Loop {
+  constructor(camera, scene, renderer, faceTracker) {
+    this.camera = camera;
+    this.cameraPosition = [0, 0, 0.5];
+    this.fov = 43.6;
+    this.aspectRatio = 1;
+    this.scene = scene;
+    this.lastUpdate = 0;
+    this.renderer = renderer;
+    this.faceTracker = faceTracker;
+    this.canvas = document.createElement('canvas')
+    this.updatables = [];
+  }
+  async init() {
+    await this.faceTracker.init();
+  }
+  async updateCameraParameters() {
+    const timestamp = Date.now();
+    if (timestamp - this.lastUpdate > 30) {
+      const result = await this.faceTracker.getCameraParameters();
+      if (result !== null) {
+        const [cameraPosition, fov] = result;
+        this.cameraPosition = cameraPosition;
+        this.fov = fov;
+        this.lastUpdate = Date.now();
+      }
+    }
+  }
+  setAspectRatio(ar) {
+    this.aspectRatio = ar;
+  }
+  start() {
+    this.renderer.setAnimationLoop(() => {
+      this.updateCameraParameters().then(() => {
+        this.camera = createCamera(this.cameraPosition, this.fov, this.aspectRatio);
+        this.tick();
+        this.renderer.render(this.scene, this.camera);
+      });
+    });
+  }
+  stop() {
+    this.renderer.setAnimationLoop(null);
+  }
+  tick() {
+    const delta = clock.getDelta();
+    for (const object of this.updatables) {
+      object.tick(delta);
+    }
+  }
+}
+export {
+  Loop
+};

src/World/systems/Resizer.js ADDED Viewed

	@@ -0,0 +1,21 @@

+const setSize = (container, camera, renderer, loop) => {
+  camera.aspect = container.clientWidth / container.clientHeight;
+  camera.updateProjectionMatrix();
+  loop.setAspectRatio(container.clientWidth / container.clientHeight);
+  renderer.setSize(container.clientWidth, container.clientHeight);
+  renderer.setPixelRatio(window.devicePixelRatio);
+};
+class Resizer {
+  constructor(container, camera, renderer, loop) {
+    setSize(container, camera, renderer, loop);
+    window.addEventListener('resize', () => {
+      setSize(container, camera, renderer, loop);
+      this.onResize();
+    });
+  }
+  onResize() {}
+}
+export { Resizer };

src/World/systems/renderer.js ADDED Viewed

	@@ -0,0 +1,11 @@

+import { WebGLRenderer } from 'https://unpkg.com/three@0.117.0/build/three.module.js';
+function createRenderer() {
+  const renderer = new WebGLRenderer({ antialias: true });
+  renderer.physicallyCorrectLights = true;
+  return renderer;
+}
+export { createRenderer };

src/main.js ADDED Viewed

	@@ -0,0 +1,59 @@

+import {
+  World
+} from './World/World.js';
+const parameter = (location.search.split('object=')[1] || '').split('&')[0]
+const objectID = parameter ? parameter : 0;
+const parameter2 = (location.search.split('controls=')[1] || '').split('&')[0]
+const displayControls = parameter2 ? parameter2 : 1;
+async function main() {
+  const selector = document.querySelector('#object');
+  selector.value = objectID;
+  if (displayControls != 0) {
+    document.querySelector('#controls').style.visibility = "visible";
+  }
+  document.onkeypress = function (e) {
+    var evt = window.event || e;
+    switch (evt.keyCode) {
+      case 99:
+        if (document.querySelector('#controls').style.visibility == "visible") {
+          document.querySelector('#controls').style.visibility = "hidden";
+        } else {
+          document.querySelector('#controls').style.visibility = "visible";
+        }
+        break;
+    }
+  }
+  // Get a reference to the container element
+  const container = document.querySelector('#scene-container');
+  // create a new world
+  let world = new World(container);
+  // complete async tasks
+  await world.init();
+  //await world.getAngle();
+  // start the animation loop
+  world.start();
+  selector.addEventListener('change', async (event) => {
+    world.stop();
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    world = new World(container);
+    await world.init();
+    world.start();
+    console.log("new object");
+  });
+}
+main().catch((err) => {
+  console.error(err);
+});

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

styles/main.css ADDED Viewed

	@@ -0,0 +1,18 @@

+body {
+  /* remove margins and scroll bars */
+  margin: 0;
+  overflow: hidden;
+}
+#scene-container {
+  /* tell our scene container to take up the full page */
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /*
+    Set the container's background color to the same as the scene's
+    background to prevent flashing on load
+  */
+  background-color: #282828;
+}