-
Notifications
You must be signed in to change notification settings - Fork 0
/
index3.html
232 lines (197 loc) · 14 KB
/
index3.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Metaverso</title>
<link rel="manifest" href="./manifest.json?v=8">
<link rel="shortcut icon" href="imgs\20113052_Kerfin7_NEA_2478-removebg-preview.png">
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="navbar-fixed">
<nav class="purple darken-3" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><img src="imgs/20221027_235947_0000.png" height="55px" width="80px"></a>
<ul class="right hide-on-med-and-down">
<li><a class="white-text linka" href="index.html">Homepage</a></li>
<li><a class="white-text linka" href="#">Inicio</a></li>
<li><a class="white-text linka" href="#DesTour">Desenvolver um Tour</a></li>
<li><a class="white-text linka" href="#Softwares">Softwares & Publicação</a></li>
<li><a class="white-text linka" href="#Rodape">Rodapé</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</div>
<ul id="nav-mobile" class="sidenav purple darken-3">
<li><a class="white-text linka" href="index.html">Homepage</a></li>
<li><a class="white-text linka" href="#">Inicio</a></li>
<li><a class="white-text linka" href="#DesTour">Desenvolver um Tour</a></li>
<li><a class="white-text linka" href="#Softwares">Softwares & Publicação</a></li>
<li><a class="white-text linka" href="#Rodape">Rodapé </a></li>
</ul>
</nav>
<a id="DesTour"></a>
<div class="grey lighten-3">
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send brown-text"></i></h3>
<h4>Desenvolver um tour Virtual 3D</h4>
<p class="left-align light">Para produzir um Tour Virtual é importante seguir os seguintes passos:</p>
<ol class="lista-section">
<li class="left-align light">Capturar as Fotos em 360 graus</li>
<li class="left-align light">Emendar as Fotografias para criar uma projeção esférica do ambiente</li>
<li class="left-align light">Fazer o tratamento das imagens em projeção esférica </li>
<li class="left-align light">Desenvolver o Passeio Virtual (tour) com todas os ambientes e opcioais </li>
<li class="left-align light">Publicar num servidor Web para ver seu Tour Virtual online</li>
</ol>
<p class="left-align light">Conforme mencionado anteriormente, é possível usar Apps para celular que já fazem todo este serviço, mas geralmente deixam falhas nas emendas e nenhum deles consegue publicar mais de um ambiente
por vez, desta forma perdemos a sensação do passeio virtual, pois não há conexão entre os ambientes.
</p>
<p class="left-align light">A melhor forma de começar um tour virtual é usando o equipamento correto para captura, já que as imagens capturadas serão diretamente responsáveis pelo resultado final da experiência imersiva.</p>
<figure>
<img class="responsive" width="80%" src="imgs/index3/360Heroes-Videos-360-300x168.jpg" alt="Equipamentos" Tittle="Equipamentos para Captura">
</figure>
<h4>Equipamento ideal para captura fotográfica 360 graus</h4>
<ul class="lista-section">
<li class="left-align light">Câmera DSLR - qualquer marca, Nikon e Canos, que são as mais usadas
</li>
<li class="left-align light">Lente Fisheye (grande angular) - idealmente entre 8 mm e 15mm. Pode usar lentes mais fechadas, como 18mm mas serão necessárias mais fotos para cobrir todo o ambiente esférico
</li>
<li class="left-align light">Cabeça panorâmica - de haste ou anel - Importante para posicionar o giro da câmera na lente (Ponto Nodal) e eliminar o efeito paralaxe indesejado. Haste é mais versátil, serve em qualquer ocasião
e algumas pessoas fazem sua própria panohead caseira. Anel é mais prática e portátil, apesar de mais limitada otimiza muito o fluxo de trabalho.</li>
<li class="left-align light">Nivelador - ajuda muito a manter a linha do horizonte alinhada
</li>
<li class="left-align light">Rotator - essencial para parar no ponto certo de tirar cada foto
</li>
<li class="left-align light">Tripé - robusto o suficiente para se manter estável, depende do peso do equipamento
</li>
</ul>
<p class="left-align light">Lembrando que o investimento em equipamentos mais profissionais e resistentes se pagará no decorrer do tempo (caso esteja pensando em utilizar isso como um negócio), enquanto uma economia inicial poderá representar arrependimento e gastos adicionais em tempo e/ou
troca de equipamentos.
</p>
<figure>
<img class="responsive" width="80%" src="imgs/index3/Ring-Panohead-Atome-precision-360-300x169.jpg" alt="Equipamentos" Tittle="Cabeça Panorâmica">
<figcaption>Equipamento para captura fotográfica</figcaption>
</figure>
<h4> Equipamentos alternativos para captura fotográfica 360 graus</h4>
<ul class="lista-section">
<li class="left-align light">Câmera one-shot</li>
<li class="left-align light">360Cam, Kodak P360, 360Fly são alguns exemplos de câmera portáteis que conseguem fazer a captura de todo o espectro panorâmico em 360 graus com apenas uma foto.
Alguns modelos realmente são para uso doméstico ou inicial pois tem pouco ou nenhum controle de exposição e geralmente não oferecem captura em HDR, No entanto a indústria tem se movido
rapidamente e apresentado novas versões e equipamentos com maior resolução e controles mais precisos via App para smartphones.
</li>
<li class="left-align light">Ricoh Theta S, Samsung Gear 360 e LG 360 CAM são alguns modelos recomendados para o programa Google Street View Trusted e podem ser controladas remotamente pelo Street
View App.
</li>
<li class="left-align light">Iris360 é um modelo profissional de alta performance desenvolvida em parceria com a Google para o programa Street View. é um investimento mais caro porém com resultados
superiores e já entrega as fotos costuradas em HDR.
</li>
<li class="left-align light">360Heroes - Sistema de captura baseado em 6 câmeras esportivas GoPro, recentemente a própria GoPro lançou sua versão chamada Omni.</li>
<li class="left-align light">Monopé / Tripé - depende do peso do equipamento</li>
<li class="left-align light">Alguns destes equipamento one-shot servem tanto para captura de fotos quanto vídeos em 360 graus, os valores variam bastante, sendo
acessível tanto para iniciantes quanto para fotógrafos experientes.
</li>
</ul>
<figure>
<img class="responsive" width="80%" src="imgs/index3/Iris360-Google-Street-View-Trusted-300x200.jpg" alt="Modelo Profissional" Tittle="Iris360">
<figcaption>Equipamento alternativos</figcaption>
</figure>
<a id="Softwares"></a>
<h4>Softwares para Emenda</h4>
<ul class="lista-section">
<li class="left-align light">Para Criar um Tour Virtual 360 será necessário emendar e tratar as fotografias capturadas de forma que elas formem uma projeção.
Atualmente já é possível emendar fotos 360 online, mas para um total controle do processo é melhor ou usar aplicativos específicos para esta finalidade:</p>
<li class="left-align light">Kolor AutoPano - Ideal para processos automatizados, irmão do PanoTour
</li>
<li class="left-align light">Adobe Photoshop - Pode emendar as fotos, ideal para tratamento das fotos após a emenda
</li>
<li class="left-align light">3DVista Stitcher - Para emenda em qualquer tipo de imagem, incluído no Virtual Tour Suite
</li>
<li class="left-align light">Panoweaver - Mais uma alternativa de aplicativo para emenda de fotos panorâmicas
</li>
<li class="left-align light">PTGui - Ideal para um total controle do processo
</li>
<li class="left-align light">Hugin - gratuito, open source
</li>
</ul>
<p class="left-align light">A maioria dos softwares acima tem suporte a tratamento e tonalização HDR. Todos oferecem uma versão Trial para experiência antes de comprar a licença.
</p>
<figure>
<img class="responsive" width="80%" src="imgs/index3/Software-Emenda-Costura-Panorama-360-300x186.jpg" alt="Softwares" Tittle="Softwares para Emenda">
<figcaption>Softwares de Edição 3D</figcaption>
</figure>
<h4>Publicação do Tour Virtual 360 graus</h4>
<p class="left-align light">Publicar um tour virtual requer pouco conhecimento técnico, os aplicativos existentes já fazem a parte pesada do serviço. No entanto, é muito importante entender
bem o funcionamento da Web, hospedageme FTP, e também conhecer algumas linguagens como HTML, CSS e Javascript. As melhores opções de Aplicativos para publicação do Tour Virtual 360 graus são:
</p>
<ul class="lista-section">
<li class="left-align light">KRPano - Ferramenta poderosa e tradicional que permite a criação do tour diretamente no seu navegador
</li>
<li class="left-align light">Pano2VR - Aplicativo dedicado a criação, edição e publicação de Tour Virtual a partir de imagens esféricas</li>
<li class="left-align light">Tourweaver - Aplicativo para criação e publicação de Tour Virtual</li>
<li class="left-align light">PanoTour - Aplicativo gráfico baseado no KRPano que oferece uma interface gráfica muito mais fácil de usar</li>
<li class="left-align light">3DVista Virtual Tour Suite - Aplicativo mais recente, com muitas possibilidades para explorar</li>
<li class="left-align light">Matterport - Sistema proprietário que requer um equipamento próprio de captura e assinatura do serviço para publicação em servidores dedicados à criação e hospedagem do Tour Virtual.</li>
</ul>
<figure>
<img class="responsive" width="100%" src="imgs/index3/Tour-Virtual-360-Planejamento.jpg" alt="Publicação" Tittle="Publicação do Tour">
<figcaption>Publicação do Tour</figcaption>
</figure>
<p class="left-align light">Caso deseje ver algo mais resumido, veja esse vídeo: </p>
<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/RElsSUx5mCg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<h1 class="center"> <a class="anx" href="index2.html"> <i class="material-icons large" >navigate_before</i> </a> <a class="anx" href="index4.html"> <i class="material-icons large" style="padding-left:10%;">navigate_next</i></a> </h1>
</div>
</div>
</div>
</div>
</div>
<a id="Rodape"></a>
<footer class="page-footer blue accent-2">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Os colaboradores</h5>
<p class="grey-text text-lighten-4">Gustavo Henrique </br> Thiago Marques </p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Links Externos</h5>
<ul>
<li><a class="white-text" href="index1.html">O que é Metaverso</a></li>
<li><a class="white-text" href="index2.html">Utilizar o celular para VR</a></li>
<li><a class="white-text" href="index.html">Site Principal</a></li>
<li><a class="white-text" href="index4.html">Fazer seu próprio cenário 3D</a></li>
<li><a class="white-text" href="index5.html">Criar seu próprio óculos virtual</a></li>
<li><a class="white-text" href="index6.html">Outros</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Links Internos</h5>
<ul>
<li><a class="white-text linka" href="#">Inicio</a></li>
<li><a class="white-text linka" href="#DesTour">Desenvolver um Tour</a></li>
<li><a class="white-text linka" href="#Softwares">Softwares & Publicação</a></li>
<li><a class="white-text linka" href="#Rodape">Rodapé</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Feito graças a <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>