WebGL 3D Descripción general de HTML5 (Parte 1) - WebGL Native Development abre una nueva era de representación 3D en las páginas web

WebGL ha abierto una nueva era de representación 3D de páginas web, que permite que el contenido 3D se represente directamente en el lienzo sin la ayuda de ningún complemento. Al igual que la API 2D Canvas, WebGL manipula objetos a través de scripts, por lo que los pasos son básicamente similares: preparar el contexto de trabajo, preparar los datos, dibujar el objeto en lienzo y representarlo. A diferencia de 2D, 3D implica más conocimiento, como el mundo, la luz, la textura, la cámara, la matriz y otros conocimientos profesionales. WebGL tiene un buen tutorial chino, que es el primer enlace en la referencia a continuación, por lo que no mostraré mis habilidades aquí. El siguiente contenido es solo un breve resumen de lo que aprendí.

Dado que Microsoft tiene su propio plan de desarrollo de gráficos y no ha admitido WebGL, IE no puede ejecutar WebGL, excepto para instalar complementos. Otros navegadores convencionales como Chrome, Firefox, Safari, Opera, etc., están instalados con la última versión. Además de instalar el último navegador, también debe asegurarse de que el controlador de la tarjeta gráfica también esté actualizado.

Después de instalarlos, puede abrir el navegador e ingresar la siguiente URL para verificar el soporte del navegador para WebGL: http://webglreport.sourceforge.net/.

Después de instalar el navegador anterior normalmente, aún no puede ejecutar WebGL, por lo que puede habilitar con fuerza el soporte de WebGL y probarlo. El método para habilitarlo es el siguiente:

Necesitamos agregar algunos parámetros de inicio a Chrome. Los siguientes pasos de operación específicos se toman como ejemplo: encuentre el acceso directo al navegador Chrome, haga clic con el botón derecho en el atajo y seleccione Propiedades; En el cuadro de destino, después de las cotizaciones después de chrome.exe, agregue el siguiente contenido:

Haga clic en Aceptar para cerrar Chrome y luego use este atajo para iniciar el navegador Chrome.

Los significados de varios parámetros son los siguientes:

--enable-webgl significa habilitar el soporte de WebGL;

--Ingore-GPU-BlackList significa ignorar la lista negra de la GPU, lo que significa que no se recomienda que algunas GPU de tarjetas gráficas ejecute WebGL porque son razones demasiado antiguas y de otras otras razones. Este parámetro permite al navegador ignorar esta lista negra y obligar a WebGL a ejecutar;

-Allow-File-Access-desde-Files significa que permite la carga de recursos desde localmente. Si no es un desarrollador de WebGL y no necesita desarrollar y depurar WebGL, pero solo desea echar un vistazo a la demostración de WebGL, entonces no puede agregar este parámetro.

Usuarios de Firefox, ingrese sobre: ​​Configurar en la barra de direcciones del navegador, ingrese y luego busque WebGL en el filtro (filtro), establezca webgl.force-habilitado para verdadero; establecer webgl.disable a false; Busque Security.Fileuri.strict_origin_policy en el filtro (filtro), set Security.fileuri.strict_origin_policy a falso; Luego cierre todas las ventanas de Firefox actualmente abren y reinician Firefox.

La primera configuración es forzar el soporte de WebGL, y la última configuración de seguridad.fileuri.strict_origin_policy es permitir la carga de recursos desde el área local. Si no es un desarrollador de WebGL y no necesita desarrollar y depurar WebGL, pero solo desea echar un vistazo a la demostración de WebGL, entonces no puede configurar este elemento.

Encuentre propiedades → avanzado en el menú, seleccione Show Development Menu, luego vaya al menú de desarrollo y seleccione activar WebGL.

El siguiente código es solo un breve resumen de los conceptos relevantes. Proviene del tutorial chino en la referencia e implica mucho conocimiento en 3D. Los estudiantes interesados ​​pueden saltar directamente al tutorial chino en la referencia práctica de Learn, que es mucho más detallado y preciso de lo que expliqué aquí. Los estudiantes que se unen a la diversión pueden echar un vistazo, sin profundizar en el significado de cada línea de código.

No hace falta decir que es agregar un elemento de lona a la página como contenedor de representación. Por ejemplo:

<bodyOnload = "start ()">

<CanvasID = "Glcanvas" Width = "640" Height = "480">

YourBrowserDoes no APapAsupport thehtml5canvaselement.

</able>

</body>

