Há diferença entre WebGL e Canvas ou ela é apenas uma ramificação do mesmo?
O canvas
é um elemento responsável por desenhar na página. Como esse desenho é feito depende do contexto (context) utilizado. Atualmente existem dois contextos disponíveis: 2d
e webgl
. Cada um deles é um objeto que expõe uma API diferente que pode ser usada para desenhar:
var ctx = document.getElementById("meucanvas").getContext("2d");
ou:
var gl = document.getElementById("meucanvas").getContext("webgl");
A partir desses objetos retornados, você pode chamar métodos segundo a API correspondente. Mais detalhes sobre o contexto 2d
e o contexto webgl
.
Como é o desenvolvimento de gráficos 3D utilizando a API?
O processo é razoavelmente complexo, mesmo um "hello world" costuma ter várias etapas que precisam ser feitas para se exibir alguma coisa na tela. Vou sumarizar aqui o que eu sei, que não é muito mas deve servir pra te orientar na busca de mais informações:
- Um elemento
canvas
deve ser criado, e um contexto webgl
deve ser criado para ele (como mostrado no código acima);
Algumas propriedades básicas devem ser atribuídas, como o tamanho do viewport, a cor de fundo, e diversas flags que controlam como se dará a renderização. Exemplo:
gl.viewport( 0, 0, canvas.width, canvas.height ); // Desenha no canvas inteiro
gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // A cor de fundo é branca, opaca
gl.enable(gl.DEPTH_TEST); // Os objetos têm profundidade (i.e. é 3D, não 2D)
É preciso criar um "programa", que é composto de código a ser executado pela GPU - e não pela CPU, que é onde o JavaScript executa. Esses códigos ("vertex shader" e "fragment shader") não são escritos em JavaScript, mas numa linguagem chamada GLSL ES, bastante semelhante ao C. Assim, o browser precisa compilar e depois linkar esses códigos antes de poder usá-los:
var vs = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource(vs, codigoFonteDoVertexShader_emString);
gl.compileShader(vs);
var fs = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource(fs, codigoFonteDoFragmentShader_emString);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram( program ); // Eventualmente; pode usar mais de um se quiser
O código básico (sem checagem de erros) é esse. Como escrever esses shaders, aí já é mais complexo (vou dar um exemplo no final de um par de shaders super-simples, mas que não fazem nada de interessante), sugiro buscar algum tutorial ou curso sobre o assunto (caso queira programar em WebGL "cru", em vez de usar alguma framework que faça a maior parte do trabalho pra você).
Antes de desenhar coisa alguma, é preciso enviar o conteúdo que você quer desenhar da CPU pra GPU. No WebGL isso é feito através de objetos especiais, chamados buffers. Esses buffers é que vão guardar informações sobre os vértices das suas geometrias, tal como posição, cor (se aplicável), normal (se aplicável), índices de textura (se aplicável) etc.
var triangulo = [[1,0,0], [0,1,0], [-1,0,0]];
var floats = new Float32Array(3*3);
// Na prática você vai querer fazer isso num loop
floats[0] = triangulo[0][0];
floats[1] = triangulo[0][1];
floats[2] = triangulo[0][2];
floats[3] = triangulo[1][0];
// ...
// Cria o buffer e manda os dados pra GPU
var pBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, pBuffer );
gl.bufferData( gl.ARRAY_BUFFER, floats, gl.STATIC_DRAW );
// Associa esse buffer com uma variável do seu vertex shader
var vPos = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPos, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPos );
Por fim, há o desenho de fato! Você pode criar uma função render
que vai ser chamada cada vez que você quiser desenhar (pode ser só quando algo mudar, se for uma aplicação interativa, ou então num intervalo regular, se for uma animação ou jogo). Nela você diz o que quer que seja desenhado, dentre aquilo que já está na GPU:
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(render); // Chama de novo após um tempo X
}
render();
O básico é isso. Quanto aos shaders, a função deles é transformar primeiro os vértices que você enviou pra GPU (por exemplo, transformações como escala, rotação e translação são normalmente feitas no vertex shader, bem como a projeção 3D para 2D) e depois os pixels que a GPU criou a partir da geometria transformada (determinar a cor e a transparência de cada pixel é normalmente feito no fragment shader).
Exemplo de shaders [quase] "triviais" colocados inline no próprio HTML:
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec3 vPosition; // Recebido do JavaScript
varying float z; // Enviado ao fragment shader
void main() {
z = vPosition.z;
gl_Position = vec4(vPosition, 1.0); // A coordenada w normalmente é 1.0
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying float z; // Recebido do vertex shader; interpolado pela GPU
void main() {
gl_FragColor = vec4( z, 0.0, 0.0, 1.0 );
}
</script>
(o primeiro usa a posição dos vértices recebidos, sem transformá-las em nada, só coloca o componente w
faltante; o segundo usa a cor vermelha para todos os vértices da figura, cuja intensidade é dada pelo seu componente z
)
Se por um lado nada vem pronto, você tem que fazer tudo, por outro há imensa flexibilidade para você organizar seu código como quiser e implementar os efeitos visuais que quiser. No site shadertoy.com há diversos exemplos de shaders que podem ser usados para estudo (cuidado: se sua GPU for ruim que nem a minha, há boa chance dessa página travar sua tela! Aqui tem um exemplo simples que eu espero não vai travar o browser de ninguém).
Exemplo completo:
// Cria o contexto a partir do elemento canvas
var canvas = document.getElementById("meucanvas");
var gl = canvas.getContext("webgl");
// Estabelece as propriedades básicas
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
// Pega o texto dos shaders, como string
var vertex = document.getElementById("vertex-shader").textContent;
var fragment = document.getElementById("fragment-shader").textContent;
// Cria o programa, compilando e linkando os shaders
var vs = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource(vs, vertex);
gl.compileShader(vs);
var fs = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource(fs, fragment);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
// Usa o programa (pode ter mais de um, e usar ora um ora outros)
gl.useProgram( program );
// Cria a geometria; nesse exemplo, dois triângulos
var triangulos = [[1,0,0], [0,1,0], [-1,0,0],
[-1,0.5,-1], [-0.5,1,-1], [0.8,0.5,1]];
var floats = new Float32Array(triangulos.length*3);
for ( var i = 0 ; i < triangulos.length ; i++ )
for ( var t = 0 ; t < 3 ; t++ )
floats[3*i+t] = triangulos[i][t];
// Cria o buffer e manda os dados pra GPU
var pBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, pBuffer );
gl.bufferData( gl.ARRAY_BUFFER, floats, gl.STATIC_DRAW );
// Associa esse buffer com uma variável do seu vertex shader
var vPos = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPos, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPos );
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, triangulos.length);
//requestAnimationFrame(render); // Chama de novo após um tempo X
}
render();
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec3 vPosition;
varying float z;
void main() {
z = vPosition.z; // Salva a posição z e usa como cor
gl_Position = vec4(vPosition, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying float z;
void main() {
gl_FragColor = vec4( (z+1.0)/2.0, 0.0, 0.0, 1.0 );
}
</script>
<canvas id="meucanvas" width="300" height="300"></canvas>
A partir daí, há vários caminhos a se seguir, não necessariamente numa ordem específica:
Criar mais atributos pra sua geometria, como cores diferentes para cada vértice. Para isso você precisaria de um código semelhante ao item 4, i.e. criar um novo buffer com o mesmo número de vértices da sua geometria (isso é importante!) e associá-lo a uma nova variável no seu vertex shader; essa variável por sua vez teria de ser passada ao fragment shader, de modo que ele possa usá-la em vez de uma única cor, fixa (da mesma forma que no exemplo acima eu criei uma variável varying z
em ambos os shaders);
Transformar a posição de cada vértice que chega no vertex shader de alguma forma; você pode começar experimentando fazer operações simples com o vPosition
, mas eventualmente você vai querer criar matrizes e usá-las para fazer as transformações 3D (criando variáveis uniform
e setando-as no render
, logo antes de fazer o draw
);
Usar algum cálculo mais complexo para determinar a cor de cada vértice, como por exemplo usando algum modelo de iluminação e/ou texturas que alterem a cor, a normal, etc;
Etc.
Aqui está um outro exemplo, um pouquinho mais elaborado (demonstra cores, rotação simples e projeção em perspectiva):
// Cria o contexto a partir do elemento canvas
var canvas = document.getElementById("meucanvas");
var gl = canvas.getContext("webgl");
// Estabelece as propriedades básicas
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
// Pega o texto dos shaders, como string
var vertex = document.getElementById("vertex-shader").textContent;
var fragment = document.getElementById("fragment-shader").textContent;
// Cria o programa, compilando e linkando os shaders
var vs = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource(vs, vertex);
gl.compileShader(vs);
var fs = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource(fs, fragment);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
// Usa o programa (pode ter mais de um, e usar ora um ora outros)
gl.useProgram( program );
// Cria a geometria e suas cores; nesse exemplo, dois triângulos
var triangulos = [[1,0,0], [0,1,0], [-1,0,0],
[1,-1,0.2], [0,0,0.3], [-1,-1,0.2]];
var cores = [[1,0,0],[0,1,0],[0,0,1],
[1,1,0],[0,1,1],[1,0,1]];
var floats = new Float32Array(triangulos.length*3);
var floats2 = new Float32Array(triangulos.length*3);
for ( var i = 0 ; i < triangulos.length ; i++ )
for ( var t = 0 ; t < 3 ; t++ ) {
floats[3*i+t] = triangulos[i][t];
floats2[3*i+t] = cores[i][t];
}
// Cria o buffer e manda os dados pra GPU
var pBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, pBuffer );
gl.bufferData( gl.ARRAY_BUFFER, floats, gl.STATIC_DRAW );
// Associa esse buffer com uma variável do seu vertex shader
var vPos = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPos, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPos );
// Idem, para as cores dos vértices
var pBuffer2 = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, pBuffer2 );
gl.bufferData( gl.ARRAY_BUFFER, floats2, gl.STATIC_DRAW );
var vCor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vCor, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vCor );
// Para girar o triângulo em torno do eixo Y
var rotacaoLoc = gl.getUniformLocation( program, "rotacao" );
// Projeção em perspectiva (fonte: http://stackoverflow.com/a/30429728/520779)
function perspective(fieldOfViewYInRadians, aspect, zNear, zFar, dst) {
dst = dst || new Float32Array(16);
var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewYInRadians);
var rangeInv = 1.0 / (zNear - zFar);
dst[0] = f / aspect; dst[1] = 0; dst[2] = 0; dst[3] = 0;
dst[4] = 0; dst[5] = f; dst[6] = 0; dst[7] = 0;
dst[8] = 0; dst[9] = 0; dst[10] = (zNear + zFar) * rangeInv; dst[11] = -1;
dst[12] = 0; dst[13] = 0; dst[14] = zNear * zFar * rangeInv * 2; dst[15] = 0;
return dst;
}
var perspectivaLoc = gl.getUniformLocation( program, "u_matrix" );
// Desenha
var inicio = Date.now();
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(perspectivaLoc, gl.FALSE, perspective(Math.PI/8, 1, 0.1, 10));
gl.uniform1f(rotacaoLoc, -(Date.now()-inicio)/500); // Gira conforme a data
gl.drawArrays(gl.TRIANGLES, 0, triangulos.length/2); // 1º triângulo
gl.uniform1f(rotacaoLoc, -(Date.now()-inicio)/900); // Gira num ritmo diferente
gl.drawArrays(gl.TRIANGLES, triangulos.length/2, triangulos.length/2); // 2º triângulo
requestAnimationFrame(render); // Chama de novo após um tempo X
}
render();
<script id="vertex-shader" type="x-shader/x-vertex">
// uniform é o mesmo pra figura inteira
uniform float rotacao;
uniform mat4 u_matrix;
// attribute é um pra cada vértice
attribute vec3 vPosition;
attribute vec3 vColor;
// varying é um pra cada pixel (fragmento)
varying vec3 fColor;
varying float z;
void main() {
// Gira os vértices
float novoX = cos(rotacao)*vPosition.x + sin(rotacao)*vPosition.z;
float novoZ = sin(rotacao)*vPosition.x + cos(rotacao)*vPosition.z;
// Translada e projeta em 2D (recebe a projeção em perspectiva do JS)
vec4 trans = vec4(0.0, 0.0, 6.0, 0.0);
gl_Position = u_matrix * (vec4(novoX, vPosition.y, novoZ, 1.0) - trans);
// Envia dados para o fragment shader (serão interpolados)
z = novoZ*abs(novoZ);
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec3 fColor;
varying float z;
void main() {
// Quanto mais próximo da câmera, mais claro
float r = fColor.r/2.0 + z/2.0;
float g = fColor.g/2.0 + z/2.0;
float b = fColor.b/2.0 + z/2.0;
gl_FragColor = vec4(r, g, b, 1.0 );
}
</script>
<canvas id="meucanvas" width="150" height="150"></canvas>
Note como a coisa fica complexa bem rápido... Por isso na prática pode valer a pena usar alguma framework como a ThreeJS, BabylonJS, SceneJS, etc, mesmo porque raramente você vai criar suas geometrias "à mão", mas sim importá-las de uma ferramenta de modelagem. Essas frameworks de scene graph te ajudam a montar sua tela, animá-la, além de implementarem os principais algoritmos de iluminação, textura, bem como auxiliar nas transformações 3D - às custas de uma menor flexibilidade para aplicações mais avançadas (que se você não sabe se precisa ou não, você provavelmente não precisa).