<div id="contents">
  <section id="main">
    <canvas></canvas>
  </section>
</div>

<script id="vertexShader" type="x-shader/x-vertex">
<script id="fragmentShader" type="x-shader/x-fragment">

/**
 * メインビジュアルクラス
 * @param {number} numChars - テクスチャの文字数
 * @param {number} charWidth - 文字の幅 [px]
 * @param {number} numTextureGridCols - テクスチャの1行文の文字列 [px]
 * @param {number} textureGridSize - テクスチャの1文字分の幅 [px]
 */
sample.MainVisual = function(numChars, charWidth, numTextureGridCols, textureGridSize) {

  // 文字数 = 正方形の数
  this.numChars = numChars || 1000;

  // 文字の幅[px] (geometryの1文字の幅)
  this.charWidth = charWidth || 4;

  // テクスチャの1行文の文字列
  this.numTextureGridCols = numTextureGridCols || 16;

  // テクスチャの1文字分の幅
  this.textureGridSize = textureGridSize || 128;

  // アニメーション適用度
  // 頂点シェーダ内でアニメーションが3つ定義されており
  // それらを切り替えるための値
  this.animationValue1 = 1;
  this.animationValue2 = 0;
  this.animationValue3 = 0;

  // イニシャライズ
  this.init();
}

// controls
// 第二引数にthis.renderer.domElementを指定しておかないと、dat.guiのGUIがうまく操作できない
this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);

// THREE.Meshを拡張したFloatingCharsをイニシャライズ
// 非同期処理が終了したらリサイズイベントを発火して、アニメーション開始
this.initFloatingChars()
.then(function() {
  // resizeイベントを発火してキャンバスサイズをリサイズ
  self.$window.trigger('resize');

  // アニメーション開始
  self.start();
});

/**
 * floatingCharsをイニシャライズ
 */
sample.MainVisual.prototype.initFloatingChars = function() {
  var self = this;

  return new Promise(function(resolve) {
    // webfont load event
    WebFont.load({
      // Google Fontを使用
      google: {
        families: [ self.fontFamily ]  // フォント名を指定
      },
      active: function(fontFamily, fontDescription) {
        // ロード完了
        console.log('webfonts loaded');

        // FloatingCharsインスタンス化
        self.floatingChars = new sample.FloatingChars(
          self.numChars,
          self.charWidth,
          self.numTextureGridCols,
          self.textureGridSize
        );

        // テクスチャをイニシャライズ
        // 第一引数は使用する文字 (ユニーク)
        // 第二引数は使用するフォント名
        self.floatingChars.createTxtTexture('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|:;?<>,.', self.fontFamily);

        // シーンに追加
        self.scene.add(self.floatingChars);

        // dat.guiのGUIを生成
        self.createDatGUIBox();

        // 完了
        resolve();
      }
    });
  });
}

WebFont.load({
  // Google Fontを使用
  google: {
    families: [ 'フォント名' ]  // フォント名を指定
  },
  active: function(fontFamily, fontDescription) {
    // ロード完了時の処理をここに記述
  }
});

/**
 * アニメーション開始
 */
sample.MainVisual.prototype.start = function() {
  var self = this;

  var enterFrameHandler = function() {
    requestAnimationFrame(enterFrameHandler);
    self.update();
  };

  enterFrameHandler();
}

/**
 * アニメーションループ内で実行される
 */
sample.MainVisual.prototype.update = function() {
  this.controls.update();
  this.floatingChars.update();
  this.renderer.render(this.scene, this.camera);
}

/**
   * リサイズ処理
   * @param {jQuery.Event} e - jQueryのイベントオブジェクト
   */
  sample.MainVisual.prototype.resize = function() {
    this.width = this.$window.width();
    this.height = this.$window.height();

    // TrackballControlsのリサイズ処理を実行
    this.controls.handleResize();

    // カメラの設定を更新
    this.camera.aspect = this.width / this.height;
    this.camera.updateProjectionMatrix();

    // WebGLRendererの設定を更新
    this.renderer.setSize(this.width, this.height);
  }

// ウィンドウリサイズイベント
this.$window.on('resize', function(e) {
  // resizeメソッドを実行
  self.resize();
});

/**
 * dat.gui
 * dat.guiのコントローラーを定義
 */
sample.MainVisual.prototype.createDatGUIBox = function() {
  var self = this;

  // dat.gui
  var gui = new dat.GUI()

  // スライダーのGUIを追加
  var controler1 = gui.add(this, 'animationValue1', 0, 1).listen();
  var controler2 = gui.add(this, 'animationValue2', 0, 1).listen();
  var controler3 = gui.add(this, 'animationValue3', 0, 1).listen();

  // 値をアニメーションさせるためのボタンを設置
  // それぞれをクリックすると、animation1, animation2, animation3メソッドが呼ばれる
  gui.add(this, 'animation1');
  gui.add(this, 'animation2');
  gui.add(this, 'animation3');

  // 値の変更時にuniform変数の値を変更
  controler1.onChange(function(value) {
    self.floatingChars.setUniform('animationValue1', value);
  });
  controler2.onChange(function(value) {
    self.floatingChars.setUniform('animationValue2', value);
  });
  controler3.onChange(function(value) {
    self.floatingChars.setUniform('animationValue3', value);
  });
}

/**
 * THREE.Meshを拡張した独自3Dオブジェクトクラス
 * @param {number} numChars - テクスチャの文字数
 * @param {number} charWidth - 文字の幅 [px]
 * @param {number} numTextureGridCols - テクスチャの1行文の文字列
 * @param {number} textureGridSize - テクスチャの1文字分の幅
 */
