PDA

View Full Version : Drawing a triangle



PatrickBamberg
03-25-2010, 04:17 AM
Hi out there,

I'm trying to draw a white triangle on a black background. I've used the OpenGL ES book as a source of inspiration. Unfortunately I'm not able to write the program in the right way, I don't get the triangle :-(
Maybe someone can give me hint what is wrong with the program.

Thanks
Patrick


<Html>
<Head>

<Script id="shader-fs" type="x-shader/x-fragment">
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 vec4 vPosition;
void main(void)
{
gl_Position = vPosition;
}
</Script>

<Script type="text/javascript">
function getShader(gl, id)
{
var shader;

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;
}

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.bindAttribLocation(shaderProgram, 0, "vPosition");

gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
{
alert("Could not initialise shaders");
}
}

var gl;

function initGL(canvas)
{
try {
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.clearDepth(1.0);

} catch(e) {}
if (!gl)
{
alert("Could not initialise WebGL, sorry :-(");
}
}

var triangleVertexPositionBuffer;

function initBuffers() {
gl.bindAttribLocation(shaderProgram, 0, "vPosition");
}

function drawScene()
{
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];

gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.useProgram(shaderProgram);
gl.vertexAttribPointer(0,3,gl.FLOAT, gl.FALSE, 0, new WebGLFloatArray(vertices));
gl.enableVertexAttribArray(0);
gl.drawArrays(gl.TRINAGLES, 0, 3);
gl.flush();
}

function main()
{
var canvas = document.getElementById("webGLCanvas");
initGL(canvas);
initShaders();
initBuffers();

setInterval(drawScene, 50);
}
</Script>
</Head>

<Body onload="main();">
Demo </br>
<Canvas id="webGLCanvas", width="500", height="500">
</Canvas></br>
Ende
</Body>
</Html>

Coolcat
03-25-2010, 06:17 AM
Check your error messages (*):

glvertexattribpointer: must have GL_ARRAY_BUFFER binding!

You can't draw directly from an array. You will have to create an VertexBufferObject (VBO) first.

(*) e.g. in Firefox/Minefield: Tools -> Error Console

PatrickBamberg
03-25-2010, 07:11 AM
Thanks!

WebKit didn't give me an error message :-(