Otimizando shaders 
Como usar as ferramentas do Xcode para melhorar a performance de 
fragment shaders
Queriamos mais variedade
Queriamos mais variedade
Queriamos mais variedade
Queriamos mais variedade
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
Faremos com shaders 
• No pior dos casos a gente aprende alguma coisa nova.
O Que precisamos 
• Alterar a matiz da imagem. 
• Adicionar um efeito de “Bloom”
Onde achar/aprender?
Começamos com 2 shaders 
• Um para alterar a Matiz 
• Outro que aplicava um blur gaussiano.
Blur gaussiano? 
• Eu queria bloom
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
Primeiro resultado
Primeiro resultado
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.
Não se pode otimizar o que não 
se consegue medir
Não se pode otimizar o que não 
se consegue medir
Não se pode otimizar o que não 
se consegue medir
Não se pode otimizar o que não 
se consegue medir
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
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.
Código original
Código “otimizado”
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
otimizações 
• Reduzir as operações trignométricas 
• Reduzir o número de operações executadas por pixel
Código original
Código otimizado
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
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
Resultados
resultados
resultados
Resultados
resultados 
• Mais de 60 fps num iPad mini retina 
• 55 fps num iPad 4 
• 35 fps num Moto G
Dúvidas 
• VViinniicciiuuss VVeecccchhii 
• @@vvvveecccchhii 
• NNaakkeedd MMoonnkkeeyy GGaammeess 
• @@nnaakkeeddmmoonnkkeeyyGG 
• wwwwww..nnaakkeeddmmoonnkkeeyy..ccoomm..bbrr

Otimizando fragment shaders

  • 1.
    Otimizando shaders Comousar as ferramentas do Xcode para melhorar a performance de fragment shaders
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
    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
  • 7.
    Faremos com shaders • No pior dos casos a gente aprende alguma coisa nova.
  • 8.
    O Que precisamos • Alterar a matiz da imagem. • Adicionar um efeito de “Bloom”
  • 9.
  • 10.
    Começamos com 2shaders • Um para alterar a Matiz • Outro que aplicava um blur gaussiano.
  • 11.
    Blur gaussiano? •Eu queria bloom
  • 12.
    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
  • 13.
  • 14.
  • 15.
    Performance deixando adesejar • Menos de 10 fps num iPad 4 • Menos de 20 num iPad mini Retina • Imagine num iPad 3, ou num android porcaria.
  • 16.
    Não se podeotimizar o que não se consegue medir
  • 17.
    Não se podeotimizar o que não se consegue medir
  • 18.
    Não se podeotimizar o que não se consegue medir
  • 19.
    Não se podeotimizar o que não se consegue medir
  • 20.
    Problemas com oshader • 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
  • 21.
    Otimizações • Reduziro 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.
  • 22.
  • 23.
  • 24.
    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
  • 25.
    otimizações • Reduziras operações trignométricas • Reduzir o número de operações executadas por pixel
  • 26.
  • 27.
  • 28.
    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
  • 29.
    Matemática • Aoperaçã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
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
    resultados • Maisde 60 fps num iPad mini retina • 55 fps num iPad 4 • 35 fps num Moto G
  • 35.
    Dúvidas • VViinniicciiuussVVeecccchhii • @@vvvveecccchhii • NNaakkeedd MMoonnkkeeyy GGaammeess • @@nnaakkeeddmmoonnkkeeyyGG • wwwwww..nnaakkeeddmmoonnkkeeyy..ccoomm..bbrr