Aquí hay el momento de comenzar oficialmente a escribir guiones. Primero, echemos un vistazo a la entrada del programa y la estructura general:

functionStart () {

varcanvas = document.getElementById ("glcanvas");

initgl (lienzo);

initShaders ();

initBuffers ();

Gl.ClearColor (0.0,0.0,0.0,1.0);

gl.enable (gl.depth_test);

drawScene ();

}

Varios métodos aquí representan los pasos de dibujo de un webgl típico:

El código para este método es el siguiente:

vargl;

functionInitGl (Canvas) {

gl = nulo;

intentar{

//Trytograbthestandardcontext.ifitfails,fallbacktoexperimental.

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

}

Catch (e) {} // ifwedon'thaveGlContext, davupnow

if (! gl) {

alerta ("UnabletoinitializeWebgl.YourBrowsermaynotsupportit.");

}

}

Este método es muy simple, que es obtener el entorno de dibujo de WebGL. Debe pasar el parámetro WebGL al método Canvas.getContext. Sin embargo, dado que el estándar WebGL actual no se ha finalizado, los parámetros utilizados en la etapa experimental son WEBGL experimental. Por supuesto, también está bien llamar a Canvas.getContext (Experimental-WEBGL). Después de establecer los estándares, puede modificar otro código.

El concepto de sombreador es relativamente simple, para decirlo sin rodeos, es el comando de operación de la tarjeta gráfica. La construcción de una escena 3D requiere muchos cálculos de color, posición y otra información. Si el software realiza estos cálculos, la velocidad será muy lenta. Entonces, si deja que la tarjeta gráfica calcule estas operaciones, la velocidad es muy rápida; El sombreador especifica cómo realizar estos cálculos. El código de sombreador está escrito en un idioma sombreador llamado GLSL, y ya no hablaremos de este idioma.

Los sombreadores se pueden definir en HTML y usarse en código. Por supuesto, es lo mismo para usted definir un sombreador con una cadena en su programa.

Veamos primero la definición:

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

PrecisionMediumpfloat;

VaryingVec4vcolor;

voidmain (void) {

GL_FRAGCOLOR = VColor;

}

</script>

<scriptid = "shader-vs" type = "x-shader/x-vreverx">

ATTRIBTEVEC3AVERTEPSION;

attributeVec4AversexColor;

uniformemat4umvmatrix;

Uniformmat4Upmatrix;

VaryingVec4vcolor;

voidmain (void) {

gl_position = upmatrix*umvmatrix*vEC4 (AvertEsposition, 1.0);

VColor = AvertexColor;

}

</script>

Aquí hay dos sombreadores: sombreador de cara y sombreador de vértice.

Con respecto a estos dos sombreadores, es necesario explicar aquí que los modelos 3D en las computadoras se describen básicamente por puntos combinados con caras triangulares. El sombreador de vértice procesa los datos de estos puntos, y el sombreador de superficie procesa los datos de los puntos en el triángulo se enfrenta a través de la interpolación.

El sombreador de vértice definido anteriormente define el método de cálculo de posición y color de los vértices; mientras que el sombreador de superficie define el método de cálculo de color de los puntos interpolados. En los escenarios de aplicación reales, también implicará el procesamiento de la luz y otros efectos en los sombreadores.

Defina sombreadores, puede encontrarlos en el programa y usarlos:

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.getProgramparameter (shaderprogram, gl.link_status)) {

alerta ("pudo notinitialishaders");

}

gl.useprogram (shaderprogram);

shaderprogram.vertespositionAttribute = gl.getAtTriblocation (shaderprogram, "AvertEsposition");

GL.ENABREECTEXATTRIBArray (shaderProgram.EversepositionAttribute);

ShaderProgram.vertexColorAttribute = GL.GetAtTriblocation (shaderProgram, "AvertexColor");

GL.ENABREECTEXATTRIBArray (shaderProgram.vertexColorAttribute);

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

shaderprogram.mvmatrixuniform = gl.getUniformLocation (shaderprogram, "umvmatrix");

}

Hay un sombreador, pero ¿cómo se ejecuta la tarjeta gráfica? El programa es un puente. Es un código binario nativo de WebGL. Su función es básicamente para que la tarjeta gráfica ejecute el código del sombreador para representar los datos del modelo especificados.

Aquí también hay un método auxiliar GetShader. Este método es atravesar el documento HTML, encontrar la definición del sombreador y crear el sombreador después de obtener la definición. No entraré en detalles aquí:

