Skip to content

Commit 0bc6b1f

Browse files
munrocketmunrocket
committed
Original deepview example
1 parent d340126 commit 0bc6b1f

File tree

4 files changed

+155
-10
lines changed

4 files changed

+155
-10
lines changed

‎README.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,30 @@ Parallax effect in javascript using face tracking.
55
### Examples
66
* [background](https://munrocket.github.io/parallax-tracking/examples/background.html)
77
* [Three.js](https://munrocket.github.io/parallax-tracking/examples/threejs.html)
8+
* [deepview](https://munrocket.github.io/parallax-tracking/examples/immersive.html)
89

910
### Installation
10-
Temporary without package. Copy `dist/parallax-tracking.js` into repo.
11+
Temporary without package. Copy `dist/parallax-tracking[.esm].js` into repo.
1112

1213
### Usage
1314
In script tag
1415
```js
1516
<script src="../dist/parallax-tracking.js"></script>
1617
<script>
17-
Parallax.init(( pos ) => {
18-
console.log( pos );
18+
Parallax.init( position => {
19+
console.log( position );
20+
}).then( isInited => {
21+
console.log( isInited );
1922
});
2023
</script>
2124
```
2225
In ES modules
2326
```js
2427
import { init as ParallaxInit } from '../dist/parallax-tracking.esm.js';
25-
ParallaxInit(( pos ) => {
26-
console.log( pos );
28+
ParallaxInit( position => {
29+
console.log( position );
30+
}).then( isInited => {
31+
console.log( isInited );
2732
});
2833
```
2934

@@ -35,5 +40,4 @@ In ES modules
3540

3641
### References
3742

38-
1. Tsuyoshi Suenaga, Yasuyuki Tamai, etc. *Image-Based 3D Display with Motion Parallax using Face Tracking* ([PDF](https://www.researchgate.net/publication/4324515_Poster_Image-Based_3D_Display_with_Motion_Parallax_using_Face_Tracking))
39-
2. Eric Lengyel. *Mathematics for 3D game programming and computer graphics* page ~120
43+
1. Eric Lengyel. *Mathematics for 3D game programming and computer graphics* p. 120

‎examples/deepview.html

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>DeepView VR</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7+
<style>
8+
body {
9+
font-family: Monospace;
10+
background-color: #808080;
11+
color: #fff;
12+
margin: 0;
13+
}
14+
canvas {
15+
display: block;
16+
}
17+
18+
a {
19+
color: #ff4;
20+
}
21+
#info {
22+
position: absolute;
23+
width: 100%;
24+
text-align: center;
25+
margin-top: 10px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="info">
31+
Immersive Light Field<br/>
32+
<a href="https://augmentedperception.github.io/deepviewvideo/" target="_blank">SIGGRAPH 2020 Technical Paper</a>
33+
</div>
34+
<script type="module">
35+
36+
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js';
37+
import { PLYLoader } from 'https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/loaders/PLYLoader.js';
38+
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/controls/OrbitControls.js';
39+
40+
const data = {
41+
"baseUrl": "https://cdn.glitch.com/e6e6edef-3278-4ba0-812c-44e4b4eebb73%2F",
42+
//"baseUrl": "https://storage.googleapis.com/immersive-lf-video-siggraph2020/face-paint/msi/rgba_000.png",
43+
"rgba": "texture_atlas_rgba.png",
44+
"layer0Mesh": "mdi_rig_space_mesh_000.ply",
45+
"numLayers": 16,
46+
"lutUrl": "../lut.png",
47+
"near": 0.8,
48+
"far": 1000.0
49+
};
50+
51+
52+
let camera, scene, renderer;
53+
54+
init();
55+
animate();
56+
57+
function init() {
58+
59+
renderer = new THREE.WebGLRenderer();
60+
renderer.setPixelRatio( window.devicePixelRatio );
61+
renderer.setSize( window.innerWidth, window.innerHeight );
62+
document.body.appendChild( renderer.domElement );
63+
64+
window.addEventListener( 'resize', onWindowResize, false );
65+
66+
//
67+
68+
scene = new THREE.Scene();
69+
scene.background = new THREE.Color( 0x808080 );
70+
71+
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
72+
camera.position.set( 0, 1.6, 0 );
73+
74+
var controls = new OrbitControls( camera, renderer.domElement );
75+
controls.rotateSpeed = 0.25;
76+
controls.screenSpacePanning = true;
77+
controls.target.set( 0, 1.6, -1 );
78+
controls.update(); // grrr
79+
80+
window.addEventListener('mousedown', () => {
81+
console.log(controls);
82+
})
83+
84+
const texture = new THREE.TextureLoader()
85+
.setPath( data.baseUrl)
86+
.load( data.rgba );
87+
texture.flipY = false;
88+
texture.generateMipmaps = false;
89+
texture.wrapS = THREE.ClampToEdgeWrapping;
90+
texture.wrapT = THREE.ClampToEdgeWrapping;
91+
texture.minFilter = THREE.LinearFilter;
92+
93+
const material = new THREE.MeshBasicMaterial( { map: texture, transparent: true } );
94+
95+
const loader = new PLYLoader();
96+
loader.setPath( data.baseUrl );
97+
98+
for ( let i = 0; i < data.numLayers; i ++ ) {
99+
100+
const url = data.layer0Mesh.replace( '000', i.toString().padStart( 3, '0' ) );
101+
102+
loader.load( url, function ( geometry ) {
103+
104+
const mesh = new THREE.Mesh( geometry, material );
105+
mesh.position.y = 1.6;
106+
mesh.rotation.x = Math.PI;
107+
mesh.renderOrder = i;
108+
scene.add( mesh );
109+
110+
} );
111+
112+
}
113+
114+
}
115+
116+
function onWindowResize() {
117+
118+
camera.aspect = window.innerWidth / window.innerHeight;
119+
camera.updateProjectionMatrix();
120+
121+
renderer.setSize( window.innerWidth, window.innerHeight );
122+
123+
}
124+
125+
//
126+
127+
function animate() {
128+
129+
renderer.setAnimationLoop( render );
130+
131+
}
132+
133+
function render() {
134+
135+
renderer.render( scene, camera );
136+
137+
}
138+
139+
</script>
140+
</body>
141+
</html>

‎examples/threejs.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242

4343

4444
<!-- Three.js -->
45-
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
46-
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/loaders/GLTFLoader.js"></script>
45+
<script src="https://cdn.jsdelivr.net/npm/three@0.117.0/build/three.min.js"></script>
46+
<script src="https://cdn.jsdelivr.net/npm/three@0.117.0/examples/js/loaders/GLTFLoader.js"></script>
4747

4848
<!-- TensorFlow with WASM/WebGL backend -->
4949
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
5-
<script>window.location.replace("./examples/background.html");</script>
5+
<script>window.location.replace("./examples/deepview.html");</script>
66
</head>
77
<body></body>
88
</html>

0 commit comments

Comments
 (0)