Visão geral do WebGL 3D do HTML5 (Parte 1) - O desenvolvimento nativo do WebGL abre uma nova era de renderização 3D nas páginas da web

A WebGL abriu uma nova era de renderização em 3D de páginas da web, que permite que o conteúdo 3D seja renderizado diretamente na tela sem a ajuda de nenhum plug-ins. Como a API 2D do Canvas, o WebGL manipula objetos por meio de scripts, para que as etapas sejam basicamente semelhantes: prepare o contexto de trabalho, prepare os dados, desenhe o objeto na tela e o renderize. Ao contrário de 2D, 3D envolve mais conhecimento, como mundo, luz, textura, câmera, matriz e outros conhecimentos profissionais. O WebGL tem um bom tutorial chinês, que é o primeiro link na referência abaixo, então não mostrarei minhas habilidades aqui. O conteúdo a seguir é apenas um breve resumo do que aprendi.

Como a Microsoft possui seu próprio plano de desenvolvimento gráfico e não suportou o WebGL, o IE não pode executar o WebGL, exceto a instalação de plugins. Outros navegadores convencionais, como Chrome, Firefox, Safari, Opera etc., estão todos instalados com a versão mais recente. Além de instalar o navegador mais recente, você também deve garantir que o driver da placa gráfica também esteja atualizado.

Depois de instalá -los, você pode abrir o navegador e inserir o seguinte URL para verificar o suporte do navegador para webgl: http://webglreport.sourceforge.net/.

Depois de instalar o navegador acima normalmente, você ainda não pode executar o WebGL, para que você possa ativar com força o suporte do WebGL e experimentá -lo. O método para ativar é o seguinte:

Precisamos adicionar alguns parâmetros de inicialização ao Chrome. As seguintes etapas de operação específicas são tomadas como exemplo: encontre o atalho no navegador Chrome, clique com o botão direito do mouse no atalho e selecione Propriedades; Na caixa de destino, após as cotações após o Chrome.exe, adicione o seguinte conteúdo:

Clique em OK para fechar o Chrome e, em seguida, use este atalho para iniciar o navegador Chrome.

Os significados de vários parâmetros são os seguintes:

--enable-webgl significa ativar o suporte do WebGL;

-A lista-lista-GPU-BLATE significa ignorar a lista negra da GPU, o que significa que algumas GPUs da placa gráfica não são recomendadas para executar o WebGL porque são muito antigas e outras razões. Este parâmetro permite que o navegador ignore esta lista negra e force a execução do WebGL;

-Arquivos de acesso de arquivo de filos de arquivos significa que você permite o carregamento de recursos localmente. Se você não é um desenvolvedor do WebGL e não precisa desenvolver e depurar o WebGL, mas apenas deseja dar uma olhada na demonstração do WebGL, não poderá adicionar esse parâmetro.

Usuários do Firefox, digite: Config na barra de endereços do navegador, digite e, em seguida, procure WebGL no filtro (filtro), defina webgl.force-habilitado para true; defina webgl.disabled como false; Pesquise Security.Fileuri.Strict_origin_Policy no filtro (filtro), defina segurança.fileuri.strict_origin_policy para false; Em seguida, feche todas as janelas do Firefox atualmente abertas e reinicie o Firefox.

As duas primeiras configurações são forçar o suporte ao WebGL, e a última configuração de segurança.Fileuri.Strict_origin_Policy é permitir o carregamento de recursos da área local. Se você não é um desenvolvedor do WebGL e não precisa desenvolver e depurar o WebGL, mas só quer dar uma olhada na demonstração do WebGL, não pode definir este item.

Encontre propriedades → Avançado no menu, selecione Mostrar menu de desenvolvimento, depois vá para o menu de desenvolvimento e selecione Ligue o WebGL.

O código a seguir é apenas um breve resumo dos conceitos relevantes. Ele vem do tutorial chinês na referência e envolve muito conhecimento em 3D. Os alunos interessados ​​podem pular diretamente para o tutorial chinês na referência prática para aprender, que é muito mais detalhada e precisa do que o que expliquei aqui. Os alunos que estão se juntando podem dar uma olhada, sem se aprofundar no significado de cada linha de código.

Escusado será dizer que é adicionar um elemento de tela à página como um contêiner de renderização. Por exemplo:

<bodyonload = "start ()">

<canvasid = "Glcanvas" width = "640" Height = "480">

YourBrowserDoes nãoPpearsOpport theHtml5CanvasElement.

</canvas>

</body>

Aqui está a hora de começar oficialmente a escrever scripts. Primeiro, vamos dar uma olhada na entrada do programa e na estrutura geral:

functionStart () {

varCanvas = document.getElementById ("Glcanvas");

initgl (tela);

initshaders ();

initBuffers ();

gl.clearcolor (0,0,0,0,0.0,1.0);

gl.enable (gl.depth_test);

drawscene ();

}

