I have the same problem as zootal. I’m adapting a tutorial script I found here:http://learningwebgl.com/blog/?p=28. I’m attempring to create a lot of line primitives. The idea is to make them all different colours (and I’d love to know how to do that) but I’ll settle for just making them appear!
Apologies for dumping all the code on you, but I’m a complete beginner at WebGL and I don’t know which bits are relevant.
<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) + 1] = line[j].positionOZ / 1280;
vertices[(j * 6) + 1] = line[j].positionX;
vertices[(j * 6) + 1] = line[j].positionY;
vertices[(j * 6) + 1] = 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>
Thanks in advance for any insight you may have!