sample.FloatingChars = function(numChars, charWidth, numTextureGridCols, textureGridSize) {
  this.numChars = numChars;
  this.charWidth = charWidth;
  this.numTextureGridCols = numTextureGridCols;
  this.textureGridSize = textureGridSize;

  // カスタムジオメトリオブジェクトをインスタンス化
  geometry = new sample.FloatingCharsGeometry(this.numChars, this.charWidth);

  // RawShaderMaterial生成
  material = new THREE.RawShaderMaterial({
    // 文字以外の部分は透過
    transparent: true,

    // 正方形の両面を描画
    side: THREE.DoubleSide,

    // シェーダに渡すuniform変数の定義
    uniforms: {
      // canvasに記述した文字から作ったtextureを渡す
      txtTexture: { type: 't' },

      // 時間経過 updateメソッド内でフレームごとに加算していく
      time: { type: '1f', value: 0 },

      // 文字数 = 正方形の数
      numChars: { type: '1f', value: this.numChars },

      // Textureの横方向の文字数
      numTextureGridCols: { type: '1f', value: this.numTextureGridCols },

      // Textureの縦方向の文字数
      numTextureGridRows: { type: '1f', value: 1 },

      // テクスチャとして使用する文字数 (文字を何種類使うか)
      textureTxtLength: { type: '1f', value: 1 },

      // アニメーション適用度
      animationValue1: { type: '1f', value: 1 },
      animationValue2: { type: '1f', value: 0 },
      animationValue3: { type: '1f', value: 0 }
    },

    // 頂点シェーダのプログラムをindex.htmlのscript#vertexShaderから取得
    vertexShader: $('#vertexShader').text(),

    // フラグメントシェーダのプログラムをindex.htmlのscript#fragmentShaderから取得
    fragmentShader: $('#fragmentShader').text()
  });

  // 継承元のTHREE.Meshのコンストラクタを実行
  THREE.Mesh.call(this, geometry, material);
}

this.material.uniforms.txtTexture.value = value;

/**
 * uniformの値をセット
 */
sample.FloatingChars.prototype.setUniform = function(uniformKey, value) {
  this.material.uniforms[uniformKey].value = value;
}

/**
 * テクスチャを生成
 * @param {string} txt - テクスチャとして使用したい文字列
 * @param {string} fontFamily - フォント名
 */
sample.FloatingChars.prototype.createTxtTexture = function(txt, fontFamily) {
  var textureTxtLength = txt.length;
  var numTextureGridRows = Math.ceil(textureTxtLength / this.numTextureGridCols);

  this.txtCanvas = document.createElement('canvas');
  this.txtCanvasCtx = this.txtCanvas.getContext('2d');
  this.txtCanvas.width = this.textureGridSize * this.numTextureGridCols;
  this.txtCanvas.height = this.textureGridSize * numTextureGridRows;


  // canvasのスタイルを設定 (グリッドのサイズの80%をfontSizeとする)
  this.txtCanvasCtx.font = 'normal ' + (this.textureGridSize * 0.8) + 'px ' + fontFamily;

  // グリッドの中心に描画
  this.txtCanvasCtx.textAlign = 'center';

  // 文字色は白
  this.txtCanvasCtx.fillStyle = '#ffffff';

  var colIndex;
  var rowIndex;

  for(var i  = 0, l = textureTxtLength; i < l; i++) {
    // 横方向のインデックス
    colIndex = i % this.numTextureGridCols;

    // 縦方向のインデックス
    rowIndex = Math.floor(i / this.numTextureGridCols);

    // canvasに文字を描画
    this.txtCanvasCtx.fillText(
      txt.charAt(i),

      // textAlignをcenterに設定すると、
      // 基準位置が第一引数ので指定された文字列の中央になるので
      // 横方向は各グリッドの中心座標を指定する
      colIndex * this.textureGridSize + this.textureGridSize / 2,

      // 縦方向はベースラインの位置を指定する
      rowIndex * this.textureGridSize + this.textureGridSize * 0.8,

      this.textureGridSize
    );
  }

  // canvasからthree.jsのテクスチャを生成
  this.txtTexture = new THREE.Texture(this.txtCanvas);
  this.txtTexture.flipY = false;  // UVを反転しない (WebGLのデフォルトにする)
  this.txtTexture.needsUpdate = true;  // テクスチャを更新

  // シェーダに渡す値をセット

  // テクスチャ
  this.material.uniforms.txtTexture.value = this.txtTexture;

  // テクスチャの縦の文字数
  this.material.uniforms.numTextureGridRows.value = numTextureGridRows;

  // テクスチャとして使う文字の種類 (txtは1文字ずつユニークである前提)
  this.material.uniforms.textureTxtLength.value = textureTxtLength;

  // document.body.appendChild(this.txtCanvas);
  // $(this.txtCanvas).css('background-color', '#000');
  // $('#wrapper').remove();
}

// document.body.appendChild(this.txtCanvas);
// $(this.txtCanvas).css('background-color', '#000');
// $('#wrapper').remove();

// シェーダに渡す値をセット

// テクスチャ
this.material.uniforms.txtTexture.value = this.txtTexture;

// テクスチャの縦の文字数
this.material.uniforms.numTextureGridRows.value = numTextureGridRows;

// テクスチャとして使う文字の種類 (txtは1文字ずつユニークである前提)
this.material.uniforms.textureTxtLength.value = textureTxtLength;