index previous next

Fragment shader

  1. Create fragment shader
    1. write fragment shader code
    2. embed fragment shader code into the page and get that code into string
    3. create fragment shader object
    4. put fragment shader code inside fragment shader object
    5. compile fragment shader

Recap

This is our plan

  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

and we have done points 1-4. Time for fragment shader.

Fragment shader

Every point in creating fragment shader is the same as for vertex shader, except for the source code for the shader itself and with an exception of shader type. Because of it I will not go into the same details again. Only differing things will be explained.

As you have read, fragment shader is responsible for computing pixel color. It it also written in GLSL (OpenGL Shading Language), just as vertex shader.

Our fragment shader will just use constant color for pixels, so our triangle will be in a single color. This is the code.


void main(void)
{
	gl_FragColor = vec4(0.2, 0.6, 0.2, 1.0);
}

Again we have main function that does not accept, nor returns any value. gl_FragColor is fragment shader's output variable. It says what color should pixel have. Color is given as a 4-component vector type in format red, green, blue, alpha. Every one in range 0.0 to 1.0. We are setting that color to greenish. Just as gl_Position was mandatory output variable for vertex shader, gl_FragColor is mandatory output variable for fragment shader. Code of every fragment shader must set its value.

Fragment shader specific code is given below.


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

<!-- later in the code -->

<script>
<!-- ... -->

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

</script>

Whole code with vertex and fragment shader creation is below.


<!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)
}


</script>

</body>
</html>

index previous next