Compartilhamento de tecnologia

Gráficos 3D em tempo real com WebGL2

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Pipeline de renderização WebGL

A figura a seguir é um diagrama esquemático do pipeline de renderização WebGL:

Objetos de buffer de vértice (VBOs)

VBOS contém informações usadas para descrever a geometria. Por exemplo, as coordenadas de vértice, coordenadas normais, cor, coordenadas de textura, etc. da geometria.

Objetos de buffer de índice (IBOs)

IBOs contêm informações que descrevem relacionamentos de vértices. Ele usa a posição do índice do vértice nos VBOs.

Shader de vértice

O sombreador de vértice é executado em cada vértice. Ele lida com informações relacionadas ao vértice, como coordenadas de vértice, coordenadas normais, cores e coordenadas de textura. Esta informação é obtida do VBO e associada ao Atributo utilizado no vertex shader.

Shader de Fragmento

O fragment shader é executado em cada fragmento para calcular a cor de cada fragmento.

Suavizador de quadros

O frame buffer é um buffer bidimensional usado para armazenar fragmentos processados ​​no fragment shader. Depois que todos os fragmentos forem processados, os resultados da renderização poderão ser exibidos na tela.

Atributos

Propriedades são variáveis ​​de entrada no sombreador de vértice. Ele especifica como ler os dados do buffer e passá-los para o sombreador de vértice. Você pode armazenar informações de posição (três dados de ponto flutuante de 32 bits) no buffer. Em seguida, especifique de qual buffer ler as informações de posição, qual é o tipo de dados das informações de posição, de qual posição no buffer iniciar a leitura e quantos bytes ler no total. Como o vertex shader precisa ser executado em cada vértice, os valores dos atributos não serão os mesmos cada vez que ele for executado.

Uniformes

Uniformes são variáveis ​​de entrada para sombreadores de vértice e sombreadores de fragmentos. Ao contrário dos Atributos, as variáveis ​​Uniformes são fixadas em um loop de renderização. Por exemplo, a posição da fonte de luz.

Texturas

As texturas geralmente contêm dados de imagem, mas podem conter outros dados.

Variações

Variáveis ​​variáveis ​​são frequentemente usadas para passar dados do sombreador de vértice para o sombreador de fragmento. As variáveis ​​Varyings no sombreador de vértice são interpoladas antes de serem passadas para o sombreador de fragmento.