Creacin de objetos 3D utilizando WebGL

Vamos a llevar nuestro cuadrado hacia la tercera dimensin agregando cinco caras ms para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el mtodo gl.drawArrays() por el uso de un arreglo de vrtices como tabla, esto por medio del llamado hacia gl.drawElements().

Considerar: cada cara cuatro vrtices para su definicin, pero cada vrtice es compartido por 3 caras. Realizando una lista con los 24 vrtices es como nosotros haremos un menor intercambio de datos, despus haremos referencia hacia cada vrtic por medio se su ndice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qu necesitamos 24 vrtices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vrtice necesita tener un solo color especfico, por lo tanto crearemos 3 copias de cada vrtice en tres colores diferentes, uno por cada cara.

Definir la posicin de los vrtices del cubo

Primero, construiremos el buffer para la posicin de los vrtices actualizando el cdigo en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero ms lardo debido a que ahora son 24 vrtices (4 por lado):

var vertices = [
  // Cara delantera
  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,

  // Cara trasera
  -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,

  // Top face
  -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,

  // Bottom face
  -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,

  // Right face
  1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,

  // Left face
  -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
];

Definir los colores de los vrtices

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este cdigo comienza por definir un color para cada cara, despus utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vrtices.

var colors = [
  [1.0, 1.0, 1.0, 1.0], // Cara delantera: blanco
  [1.0, 0.0, 0.0, 1.0], // Cara trasera: rojo
  [0.0, 1.0, 0.0, 1.0], // Cara superior: verde
  [0.0, 0.0, 1.0, 1.0], // Cara inferior: azul
  [1.0, 1.0, 0.0, 1.0], // Cara derecha: amarillo
  [1.0, 0.0, 1.0, 1.0], // Cara izquierda: morado
];

var generatedColors = [];

for (j = 0; j < 6; j++) {
  var c = colors[j];

  for (var i = 0; i < 4; i++) {
    generatedColors = generatedColors.concat(c);
  }
}

var cubeVerticesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
gl.bufferData(
  gl.ARRAY_BUFFER,
  new Float32Array(generatedColors),
  gl.STATIC_DRAW,
);

Definir el elemento arreglo

Una ves que el vrtice es generado, nosotros necesitamos contruir el elemento arreglo.

var cubeVerticesIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);

// Este arrelgo define cada cara como 2 tringulos utilizando
// los ndices dentro de cada arreglo de vrtices
// para especificar cada posicin en los trangulos.

var cubeVertexIndices = [
  0,
  1,
  2,
  0,
  2,
  3, // enfrente
  4,
  5,
  6,
  4,
  6,
  7, // atrs
  8,
  9,
  10,
  8,
  10,
  11, // arriba
  12,
  13,
  14,
  12,
  14,
  15, // fondo
  16,
  17,
  18,
  16,
  18,
  19, // derecha
  20,
  21,
  22,
  20,
  22,
  23, // izquierda
];

// Ahora enviamos el elemento arreglo a  GL

gl.bufferData(
  gl.ELEMENT_ARRAY_BUFFER,
  new Uint16Array(cubeVertexIndices),
  gl.STATIC_DRAW,
);

El arreglo cubeVertexIndices define cada cara como un par de tringulos, especificando cada vrtice del tringulo como un ndice dentro del arreglo de vrtices en el cubo. As el cubo es descrito como una coleccin de 12 tringulos.

Dibujando el cubo

Para continuar necesitaremos agregar el cdigo a nuestra funcin drawScene() esto para poder dibujar utilizando el buffer ndice del cubo, agregaremos un nuevo llamado a gl.bindBuffer() y gl.drawElements()como se muestra a continuacin:

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

Desde que cada cara de nuestro cubo est compuesto de dos tringulos, tenemos 6 vrtices en el cubo, se podra pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo ndice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animacin.

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vvidamente.

Ver el Cdigo completo | Abrir esta demostracin en una pgina nueva

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2 ago 2023 by MDN contributors.

View this page on GitHub Report a problem with this content