Home | History | Annotate | Download | only in gpu 
      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <title>WebGL Test: Green Triangle over Black Background</title>
      5 <style type="text/css">
      6 .nomargin {
      7   margin: 0px auto;
      8 }
      9 </style>
     10 
     11 <script id="shader-vs" type="x-shader/x-vertex">
     12 attribute vec3 pos;
     13 void main(void)
     14 {
     15   gl_Position = vec4(pos, 1.0);
     16 }
     17 </script>
     18 
     19 <script id="shader-fs" type="x-shader/x-fragment">
     20 precision mediump float;
     21 void main(void)
     22 {
     23   gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
     24 }
     25 </script>
     26 
     27 <script>
     28 var g_swapsBeforeAck = 15;
     29 var gl;
     30 
     31 function main()
     32 {
     33   var canvas = document.getElementById("c");
     34   gl = initGL(canvas);
     35   if (gl && setup(gl)) {
     36     drawSomeFrames();
     37   } else {
     38     domAutomationController.setAutomationId(1);
     39     domAutomationController.send("FAILURE");
     40   }
     41 }
     42 
     43 function drawSomeFrames()
     44 {
     45   if (g_swapsBeforeAck == 0) {
     46     domAutomationController.setAutomationId(1);
     47     domAutomationController.send("SUCCESS");
     48   } else {
     49     g_swapsBeforeAck--;
     50     draw(gl);
     51     window.webkitRequestAnimationFrame(drawSomeFrames);
     52   }
     53 }
     54 
     55 function initGL(canvas)
     56 {
     57   var gl = null;
     58   try {
     59     gl = canvas.getContext("experimental-webgl");
     60   } catch (e) {}
     61   if (!gl) {
     62     try {
     63       gl = canvas.getContext("webgl");
     64     } catch (e) { }
     65   }
     66   return gl;
     67 }
     68 
     69 function setupShader(gl, source, type) {
     70   var shader = gl.createShader(type);
     71   gl.shaderSource(shader, source);
     72   gl.compileShader(shader);
     73   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
     74     return null;
     75   return shader;
     76 }
     77 
     78 function setupProgram(gl, vs_id, fs_id) {
     79   var vs_node = document.getElementById(vs_id);
     80   var fs_node = document.getElementById(fs_id);
     81   if (!vs_node || !fs_node)
     82     return null;
     83   var vs = setupShader(gl, vs_node.text, gl.VERTEX_SHADER);
     84   var fs = setupShader(gl, fs_node.text, gl.FRAGMENT_SHADER);
     85   if (!vs || !fs)
     86     return null;
     87   var program = gl.createProgram();
     88   gl.attachShader(program, vs);
     89   gl.attachShader(program, fs);
     90   gl.linkProgram(program);
     91   if (!gl.getProgramParameter(program, gl.LINK_STATUS))
     92     return null;
     93   gl.useProgram(program);
     94   return program;
     95 }
     96 
     97 function setupBuffer(gl) {
     98   var buffer = gl.createBuffer();
     99   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    100   var vertexData = [
    101     0.0, 0.6, 0.0,  // Vertex 1 position
    102     -0.6, -0.6, 0.0,  // Vertex 2 position
    103     0.6, -0.6, 0.0,  // Vertex 3 position
    104   ];
    105   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
    106 }
    107 
    108 function setup(gl) {
    109   var program = setupProgram(gl, "shader-vs", "shader-fs");
    110   if (!program)
    111     return false;
    112   var posAttr = gl.getAttribLocation(program, "pos");
    113   gl.enableVertexAttribArray(posAttr);
    114   setupBuffer(gl);
    115   var stride = 3 * Float32Array.BYTES_PER_ELEMENT;
    116   gl.vertexAttribPointer(posAttr, 3, gl.FLOAT, false, stride, 0);
    117   gl.clearColor(0.0, 0.0, 0.0, 0.0);
    118   gl.viewport(0, 0, 200, 200);
    119   gl.disable(gl.DEPTH_TEST);
    120   if (gl.getError() != gl.NO_ERROR)
    121     return false;
    122   return true;
    123 }
    124 
    125 function draw(gl) {
    126   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    127   gl.drawArrays(gl.TRIANGLES, 0, 3);
    128 }
    129 </script>
    130 </head>
    131 <body onload="main()">
    132 <div style="position:relative; width:200px; height:200px; background-color:black"></div>
    133 <div style="position:absolute; top:0px; left:0px">
    134 <canvas id="c" width="200" height="200" class="nomargin"></canvas>
    135 </div>
    136 </body>
    137 </html>
    138