halogenandtoast/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>WebGL Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.2.1/gl-matrix-min.js"></script>
    <script id="shader-fs" type="x-shader/x-fragment">
      precision mediump float;

      void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
    </script>

    <script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 position;

      uniform mat4 uniformModelViewMatrix;
      uniform mat4 uniformProjectionMatrix;

      void main(void) {
        gl_Position = uniformProjectionMatrix * uniformModelViewMatrix * vec4(position, 1.0);
      }
    </script>
    <script src="./main.js"> </script>
  </head>
  <body>
    <canvas width="500" height="500" id="main"></canvas>
  </body>
</html>

## main.js
var gl;
var shaderProgram;
var modelViewMatrix = mat4.create();
var projectionMatrix = mat4.create();
var vertexPositionBuffer;

function initGL() {
  var canvas = $("#main");
  gl = canvas[0].getContext("webgl");
  gl.viewportWidth = canvas.width();
  gl.viewportHeight = canvas.height();
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
}

function getShader(gl, id) {
  var shaderScript = $(id)
  var shaderSource = shaderScript.text();

  var shader;
  if (shaderScript.attr('type') == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
  } else if (shaderScript.attr('type') == "x-shader/x-vertex") {
    shader = gl.createShader(gl.VERTEX_SHADER);
  } else {
    return null;
  }

  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);

  return shader;
}

function initShaders() {
  var fragmentShader = getShader(gl, "#shader-fs");
  var vertexShader = getShader(gl, "#shader-vs");

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

  gl.useProgram(shaderProgram);

  shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "position");
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

  shaderProgram.projectionMatrixUniform = gl.getUniformLocation(shaderProgram, "uniformProjectionMatrix");
  shaderProgram.modelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "uniformModelViewMatrix");
}

function initBuffers() {
  vertexPositionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
  var vertices = [
    0.0,  1.0,  0.0,
    -1.0, -1.0,  0.0,
    1.0, -1.0,  0.0
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  vertexPositionBuffer.itemSize = 3;
  vertexPositionBuffer.numItems = 3;
}

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT);

  mat4.perspective(projectionMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

  mat4.identity(modelViewMatrix);

  mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -3.0]);
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  gl.uniformMatrix4fv(shaderProgram.projectionMatrixUniform, false, projectionMatrix);
  gl.uniformMatrix4fv(shaderProgram.modelViewMatrixUniform, false, modelViewMatrix);
  gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numItems);
}

$(function() {
  initGL();
  initShaders();
  initBuffers();
  drawScene();
})

## three.html
<html>
  <head>
    <title>WebGL</title>
  </head>
  <body>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      var renderer = new THREE.WebGLRenderer();
      var camera = new THREE.PerspectiveCamera(45, 1024/768, 0.1, 10000);
      var scene = new THREE.Scene();

      renderer.setSize(1024, 768);
      camera.position.z = 300;

      var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(50, 16, 16), sphereMaterial);

      var pointLight = new THREE.PointLight(0xFFFFFF);
      pointLight.position.x = 10;
      pointLight.position.y = 50;
      pointLight.position.z = 130;

      scene.add(camera);
      scene.add(pointLight);
      scene.add(sphere);

      document.body.appendChild(renderer.domElement);

      var lastTime = 0;
      function animate() {
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angularChange = 0.2 * timeDiff * 2 * Math.PI / 1000;
        sphere.rotation.y += angularChange;
        renderer.render(scene, camera);
        lastTime = time;
        requestAnimationFrame(function(){
          animate();
        });
      }

      animate();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebGL Example</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.2.1/gl-matrix-min.js"></script>
	<script id="shader-fs" type="x-shader/x-fragment">
	precision mediump float;

	void main(void) {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
	}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 position;

	uniform mat4 uniformModelViewMatrix;
	uniform mat4 uniformProjectionMatrix;

	void main(void) {
	gl_Position = uniformProjectionMatrix * uniformModelViewMatrix * vec4(position, 1.0);
	}
	</script>
	<script src="./main.js"> </script>
	</head>
	<body>
	<canvas width="500" height="500" id="main"></canvas>
	</body>
	</html>
	var gl;
	var shaderProgram;
	var modelViewMatrix = mat4.create();
	var projectionMatrix = mat4.create();
	var vertexPositionBuffer;

	function initGL() {
	var canvas = $("#main");
	gl = canvas[0].getContext("webgl");
	gl.viewportWidth = canvas.width();
	gl.viewportHeight = canvas.height();
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	}

	function getShader(gl, id) {
	var shaderScript = $(id)
	var shaderSource = shaderScript.text();

	var shader;
	if (shaderScript.attr('type') == "x-shader/x-fragment") {
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	} else if (shaderScript.attr('type') == "x-shader/x-vertex") {
	shader = gl.createShader(gl.VERTEX_SHADER);
	} else {
	return null;
	}

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);

	return shader;
	}

	function initShaders() {
	var fragmentShader = getShader(gl, "#shader-fs");
	var vertexShader = getShader(gl, "#shader-vs");

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

	gl.useProgram(shaderProgram);

	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "position");
	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

	shaderProgram.projectionMatrixUniform = gl.getUniformLocation(shaderProgram, "uniformProjectionMatrix");
	shaderProgram.modelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "uniformModelViewMatrix");
	}

	function initBuffers() {
	vertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
	var vertices = [
	0.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, -1.0, 0.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	vertexPositionBuffer.itemSize = 3;
	vertexPositionBuffer.numItems = 3;
	}

	function drawScene() {
	gl.clear(gl.COLOR_BUFFER_BIT);

	mat4.perspective(projectionMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

	mat4.identity(modelViewMatrix);

	mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -3.0]);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
	gl.uniformMatrix4fv(shaderProgram.projectionMatrixUniform, false, projectionMatrix);
	gl.uniformMatrix4fv(shaderProgram.modelViewMatrixUniform, false, modelViewMatrix);
	gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numItems);
	}

	$(function() {
	initGL();
	initShaders();
	initBuffers();
	drawScene();
	})
	<html>
	<head>
	<title>WebGL</title>
	</head>
	<body>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
	var renderer = new THREE.WebGLRenderer();
	var camera = new THREE.PerspectiveCamera(45, 1024/768, 0.1, 10000);
	var scene = new THREE.Scene();

	renderer.setSize(1024, 768);
	camera.position.z = 300;

	var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });
	var sphere = new THREE.Mesh(new THREE.SphereGeometry(50, 16, 16), sphereMaterial);

	var pointLight = new THREE.PointLight(0xFFFFFF);
	pointLight.position.x = 10;
	pointLight.position.y = 50;
	pointLight.position.z = 130;

	scene.add(camera);
	scene.add(pointLight);
	scene.add(sphere);

	document.body.appendChild(renderer.domElement);

	var lastTime = 0;
	function animate() {
	var time = (new Date()).getTime();
	var timeDiff = time - lastTime;
	var angularChange = 0.2 * timeDiff * 2 * Math.PI / 1000;
	sphere.rotation.y += angularChange;
	renderer.render(scene, camera);
	lastTime = time;
	requestAnimationFrame(function(){
	animate();
	});
	}

	animate();
	</script>
	</body>
	</html>