WebGL: contexto

Para escribir una aplicación WebGL, el primer paso es obtener el objeto de contexto de representación de WebGL. Este objeto interactúa con el búfer de dibujo de WebGL y puede llamar a todos los métodos de WebGL. Se realizan las siguientes operaciones para obtener el contexto WebGL:

Crea un lienzo HTML-5
Obtener el ID de lienzo
Obtenga WebGL

Creación de un elemento Canvas HTML-5

En el Capítulo 5, discutimos cómo crear un elemento de lienzo HTML-5. Dentro del cuerpo del documento HTML-5, escriba un lienzo, asígnele un nombre y páselo como parámetro al id del atributo. Puede definir las dimensiones del lienzo utilizando los atributos de ancho y alto (opcional).

Ejemplo

El siguiente ejemplo muestra cómo crear un elemento de lienzo con las dimensiones 500 × 500. Hemos creado un borde para el lienzo usando CSS para la visibilidad. Copie y pegue el siguiente código en un archivo con el nombremy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

Producirá el siguiente resultado:

Obtener el ID de Canvas

Después de crear el lienzo, debe obtener el contexto de WebGL. Lo primero que debe hacer para obtener un contexto de dibujo de WebGL es obtener la identificación del elemento de lienzo actual.

Canvas ID se adquiere llamando al método DOM (Document Object Model) getElementById(). Este método acepta un valor de cadena como parámetro, por lo que le pasamos el nombre del lienzo actual.

Por ejemplo, si el nombre del lienzo es my_canvas, luego se obtiene el ID del lienzo como se muestra a continuación

var canvas = document.getElementById('my_Canvas');

Obtenga el contexto de dibujo de WebGL

Para obtener el objeto WebGLRenderingContext (o el objeto de contexto de dibujo de WebGL o simplemente el contexto de WebGL), llame al getContext() método de la corriente HTMLCanvasElement. La sintaxis de getContext () es la siguiente:

canvas.getContext(contextType, contextAttributes);

Pasa las cuerdas webgl o experimental-webgl como el contentType. loscontextAttributesel parámetro es opcional. (Mientras continúa con este paso, asegúrese de que su navegador implemente WebGL versión 1 (OpenGL ES 2.0)).

El siguiente fragmento de código muestra cómo obtener el contexto de representación de WebGL. aquígl es la variable de referencia al objeto de contexto obtenido.

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

El parámetro WebGLContextAttributesno es obligatorio. Este parámetro proporciona varias opciones que aceptan valores booleanos que se enumeran a continuación:

No Señor.	Atributos y descripción
1	Alpha Si su valor es verdadero, proporciona un búfer alfa al lienzo. Por defecto, su valor es verdadero.
2	depth Si su valor es verdadero, obtendrá un búfer de dibujo que contiene un búfer de profundidad de al menos 16 bits. Por defecto, su valor es verdadero.
3	stencil Si su valor es verdadero, obtendrá un búfer de dibujo que contiene un búfer de plantilla de al menos 8 bits. Por defecto, su valor es falso.
4	antialias Si su valor es verdadero, obtendrá un búfer de dibujo que realiza suavizado. Por defecto, su valor es verdadero.
5	premultipliedAlpha Si su valor es verdadero, obtendrá un búfer de dibujo que contiene colores con alfa pre-multiplicado. Por defecto, su valor es verdadero.
6	preserveDrawingBuffer Si su valor es verdadero, los búferes no se borrarán y conservarán sus valores hasta que el autor los borre o los sobrescriba. Por defecto, su valor es falso.

El siguiente fragmento de código muestra cómo crear un contexto WebGL con un búfer de plantilla, que no funcionará anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

En el momento de crear WebGLRenderingContext, se crea un búfer de dibujo. El objeto Context administra el estado de OpenGL y se procesa en el búfer de dibujo.

WebGLRenderingContext

Es la interfaz principal de WebGL. Representa el contexto de dibujo de WebGL. Esta interfaz contiene todos los métodos utilizados para realizar diversas tareas en el búfer de dibujo. Los atributos de esta interfaz se dan en la siguiente tabla.

No Señor.	Atributos y descripción
1	Canvas Esta es una referencia al elemento canvas que creó este contexto.
2	drawingBufferWidth Este atributo representa el ancho real del búfer de dibujo. Puede diferir del atributo de ancho de HTMLCanvasElement.
3	drawingBufferHeight Este atributo representa la altura real del búfer de dibujo. Puede diferir del atributo de altura de HTMLCanvasElement.