-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (57 loc) · 3.81 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
<!DOCTYPE html>
<html>
<head>
<script>
function cargarImagen(id) {
//calcula la anchura y la altura del objeto "anaglyph"
document.getElementById("anaglyph-"+id).width = document.getElementById("invisible-"+id).naturalWidth/2;
document.getElementById("anaglyph-"+id).height = document.getElementById("invisible-"+id).naturalHeight;
// carga las imágenes izquierda y derecha en el objeto "anaglyph"
document.getElementById("left-"+id).style.backgroundImage = "url("+document.getElementById("invisible-"+id).src+")";
document.getElementById("rite-"+id).style.backgroundImage = "url("+document.getElementById("invisible-"+id).src+")";
}
</script>
<style>
.anaglyph { position: relative; display: inline-block; overflow: hidden; }
.glyph { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: none; background-blend-mode: lighten; }
.left { background: cyan; background-position: left; }
.rite { background: red; background-position: right; mix-blend-mode: darken; }
.pie-de-foto { font-size:75%; color:navy; }
</style>
</head>
<body>
<h1>01 - Full color anaglyph.</h1>
<p>Esta página pretende ser una aplicación web capaz de generar anaglifos a partir de pares estereoscópicos.
<p>El procedimiento para generar un anaglifo es el siguiente: dado un par estereoscópico, se obtienen dos copias: la primera copia, mezclando (en modo <em>lighten</em>) la imagen original con un fondo de color cian; la segunda copia, haciendo lo mismo pero con el fondo de color rojo. Después, se mezcla (en modo <em>darken</em>) la mitad izquierda de la copia cian con la mitad derecha de la copia roja. El resultado −generado <em>al vuelo</em>− es el anaglifo que se visualiza en pantalla. Los anaglifos obtenidos mediante esta técnica son de tipo <em>full color</em>.
<p><strong>Anaglifo 1.</strong> Elaborado a partir de un par estereoscópico de 1901. El resultado luce monocromo porque la fotografía orignal es B/N virada a sepia.
<p>
<img id="invisible-1" src="https://i.imgur.com/BNsJdsK.jpg" style="display: none" onload = "cargarImagen(1)">
<object id="anaglyph-1" class="anaglyph">
<img id="left-1" class="left glyph">
<img id="rite-1" class="rite glyph">
</object>
<br/><span class="pie-de-foto">Par estereoscópico: https://i.imgur.com/BNsJdsK.jpg
<br/>The stereograph as an educator - Underwood patent extension cabinet in a home library.
<br/>https://loc.gov/pictures/resource/ppmsca.08781/</span>
<p><strong>Anaglifo 2.</strong> Castillo de Predjama.
<p>
<img id="invisible-2" src="https://live.staticflickr.com/7443/9260283813_5d26dfb9dd_h.jpg" style="display: none" onload = "cargarImagen(2)">
<object id="anaglyph-2" class="anaglyph">
<img id="left-2" class="left glyph">
<img id="rite-2" class="rite glyph">
</object>
<br/><span class="pie-de-foto">Par estereoscópico: https://live.staticflickr.com/7443/9260283813_5d26dfb9dd_h.jpg
<br/>Hugo Clément. Predjama Grad 3D stereo pair. 1 de julio de 2013. Cámara: Fujifilm FinePix REAL 3D W3.
<br/>https://www.flickr.com/photos/esprit_de_sel/9260283813/</span>
<p><strong>Anaglifo 3.</strong> Tractor rojo. El color rojo da problemas de rivalidad cromática y se percibe mal.
<p>
<img id="invisible-3" src="https://i.imgur.com/vvqg2bJ.jpg" style="display: none" onload = "cargarImagen(3)">
<object id="anaglyph-3" class="anaglyph">
<img id="left-3" class="left glyph">
<img id="rite-3" class="rite glyph">
</object>
<br/><span class="pie-de-foto">Par estereoscópico: https://i.imgur.com/vvqg2bJ.jpg
<br/>Stereotron. Zetor 3340 Major. 22 de julio de 2021. Sony ILCE-7M3.
<br/>https://www.flickr.com/photos/stereotron/52462086956/</span>
</body>
</html>