index previous next

Draw call

Recap

  1. Get webgl context from canvas
  2. Create vertex data
  3. Put data into GPU buffer
  4. Create vertex shader
  5. Create fragment shader
  6. Create shading program from vertex and fragment shader
  7. Plug in buffer into shading program
  8. Draw

We are finally at point 8. The draw call. Everything is set, so we can celebrate.

Draw call


gl.drawArrays(gl.TRIANGLES, 0, 3)

This will make our triangle finally visible on the screen inside canvas. gl.TRIANGLES says we are drawing triangles

0 - from which element to start rendering. We want all vertices rendered, so start from the very first one.

3 - number of elements to be rendered. We have 3 vertices inside our buffer and we want all of them to be used.

And this is it, finally! You can contemplate your first WebGL triangle.

You can also look at next page which contains working WebGL triangle.

Final code:


<!DOCTYPE html> 

<html>
<head>
<meta charset="UTF-8">
<title>noniwoo webgl tutorial</title>
</head>
<body>
<canvas id="canvas1" width="640" height="480"></canvas>

<script type="unknown" id="vertexShader">
attribute vec3 vertexPos;

void main(void)
{
	gl_Position = vec4(vertexPos, 1.0);
}
</script>


<script type="unknown" id="fragmentShader">
void main(void)
{
	gl_FragColor = vec4(0.2, 0.6, 0.2, 1.0);
}
</script>


<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
	throw "Could not get canvas element!"
}

var gl = canvas.getContext('webgl')
if( gl == null )
{
	gl = canvas.getContext('experimental-webgl')
	if( gl == null )
	{
		throw "Could not get webgl context"
	}
}

gl.clearColor(1.0, 1.0, 0.0, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)

var triangleVertices = new Float32Array([
	 0.0,  1.0,  0.0,  // top
	 1.0, -1.0,  0.0,  // right
	-1.0, -1.0,  0.0   // left
])

var triangleBuffer = gl.createBuffer()
gl.bindBuffer( gl.ARRAY_BUFFER, triangleBuffer )
gl.bufferData( gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW )

var vertexShaderTag = document.getElementById('vertexShader')
var vertexShaderSource = vertexShaderTag.innerHTML
var vertexShader = gl.createShader(gl.VERTEX_SHADER)

gl.shaderSource(vertexShader, vertexShaderSource)
gl.compileShader(vertexShader)
if(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS) != true)
{
	throw "Vertex shader compilation failed!\n" + gl.getShaderInfoLog(vertexShader)
}


var fragmentShaderTag = document.getElementById('fragmentShader')
var fragmentShaderSource = fragmentShaderTag.innerHTML
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

gl.shaderSource(fragmentShader, fragmentShaderSource)
gl.compileShader(fragmentShader)
if(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS) != true)
{
	throw "Fragment shader compilation failed!\n" + gl.getShaderInfoLog(fragmentShader)
}


var program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)

gl.linkProgram(program)
if(gl.getProgramParameter(program, gl.LINK_STATUS) != true)
{
	throw "Program linking failed!\n" + gl.getProgramInfoLog(program)
}

gl.useProgram(program)


var vertexPosLocation = gl.getAttribLocation(program, 'vertexPos')
gl.enableVertexAttribArray(vertexPosLocation)

gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
gl.vertexAttribPointer(vertexPosLocation, 3, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3)

</script>

</body>
</html>

index previous next