-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathapm_fluffy_monsters_ep1.html
283 lines (168 loc) · 12 KB
/
apm_fluffy_monsters_ep1.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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="Manual Livre de Blender" />
<meta name="keywords" content="Blender, Free Software, Libre Software, Open Source, Free Culture, Animation, 3D, Animação, Illustration, Ilustração, Education, Educação, Software Livre, VFX, Efeitos especiais, Visual Effects, CGI, 3D printing, impressão 3D">
<meta name="author" content="nafergo" >
<meta charset="UTF-8">
<title>Manual Livre de Blender</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- custom css -->
<link rel="stylesheet" href="css/mine.css" media="all" />
</head>
<body>
<div id="topo"></div>
<!-- início do menu -->
<div data-include="menu.html"></div>
<!-- fim do menu -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<h1 class="titulopagina">APM Fluffy Monsters - Episódio 1</h1>
<h1><small>Olhos, piscar os olhos, Dynamic Effects no Graph Editor e Lattices</small></h1>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<h4>APM Fluffy Monsters - Episódio 1</h4>
<div class="well embed-responsive embed-responsive-16by9">
<iframe width="640" height="360" src="http://www.youtube.com/embed/mfyvwA0ts4Y" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="page-header">
<h2>Olhos</h2>
</div>
<p>Os olhos das personagens foram criados utilizando métodos diferentes: com textura de imagem e com materiais procedimentais. </p>
<p>Os olhos verdes foram criados com uma textura de imagem. É basicamente uma esfera com uma ligeira saliência num dos lados (criada com Proportional Edit).</p>
<p>Foi feito um Unwrap depois de criado um Seam (veja o círculo vermelho na imagem abaixo) para mapear corretamente a textura à esfera.</p>
<p>Como os olhos têm brilho e reflexo, o material final mistura Diffuse com Glossy. O Mix Shader controla a quantidade de Diffuse e de Glossy.</p>
<img src="img/apm_fluffy_friends/ep1/olho_verde.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<img src="img/apm_fluffy_friends/ep1/olho_template.png" alt="..." class="img-responsive img-thumbnail center-block">
<p>Para facilitar a criação de texturas de olhos similares mas com cores diferentes, descarregue o <a href="img/apm_fluffy_friends/ep1/olho_template.xcf">template do olho</a> para GIMP.
<p>Os olhos azuis foram criados sem qualquer imagem, apenas com materiais. A esfera (similar à do olho verde) tem três materiais: sclera, iris e pupil. Estes materiais
correspondem à Esclera (branco do olho), íris e pupila. Em todos os materiais foram utilizados shaders Glossy para criar o brilho/reflexo.</p>
<p>O material da esclera inclui uma textura Wave para misturar branco e vermelho, permitindo criar olhos raiados de sangue.</p>
<img src="img/apm_fluffy_friends/ep1/olho_azul_sclera.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<img src="img/apm_fluffy_friends/ep1/olho_azul_sclera2.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>O material da íris é criado misturando dois tons de azul.</p>
<img src="img/apm_fluffy_friends/ep1/olho_azul_iris.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>O material da pupila é simplesmente preto.</p>
<img src="img/apm_fluffy_friends/ep1/olho_azul_pupil.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>Consulte o texto <a href="6uv_mapping.html">UV Mapping de uma lata</a> e <a href="materiais_no_cycles.html">Materiais no Cycles</a> para obter mais informação sobre UV e materiais.</p>
<p>Para outra técnica de criação de olhos, consulte...</p>
<ul>
<li><a href="http://blenderbasics.com/modeling-an-eye/" target="_blank">Modeling an Eye</a>@blenderbasics.com</li>
<li><a href="http://blenderbasics.com/coloring-the-eye/" target="_blank">Coloring the Eye</a>@blenderbasics.com</li>
<li><a href="http://blenderbasics.com/unwrapping-your-eye-and-painting-a-detailed-texture/" target="_blank">Unwrapping Your Eye and Painting a Detailed Texture</a>@blenderbasics.com</li>
<li><a href="http://blenderbasics.com/creating-and-animating-a-simple-eye-rig/" target="_blank">Creating and Animating a Simple Eye Rig</a>@blenderbasics.com</li>
</ul>
<div class="page-header">
<h2>Piscar os olhos</h2>
</div>
<h3>Quando piscar os olhos?</h3>
<p>De acordo com a ciência, o ser humano normal pisca os olhos 15-20 vezes por minuto (a cada 3-4 segundos). Isso não significa que a sua personagem deve piscar estas vezes todas!!! Utilize
o piscar de olhos quando a personagem mover a cabeça, quando estiver a pensar em algo e quando estiver a olhar fixamente durante algum tempo.</p>
<p>Algumas notas interessantes sobre animar o piscar
de olhos <a href="http://www.carlosbaena.com/resource/anim_Blinks.html" target="_blank">aqui</a>.</p>
<h3>E como piscar?</h3>
<h4>Piscadela normal</h4>
<p>2-1-3 = 2 frames para fechar, 1 frame fechado e 3 para abrir. Leva mais tempo a abrir do que a fechar.</p>
<p>Pode ver <a href="http://blog.digitaltutors.com/animating-believable-eye-blinks/" target="_blank">aqui</a> uma imagem que representa estes tempos. A pose 1 e 7 são iguais.</p>
<h4>Piscadela rápida</h4>
<p>2-3 = 2 frames para fechar e 3 para abrir.</p>
<h4>Muito rápida</h4>
<p>1-2: frame para fechar e 2 para abrir. Não fecha totalmente. Conhece a expressão "fazer olhinhos"? Imagine várias piscadelas muito rápidas...</p>
<h4>Piscadela longa</h4>
<p>3-3-4: 3 frames para fechar, 3 frame fechado e 4 para abrir</p>
<h3>Como animar o piscar de olhos?</h3>
<p>Existem várias possibilidades com graus de dificuldade e sofisticação diferentes. Obviamente, o piscar de olhos também depende da geometria existente. Cada um dos olhos
dos nossos monstros é composto por 4 objetos: base, olho, pálpebra superior e pálpebra inferior. O piscar de olhos é criado pela rotação das pálpebras superior e inferior.</p>
<p>A base do olho é uma meia esfera com Extrudes para criar um braço que liga ao corpo do monstro. Foi utilizado o modifier Solidify para dar alguma espessura. Esta base está
aparentada ao corpo.</p>
<p>As pálpebras são meias esferas que estão aparentadas à base e que que rodam sobre si mesmas. Para facilitar a rotação, a Origin das pálpebras está alinhada com a Origin do
olho. Na realidade, as pálpebras foram criadas a partir de um duplicado do olho com um Scale muito suave que foi depois dividido em duas partes.</p>
<p>Os olhos estão aparentados à base.</p>
<img src="img/apm_fluffy_friends/ep1/olho1.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<img src="img/apm_fluffy_friends/ep1/olho2.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<div class="page-header">
<h2>Dynamic Effects no Graph Editor</h2>
</div>
<p>Em primeiro lugar, foi criada a animação do peso com 2 keyframes de Location: posição inicial (peso está fora do enquadramento) e posição final (peso já caiu e está em repouso).</p>
<img src="img/apm_fluffy_friends/ep1/bounce1.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<img src="img/apm_fluffy_friends/ep1/bounce2.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>No Graph Editor, por pré-definição, temos o peso animado com uma interpolação Bezier. Isto significa que o peso acelera no início e desacelera no final. Esta
acelaração e desaceleração é bastante irrealista e nós pretendemos que no final o peso ressalte quando bater no chão.</p>
<img src="img/apm_fluffy_friends/ep1/bounce3.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>Com as duas keyframes de Location em Z selecionadas, foi ativada a opção Bounce (Dynamic Effects) para criar um ressalto. Depois escolhemos Ease Out porque pretendemos que
o ressalto surja no final, surja antes da última keyframe. Se necessário ou desejar, pode manipular as keyframes ou inserir novas keyframes para melhorar o efeito.</p>
<img src="img/apm_fluffy_friends/ep1/bounce4.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<img src="img/apm_fluffy_friends/ep1/bounce5.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>Consulte o texto <a href="26bola_saltitona.html">Bola saltitona</a> para obter mais informação sobre animação.</p>
<div class="page-header">
<h2>Lattices</h2>
</div>
<p>1. Em primeiro lugar foi adicionada uma Lattice com várias subdivisões.</p>
<img src="img/apm_fluffy_friends/ep1/lattice0.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>2. Depois foi adicionado o modifier Lattice a todos os objetos que irão ser deformados (vários objetos do olhos).</p>
<img src="img/apm_fluffy_friends/ep1/lattice01.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>3. Finalmente, foi manipulada a Lattice (em Edit Mode) para criar o efeito.</p>
<p>Importa referir que o corpo do "olhos azuis", o monstro esmagado, é animado com keyframes de Scale. Ou seja, foi
inserida uma keyframe de Scale no corpo do monstro com olhos azuis durante cada frame da animação do peso. Deste modo, a animação de Scale do corpo do monstro está de acordo com
o posicionamento do peso.</p>
<p>Depois de feita a animação do corpo, na última keyframe, foi manipulada a forma
da Lattice para obtermos a posição final. Por fim, foi animada a Lattice (com keyframes de Location) para acompanhar o peso. Ou seja, foi inserida uma keyframe de Location na
Lattice durante cada frame da animação do peso.</p>
<img src="img/apm_fluffy_friends/ep1/lattice1.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<img src="img/apm_fluffy_friends/ep1/lattice2.jpg" alt="..." class="img-responsive img-thumbnail center-block">
<p>Consulte o texto <a href="34modifiers.html">Modifiers</a> para obter mais informação sobre Lattices.</p>
</div>
</div>
</div> <!-- /container -->
<!-- início do footer -->
<div data-include="footer.html"></div>
<!-- fim do footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.localScroll.min.js"></script>
<script src="js/csi.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[rel=tooltip]").tooltip();
});
</script>
<script type="text/javascript">
jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
* @see http://flesler.demos.com/jquery/scrollTo/
* You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
*/
// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any default like this
$.localScroll.defaults.axis = 'y';
/**
* NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
* also affect the >> and << links. I want every link in the page to scroll.
*/
$.localScroll({
target: 'body', // could be a selector or a jQuery object too.
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
});
</script>
</body>
</html>