test_draw.html (3176B)
1 <!DOCTYPE HTML> 2 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 3 4 <title>WebGL test: Basic drawing</title> 5 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 8 <script src="driver-info.js"></script> 9 <script src="webgl-util.js"></script> 10 11 12 <script id="vs" type="x-shader/x-vertex"> 13 14 attribute vec2 aVertCoord; 15 16 void main(void) { 17 gl_Position = vec4(aVertCoord, 0.0, 1.0); 18 } 19 20 </script> 21 <script id="fs" type="x-shader/x-fragment"> 22 23 precision mediump float; 24 25 void main(void) { 26 gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 27 } 28 29 </script> 30 <body> 31 <canvas id="c" width="64" height="64"></canvas> 32 <script> 33 34 // Give ourselves a scope to return early from: 35 (function() { 36 var gl = c.getContext('webgl'); 37 if (!gl) { 38 todo(false, 'WebGL is unavailable.'); 39 return; 40 } 41 42 gl.disable(gl.DEPTH_TEST); 43 44 var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs'); 45 if (!prog) { 46 ok(false, 'Program linking should succeed.'); 47 return; 48 } 49 50 prog.aVertCoord = gl.getAttribLocation(prog, "aVertCoord"); 51 ok(prog.aVertCoord >= 0, '`aVertCoord` should be valid.'); 52 53 function checkGLError(func, info, refValue) { 54 if (!refValue) 55 refValue = 0; 56 57 var error = gl.getError(); 58 func(error == refValue, 59 '[' + info + '] gl.getError should be 0x' + refValue.toString(16) + 60 ', was 0x' + error.toString(16) + '.'); 61 } 62 63 var vertCoordArr = new Float32Array([ 64 -1, -1, 65 1, -1, 66 -1, 1, 67 1, 1, 68 ]); 69 var vertCoordBuff = gl.createBuffer(); 70 gl.bindBuffer(gl.ARRAY_BUFFER, vertCoordBuff); 71 gl.bufferData(gl.ARRAY_BUFFER, vertCoordArr, gl.STATIC_DRAW); 72 73 var indexArr = new Uint16Array([ 74 0, 1, 2, 75 3, 76 ]); 77 var indexBuff = gl.createBuffer(); 78 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuff); 79 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArr, gl.STATIC_DRAW); 80 81 82 function testPixel(x, y, refData, func, infoString) { 83 var pixel = new Uint8Array(4); 84 gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel); 85 86 var pixelMatches = pixel[0] == refData[0] && 87 pixel[1] == refData[1] && 88 pixel[2] == refData[2] && 89 pixel[3] == refData[3]; 90 func(pixelMatches, infoString); 91 } 92 93 function preDraw(info) { 94 gl.clearColor(1.0, 0.0, 0.0, 1.0); 95 gl.clear(gl.COLOR_BUFFER_BIT); 96 97 testPixel(0, 0, [255, 0, 0, 255], ok, '[' + info + '] Should be red before drawing.'); 98 } 99 100 function postDraw(info) { 101 testPixel(0, 0, [0, 255, 0, 255], ok, '[' + info + '] Should be green before drawing.'); 102 } 103 104 gl.useProgram(prog); 105 gl.enableVertexAttribArray(prog.aVertCoord); 106 gl.vertexAttribPointer(prog.aVertCoord, 2, gl.FLOAT, false, 0, 0); 107 108 // Start drawing 109 checkGLError(ok, 'after setup'); 110 111 preDraw('DrawArrays'); 112 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 113 postDraw('DrawArrays'); 114 checkGLError(ok, 'after DrawArrays'); 115 116 preDraw('DrawElements'); 117 gl.drawElements(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_SHORT, 0); 118 postDraw('DrawElements'); 119 checkGLError(ok, 'after DrawElements'); 120 121 ok(true, 'Test complete.'); 122 })(); 123 124 </script>