Vários métodos aqui representam as etapas de desenho de um webgl típico:

O código para este método é o seguinte:

vargl;

FunctionInitgl (Canvas) {

gl = nulo;

tentar{

//TrytograbthestandardContext.ifitfails, FallbackToExperal.

gl = canvas.getContext ("webgl") || canvas.getContext ("Experimental-webgl");

}

Catch (e) {} // ifwedon'theveAglContext, dê -se

if (! gl) {

ALERT ("Unabletoinitializewebgl.yourbrowSermAyNotSupportt");

}

}

Este método é muito simples, que é obter o ambiente de desenho WebGL. Você precisa passar o parâmetro webgl para o método Canvas.getContext. No entanto, como o padrão WebGL atual não foi finalizado, os parâmetros usados ​​no estágio experimental são experimentais-webgl. Obviamente, também não há problema em chamar Canvas.getContext (Experimental-Webgl). Depois que os padrões forem definidos, você pode modificar outro código.

O conceito de shader shader é relativamente simples, para ser franco, é o comando de operação da placa gráfica. A construção de uma cena 3D requer muitos cálculos de cor, posição e outras informações. Se esses cálculos forem realizados pelo software, a velocidade será muito lenta. Portanto, se você deixar a placa gráfica calcular essas operações, a velocidade será muito rápida; Como executar esses cálculos é especificado pelo shader. O código do shader está escrito em uma linguagem shader chamada GLSL, e não falaremos mais sobre esse idioma.

Os shaders podem ser definidos no HTML e usados ​​no código. Obviamente, é o mesmo para você definir um shader com uma string no seu programa.

Vejamos a definição primeiro:

<scriptId = "shader-fs" type = "x-shader/x-fragment">

PrecisionMedIumpfloat;

Varyingvec4vcolor;

voidmain (void) {

gl_fragcolor = vcolor;

}

</script>

<scriptId = "shader-vs" type = "x-shader/x-vertex">

attributeVec3AvertexPosition;

atribuitvec4avertexcolor;

uniformmat4umvmatrix;

uniformmat4upMatrix;

Varyingvec4vcolor;

voidmain (void) {

gl_Position = upMatrix*umvmatrix*Vec4 (avertexPosition, 1.0);

vcolor = avertexColor;

}

</script>

Aqui estão dois shaders: Shader de rosto e shader de vértice.

Em relação a esses dois shaders, é necessário explicar aqui que os modelos 3D em computadores são basicamente descritos por pontos combinados com faces do triângulo. O shader do vértice processa os dados desses pontos, e o shader de superfície processa os dados dos pontos nos rostos do triângulo através da interpolação.

O shader de vértice definido acima define a posição e o método de cálculo de cores dos vértices; Enquanto o shader de superfície define o método de cálculo de cores dos pontos interpolados. Nos cenários reais de aplicação, também envolverá o processamento de luz e outros efeitos nos shaders.

Defina os shaders, você pode encontrá -los no programa e usá -los:

varshaderprogram;

FunctionInitshaders () {

varfragmentshader = getshader (GL, "shader-fs");

varvertexshader = getshader (gl, "shader-vs");

shadeRProgram = gl.createprogram ();

gl.attachshader (shaderprogram, vertexshader);

gl.attachshader (shaderprogram, fragmentshader);

gl.linkprogram (shaderprogram);

if (! Gl.getProgromParameter (shaderProgram, gl.link_status)) {

alerta ("não pode servir de soshadistas");

}

Gl.useProgram (ShaderProgram);

shadeRProgram.vertexPositionAttribute = GL.GetAttriBlocation (ShaderProgram, "Avertexposition");

gl.enablevertexattribarray (shadeprogram.vertexpositionAttribute);

shadeRProgram.vertexColorattribute = gl.getAttriBlocation (shadeRprogram, "avertexcolor");

gl.enablevertexattribarray (shadeprogram.vertexcolorattribute);

shaderProgram.pmatrixuniform = gl.getUniformLocation (shaderprogram, "upmatrix");

shaderProgram.mvMatrixuniform = gl.getUniformLocation (shaderProgram, "umvmatrix");

}

Há um shader, mas como fazer a placa gráfica executar? O programa é uma ponte. É um código binário nativo do WebGL. Sua função é basicamente para deixar a placa gráfica executar o código do shader para renderizar os dados do modelo especificado.

Aqui também está um método auxiliar Getshader. Este método é para atravessar o documento HTML, encontrar a definição do shader e criar o shader após obter a definição. Não vou entrar em detalhes aqui:

