drewwells/plot.html

## plot.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
  font-family: 'HelveticaRegular',arial,sans-serif;
}

</style>
<script id="shader-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif

    varying lowp vec4 vColor;

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

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying lowp vec4 vColor;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
  }
</script>
</head>
<body onload="webGLStart()">
<div id="content">
    <canvas id="canvas" width="600" height="400"></canvas>
</div>
</body>

<script src=PhiloGL.js></script>

<script src=plot.js></script>
</html>

## plot.js
(function() {
  //Unpack PhiloGL modules
PhiloGL.unpack();

var plane = new O3D.Plane({
    type:   'x,y',
    xlen:   2,
    ylen:   2,
    offset: 0,
    colors: [ 0.5, 1, 1, 1 ]
});

window.webGLStart = function() {
    //Create App
    PhiloGL('canvas', {
        program: [{
            from: 'uris',
            //vs: 'shader-vs',
            //fs: 'shader-fs'
            fs: 'plane.fs.glsl',
            vs: 'plane.vs.glsl',
            noCache: true
        }],
        camera: {
            position: {
                fov: 45,
                x: 0, y: 0, z: 1
            }
        },
        onError: function() {
            alert("There was an error while creating the WebGL application");
        },
        onLoad:function application( app ){

            var gl = app.gl,
                canvas = gl.canvas,
                scene = app.scene,
                camera = app.camera,
                program = app.program;

            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.clearColor(0, 0, 0, 1);

            //Add plane
            scene.add(plane);

            //run loop
            render();

            //Render the scene and perform a new loop
            function render() {
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                scene.render();
                Fx.requestAnimationFrame(render);
            }
        }
    });
};
})();
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body{
	font-family: 'HelveticaRegular',arial,sans-serif;
	}

	</style>
	<script id="shader-fs" type="x-shader/x-fragment">
	#ifdef GL_ES
	precision highp float;
	#endif

	varying lowp vec4 vColor;

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

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	varying lowp vec4 vColor;

	void main(void) {
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	vColor = aVertexColor;
	}
	</script>
	</head>
	<body onload="webGLStart()">
	<div id="content">
	<canvas id="canvas" width="600" height="400"></canvas>
	</div>
	</body>

	<script src=PhiloGL.js></script>

	<script src=plot.js></script>
	</html>
	(function() {
	//Unpack PhiloGL modules
	PhiloGL.unpack();

	var plane = new O3D.Plane({
	type: 'x,y',
	xlen: 2,
	ylen: 2,
	offset: 0,
	colors: [ 0.5, 1, 1, 1 ]
	});

	window.webGLStart = function() {
	//Create App
	PhiloGL('canvas', {
	program: [{
	from: 'uris',
	//vs: 'shader-vs',
	//fs: 'shader-fs'
	fs: 'plane.fs.glsl',
	vs: 'plane.vs.glsl',
	noCache: true
	}],
	camera: {
	position: {
	fov: 45,
	x: 0, y: 0, z: 1
	}
	},
	onError: function() {
	alert("There was an error while creating the WebGL application");
	},
	onLoad:function application( app ){

	var gl = app.gl,
	canvas = gl.canvas,
	scene = app.scene,
	camera = app.camera,
	program = app.program;

	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.clearColor(0, 0, 0, 1);

	//Add plane
	scene.add(plane);

	//run loop
	render();

	//Render the scene and perform a new loop
	function render() {
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	scene.render();
	Fx.requestAnimationFrame(render);
	}
	}
	});
	};
	})();