SlideShare ist ein Scribd-Unternehmen logo
1 von 35
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

Weitere ähnliche Inhalte

Ähnlich wie Otimizando shaders para melhorar performance

Mobile Game Case: Bboy in Heaven´s Mission
Mobile Game Case: Bboy in Heaven´s MissionMobile Game Case: Bboy in Heaven´s Mission
Mobile Game Case: Bboy in Heaven´s Missionelliando dias
 
Manual de Normas e Procedimentos
Manual de Normas e ProcedimentosManual de Normas e Procedimentos
Manual de Normas e Procedimentosdmazbnet
 
Manual Infoglobo
Manual InfogloboManual Infoglobo
Manual Infoglobodmazbnet
 
Workshop Técnico MUZIK 2019 - CASA PETRA
Workshop Técnico MUZIK 2019 - CASA PETRAWorkshop Técnico MUZIK 2019 - CASA PETRA
Workshop Técnico MUZIK 2019 - CASA PETRAMUZIK PRODUÇÕES
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Mozart Diniz
 
Introdução às Metodologias Ágeis de Desenvolvimento
Introdução às Metodologias Ágeis de DesenvolvimentoIntrodução às Metodologias Ágeis de Desenvolvimento
Introdução às Metodologias Ágeis de DesenvolvimentoJerry Medeiros
 
Processo simulado em camisetas escuras com imagens[1]
Processo simulado em camisetas escuras com imagens[1]Processo simulado em camisetas escuras com imagens[1]
Processo simulado em camisetas escuras com imagens[1]galides
 
Entendendo o Modelo de Atores
Entendendo o Modelo de AtoresEntendendo o Modelo de Atores
Entendendo o Modelo de AtoresPaulo Siqueira
 

Ähnlich wie Otimizando shaders para melhorar performance (14)

Mobile Game Case: Bboy in Heaven´s Mission
Mobile Game Case: Bboy in Heaven´s MissionMobile Game Case: Bboy in Heaven´s Mission
Mobile Game Case: Bboy in Heaven´s Mission
 
Manual de Normas e Procedimentos
Manual de Normas e ProcedimentosManual de Normas e Procedimentos
Manual de Normas e Procedimentos
 
Manual Infoglobo
Manual InfogloboManual Infoglobo
Manual Infoglobo
 
Apostila photoshop 7
Apostila photoshop 7 Apostila photoshop 7
Apostila photoshop 7
 
Workshop Técnico MUZIK 2019 - CASA PETRA
Workshop Técnico MUZIK 2019 - CASA PETRAWorkshop Técnico MUZIK 2019 - CASA PETRA
Workshop Técnico MUZIK 2019 - CASA PETRA
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?
 
Apostila vray 3_dm
Apostila vray 3_dmApostila vray 3_dm
Apostila vray 3_dm
 
Introdução às Metodologias Ágeis de Desenvolvimento
Introdução às Metodologias Ágeis de DesenvolvimentoIntrodução às Metodologias Ágeis de Desenvolvimento
Introdução às Metodologias Ágeis de Desenvolvimento
 
Tecnicas de modelagem
Tecnicas de modelagemTecnicas de modelagem
Tecnicas de modelagem
 
Processo simulado em camisetas escuras com imagens[1]
Processo simulado em camisetas escuras com imagens[1]Processo simulado em camisetas escuras com imagens[1]
Processo simulado em camisetas escuras com imagens[1]
 
Aplicativos Gráficos Conceitos Introdutórios
Aplicativos Gráficos Conceitos IntrodutóriosAplicativos Gráficos Conceitos Introdutórios
Aplicativos Gráficos Conceitos Introdutórios
 
Improvement of Image Using Fuzzy Techniques Networks
Improvement of Image Using Fuzzy Techniques Networks Improvement of Image Using Fuzzy Techniques Networks
Improvement of Image Using Fuzzy Techniques Networks
 
DDD + BDD + TDD + Scrum
DDD + BDD + TDD + ScrumDDD + BDD + TDD + Scrum
DDD + BDD + TDD + Scrum
 
Entendendo o Modelo de Atores
Entendendo o Modelo de AtoresEntendendo o Modelo de Atores
Entendendo o Modelo de Atores
 

Otimizando shaders para melhorar performance

  • 1. Otimizando shaders Como usar as ferramentas do Xcode para melhorar a performance de fragment shaders
  • 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”
  • 10. Começamos com 2 shaders • 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
  • 15. 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.
  • 16. Não se pode otimizar o que não se consegue medir
  • 17. Não se pode otimizar o que não se consegue medir
  • 18. Não se pode otimizar o que não se consegue medir
  • 19. Não se pode otimizar o que não se consegue medir
  • 20. 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
  • 21. 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.
  • 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 • Reduzir as operações trignométricas • Reduzir o número de operações executadas por pixel
  • 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 • 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
  • 34. resultados • Mais de 60 fps num iPad mini retina • 55 fps num iPad 4 • 35 fps num Moto G
  • 35. Dúvidas • VViinniicciiuuss VVeecccchhii • @@vvvveecccchhii • NNaakkeedd MMoonnkkeeyy GGaammeess • @@nnaakkeeddmmoonnkkeeyyGG • wwwwww..nnaakkeeddmmoonnkkeeyy..ccoomm..bbrr