content/test/data/gpu/pixel_webgl.html

   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>