Hi, I'm trying to port an XML program into WebGL. It consists of thousands of coloured line primitives moving around in 3D space, sach as can be seen in this video:http://vimeo.com/28442466.
I've modified the code I found in this tutorial:http://learningwebgl.com/blog/?p=28 to draw lines instead of triangles. The problem is, the lines don't show up on the screen. When I modified the tutorial to draw only a couple of lines they showed up OK. What am I doing wrong?
I apologise for dumping the whole code on you but as I'm a rank beginner I have no idea of which part would be relevant.
Code :
<html>
 
	<head>
		<title>Lines2</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
		<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
		<script type="text/javascript" src="Line.js"></script>
		<script type="text/javascript" src="Rand.js"></script>
 
		<script id="shader-fs" type="x-shader/x-fragment">
    		#ifdef GL_ES
    		precision highp float;
    		#endif
 
    		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 aVertexPosition;
 
    		uniform mat4 uMVMatrix;
    		uniform mat4 uPMatrix;
 
    		void main(void) {
        		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    		}
		</script>
 
 
		<script type="text/javascript">
	    	var auto = true;
    	    var LINES = 8000;
        	var BOUNDS = 100;
        	var FACTOR = 10.0;
        	var leader, viewer, viewing = 1, autocount = 0;
        	var centreX, centreY, centreZ;
        	var centreOX, centreOY, centreOZ;
        	var time = new Date();
 
        	var random = new Rand();
        	var line = new Array(LINES);
 
    		var gl;    		
    		function initGL(canvas) {
        		try {
            		gl = canvas.getContext("experimental-webgl");
            		gl.viewportWidth = canvas.width;
            		gl.viewportHeight = canvas.height;
        		} catch (e) {
        		}
        		if (!gl) {
            		alert("Could not initialise WebGL, sorry :-(");
        		}
    		}
 
 
    		function getShader(gl, id) {
        		var shaderScript = document.getElementById(id);
        		if (!shaderScript) {
        		    return null;
        		}
 
        		var str = "";
        		var k = shaderScript.firstChild;
        		while (k) {
            		if (k.nodeType == 3) {
            		    str += k.textContent;
            		}
            		k = k.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, str);
        		gl.compileShader(shader);
 
        		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        		    alert(gl.getShaderInfoLog(shader));
        		    return null;
        		}
 
        		return shader;
    		}
 
 
    		var shaderProgram;
 
    		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);
 
    		    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    		        alert("Could not initialise shaders");
    		    }
 
    		    gl.useProgram(shaderProgram);
 
    		    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    		    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
 
    		    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    		    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    		}
 
 
    		var mvMatrix = mat4.create();
    		var pMatrix = mat4.create();
 
    		function setMatrixUniforms() {
    		    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    		    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
    		}
 
 
 
    		var lineVertexPositionBuffer;
 
		    function initBuffers() {
    		    lineVertexPositionBuffer = gl.createBuffer();
    		    gl.bindBuffer(gl.ARRAY_BUFFER, lineVertexPositionBuffer);
    		    var vertices = new Array(LINES * 6);
 
	    		var milliSeconds = ((time.getHours() * 3600) + (time.getMinutes() * 60) + time.getSeconds() * 1000) + time.getMilliseconds();
 
        		for (j = 0; j < milliSeconds; j++)
        		{
            		random.Get();
        		}
 
            	// Initialize the lines
        		for (var j = 0; j < LINES; j++)
        		{
            		line[j] = new Line();
            		line[j].positionX = (BOUNDS * random.Get());
            		line[j].positionY = (BOUNDS * random.Get());
            		line[j].positionZ = (BOUNDS * random.Get());
            		line[j].positionOX = line[j].positionX;
            		line[j].positionOY = line[j].positionY;
            		line[j].positionOZ = line[j].positionZ;
            		line[j].attraction = ((0.2 / (FACTOR * 5)) + ((0.1 / (FACTOR * 5)) * random.Get()));
            		line[j].velocity = ((1 / FACTOR) + ((0.5 / FACTOR) * random.Get()));
            		line[j].speedX = (random.Get() * line[j].velocity);
            		line[j].speedY = (random.Get() * line[j].velocity);
            		line[j].speedZ = (random.Get() * line[j].velocity);
            		line[j].red = (0.5 + ((random.Get() * 0.5)));
            		line[j].green = (0.5 + ((random.Get() * 0.5)));
            		line[j].blue = (0.5 + ((random.Get() * 0.5)));
            		line[j].NormalizeVelocity();
            		centreX += (line[j].positionOX / LINES);
            		centreY += (line[j].positionOY / LINES);
            		centreZ += (line[j].positionOZ / LINES);
 
            		vertices[j * 6] = line[j].positionOX / 1280;
            		vertices[(j * 6) + 1] = line[j].positionOY / 1280;
            		vertices[(j * 6) + 2] = line[j].positionOZ / 1280;
            		vertices[(j * 6) + 3] = line[j].positionX;
            		vertices[(j * 6) + 4] = line[j].positionY;
            		vertices[(j * 6) + 5] = line[j].positionZ;
            	}	
 
        		leader = Math.round((LINES / 2) + (random.Get() * (LINES / 2)));
        		viewer = Math.round((LINES / 2) + (random.Get() * (LINES / 2)));
 
    		    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    		    lineVertexPositionBuffer.itemSize = 3;
    		    lineVertexPositionBuffer.numItems = 2 * LINES;
    		}
 
 
    		function drawScene() {
    		    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    		    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
		        mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 1000.0, pMatrix);
 
    		    mat4.identity(mvMatrix);
 
    		    gl.bindBuffer(gl.ARRAY_BUFFER, lineVertexPositionBuffer);
    		    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, lineVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    		    setMatrixUniforms();
    		    gl.drawArrays(gl.LINES, 0, lineVertexPositionBuffer.numItems);
    		}
 
 
 
    		function webGLStart() {
   		    	var canvas = document.getElementById("lines-canvas");
        		initGL(canvas);
        		initShaders();
        		initBuffers();
 
        		gl.clearColor(0.0, 0.0, 0.0, 1.0);
        		gl.enable(gl.DEPTH_TEST);
 
        		drawScene();
    		}
		</script>
	</head>
 
	<body onload="webGLStart();">
	    <canvas id="lines-canvas" style="border: none;" width="1280" height="768"></canvas>
	</body>
</html>
Thank you in advance for any insights you may have.