pixel_webgl.html - Android社区 - https://www.androidos.net.cn/

<!DOCTYPE HTML>

<!-- READ BEFORE UPDATING:
If this test is updated make sure to increment the "revision" value of the
associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure
that the baseline images are regenerated on the next run.
-->

<html>
<head>
<title>WebGL Test: Green Triangle over Black Background</title>
<style type="text/css">
.nomargin {
  margin: 0px auto;
}
</style>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 pos;
void main(void)
{
  gl_Position = vec4(pos, 1.0);
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void)
{
  gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
</script>

<script>
var g_swapsBeforeAck = 15;
var gl;

function main()
{
  var canvas = document.getElementById("c");
  gl = initGL(canvas);
  if (gl && setup(gl)) {
    drawSomeFrames();
  } else {
    domAutomationController.setAutomationId(1);
    domAutomationController.send("FAILURE");
  }
}

function drawSomeFrames()
{
  if (g_swapsBeforeAck == 0) {
    domAutomationController.setAutomationId(1);
    domAutomationController.send("SUCCESS");
  } else {
    g_swapsBeforeAck--;
    draw(gl);
    window.webkitRequestAnimationFrame(drawSomeFrames);
  }
}

function initGL(canvas)
{
  var gl = null;
  try {
    gl = canvas.getContext("experimental-webgl");
  } catch (e) {}
  if (!gl) {
    try {
      gl = canvas.getContext("webgl");
    } catch (e) { }
  }
  return gl;
}

function setupShader(gl, source, type) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
    return null;
  return shader;
}

function setupProgram(gl, vs_id, fs_id) {
  var vs_node = document.getElementById(vs_id);
  var fs_node = document.getElementById(fs_id);
  if (!vs_node || !fs_node)
    return null;
  var vs = setupShader(gl, vs_node.text, gl.VERTEX_SHADER);
  var fs = setupShader(gl, fs_node.text, gl.FRAGMENT_SHADER);
  if (!vs || !fs)
    return null;
  var program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS))
    return null;
  gl.useProgram(program);
  return program;
}

function setupBuffer(gl) {
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  var vertexData = [
    0.0, 0.6, 0.0,  // Vertex 1 position
    -0.6, -0.6, 0.0,  // Vertex 2 position
    0.6, -0.6, 0.0,  // Vertex 3 position
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
}

function setup(gl) {
  var program = setupProgram(gl, "shader-vs", "shader-fs");
  if (!program)
    return false;
  var posAttr = gl.getAttribLocation(program, "pos");
  gl.enableVertexAttribArray(posAttr);
  setupBuffer(gl);
  var stride = 3 * Float32Array.BYTES_PER_ELEMENT;
  gl.vertexAttribPointer(posAttr, 3, gl.FLOAT, false, stride, 0);
  gl.clearColor(0.0, 0.0, 0.0, 0.0);
  gl.viewport(0, 0, 200, 200);
  gl.disable(gl.DEPTH_TEST);
  if (gl.getError() != gl.NO_ERROR)
    return false;
  return true;
}

function draw(gl) {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}
</script>
</head>
<body onload="main()">
<div style="position:relative; width:200px; height:200px; background-color:black"></div>
<div style="position:absolute; top:0px; left:0px">
<canvas id="c" width="200" height="200" class="nomargin"></canvas>
</div>
</body>
</html>