functionGetShader (gl, id) {

varshadercript, thesource, currentChild, shader;

shadercript = document.getElementById (id);

if (! shadescript) {

returnNull;

}

Thesource = "";

currentChild = shadercript.firstchild;

while (currentChild) {

if (currentChild.nodetype == currentChild.text_node) {

thesource+= currentChild.textContent;

}

currentChild = currentChild.Nextsibling;

}

if (shadescript.type == "x-shader/x-fragment") {

shader = gl.createshader (gl.fragment_shader);

} elseif (shadercript.type == "x-shader/x-vertex") {

shader = gl.createshader (gl.vertex_shader);

}outro{

// UnknownShaderType

returnNull;

}

Gl.shaderSource (shader, Thesource);

// CompiletheShaderProgram

gl.compileshader (shader);

// SeefitCompiledsuccessly

if (! Gl.getshaderParameter (shader, gl.compile_status)) {

ALERT ("ANenerrorCurredCompilingTheshaders:"+GL.Getshaderinfolog (shader));

returnNull;

}

returnshader;

}

Nestes pequenos exemplos, os dados do modelo são basicamente gerados diretamente. Nos programas reais, esses dados devem ser obtidos no carregamento do modelo:

vartrianglevertexpositionBuffer;

vartrianglevertexcolorbuffer;

functionInitBuffers () {

TrianglevertexpositionBuffer = Gl.CreateBuffer ();

gl.bindbuffer (gl.array_buffer, triânglevertexpositionbuffer);

varvertices = [

0,0,1,0,0,0,

-1.0, -1,0,0.0,

1.0, -1,0,0.0

];

gl.BufferData (Gl.array_buffer, newfloat32Array (vértices), gl.static_draw);

triânglevertexpositionBuffer.itemSize = 3;

TrianglevertexpositionBuffer.numitems = 3;

TrianglevertexColorBuffer = Gl.CreateBuffer ();

gl.bindbuffer (gl.array_buffer, triânglevertexcolorbuffer);

Varcolors = [

1.0,0.0,0.0,1.0,

0,0,1,0,0,0,1.0,

0,0,0,0,1.0,1.0

];

GL.BUFFERDATA (GL.ARRAY_BUFFER, NEWFLOAT32Array (Cores), Gl.static_draw);

TrianglevertexColorBuffer.itemSize = 4;

TrianglevertexColorBuffer.numitems = 3;

}

O código acima cria os vértices e dados de cores do triângulo e os coloca no buffer.

Depois de preparar os dados, entregue -os ao WebGL para renderização. O método Gl.Drawarrays é chamado aqui. Veja o código:

functionDrawScene () {

GL.VIEWPORT (0,0, GL.VIEWPORTWIDTH, GL.VIEWPORTHEIRTE);

GL.CLEAR (GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);

pmatrix = okmat4proj (45.0, GL.ViewPortWidth/Gl.ViewPortEight, 0,1.100.0);

mvmatrix = okmat4trans (-1,5, 0,0, -7,0);

gl.bindbuffer (gl.array_buffer, triânglevertexpositionbuffer);

gl.vertexattribointer (shadeprogram.vertexPositionAttribute, triânglevertexpositionBuffer.itemsize, gl.float, false, 0,0);

gl.bindbuffer (gl.array_buffer, triânglevertexcolorbuffer);

gl.vertexattribointer (shadeprogram.vertexcolorattribute, triânglevertexcolorbuffer.itemsize, gl.float, false, 0,0);

setMatrixuniforms ();

Gl.Drawarrays (Gl.TrianGles, 0, TrianglevertexpositionBuffer.numitems);

}

Esta função primeiro define o plano de fundo do mundo 3D como preto, depois define a matriz de projeção, define a posição do objeto a ser desenhada e depois desenha o objeto de acordo com os dados de vértices e cores no buffer. Existem também alguns métodos auxiliares para gerar a matriz de projeção e os retângulos de exibição de modelo (usando o método auxiliar da matriz na biblioteca gráfica OAK3D) que têm pouco a ver com o tópico, para que não o explique em detalhes aqui.

Basicamente, existem muitos processos. Texturas mais complexas, luz etc. são implementadas com base nelas. Consulte o tutorial chinês abaixo, que contém exemplos detalhados.

Que tal? Como é usar o desenvolvimento nativo do WebGL? Você não apenas precisa ter um conhecimento 3D profundo, mas também precisa conhecer vários detalhes da implementação. O WebGL faz isso para se adaptar a vários cenários de aplicativos com flexibilidade, mas para a maioria dos não profissionais como eu, muitos detalhes não precisam ser conhecidos. Isso deu origem a várias bibliotecas de classes para ajudar o desenvolvimento, como a biblioteca Oak3D usada nesta seção (para demonstrar o desenvolvimento do WebGL, apenas os métodos de assistência à matriz foram usados ​​nos exemplos). A próxima seção introduzirá uma biblioteca gráfica mais amplamente usada.

Tutorial chinês: http://www.hiwebgl.com/?p=42

Centro de Desenvolvimento: https://developer.mozilla.org/en/webgl