functetShader (GL, ID) {

VarShaderscript, Thesource, CurrentChild, Shader;

shaderScript = document.getElementById (id);

if (! ShaderScript) {

Returnnull;

}

thesource = "";

currentChild = shaderScript.FirstChild;

while (CurrentChild) {

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

thesource+= currentChild.TextContent;

}

CurrentChild = CurrentChild.NextSibling;

}

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

sombreador = gl.createshader (gl.fragment_shader);

} elseif (shaderscript.type == "x-shader/x-vreverx") {

sombreador = gl.createshader (gl.vertex_shader);

}demás{

// desconocido

Returnnull;

}

Gl.ShaderSource (sombreador, theSource);

// compiletheshaderprogram

GL.Compileshader (sombreador);

// SeeifitCompiledSuccessly

if (! Gl.getShaderParameter (shader, glcompile_status)) {

alerta ("anerroroccurredCompilingTheshaders:"+GL.getShaderinfolog (sombreador));

Returnnull;

}

returnshader;

}

En estos pequeños ejemplos, los datos del modelo se generan básicamente directamente. En los programas reales, estos datos deben obtenerse de la carga del modelo:

VartriangleCertEspositionBuffer;

vartriangleversexcolorbuffer;

functionInitBuffers () {

TriangleCertEspositionBuffer = GL.CreateBuffer ();

Gl.Bindbuffer (GL.Array_Buffer, TriangleConexpositionBuffer);

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);

triangleCentExpositionBuffer.ItemSize = 3;

triangleCertEspositionBuffer.numitems = 3;

triangleversexcolorbuffer = gl.createBuffer ();

GL.BindBuffer (GL.Array_Buffer, TriangleverExcolorBuffer);

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 (Colors), GL.Static_Draw);

triangleversexcolorbuffer.ItemSize = 4;

triangleversexcolorbuffer.numitems = 3;

}

El código anterior crea los vértices y los datos de color del triángulo y los coloca en el búfer.

Después de preparar los datos, solo entregamos a WebGL para renderizar. El método GL.DrawArrays se llama aquí. Mira el código:

functionDrawScene () {

Gl.Viewport (0,0, GL.ViewPortWidth, GL.ViewPorthEight);

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

PMATRIX = OKMAT4PROJ (45.0, GL.VIEWPORTWIDTH/GL.VIEWPORTHEIGHT, 0.1,100.0);

mvmatrix = okmat4trans (-1.5, 0.0, -7.0);

Gl.Bindbuffer (GL.Array_Buffer, TriangleConexpositionBuffer);

Gl.vertexattribpointer (shaderprogram.EverpeSpositionAttribute, triangleCertExpositionBuffer.ItemSize, gl.float, falso, 0,0);

GL.BindBuffer (GL.Array_Buffer, TriangleverExcolorBuffer);

Gl.vertexattribpointer (shaderprogram.vertexcolorattribute, triangleversexcolorbuffer.ItemSize, gl.float, falso, 0,0);

setMatrixUniforms ();

Gl.DrawArrays (Gl.Triangles, 0, TriangleConexpositionBuffer.numitems);

}

Esta función primero establece el fondo del mundo 3D en negro, luego establece la matriz de proyección, establece la posición del objeto a dibujar y luego dibuja el objeto de acuerdo con el vértice y los datos de color en el búfer. También hay algunos métodos auxiliares para generar rectángulos de proyección y vista de modelo (utilizando el método auxiliar de matriz en la biblioteca de gráficos OAK3D) que tienen poco que ver con el tema, por lo que no lo explicaré en detalle aquí.

Básicamente hay tantos procesos. Se implementan texturas, luz, etc. más complejas en función de ellas. Consulte el tutorial chino a continuación, que contiene ejemplos detallados.

¿Qué tal? ¿Cómo es usar el desarrollo de WebGL nativo? No solo necesita tener un conocimiento 3D profundo, sino que también necesita conocer varios detalles de implementación. WebGL hace esto para adaptarse a varios escenarios de aplicaciones de manera flexible, pero para la mayoría de los no profesionales como yo, no es necesario conocer muchos detalles. Esto ha dado lugar a varias bibliotecas de clase para ayudar al desarrollo, como la biblioteca OAK3D utilizada en esta sección (para demostrar el desarrollo de WebGL, solo se utilizaron métodos de asistencia de matriz en los ejemplos). La siguiente sección introducirá una biblioteca de gráficos tres.js más utilizada.

Tutorial chino: http://www.hiwebgl.com/?p=42

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