Drawing a triangle

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 :frowning:
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>


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

Thanks!

WebKit didn’t give me an error message :frowning: