<!--
SierpinskiGasket.html: The code for the reporting assignment.

Suga Arata, 1065048t@stu.kobe-u.ac.jp
=================================================================
-->

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WebGL SierpinskiGasket</title>
<meta charset="utf-8">

<style type="text/css">
    canvas {
        border: 2px solid grey;
    }
    .text {
        position:absolute;
        top: 40px;
        left: 20px;
        font-size: 1.5em;
        color: black;
    }
</style>

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  varying vec4 vColor;
  attribute vec4 aVertexColor;
  
  void main() {
    gl_Position = vec4(aVertexPosition, 1.0); 
	vColor = aVertexColor;
  }                
</script>

<script id="shader-fs" type="x-shader/x-fragment">
  precision mediump float;
  varying vec4 vColor;
  
  void main() {
	gl_FragColor = vColor;
  } 
</script>

<script type="text/javascript">
var gl;
var canvas;
var shaderProgram;
var vertexBuffer;
var indexBuffer;

function createGLContext(canvas) {
  var names = ["webgl", "experimental-webgl"];
  var context = null;
  for (var i=0; i<names.length; i++) {
    try {
      context = canvas.getContext(names[i]);
    } catch(e) {}
    if (context) {
      break;
    }
  }
  if (context) {
    context.viewportWidth = canvas.width;
    context.viewportHeight = canvas.height;
  } else {
    alert("Failed to create context.");
  }
  return context;
}


function loadShaderFromDOM(id) {
  var shaderScript = document.getElementById(id);
  
  if (!shaderScript) {
    return null;
  }
  
  var shaderSource = "";
  var currentChild = shaderScript.firstChild;
  while (currentChild) {
    if (currentChild.nodeType == 3) { // 3 <= TEXT_NODE
      shaderSource += currentChild.textContent;
    }
    currentChild = currentChild.nextSibling;
  }
 
  var shader;
  if (shaderScript.type == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
  } else if (shaderScript.type == "x-shader/x-vertex") {
    shader = gl.createShader(gl.VERTEX_SHADER);
  } else {
    return null;
  }
 
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);
 
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
    return null;
  } 
  return shader;
}

function setupShaders() {

  var vertexShader = loadShaderFromDOM("shader-vs");
  var fragmentShader = loadShaderFromDOM("shader-fs");

  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Failed to setup shader.");
  }

  gl.useProgram(shaderProgram);

  shaderProgram.vertexPositionAttribute = 
    gl.getAttribLocation(shaderProgram, "aVertexPosition");

  //êFèÓïÒÇÃí«â¡
  shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
  gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
}

function setupBuffers() {
  vertexBuffer = gl.createBuffer();//vertices
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  
  indexBuffer = gl.createBuffer();//index
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  
  
  var gasketVertices = [];
  var indexNumbers = [];
  var colors = [];
  
  const DEGREE = 4; //6で一瞬待機、7で数秒間待機、8は停止 //次元数
  
  var n = -1; //0から数える
  function addGasketVertices(a, b, c, i){//引数は点座標の配列への格納番号
	if(i++ > DEGREE) return;
	
	var middlePointAB = [0.5*(gasketVertices[3*a]+ gasketVertices[3*b]),
		0.5*(gasketVertices[3*a+1]+ gasketVertices[3*b+1]), 0.5*(gasketVertices[3*a+2]+ gasketVertices[3*b+2])];
		
	var middlePointBC = [0.5*(gasketVertices[3*b]+ gasketVertices[3*c]),
		0.5*(gasketVertices[3*b+1]+ gasketVertices[3*c+1]), 0.5*(gasketVertices[3*b+2]+ gasketVertices[3*c+2])];
		
	var middlePointCA = [0.5*(gasketVertices[3*c]+ gasketVertices[3*a]),
		0.5*(gasketVertices[3*c+1]+ gasketVertices[3*a+1]), 0.5*(gasketVertices[3*c+2]+ gasketVertices[3*a+2])];

	gasketVertices = gasketVertices.concat(middlePointAB); n++; // n = 3 ((a, b, c) = (0, 1, 2)のとき)
	gasketVertices = gasketVertices.concat(middlePointBC); n++; // n = 4
	gasketVertices = gasketVertices.concat(middlePointCA); n++; // n = 5
	
	indexNumbers = indexNumbers.concat(a, n-2, n); 
	indexNumbers = indexNumbers.concat(n-2, b, n-1);
	indexNumbers = indexNumbers.concat(n, n-1, c);
	
	var col = 1.0/DEGREE*i;
	colors = colors.concat(1.0, col, col, 1.0);
	colors = colors.concat(col, 1.0, col, 1.0);
	colors = colors.concat(col, col, 1.0, 1.0);
	
	
	var m = n;//nは更新されてしまうので、mに移し替える。
	addGasketVertices(a, m-2, m, i);	//0, 3, 5, i ((a, b, c) = (0, 1, 2)のとき)
	addGasketVertices(m-2, b, m-1, i);
	addGasketVertices(m, m-1, c, i);
  }
  
  
  gasketVertices = gasketVertices.concat(0.0,  0.866, 0.0, -1.0, -0.866, 0.0, 1.0, -0.866, 0.0);
  n += 3;
  indexNumbers = indexNumbers.concat(0, 1, 2);
  colors = colors.concat(1.0, 1.0, 1.0, 1.0,  1.0, 1.0, 1.0, 1.0,  1.0, 1.0, 1.0, 1.0)
  addGasketVertices(0, 1, 2, 0);//0, 1, 2番目の点座標についてフラクタルを作成。階層(４つ目の引数)は0
  
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gasketVertices), gl.STATIC_DRAW);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexNumbers), gl.STATIC_DRAW);
  indexBuffer.size = indexNumbers.length;
  
  colorBuffer = gl.createBuffer(); //color
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors),gl.STATIC_DRAW);
  
}

function draw() {
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); //set color!
  gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); //set pointData!
  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  gl.drawElements(gl.TRIANGLES, indexBuffer.size, gl.UNSIGNED_SHORT, 0);
  
}


function startup() {
  canvas = document.getElementById("myGLCanvas");
  gl = createGLContext(canvas);
  setupShaders();
  setupBuffers();
  gl.clearColor(0.8, 0.8, 0.4, 1.0);
  draw();
}

</script
</head>

<body onload="startup();">
  <canvas id="myGLCanvas" width="480" height="480"></canvas>
  <div class="text">SierpinskiGasket</div>
</body>
</html>