Above examples play well with squared images, where both sides are equal and match our squared billboard. But for non-squared images things can be a little more tricky, and unfortunately centuries of pictorial art and photography found more pleasant to the eye non-squared proportions for images.
Os exemplos acima rodam bem com imagens quadradas, onde os dois lados são iguais e combinam uma tela quadrada. Mas para imagens não-quadradas, as coisas podem ser um pouco mais complicadas, e infelizmente, séculos de art de imagens e fotos descobriram ser mais agradáveis aos olhos as proporções não-quadradas.
How we can solve this problem? Well we need to know the original proportions of the image to know how to stretch the texture correctly in order to have the original [*aspect ratio*](http://en.wikipedia.org/wiki/Aspect_ratio). For that the texture width and height are passed to the shader as an ```uniform```, which in our example framework are passed as an ```uniform vec2``` with the same name of the texture followed with proposition ```Resolution```. Once we have this information on the shader we can get the aspect ratio by dividing the ```width``` for the ```height``` of the texture resolution. Finally by multiplying this ratio to the coordinates on ```y``` we will shrink this axis to match the original proportions.
Como podemos resolver este problema? Bem, precisamos saber as proporções originais da imagem para saber como esticar a textura corretamente, de forma a ter o [*aspect ratio*](http://en.wikipedia.org/wiki/Aspect_ratio) (proporção da tela) original. Para isso, a largura e altura da textura são passados para o shader como um ```uniform``` que, no nosso framework de exemplo são passados como um ```uniform vec2``` com o mesmo nome da textura seguida da proposição ```Resolution```. Uma vez que temos essa informação no shader, podemos pegar o aspect ratio dividindo-se o ```width``` (largura) pelo ```height``` (altura) da resolução da textura. Finalmente, multiplicando-se essa taxa com as coordenadas em ```y``` vamos encolher esse eixo para combinar com as proporções originais.
Uncomment line 21 of the following code to see this in action.
Descomente a linha 21 do código a seguir para ver isso em ação.
* O que precisamos fazer para centralizar essa imagem?
## Digital upholstery
## Estofamento digital
You may be thinking that this is unnecessarily complicated... and you are probably right. Also this way of working with images leaves enough room to different hacks and creative tricks. Try to imagine that you are an upholster and by stretching and folding a fabric over a structure you can create better and new patterns and techniques.
Você deve estar pensando que isso é algo desnecessariamente complicado... e provavelmente está certo. Também, esse modo de trabalhar com imagens deixa espaço suficiente para hacks diferentes e truques criativos. Tente imaginar que você é um estofador e, ao esticar e dobrar um tecido sobre uma estrutura, pode criar padrões e técnicas novas e melhores.
This level of craftsmanship links back to some of the first optical experiments ever made. For example on games *sprite animations* are very common, and is inevitably to see on it reminiscence to phenakistoscope, zoetrope and praxinoscope.
Esse nível de artesanato faz referência a alguns dos primeiros experimentos óticos já feitos. Por exemplo, em *animações de sprites* de jogos, são bem comuns, e é inevitável ver nele uma reminiscência ao fenacistoscópio, ao zootropo e ao praxinoscópio.
This could seem simple but the possibilities of modifying textures coordinates are enormous. For example:
Isso poderia parecer simples, mas as possibilidades de modificar coordenadas de texturas são enormes. Por exemplo:
* Can you make a kaleidoscope using what we have learned?
* Você consegue fazer um caleidoscópio usando o que aprendemos?
* Way before Oculus or google cardboard, stereoscopic photography was a big thing. Could you code a simple shader to re-use these beautiful images?
* Muito antes do Oculus ou do cardboard do google, a fotografoa estereoscópica era uma coisa incrível. Você poderia programar um shader simples para reutilizar essas lindas imagens?
* What other optical toys can you re-create using textures?
* Que outros brinquedos óticos você pode recriar usando texturas?
In the next chapters we will learn how to do some image processing using shaders. You will note that finally the complexity of shader makes sense, because it was in a big sense designed to do this type of process. We will start doing some image operations!
Nos próximos capítulos, você vai aprender como fazer algum processamento em imagens, com os shaders. Vai notar que, finalmente, a complexidade do shaders faz sentido, porque ele foi, de certa forma, projetada para fazer esse tipo de processo. Vamos começar a fazer alguma operação com imagens!
rnbastos
4 years ago