lots-of-polys-example.html

Enable keyboard shortcuts

<!--

Copyright (c) 2019 The Khronos Group Inc.

Use of this source code is governed by an MIT-style license that can be

found in the LICENSE.txt file.

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>WebGL Lots of polygons example.</title>

<link rel="stylesheet" href="../resources/js-test-style.css"/>

<script src="../js/js-test-pre.js"></script>

<script src="../js/webgl-test-utils.js"> </script>

</head>

<body>

<canvas id="example" width="1024" height="1024" style="width: 40px; height: 40px;">

</canvas>

<div id="description"></div>

<div id="console"></div>

<script>

"use strict";

window.onload = init;

debug("Tests a WebGL program that draws a bunch of large polygons");

function init() {

  if (confirm(

      "After clicking OK your machine may become unresponsive or crash.")) {

    main();

  } else {

    debug("cancelled");

function main() {

  var wtu = WebGLTestUtils;

  var canvas = document.getElementById("example");

  canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false);

  canvas.addEventListener("webglcontextrestored", function(e) { }, false);

  var gl = wtu.create3DContext(canvas);

  var program = wtu.setupTexturedQuad(gl);

  assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup.");

  var tex = gl.createTexture();

  gl.enable(gl.BLEND);

  gl.disable(gl.DEPTH_TEST);

  wtu.fillTexture(gl, tex, 4096, 4096, [0, 192, 128, 255], 0);

  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating texture");

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting texture params");

  var loc = gl.getUniformLocation(program, "tex");

  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after getting tex locations");

  gl.uniform1i(loc, 0);

  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting tex uniform");

  var numQuads = 100000;

  var indexBuf = new ArrayBuffer(numQuads * 6);

  var indices = new Uint8Array(indexBuf);

  for (var ii = 0; ii < numQuads; ++ii) {

    var offset = ii * 6;

    indices[offset + 0] = 0;

    indices[offset + 1] = 1;

    indices[offset + 2] = 2;

    indices[offset + 3] = 3;

    indices[offset + 4] = 4;

    indices[offset + 5] = 5;

  var indexBuffer = gl.createBuffer();

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating index buffer");

  gl.drawElements(gl.TRIANGLES, numQuads * 6, gl.UNSIGNED_BYTE, 0);

  wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing");

  var successfullyParsed = true;

</script>

</body>

</html>