Flave/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	 <title>"An introduction to shaders" for threejs Revision 69</title>
</head>
<body>
	<canvas id="canvas"></canvas>

	<script type="x-shader/x-vertex" id="vertex-shader">
		uniform mat4 projectionMatrix;
		uniform mat4 modelViewMatrix;
		attribute vec3 position;

		void main() {
		  gl_Position = projectionMatrix *
		                modelViewMatrix *
		                vec4(position,1.0);
		}
	</script>

	<script type="x-shader/x-fragment" id="fragment-shader">
		void main() {
		  gl_FragColor = vec4(1.0,  // R
		                      0.0,  // G
		                      1.0,  // B
		                      1.0); // A
		}
	</script>
	<script type="text/javascript" src="/vendor/three.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

## main.js
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('webgl');
var renderer, scene, geometry, mesh, camera;
var width = canvas.width;
var height = canvas.width;


function init() {

	scene = new THREE.Scene();

	renderer = new THREE.WebGLRenderer({
		canvas: canvas,
		context: ctx
	});

	renderer.setSize(width, height);
	renderer.setClearColor(0x000000, 1);

	camera = new THREE.PerspectiveCamera(50, width/height, 1, 100000);
	camera.position.set(0, 0, 300);
	scene.add(camera);

	// set up the sphere vars
	var radius = 50, segments = 16, rings = 16;

	// create the sphere's material
	var shaderMaterial = new THREE.RawShaderMaterial({
		vertexShader:   document.getElementById('vertex-shader').innerHTML,
		fragmentShader: document.getElementById('fragment-shader').innerHTML
	});

	// create a new mesh with sphere geometry -
	// we will cover the sphereMaterial next!
	var sphere = new THREE.Mesh(
	   new THREE.SphereGeometry(radius, segments, rings),
	   shaderMaterial);

	scene.add(sphere);
}


init();
renderer.render(scene, camera);
	<!DOCTYPE html>
	<html>
	<head>
	<title>"An introduction to shaders" for threejs Revision 69</title>
	</head>
	<body>
	<canvas id="canvas"></canvas>

	<script type="x-shader/x-vertex" id="vertex-shader">
	uniform mat4 projectionMatrix;
	uniform mat4 modelViewMatrix;
	attribute vec3 position;

	void main() {
	gl_Position = projectionMatrix *
	modelViewMatrix *
	vec4(position,1.0);
	}
	</script>

	<script type="x-shader/x-fragment" id="fragment-shader">
	void main() {
	gl_FragColor = vec4(1.0, // R
	0.0, // G
	1.0, // B
	1.0); // A
	}
	</script>
	<script type="text/javascript" src="/vendor/three.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('webgl');
	var renderer, scene, geometry, mesh, camera;
	var width = canvas.width;
	var height = canvas.width;


	function init() {

	scene = new THREE.Scene();

	renderer = new THREE.WebGLRenderer({
	canvas: canvas,
	context: ctx
	});

	renderer.setSize(width, height);
	renderer.setClearColor(0x000000, 1);

	camera = new THREE.PerspectiveCamera(50, width/height, 1, 100000);
	camera.position.set(0, 0, 300);
	scene.add(camera);

	// set up the sphere vars
	var radius = 50, segments = 16, rings = 16;

	// create the sphere's material
	var shaderMaterial = new THREE.RawShaderMaterial({
	vertexShader: document.getElementById('vertex-shader').innerHTML,
	fragmentShader: document.getElementById('fragment-shader').innerHTML
	});

	// create a new mesh with sphere geometry -
	// we will cover the sphereMaterial next!
	var sphere = new THREE.Mesh(
	new THREE.SphereGeometry(radius, segments, rings),
	shaderMaterial);

	scene.add(sphere);
	}


	init();
	renderer.render(scene, camera);