This is a simple WebGL shader example.
I used a simple HTML5 example with one canvas.
The canvas has named glscreen. The next step is to put one javascript with one var named buffer.
The buffer var is used for one array. The Float32Array typed array represents an array of 32-bit floating point numbers.
This var come with this source code into init function.
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]),
gl.STATIC_DRAW
);
We can see also we have two functions: init and render and this:
var gl;
var canvas;
var buffer;
window.onload = init;
I put also two default shaders for vertex and fragment.
I use some vars for this into init function:
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;
This is the script:
<!DOCTYPE html>
<head>
<title>WebGL – Hello World!</title>
</head>
<body>
<script type=”text/javascript”>
var gl;
var canvas;
var buffer;
window.onload = init;
function init() {
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;
canvas = document.getElementById(‘glscreen’);
gl = canvas.getContext(‘experimental-webgl’);
canvas.width = 640;
canvas.height = 480;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]),
gl.STATIC_DRAW
);
render();
}
function render() {
window.requestAnimationFrame(render, canvas);
shaderScript = document.getElementById(“2d-vertex-shader”);
shaderSource = shaderScript.text;
vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, shaderSource);
gl.compileShader(vertexShader);
shaderScript = document.getElementById(“2d-fragment-shader”);
shaderSource = shaderScript.text;
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, shaderSource);
gl.compileShader(fragmentShader);
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
positionLocation = gl.getAttribLocation(program, “local_position”);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
<script id=”2d-vertex-shader” type=”x-shader/x-vertex”>
attribute vec2 local_position;
void main() {
gl_Position = vec4(local_position, 0, 1);
}
</script>
<script id=”2d-fragment-shader” type=”x-shader/x-fragment”>
void main() {
gl_FragColor = vec4(gl_FragCoord.x / 640.0, gl_FragCoord.y / 480.0, 0, 1);
}
</script>
<canvas id=”glscreen”></canvas>
</body>
</html>
The result is this:
