Ejercicio 6 - CVI

by Sebastian Martinez

HTML

<canvas id="scene" width="600px" height="500px"></canvas>

<!-- vertex shader -->
<script id="3d-vertex-shader" type="x-shader/x-vertex">
  attribute vec4 a_position; 
  attribute vec4 a_color; 
  uniform mat4 u_matrix; 
  varying vec4 v_color; 
  void main() { 
  // Multiply the position by the matrix. 
  gl_Position = u_matrix * a_position;
  // Pass the color to the fragment shader. 
  v_color = a_color; 
  }
</script>
<!-- fragment shader -->
<script id="3d-fragment-shader" type="x-shader/x-fragment">
  precision mediump float; 
  // Passed in from the vertex shader. 
  varying vec4 v_color; 
  uniform vec4 u_colorMult; 
  uniform vec4 u_colorOffset; 
  void main() { 
  gl_FragColor = v_color * u_colorMult + u_colorOffset; 
  }
</script>
 <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script> 
 <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
 <script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>

JavaScript

'use strict';
//Puntos de la curva
var startP = [-10, 0, 0];
var endP = [10, 0, 0];
var c1P = [-10, 0, -20];
var c2P = [10, 0, -20];

var t = 0; //Tiempo animación actual
var animacion = 3000; //Tiempo de animacion
var tiempo = Date.now(); //Tiempo actual
var regreso = false; //Animacion de regreso
  
// Clases del grafo de escena
var Node = function() {
  this.children = [];
  this.localMatrix = m4.identity();
  this.worldMatrix = m4.identity();
};

Node.prototype.setParent = function(parent) {
  if (this.parent) {
    var ndx = this.parent.children.indexOf(this);
    if (ndx >= 0) {
      this.parent.children.splice(ndx, 1);
    }
  }

  if (parent) {
    parent.children.push(this);
  }
  this.parent = parent;
};

Node.prototype.updateWorldMatrix = function(parentWorldMatrix) {
  if (parentWorldMatrix) {
    // a matrix was passed in so do the math
    m4.multiply(parentWorldMatrix, this.localMatrix, this.worldMatrix);
  } else {
    // no matrix was passed in so just copy local to world
    m4.copy(this.localMatrix, this.worldMatrix);
  }
  
  // now process all the children
  var worldMatrix = this.worldMatrix;
  this.children.forEach(function(child) {
    child.updateWorldMatrix(worldMatrix);
  });
};

// Main
function main() {
  var canvas = document.getElementById('scene');
  var gl = canvas.getContext('webgl');
  if (!gl) return;

  // setup GLSL program
  var programInfo = webglUtils.createProgramInfo(gl, [
    '3d-vertex-shader',
    '3d-fragment-shader'
  ]);

  function createFlattenedVertices(gl, vertices) {
    var last;
    return webglUtils.createBufferInfoFromArrays(
      gl,
      primitives.makeRandomVertexColors(primitives.deindexVertices(vertices), {
        vertsPerColor: 1,
        rand: function(ndx, channel) {
          if (channel == 0) {
            last = (128 + Math.random() * 128) | 0;
          }
          return channel < 3 ? last : 255;
        }
      })
    );
  }

  //Creación de primitivas
  const cubeBufferInfo =...