06/solution.html

<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>ggsample06</title>
    <!--link type="text/css" href="https://webgl2fundamentals.org/webgl/resources/webgl-tutorials.css" rel="stylesheet" /-->
    <link type="text/css" href="../common/webgl-tutorials.css" rel="stylesheet" />
  </head>
  <body>
    <canvas id="c" width="400" height="300"></canvas>
    Ref. <a href="https://github.com/tokoik/ggsample06" target="_blank">https://github.com/tokoik/ggsample06</a>
  </body>
</html>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<!--script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script-->
<script src="../common/js/webgl-utils.js"></script>
<script type="module">
import { createShader, createProgram } from "../common/js/gg.js";
import { multiply, perspective, lookat, rotateY, normal } from "../common/js/matrix.js";
import { vertexShaderSource, fragmentShaderSource } from "./shader.js";

let gl, program, cvLoc, mwLoc, mcLoc, mgLoc, mv, vao, points, baseTime;

// アニメーションの周期（秒）
const cycle = 5;

function app() {
  const canvas = document.querySelector("#c");
  gl = canvas.getContext("webgl2");
  if (!gl) {
    return;
  }
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  // 背景色を指定する
  gl.clearColor(1.0, 1.0, 1.0, 0.0);

  // プログラムオブジェクトの作成
  program = createProgram(gl,
    createShader(gl, gl.VERTEX_SHADER, vertexShaderSource),
    createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource),
  );

  // in(attribute) 変数 cv のインデックスの検索(見つからなければ -1)
  cvLoc = gl.getAttribLocation(program, "cv");

  // uniform 変数のインデックスの検索(見つからなければ -1)
  mwLoc = gl.getUniformLocation(program, "mw");
  mcLoc = gl.getUniformLocation(program, "mc");
  mgLoc = gl.getUniformLocation(program, "mg");

  // ビュー変換行列を mv に求める
  mv = lookat(0.0, 2.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

  // 頂点配列オブジェクトの作成
  vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  // 頂点バッファオブジェクトの作成

  // 頂点の座標値
  const pv = [
    -1.0, -0.8660254, 0.0,
     1.0, -0.8660254, 0.0,
     0.0,  0.8660264, 0.0,
  ];

  // 頂点の数
  points = 3;

  // 頂点の座標値 pv のバッファオブジェクト
  const vbo0 = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo0);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pv), gl.STATIC_DRAW);

  // 結合されている頂点バッファオブジェクトを in 変数 pv (index === 0) から参照できるようにする
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(0);

  // 頂点の色
  const cv = [
    1.0, 0.0, 0.0,    // 赤
    0.0, 1.0, 0.0,    // 緑
    0.0, 0.0, 1.0,    // 青
  ];

  // 頂点の法線ベクトル(宿題用)
  const nv = [
   -0.086172748, -0.049751860, 0.99503719,
    0.086172748, -0.049751860, 0.99503719,
            0.0,  0.099503719, 0.99503719,
  ];

  // 頂点の色 cv 用のバッファオブジェクト
  const vbo1 = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo1);
  // 【宿題】 cv の代わりに nv を使うように変更する
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(nv), gl.STATIC_DRAW);

  // 結合されている頂点バッファオブジェクトを in 変数 cv (index === cvLoc) から参照できるようにする
  gl.vertexAttribPointer(cvLoc, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(cvLoc);

  // 経過時間のリセット
  baseTime = new Date().getTime();

  // ウィンドウが開いている間繰り返す
  function loop() {
    render();
    requestAnimationFrame(loop);
  }
  loop();
}

// ウィンドウが開いている間繰り返す
function render() {
  gl.clear(gl.COLOR_BUFFER_BIT);

  // シェーダプログラムの使用開始
  gl.useProgram(program);

  // 時刻の計測
  const ms = (new Date().getTime() - baseTime) / 1000;
  const t = ms % cycle / cycle;

  // モデルビュー変換行列(時刻 t にもとづく回転アニメーション)
  const mw = multiply(mv, rotateY(12.56637 * t));

  // 法線変換行列
  const mg = normal(mw);

  // 投影変換行列
  const mp = perspective(0.5, gl.canvas.width / gl.canvas.height, 1.0, 15.0);

  // モデルビュー・投影変換
  const mc = multiply(mp, mw);

  // uniform 変数を設定する
  gl.uniformMatrix4fv(mwLoc, false, mw);
  gl.uniformMatrix4fv(mcLoc, false, mc);
  gl.uniformMatrix4fv(mgLoc, false, mg);

  // 描画に使う頂点配列オブジェクトの指定
  gl.bindVertexArray(vao);

  // 図形の描画
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  // 頂点配列オブジェクトの指定解除
  gl.bindVertexArray(null);

  // シェーダプログラムの使用終了
  gl.useProgram(null);

  // カラーバッファを入れ替えてイベントを取り出す
  // nop
}

app();
</script>