Otimizando fragment shaders

35
Otimizando shaders Como usar as ferramentas do Xcode para melhorar a performance de fragment shaders

description

Apresentação feita no @cocoaheadsbr no dia 30/10

Transcript of Otimizando fragment shaders

Page 1: Otimizando fragment shaders

Otimizando shadersComo usar as ferramentas do Xcode para melhorar a performance de fragment shaders

Page 2: Otimizando fragment shaders

Queriamos mais variedade

Page 3: Otimizando fragment shaders

Queriamos mais variedade

Page 4: Otimizando fragment shaders

Queriamos mais variedade

Page 5: Otimizando fragment shaders

Queriamos mais variedade

Page 6: Otimizando fragment shaders

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

Faremos com shaders

• No pior dos casos a gente aprende alguma coisa nova.

Page 8: Otimizando fragment shaders

O Que precisamos

• Alterar a matiz da imagem.

• Adicionar um efeito de “Bloom”

Page 9: Otimizando fragment shaders

Onde achar/aprender?

Page 10: Otimizando fragment shaders

Começamos com 2 shaders

• Um para alterar a Matiz

• Outro que aplicava um blur gaussiano.

Page 11: Otimizando fragment shaders

Blur gaussiano?

• Eu queria bloom

Page 12: Otimizando fragment shaders

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

Primeiro resultado

Page 14: Otimizando fragment shaders

Primeiro resultado

Page 15: Otimizando fragment shaders

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

Não se pode otimizar o que não se consegue medir

Page 17: Otimizando fragment shaders

Não se pode otimizar o que não se consegue medir

Page 18: Otimizando fragment shaders

Não se pode otimizar o que não se consegue medir

Page 19: Otimizando fragment shaders

Não se pode otimizar o que não se consegue medir

Page 20: Otimizando fragment shaders

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

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

Código original

Page 23: Otimizando fragment shaders

Código “otimizado”

Page 24: Otimizando fragment shaders

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

otimizações

• Reduzir as operações trignométricas

• Reduzir o número de operações executadas por pixel

Page 26: Otimizando fragment shaders

Código original

Page 27: Otimizando fragment shaders

Código otimizado

Page 28: Otimizando fragment shaders

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

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

Resultados

Page 31: Otimizando fragment shaders

resultados

Page 32: Otimizando fragment shaders

resultados

Page 33: Otimizando fragment shaders

Resultados

Page 34: Otimizando fragment shaders

resultados

• Mais de 60 fps num iPad mini retina

• 55 fps num iPad 4

• 35 fps num Moto G

Page 35: Otimizando fragment shaders

Dúvidas

• Vinicius VecchiVinicius Vecchi

• @vvecchi@vvecchi

• Naked Monkey GamesNaked Monkey Games

• @nakedmonkeyG@nakedmonkeyG

• www.nakedmonkey.com.brwww.nakedmonkey.com.br


Efficient Partitioning of Fragment Shaders for Multiple-Output Hardware Tim Foley Mike Houston Pat Hanrahan Computer Graphics Lab Stanford University.

Efficient Partitioning of Fragment Shaders for Multiple-Output Hardware Tim Foley Mike Houston Pat Hanrahan Computer Graphics Lab Stanford University.

Tessellation Shaders

Tessellation Shaders

Real-Time Rendering Graphics Programming · Main novelty: shading language GLSL Vertex and fragment shaders Replace fixed functionality Shader: high-level language (C-like) OpenGL

Real-Time Rendering Graphics Programming · Main novelty: shading language GLSL Vertex and fragment shaders Replace fixed functionality Shader: high-level language (C-like) OpenGL

Otimizando Redes Sociais

Otimizando Redes Sociais

Shaders Programmables Temps Réelmaverick.inria.fr/Membres/Nicolas.Holzschuch/23012003/MPaulin.pdf · Utilisés dans REYES et RenderMan Shaders temps réel Shaders paramétrables

