Ejercicio 7 - CVI

Primitivas 3D y Texturas

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 vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
  // Multiply the position by the matrix.
  gl_Position = u_matrix * a_position;

  // Pass the texcoord to the fragment shader.
  v_texcoord = a_texcoord;
}
</script>
<!-- fragment shader -->
<script id="3d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

// Passed in from the vertex shader.
varying vec2 v_texcoord;

// The texture.
uniform sampler2D u_texture;

void main() {
   gl_FragColor = texture2D(u_texture, v_texcoord);
}
</script>
<!-- CocaCola Geometry -->
<script type="text/plain" id="cocacola.obj">
# Blender v2.79 (sub 0) OBJ File: ''
# www.blender.org
mtllib CocaCola2.mtl
o Cylinder
v 0.000000 -1.770000 -1.000000
v 0.000000 1.770000 -1.000000
v 0.195090 -1.770000 -0.980785
v 0.195090 1.770000 -0.980785
v 0.382683 -1.770000 -0.923880
v 0.382683 1.770000 -0.923880
v 0.555570 -1.770000 -0.831470
v 0.555570 1.770000 -0.831470
v 0.707107 -1.770000 -0.707107
v 0.707107 1.770000 -0.707107
v 0.831470 -1.770000 -0.555570
v 0.831470 1.770000 -0.555570
v 0.923880 -1.770000 -0.382683
v 0.923880 1.770000 -0.382683
v 0.980785 -1.770000 -0.195090
v 0.980785 1.770000 -0.195090
v 1.000000 -1.770000 -0.000000
v 1.000000 1.770000 -0.000000
v 0.980785 -1.770000 0.195090
v 0.980785 1.770000 0.195090
v 0.923880 -1.770000 0.382683
v 0.923880 1.770000 0.382683
v 0.831470 -1.770000 0.555570
v 0.831470 1.770000 0.555570
v 0.707107 -1.770000 0.707107
v 0.707107 1.770000 0.707107
v 0.555570 -1.770000 0.831470
v 0.555570 1.770000 0.831470
v 0.382683 -1.770000 0.923880
v 0.382683 1.770000 0.923880
v 0.195090 -1.770000 0.980785
v 0.195090 1.770000 0.980785
v -0.000000 -1.770000 1.000000
v -0.000000 1.770000 1.000000
v -0.195091 -1.770000 0.980785
v -0.195091 1.770000 0.980785
v -0.382684 -1.770000...

JavaScript

"use strict";
  
function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById("scene");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

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

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");

  // lookup uniforms
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  var textureLocation = gl.getUniformLocation(program, "u_texture");
  
  
  //cargar OBJ
  var objStr = document.getElementById('cocacola.obj').innerHTML;
  var mesh = new OBJ.Mesh(objStr);

  // Create a buffer for positions
  var positionBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // Put the positions in the buffer
  setGeometry(gl, mesh.vertices);

  // provide texture coordinates for the rectangle.
  var texcoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
  // Set Texcoords.
  setTexcoords(gl, mesh.textures);

  // Create a texture.
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  // Fill the texture with a 1x1 blue pixel.
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
                new Uint8Array([0, 0, 255, 255]));
  // Asynchronously load an image
  var image = new Image();
  requestCORSIfNotSameOrigin(image, "https://raw.githubusercontent.com/sebastian-mc/Ejercicio4_CVI/master/img/cocacola.jpg")
  image.src = "https://raw.githubusercontent.com/sebastian-mc/Ejercicio4_CVI/master/img/cocacola.jpg";
  image.addEventListener('load', function() {
    // Now that the image has loaded make copy it to the texture.
    gl.bindTexture(gl.TEXTURE_2D,...