Otimizando fragment shaders
-
Upload
vinicius-vecchi -
Category
Engineering
-
view
410 -
download
2
description
Transcript of Otimizando fragment shaders
![Page 1: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/1.jpg)
Otimizando shadersComo usar as ferramentas do Xcode para melhorar a performance de fragment shaders
![Page 2: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/2.jpg)
Queriamos mais variedade
![Page 3: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/3.jpg)
Queriamos mais variedade
![Page 4: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/4.jpg)
Queriamos mais variedade
![Page 5: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/5.jpg)
Queriamos mais variedade
![Page 6: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/6.jpg)
Tínhamos algumas opções
• Nosso artista fazer novas artes mudando a iluminação• Íamos precisar ter essas artes na tela e fazer um blend durante a transição• Nossa arte tem várias camadas e nosso jogo já gasta bastante memória
• Fazer algum shader para isso• Temos bem pouca experiência com isso
![Page 7: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/7.jpg)
Faremos com shaders
• No pior dos casos a gente aprende alguma coisa nova.
![Page 8: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/8.jpg)
O Que precisamos
• Alterar a matiz da imagem.
• Adicionar um efeito de “Bloom”
![Page 9: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/9.jpg)
Onde achar/aprender?
![Page 10: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/10.jpg)
Começamos com 2 shaders
• Um para alterar a Matiz
• Outro que aplicava um blur gaussiano.
![Page 11: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/11.jpg)
Blur gaussiano?
• Eu queria bloom
![Page 12: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/12.jpg)
Blur gaussiano?
• Isso só deixa a imagem borrada
• Queremos um efeito de bloom, não de blur.• O que fizemos foi aplicar o filtro gaussiano só no alpha da textura e usar isso
para clarear a imagem
![Page 13: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/13.jpg)
Primeiro resultado
![Page 14: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/14.jpg)
Primeiro resultado
![Page 15: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/15.jpg)
Performance deixando a desejar
• Menos de 10 fps num iPad 4
• Menos de 20 num iPad mini Retina
• Imagine num iPad 3, ou num android porcaria.
![Page 16: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/16.jpg)
Não se pode otimizar o que não se consegue medir
![Page 17: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/17.jpg)
Não se pode otimizar o que não se consegue medir
![Page 18: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/18.jpg)
Não se pode otimizar o que não se consegue medir
![Page 19: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/19.jpg)
Não se pode otimizar o que não se consegue medir
![Page 20: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/20.jpg)
Problemas com o shader
• Muitas leituras dependentes de textura• Nos dispotivos com A7 e A8 isso não é problema.• Nos dispositivos antigos isso tem sérios problemas de performance• Mesmo assim são muitas leituras de textura
• Muitas operações trigonométricas• Muitas operações aritméticas em geral
![Page 21: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/21.jpg)
Otimizações
• Reduzir o numero de acessos a textura• Nossa imagem é afetada mais verticalmente que horizontalmente• Nosso artista concordou que o efeito de bloom estava muito forte
• Talvez não seja bem verdade o resumo de quase nenhuma perda de qualidade visual
• Mas essa parte era só metade do tempo.
![Page 22: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/22.jpg)
Código original
![Page 23: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/23.jpg)
Código “otimizado”
![Page 24: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/24.jpg)
Outras otimizações
• A performance ficou boa num iPad 4• Mas poderíamos fazer os calculos de posição de textura no vertex shader
• Isso nos daria melhor performance em arquiteturas antigas
![Page 25: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/25.jpg)
otimizações
• Reduzir as operações trignométricas
• Reduzir o número de operações executadas por pixel
![Page 26: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/26.jpg)
Código original
![Page 27: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/27.jpg)
Código otimizado
![Page 28: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/28.jpg)
Parece roubado
• O shader original faz várias coisas• Converte de RGB para YIQ• Encontra a Matiz do pixel• Altera a Matiz• Converte a Matiz modificada de volta para YIQ• Converte o valor final YIQ para RGB
• No nosso caso, a mudança de matiz é a mesma para a camada toda
![Page 29: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/29.jpg)
Matemática
• A operação toda é:• Uma mudança de base• Uma rotação• A volta para a base original
• Essas operações são as mesmas para cada pixel da camada• Cada uma delas pode ser escrita como uma multiplciação matriz vetor• A operação toda pode ser escrita como uma multiplicação matriz vetor• Calculamos a matriz na CPU e passamos como parametro para a GPU
![Page 30: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/30.jpg)
Resultados
![Page 31: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/31.jpg)
resultados
![Page 32: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/32.jpg)
resultados
![Page 33: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/33.jpg)
Resultados
![Page 34: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/34.jpg)
resultados
• Mais de 60 fps num iPad mini retina
• 55 fps num iPad 4
• 35 fps num Moto G
![Page 35: Otimizando fragment shaders](https://reader036.fdocument.pub/reader036/viewer/2022062405/557da658d8b42a467c8b4711/html5/thumbnails/35.jpg)
Dúvidas
• Vinicius VecchiVinicius Vecchi
• @vvecchi@vvecchi
• Naked Monkey GamesNaked Monkey Games
• @nakedmonkeyG@nakedmonkeyG
• www.nakedmonkey.com.brwww.nakedmonkey.com.br