glcanvas/js/main.js

/* Canvas set-up */
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });

var projectionMatrix = mat4.create();
mat4.perspective(
  projectionMatrix,
  (45 * Math.PI) / 180,
  gl.drawingBufferWidth / gl.drawingBufferHeight,
  0.1, 100.0
);

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

/* Load shaders */
const fetchText = async url => (await fetch(url)).text();
const vsSrc = await fetchText("/shader/my.vert");
const fsSrc = await fetchText("/shader/my.frag");

const program = compile(gl, vsSrc, fsSrc);
gl.useProgram(program);

/* WebGL set-up */
gl.clearColor(.1137, .1254, .1294, 1.0);
gl.enable(gl.DEPTH_TEST);

// /* Geometry */
// var verts = new Float32Array([
//   1.0, 1.0, 1.0,
//   -1.0, 1.0, 1.0,
//   -1.0, -1.0, 1.0,
//   1.0, -1.0, 1.0,
//   1.0, -1.0, -1.0,
//   1.0, 1.0, -1.0,
//   -1.0, 1.0, -1.0,
//   -1.0, -1.0, -1.0,
// ]);

// // Indices of the vertices for each triangle
// var indices = new Uint8Array([
//   0, 1, 2, 0, 2, 3,  // front
//   0, 3, 4, 0, 4, 5,  // right
//   0, 5, 6, 0, 6, 1,  // up
//   1, 6, 7, 1, 7, 2,  // left
//   7, 4, 3, 7, 3, 2,  // down
//   4, 7, 6, 4, 6, 5   // back
// ]);

const mdlSrc = await fetchText("/model/Shinji.obj");
const [verts, normals, indices] = parseObj(mdlSrc);

console.log(verts, normals, indices)

const modelViewMatrix = mat4.create();
mat4.translate(
  modelViewMatrix,
  modelViewMatrix,
  [0.0, 0.0, -5.0]
);

/* Get attribs/uniforms */
var a_position = gl.getAttribLocation(program, 'a_position');
var u_projectionMtx = gl.getUniformLocation(program, 'u_projectionMtx');
var u_modelViewMtx = gl.getUniformLocation(program, 'u_modelViewMtx');
var u_clock = gl.getUniformLocation(program, 'u_clock');

/* Create buffers */
buffer(gl, verts, program, 'a_position', 3, gl.FLOAT);
buffer(gl, normals, program, 'a_normal', 3, gl.FLOAT);

/* Indices */
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

/* Utility function */
const rotate3D = (mtx, x, y, z) => {
  mat4.rotate(
    mtx, mtx,
    x,
    [1, 0, 0]
  );
  mat4.rotate(
    mtx, mtx,
    y,
    [0, 1, 0]
  );
  mat4.rotate(
    mtx, mtx,
    z,
    [0, 0, 1]
  );
};

rotate3D(modelViewMatrix, 0.4, 0, 0);

/* Render */
var lastDraw = performance.now();
const draw = () => {
  requestAnimationFrame(draw);

  // Rotate camera
  var delta = performance.now() - lastDraw + 0.001;
  lastDraw = performance.now();

  var r1 = 1 / delta;
  var r2 = r1 * 2;
  r1 = (r1 * Math.PI) / 180;
  r2 = (r2 * Math.PI) / 180;
  rotate3D(modelViewMatrix, 0, r1, 0);

  // Set uniforms
  gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
  gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
  gl.uniform1f(u_clock, performance.now() % 4096);

  // Draw triangles
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}

/* Start */
requestAnimationFrame(draw);