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>