3 pontos por GN⁺ 2023-11-24 | 1 comentários | Compartilhar no WhatsApp
  • A introdução à computação gráfica varia conforme conhecimento prévio, forma de aprendizado e hardware, mais do que por uma única resposta certa, e a equipe de Game Engineering da AMD considera que iniciantes podem precisar de um ponto de partida mais amigável
  • Programação gráfica envolve escrever tanto código C++ no lado da CPU quanto código de shader no lado da GPU, conectando ambos por meio de APIs gráficas como DirectX, Vulkan e OpenGL
  • Em 2023, as principais opções se dividem entre APIs legadas como OpenGL, DirectX 11 e WebGL, e APIs modernas explícitas como Vulkan, DirectX 12, Metal e WebGPU
  • APIs legadas são mais fáceis de aprender, mas a complexidade de drivers e runtime cresceu; APIs modernas exigem mais código e entendimento de GPU, mas oferecem mais controle
  • No começo, é possível iniciar em ambientes simples como OpenGL, WebGL, game engines e Shadertoy; se já houver boa base em C++ e no pipeline da GPU, também dá para entrar direto em Vulkan ou DirectX 12

Estrutura básica da programação gráfica

  • A resposta curta sobre a linguagem mais usada por programadores gráficos é C++
  • Na prática, o trabalho consiste em escrever em conjunto código host executado na CPU e código de shader executado na GPU
    • O código host da CPU normalmente é escrito em C++
    • O código da GPU é escrito em linguagens de sombreamento de alto nível como HLSL ou GLSL
  • A API gráfica é o ponto de ligação que permite ao código da CPU solicitar trabalho à GPU usando shaders e os dados e metadados necessários

Com qual API gráfica começar

  • Em 2023, as APIs comumente usadas em jogos de PC e aplicações 3D se dividem em duas grandes categorias
    • APIs legadas: OpenGL, DirectX 11, WebGL
    • APIs modernas explícitas: Vulkan, DirectX 12, Metal, WebGPU
  • OpenGL, DirectX 11 e WebGL se baseiam em abordagens históricas de programação de GPU e, do ponto de vista do programador, são mais simples e fáceis de aprender
  • Essa simplicidade tem um custo
    • Com o tempo, a implementação interna de drivers e runtime se tornou mais complexa
    • Isso leva a gargalos no lado host e a uma carga maior de complexidade nos drivers que os fabricantes de GPU precisam escrever
  • O Mantle da AMD surgiu no PC entre 2013 e 2016 e, em colaboração entre a AMD GPU e a EA DICE, ofereceu acesso mais baixo nível à GPU e uma abstração mais enxuta
  • O Metal surgiu em 2014 nas plataformas da Apple, e DirectX 12 e Vulkan surgiram em 2016, tratando a programação de GPU de forma mais explícita e de mais baixo nível

Trade-off de aprendizado entre APIs fáceis e APIs explícitas

  • Vulkan e DirectX 12 exigem que o programador especifique com mais clareza o que quer que a GPU faça, o que aumenta a carga inicial
  • Em troca, ganha-se mais controle e também mais oportunidades para melhorar o desempenho e a eficiência do trabalho na GPU
  • Só de observar o exemplo de desenhar o primeiro triângulo já dá para ver a diferença entre as APIs
    • OpenGL ou DirectX 11 permitem desenhar o primeiro triângulo com cerca de 10 linhas
    • Vulkan e DirectX 12 exigem muito mais código do que isso
  • OpenGL e DirectX 11 escondem muitos detalhes e permitem chegar mais rápido a um trabalho gráfico produtivo, mas podem fazer o funcionamento da GPU parecer uma caixa mágica
  • Vulkan e DirectX 12 exigem desde cedo conhecimento de mais baixo nível e entendimento da GPU, mas em compensação cada linha de código deixa mais claro o que acontecerá na GPU

Opções de caminho para começar

  • Mesmo dentro da equipe de Game Engineering da AMD, há tanto a opinião de que começar por DX12 ou Vulkan é duro demais para adolescentes ou iniciantes quanto a de que, nas condições certas, isso é possível
  • O OpenGL perdeu atualidade e relevância, mas ainda é visto como suficiente para aprender os fundamentos
  • WebGL pode ser um ponto de partida fácil para entender o pipeline gráfico
    • Na web, é possível lidar com gráficos em tempo real com JavaScript sem usar C++
    • Com WebAssembly, também é possível rodar gráficos em C++ no navegador
  • WebGPU oferece conceitos mais próximos das APIs gráficas modernas, ao mesmo tempo em que pode exigir menos detalhes de baixo nível
    • Ao começar a escrever código complexo, ainda é possível encontrar vários problemas
    • Como API para prototipagem, aprendizado e educação, é promissora
  • Também é possível começar primeiro por uma game engine
    • Unreal Engine tem grande peso nos jogos de PC
    • Unity também é uma alternativa comum
    • Há ainda engines open source menores e mais simples, como Godot
  • Algumas escolas dão a primeira aula de renderização com Unity, mas isso pode criar o risco de os alunos não entenderem por que precisam aprender conhecimentos de baixo nível
  • Para começar por APIs explícitas, é preciso conhecer bem o panorama geral do pipeline gráfico moderno e de como o hardware de GPU o implementa, ou ter disposição para aprender isso em paralelo

Materiais recomendados e próximos passos

  • LearnOpenGL: site para iniciantes, bom para aprender programação gráfica com uma API real em C++
  • Scratchapixel: permite focar em como conceitos como ray tracing funcionam, sem muito código
  • Udemy: pode ser usado para encontrar cursos para iniciantes
  • Rastertek: tutoriais de OpenGL e DirectX 11
  • Ray Tracing in One Weekend: adequado para uma abordagem de aprender construindo, se você já consegue programar até certo ponto
  • A trip through the graphics pipeline: embora seja um texto de 2011, anterior às APIs explícitas, os conceitos de hardware e software do ponto de vista da GPU ainda se aplicam
  • learn wgpu: site de aprendizado de WebGPU em estilo parecido com LearnOpenGL, ainda com caráter de obra em andamento
  • Your first WebGPU app: pode ser visto como material introdutório de WebGPU
  • Shadertoy: um ponto de partida mais simples, pois permite escrever shaders sem lidar diretamente com uma API gráfica
  • Vulkan Tutorial: também aparece no contexto de que, ao aprender Vulkan ou DirectX 12, é importante não ter medo de copiar e colar
  • Se você ainda não decidiu a linguagem ou o ecossistema de API, pode experimentar várias abordagens e continuar com a que melhor funcionar para você

1 comentários

 
GN⁺ 2023-11-24
Comentários do Hacker News
  • Para iniciantes, é melhor dar um passo atrás e perguntar primeiro “o que eu quero criar?”, em vez de começar por “quais ferramentas vou usar?”
    Mesmo no começo do aprendizado, não se deve perder de vista o resultado final. Hoje em dia há ferramentas demais em computação gráfica que abstraem as várias etapas de desenhar pixels na tela, então você pode sofrer logo de cara com código de baixo nível e só depois perceber que, na área em que realmente quer atuar, usam apenas Unity, TouchDesigner, threejs e After Effects, e quase nunca C++
    Claro que aprender como tudo funciona no nível mais básico tem um valor enorme, mas fazer isso logo de início me parece uma abordagem lenta. Entrar na indústria e entender os conceitos do funcionamento interno com ferramentas de abstração como engines de jogo ou programação visual acelera mais o aprendizado
    Falo isso como alguém que passou anos aprendendo C++ e OpenGL com dificuldade e lutou por muito tempo contra o custo afundado que me impedia de aceitar abordagens no-code. No fim, se isso não ajuda você a criar o que quer criar, é melhor não desperdiçar tempo nesse caminho

    • Vale a pena ouvir esse conselho. No início da minha carreira, decidi que me tornaria um especialista em OpenGL, e acho que até certo ponto consegui
      Não escrevi um livro didático como Mark Kilgard, mas trabalhei profundamente com várias camadas da API, do nível de driver a testes de conformidade, tuning de performance, código de jogos e aplicações, além das principais plataformas desktop e mobile
      Mas aonde isso me levou? Na prática, não muito longe. Hoje quase ninguém liga para OpenGL, e como duas grandes empresas de sistemas operacionais acabaram abandonando a tecnologia, ela está praticamente morta. Dá para ver isso pesquisando por OpenGL no “HN Who's Hiring”
      Eu poderia reaprender outras APIs gráficas como Direct3D, Vulkan e Metal, mas como as engines agora abstraem o código gráfico de baixo nível, não há tantos lugares que precisem desse tipo de pessoa. E as empresas que precisam de gente para drivers gráficos de baixo nível não passam de 5 ou 6 no mundo todo, então isso vira um nicho que limita a carreira
      Quanto mais você se concentra em uma parte pequena da máquina, mais precisa se tornar um especialista de nível mundial para transformar isso em carreira. A menos que seu plano seja virar o próximo John Carmack, eu recomendaria ir mais para a largura do que para a profundidade
    • Essa é uma armadilha clássica em que novos desenvolvedores sempre caem. E não vale só para programação gráfica
      O YouTube está cheio de vídeos de programação para iniciantes que fazem a pessoa sair aprendendo uma pilha inteira de tecnologias, em vez de focar em criar algo interessante. O resultado é que, para preencher o currículo, acabam montando um aparato complicado ao estilo Rube Goldberg, por puro cargo cult, só para renderizar algumas linhas de texto numa página web
      Na faculdade, mexi um pouco com programação gráfica durante um semestre, e já era complexo o bastante para que uma resposta razoável à pergunta “o que você quer criar?” fosse algo como “renderizar um triângulo verde em um fundo preto”. A partir daí, passar para retângulos, cubos, esferas, esferas animadas e uma bola quicando é uma progressão natural e ajuda a manter o foco no objetivo. Então também é bom evitar o erro de responder a essa pergunta com “um FPS com iluminação por ray tracing e subsurface scattering”
      O código da primeira versão da sua bola quicando vai ser realmente horrível. E tudo bem. Com o tempo, você aprende a otimizar e melhorar isso. E poucas coisas são tão empolgantes quanto descobrir padrões de projeto por conta própria. Você começa a ler um livro sobre um tema novo e pensa: “ué, eu já faço isso!”
    • Da perspectiva de quem quer entrar na área, é um pouco difícil concordar. Uma grande parte, talvez até todas, das vagas de programação gráfica exige conhecimento de C++ de antemão
      Claro, você pode entrar por outro papel, como programador de gameplay, e migrar aos poucos para gráficos, e talvez isso seja mais fácil. Mas, no fim, o cargo de programador gráfico exige C++
      O que foi dito antes parece mais voltado para quem quer ser produtivo rapidamente em trabalhos relacionados a gráficos, e não em programação gráfica em si
    • Bom conselho. É uma armadilha comum também em perguntas como “qual linguagem devo aprender?” ou “qual é a melhor linguagem?”, porque pulam a pergunta “o que você quer criar?”
      As ferramentas mudam com o tempo, e pela minha experiência os melhores engenheiros costumam ser aqueles que sabem usar várias ferramentas com diferentes níveis de domínio, em vez de se aprofundarem só em uma
    • Acho que ainda vale a pena ensinar esse tipo de programação de baixo nível na universidade, assim como algoritmos de ordenação
      Mesmo que você não vá fazer esse trabalho no emprego real, ainda ganha muito conhecimento teórico e treino com algoritmos complexos
      Gráficos também dão muita experiência com matemática aplicada. Há realmente muitas áreas desesperadas por gente que saiba matemática. Num emprego anterior com software para máquinas CNC, também precisávamos de alguém para programar a matemática necessária para controlar a furadeira e produzir certas formas em blocos de metal, e era muito difícil encontrar alguém. Já engenheiros de cloud e DevOps, embora caros, eram relativamente fáceis de achar
  • Acho que um programador gráfico deveria ter uma compreensão equilibrada e ampla de como gráficos funcionam. Além de programação pura e conhecimento de API, um bom programador gráfico deveria conhecer matrizes de rotação, visualização e projeção, matemática vetorial em geral, programação de shaders, primitivas procedurais como Voronoi, SDF e Perlin, composição de imagens, renderização forward e deferred, várias técnicas de amostragem, além de técnicas de sombras e iluminação
    Também precisa entender como funciona o pipeline de arte e como extrair dados de aplicativos 3D, saber usar profiler e debugger com tranquilidade, conseguir ler artigos da SIGGRAPH, conhecer técnicas de particionamento espacial e hierarquias de volume, implementar um ray tracer simples, entender primitivas como sprites, triângulos e n-gons, e ter experiência com partículas e simulação

    • Fiquei curioso se você poderia explicar um pouco mais “como funciona o pipeline de arte e como extrair dados de aplicativos 3D”
      Conheço o fluxo mais básico de criação de modelos — modelagem → skin/rigging → animação → texturização — e mais ou menos como isso é gravado em arquivos. Mas essa parte parece especialmente difícil de obter experiência prática real sem trabalhar junto com artistas
    • Se alguém conhece a maior parte dessa lista, fico curioso sobre como conseguir emprego como desenvolvedor gráfico
      Faço programação gráfica como hobby e aprendi muita coisa citada aqui, mas como não tenho experiência profissional, quase não consigo chances de entrevista
    • Onde se pode aprender essas coisas?
  • Recomendo o curso Graphics From Scratch, da Pikuma. A primeira tarefa é escrever uma função set_pixel usando SDL, e depois todo o restante é implementado diretamente em código
    Você mesmo escreve todas as operações com matrizes, todas as transformações de vértices e toda a rasterização de triângulos, calculando qual cor cada pixel deve ter
    https://pikuma.com/courses/learn-3d-computer-graphics-progra...

    • Meu site/livro/curso também segue essa mesma abordagem e é gratuito
      https://www.gabrielgambetta.com/computer-graphics-from-scrat...
    • Assino embaixo dessa recomendação. Fiz esse curso há alguns meses, quando quase não sabia nada de programação gráfica, e mesmo tendo apenas alguns anos de experiência como engenheiro de software generalista, passei a entender muito bem o processo de desenhar formas 3D na tela
      Depois disso, consegui aprender WebGPU em poucos dias, e acho que isso teria sido impossível sem o entendimento que ganhei no curso
      Se precisar de motivação, fiz uma demo compilando para Wasm o renderizador criado no fim do curso: https://rmshin.github.io/3d-renderer-wasm
    • É um ponto interessante. Venho pensando em como eu mesmo projetaria um curso introdutório de gráficos
      Deveria começar com código SDL no estilo putpixel, como nos anos 90, ou começar com Shadertoy? A matemática básica de matrizes, claro, continua sempre importante. Mas como ensinar rasterização de triângulos? Dá para pular scanline e ir direto para coordenadas homogêneas e quadtrees?
      Será que realmente é preciso ensinar sombreamento Phong, ou dá para ir direto para BRDF? Algumas partes talvez acabem ensinando “gambiarras antigas” mais do que técnicas úteis
      Hoje em dia, estatística e amostragem são muito mais importantes. Acredito que gráficos computacionais ficam mais matemáticos a cada ano. Então é preciso aprender matemática e ensinar matemática
    • Há alguns bons materiais para implementar renderização 3D do zero
      Entre eles, recomendo fortemente este repositório no GitHub: https://github.com/ssloy/tinyrenderer/wiki/Lesson-0:-getting...
      Se você aprende melhor de forma visual, este canal também é um tesouro: https://www.youtube.com/watch?v=ih20l3pJoeU
    • “Sem GPU, sem OpenGL, sem DirectX!” é exatamente o oposto do caminho que eu esperaria ao tentar aprender programação gráfica
  • Dá para aprender gráficos escrevendo shaders no Shadertoy. Muitos programadores gráficos começam por lá
    Fazendo um pouco de autopromoção, criei mais de 10 tutoriais cobrindo escrita de shaders no VS Code, SDF, ray marching, funções de ruído, movimento browniano fractal e mais
    https://github.com/suboptimaleng/shader-tutorials
    Claro, tudo isso apoiado nos ombros de gigantes como Inigo Quilez, The Art of Code, SimonDev e Acerola

  • Existem mesmo muitos caminhos para se tornar programador gráfico sem começar por DX/VK/OGL. Nem é obrigatório usar C++. Basta ver os incríveis gráficos 3D que a 3Blue1Brown faz em Python
    Se quiser usar uma game engine, aprenda DirectX ou Vulkan; se quiser criar aplicações para navegador, aprenda WebGL
    Mas essas APIs são pesadas e, por si só, também não ensinam tanto sobre gráficos. Se quiser aprender os conceitos de gráficos, vale mais a pena construir um rasterizador e um ray tracer por conta própria, na linguagem que você quiser
    Também há muitas bibliotecas gráficas e ambientes de programação muito mais divertidos do que se aprofundar penosamente em Vulkan ou DirectX. Processing é excelente, e também vale olhar o PlotDevice.io, baseado em Python, seu antecessor NodeBox, e o DrawBot. ShaderToy é outro lugar onde dá para aprender muito sobre escrita de shaders e renderização, além de ser fácil de começar. JavaScript também tem muitas opções e bibliotecas. Essas alternativas são muito mais acessíveis e motivadoras para iniciantes, ao mesmo tempo que dão poder e flexibilidade para que quem tiver curiosidade possa ir tão fundo quanto quiser

  • Já que este post foi parar na primeira página, vou compartilhar um material que é realmente usado na indústria de programação gráfica. Para constar, sou um dos autores: https://raytracing.github.io/
    Ele também aparece na seção “Useful Websites” do post acima
    Gráficos agora é uma área ampla demais, então não existe mais um único método de aprendizado que sirva para todo mundo. Se você quer aprender gráficos, recomendo procurar um mentor

    • É um ótimo material. Concordo especialmente com a abordagem de ensinar primeiro a matemática com ray tracing, em vez de começar pela API
  • Sou desenvolvedor de jogos, mas não um programador gráfico especializado. No trabalho uso APIs gráficas modernas e shaders GLSL, mas recentemente, quando uma criança de 13 anos quis sair de Scratch ou Python para aprender C++, concluí que o melhor era pegar um antigo OpenGL 1.2 DLL que estava no meu computador desde 1999 e começar com glut e código em modo imediato no estilo glbegin/glvertex/glend
    É muito mais divertido do que aguentar toda a configuração exigida pelas APIs modernas. A criança se interessa mais por geometria computacional, como diagramas de Voronoi, então a API gráfica é só um meio para atingir um fim, e shaders chamativos ou iluminação não são importantes agora. O desempenho de C++ com OpenGL antigo é cerca de mil vezes maior que o do Scratch, então acho que encontramos um bom ponto para o estágio atual de aprendizado
    Mesmo usando a API simplificada do OpenGL 1.2, tentar entender C++ e OpenGL ao mesmo tempo já é uma carga de estudo bastante ambiciosa, então a simplicidade ajuda a tornar isso mentalmente administrável. Até agora está indo bem, e a criança fez uma demo razoável de marching squares, enquanto eu ajudei a adicionar um menu IMgui para ajustar parâmetros em tempo de execução. Foi bem divertido

  • Não está muito claro o que exatamente este site está perguntando. Quer fazer rigging? Texturização? Modelagem? Escrever drivers? Criar GUI? Animação para sites? Ferramentas gráficas? Shaders? Motor de imagens 2D? Jogos 2D? Jogos 3D? Scripts procedurais? Otimização de código gráfico?
    Dentro de “computação gráfica” existem centenas de áreas. Mas este site está focado em um cantinho bem pequeno disso tudo: programação de SDKs gráficos

    • Programador gráfico é uma categoria de programador razoavelmente bem definida. Boa parte das coisas citadas antes, como rigging, texturização e modelagem, não são programação gráfica
      Espera-se que um programador gráfico consiga lidar com jogos, 3D, 2D, ferramentas, shaders e otimização de forma geral
    • Pode ser confuso, mas normalmente “programador gráfico” significa alguém que trabalha em um motor de renderização gráfica, seja em tempo real ou em renderização offline
  • Eu também estou nessa jornada. Há 2 anos fiz meu primeiro motor 3D seguindo vários tutoriais e vídeos no YouTube
    É bem simples, mas eu gosto de coisas simples. Agora estou usando esse motor para criar um jogo de construção de cidades. É muito divertido aprender a manipular elementos usando matrizes e produto vetorial
    https://www.youtube.com/watch?v=cvyrfPUpyp0