SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
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

Contenu connexe

Similaire à Otimizando fragment shaders

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
 

Similaire à Otimizando fragment shaders (13)

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
 

Dernier

FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxFASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxmigorof964
 
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...selevac133
 
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...migorof964
 
A política é tratada como ciência, isto é, um campo específico do conheciment...
A política é tratada como ciência, isto é, um campo específico do conheciment...A política é tratada como ciência, isto é, um campo específico do conheciment...
A política é tratada como ciência, isto é, um campo específico do conheciment...selevac133
 
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...renodi5734
 
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...renodi5734
 
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxFASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxrenodi5734
 
A demanda urbana de água corresponde à quantidade total de água necessária pa...
A demanda urbana de água corresponde à quantidade total de água necessária pa...A demanda urbana de água corresponde à quantidade total de água necessária pa...
A demanda urbana de água corresponde à quantidade total de água necessária pa...selevac133
 
Quando se trata de inteligência emocional, encontramos inúmeras definições na...
Quando se trata de inteligência emocional, encontramos inúmeras definições na...Quando se trata de inteligência emocional, encontramos inúmeras definições na...
Quando se trata de inteligência emocional, encontramos inúmeras definições na...migorof964
 
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...selevac133
 
AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024
AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024
AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024AssessoriaAcademica9
 
Gerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdf
Gerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdfGerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdf
Gerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdfLeonardo Martins
 
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...migorof964
 
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxFASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxhefifo4687
 
ATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docx
ATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docxATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docx
ATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docxselevac133
 
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...xokece8239
 
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...selevac133
 

Dernier (17)

FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxFASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
 
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
 
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
 
A política é tratada como ciência, isto é, um campo específico do conheciment...
A política é tratada como ciência, isto é, um campo específico do conheciment...A política é tratada como ciência, isto é, um campo específico do conheciment...
A política é tratada como ciência, isto é, um campo específico do conheciment...
 
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
O horário político obrigatório suscitou inúmeros questionamentos em D. Matild...
 
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
 
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxFASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
 
A demanda urbana de água corresponde à quantidade total de água necessária pa...
A demanda urbana de água corresponde à quantidade total de água necessária pa...A demanda urbana de água corresponde à quantidade total de água necessária pa...
A demanda urbana de água corresponde à quantidade total de água necessária pa...
 
Quando se trata de inteligência emocional, encontramos inúmeras definições na...
Quando se trata de inteligência emocional, encontramos inúmeras definições na...Quando se trata de inteligência emocional, encontramos inúmeras definições na...
Quando se trata de inteligência emocional, encontramos inúmeras definições na...
 
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INOVAÇÃO E PENSAMENTO CRIATI...
 
AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024
AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024
AE02 - TEORIAS DA ADMINISTRACAO UNICESUMAR 51/2024
 
Gerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdf
Gerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdfGerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdf
Gerenciando_pequenos_projetos_com_Notion_Leonardo_Martins_AgileTrends2024.pdf
 
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
Na unidade I, Valenciano (2024) cita três lições para a melhor compreensão da...
 
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docxFASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
FASE A1 de 2024 - Logica de Programacao e Algoritmos.docx
 
ATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docx
ATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docxATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docx
ATIVIDADE 1 FSCE - FORMAÇÃO SOCIOCULTURAL E ÉTICA I.docx
 
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
Com base na imagem apresentada e em seus conhecimentos sobre a implementação ...
 
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...
ATIVIDADE 1 - ESTUDO CONTEMPORÂNEO E TRANSVERSAL INTELIGÊNCIA EMOCIONAL - 512...
 

Otimizando fragment shaders

  • 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