Results 1 to 3 of 3

Thread: Drawing a triangle

  1. #1

    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
    Maybe someone can give me hint what is wrong with the program.

    Thanks
    Patrick
    Code :
       <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>

  2. #2
    Member Coolcat's Avatar
    Join Date
    Oct 2009
    Location
    NRW, Germany
    Posts
    75

    Re: Drawing a triangle

    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

  3. #3

    Re: Drawing a triangle

    Thanks!

    WebKit didn't give me an error message

Similar Threads

  1. drawing triangle strips in bulk
    By Pakka in forum Developers Coding:Beginner
    Replies: 0
    Last Post: 04-19-2011, 01:33 PM
  2. How OpenGL should render triangle?
    By Nick in forum OpenGL ES general technical discussions
    Replies: 1
    Last Post: 07-10-2010, 04:28 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •