-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
130 lines (106 loc) · 3.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Fingerprinting - WebGL Scene</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D texture1;
uniform sampler2D texture2;
varying vec2 vUv;
void main()
{
if (length(texture2D(texture2, vUv) - texture2D(texture1, vUv)) > 0.0)
gl_FragColor = vec4(0,0,0,1);
else
gl_FragColor = vec4(1,1,1,1);
}
</script>
<script>
var scene, scene2, camera, camera2, renderer, renderTarget;
var SIZE = 512;
init();
animate();
function init()
{
// WebGL renderer, with anti-aliasing enabled
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(SIZE, SIZE);
renderTarget = new THREE.WebGLRenderTarget(SIZE, SIZE, {format: THREE.RGBFormat});
document.getElementById('container').appendChild(renderer.domElement);
// scenes
scene = new THREE.Scene();
scene2 = new THREE.Scene();
// cameras
camera = new THREE.PerspectiveCamera(45, SIZE / SIZE, 1, 100);
camera.position.set(0, 0, 10);
scene.add(camera);
camera2 = new THREE.OrthographicCamera(SIZE / - 2, SIZE / 2, SIZE / 2, SIZE / - 2, -10000, 10000);
camera2.position.set(0, 0, 100);
scene2.add(camera2);
initDifferenceMapScene();
initOriginalScene();
}
function initDifferenceMapScene()
{
var shaderMaterial = new THREE.ShaderMaterial( {
uniforms: {
texture1: {type: "t", value: renderTarget},
texture2: {type: "t", value: THREE.ImageUtils.loadTexture('original.png')}
},
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
} );
var geometry = new THREE.PlaneGeometry( SIZE, SIZE);
var plane = new THREE.Mesh(geometry, shaderMaterial);
plane.position.z = -100;
scene2.add(plane);
}
function initOriginalScene()
{
var geometry = new THREE.CylinderGeometry(3, 3, 6, 32);
var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/iso12233.jpg') });
var cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);
// ambient lighting, color (0.1, 0.1, 0.1)
var ambientLight = new THREE.AmbientLight(0x191919);
scene.add(ambientLight);
// directional lighting, color (0.8, 0.8, 0)
var directionalLight = new THREE.DirectionalLight(0xCCCC00);
directionalLight.position.set(2, 4, 9).normalize();
scene.add(directionalLight);
}
// This function is executed on each animation frame
function animate()
{
// renderOriginalImage();
renderDifferenceMap();
requestAnimationFrame(animate);
}
function renderDifferenceMap()
{
renderer.clear();
renderer.render(scene, camera, renderTarget, true);
renderer.render(scene2, camera2);
}
// Renders the original image, which has to be manually saved to load it later as a texture.
function renderOriginalImage()
{
renderer.clear();
renderer.render(scene, camera);
}
</script>
</body>
</html>