mirror of
https://github.com/servo/servo.git
synced 2025-06-19 14:48:59 +01:00
eb502bdbb8
I also removed flackyness of the clearColor test, hopefully it's fixed now that a lot of race conditions have disappeared thanks to @glennw.
70 lines
2 KiB
HTML
70 lines
2 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>WebGL drawArrays test</title>
|
|
<!--
|
|
This test should generate a 256x256 green square
|
|
on a 512x512 canvas
|
|
-->
|
|
<style>
|
|
html, body { margin: 0 }
|
|
</style>
|
|
<canvas id="c" width="512" height="512"></canvas>
|
|
<script id="vertex_shader" type="x-shader/x-vertex">
|
|
attribute vec2 a_position;
|
|
|
|
void main() {
|
|
gl_Position = vec4(a_position, 0, 1);
|
|
}
|
|
</script>
|
|
|
|
<script id="fragment_shader" type="x-shader/x-fragment">
|
|
void main() {
|
|
gl_FragColor = vec4(0, 1, 0, 1); // green
|
|
}
|
|
</script>
|
|
<script>
|
|
var gl = document.getElementById('c').getContext('webgl');
|
|
|
|
// Clear white
|
|
gl.clearColor(1, 1, 1, 1);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
|
// Create the program
|
|
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
|
|
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
|
|
program = gl.createProgram();
|
|
|
|
gl.shaderSource(vertex_shader,
|
|
document.getElementById('vertex_shader').textContent);
|
|
gl.shaderSource(fragment_shader,
|
|
document.getElementById('fragment_shader').textContent);
|
|
gl.compileShader(vertex_shader);
|
|
gl.compileShader(fragment_shader);
|
|
gl.attachShader(program, vertex_shader);
|
|
gl.attachShader(program, fragment_shader);
|
|
gl.linkProgram(program);
|
|
gl.useProgram(program);
|
|
|
|
// Get the position from the fragment shader
|
|
var position = gl.getAttribLocation(program, "a_position");
|
|
|
|
// Square as two triangles
|
|
var square_data = new Float32Array([
|
|
-0.5, 0.5, // top left
|
|
0.5, 0.5, // top right
|
|
-0.5, -0.5, // bottom left
|
|
-0.5, -0.5, // bottom left
|
|
0.5, 0.5, // top right
|
|
0.5, -0.5 // bottom right
|
|
]);
|
|
|
|
// Create a buffer for the square with the square
|
|
// vertex data
|
|
var square_buffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);
|
|
|
|
gl.enableVertexAttribArray(position);
|
|
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
|
|
gl.drawArrays(gl.TRIANGLES, 0, square_data.length);
|
|
</script>
|