Shaders Programmables Temps Réelmaverick.inria.fr/Membres/Nicolas.Holzschuch/23012003/MPaulin.pdf · Utilisés dans REYES et RenderMan Shaders temps réel Shaders paramétrables

Lecture 5: Vertex and Fragment Shaders-1 · Lecture 5: Vertex and Fragment Shaders-1 ... • GLSL has many of the same qualifiers such as constas C/C++ • In GLSL, we need other

Lecture 5: Vertex and Fragment Shaders-1 · Lecture 5: Vertex and Fragment Shaders-1 ... • GLSL has many of the same qualifiers such as constas C/C++ • In GLSL, we need other

Otimizando seu Squid

Otimizando seu Squid

OTIMIZANDO PROCESSOS INDUSTRIAIS

OTIMIZANDO PROCESSOS INDUSTRIAIS

TDC2013 Otimizando-C

TDC2013 Otimizando-C

Introduction to OpenGL - Penn Engineeringcis565/Lectures2011S/Lecture...most relevant parts for writing GLSL shaders Shaders Shader object : an individual vertex, fragment, etc. shader

Introduction to OpenGL - Penn Engineeringcis565/Lectures2011S/Lecture...most relevant parts for writing GLSL shaders Shaders Shader object : an individual vertex, fragment, etc. shader

Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript –2.3: OpenGL & WebGL –2.8: fragment & vertex shaders Beginning.

Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript –2.3: OpenGL & WebGL –2.8: fragment & vertex shaders Beginning.

Otimizando landing pages

Otimizando landing pages

Image Basics Using Fragment Shaders to Manipulate Imagesweb.engr.oregonstate.edu/~mjb/cs519/Handouts/image.4pp.pdf · 2020-01-03 · 1 mjb – December 31, 2019 1 Computer Graphics

Image Basics Using Fragment Shaders to Manipulate Imagesweb.engr.oregonstate.edu/~mjb/cs519/Handouts/image.4pp.pdf · 2020-01-03 · 1 mjb – December 31, 2019 1 Computer Graphics

Organic Tile Textures using Fragment Shaders - · PDF fileOrganic Tile Textures using Fragment Shaders ... functions for pseudo-random number generation. The ... code optimization

Organic Tile Textures using Fragment Shaders - · PDF fileOrganic Tile Textures using Fragment Shaders ... functions for pseudo-random number generation. The ... code optimization

Programmable Shaders

Programmable Shaders

Intro to Shadersdmgregory.ca/misc/shadercheatsheet.pdf · Shader Variant Vertex Shader Fragment Shader Surface Shader Surface Shader Albedo Normal Emission etc. Surface shaders are

Intro to Shadersdmgregory.ca/misc/shadercheatsheet.pdf · Shader Variant Vertex Shader Fragment Shader Surface Shader Surface Shader Albedo Normal Emission etc. Surface shaders are

Week 3 - Friday. What did we talk about last time? Vertex shaders Geometry shaders Pixel shaders.

Week 3 - Friday. What did we talk about last time? Vertex shaders Geometry shaders Pixel shaders.

Using Fragment Shaders to Manipulate Imagesweb.engr.oregonstate.edu/~mjb/cs519/Handouts/image.1pp.pdf · Photo by Steve Cunningham Using shaders to enhance scientific, engineering,

Using Fragment Shaders to Manipulate Imagesweb.engr.oregonstate.edu/~mjb/cs519/Handouts/image.1pp.pdf · Photo by Steve Cunningham Using shaders to enhance scientific, engineering,

Advanced Uses of Pixel Local Storage - Microsoft · Pixel Local Storage Exposed as EXT_shader_pixel_local_storage Per-pixel scratch memory available to fragment shaders Automatically

Advanced Uses of Pixel Local Storage - Microsoft · Pixel Local Storage Exposed as EXT_shader_pixel_local_storage Per-pixel scratch memory available to fragment shaders Automatically

Organic Tile Textures using Fragment Shaders

Organic Tile Textures using Fragment Shaders