Ejercicio 5 - CVI

Cambios de camera en WebGL

by Sebastian Martinez

HTML

<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>
<canvas id="scene" width="600px" height="500px"></canvas>
 <div class="btn-group">
  <button onclick="getElementById('view').innerHTML = 'first'">Primera Persona</button>
  <button onclick="getElementById('view').innerHTML = 'third'">Tercera Persona</button>
  <button onclick="getElementById('view').innerHTML = 'long'">Escena Completa</button>
</div>
<h1 id="view" style="display: none;">long</h1>

<!-- 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>

CSS

.btn-group button {
    background-color: #4CAF50; /* Green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #3e8e41;
}

.btn-group
{
  position: fixed;
  top: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
}

JavaScript

'use strict';
var targetMatrix = m4.identity();

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

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

  // Shape Vertices

  const largeSphereBufferInfo = createFlattenedVertices(
    gl,
    primitives.createCubeVertices(8)
  );
  const smallSphereBufferInfo = createFlattenedVertices(
    gl,
    primitives.createSphereVertices(4, 12, 6)
  );
  const largeStickBufferInfo = createFlattenedVertices(
    gl,
    primitives.createTruncatedConeVertices(1,...