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.
Suporte do navegadorComo 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:
Navegador Chrome 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: --enable-WebGL-Ignore-GPU-Blacklist-Arl-Arl-File-ACCESS-FilesClique 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.
Navegador do Firefox 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.
Navegador Safari Encontre propriedades → Avançado no menu, selecione Mostrar menu de desenvolvimento, depois vá para o menu de desenvolvimento e selecione Ligue o WebGL. Etapas de desenvolvimentoO 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.
Preparação 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:
Etapa 1: Inicialize o ambiente de trabalho WebGL - initgl 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.
Etapa 2: Inicialize Shaders - Initshaders 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;
}
Etapa 3: Criar/carregar dados do modelo - InitBuffers 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.
Etapa 4: Renderização - Drawscene 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.
Referência prática:Tutorial chinês: http://www.hiwebgl.com/?p=42
Centro de Desenvolvimento: https://developer.mozilla.org/en/webgl