gpu.js/examples/random.html at master · JavaScriptBench/gpu.js

66 lines (58 loc) · 1.46 KB

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GPU.js Random Examples</title>
</head>
<body>
  <h2>CPU Random</h2>
  <canvas id="cpu-random-output"></canvas>
  <h2>WebGL1 Random</h2>
  <canvas id="web-gl-random-output"></canvas>
  <h2>WebGL2 Random</h2>
  <canvas id="web-gl2-random-output"></canvas>
</body>
<script src="../dist/gpu-browser.min.js"></script>
<script>
  let cpu, webGL, webGL2;

  cpu = new GPU({
    mode: 'cpu',
    canvas: document.getElementById('cpu-random-output')
  });
  try {
    webGL = new GPU({
      mode: 'webgl',
      canvas: document.getElementById('web-gl-random-output')
    });
  } catch (e) {}
  try {
    webGL2 = new GPU({
      mode: 'webgl2',
      canvas: document.getElementById('web-gl2-random-output')
    });
  } catch (e) {}

  function drawRandomFunction() {
    this.color(Math.random(), Math.random(), Math.random());
  }

  const cpuDrawRandom = cpu.createKernel(drawRandomFunction)
    .setGraphical(true)
    .setOutput([100, 100]);

  const webGLDrawRandom = webGL
    ? webGL.createKernel(drawRandomFunction)
      .setGraphical(true)
      .setOutput([100, 100])
    : () => {};

  const webGL2DrawRandom = webGL2
    ? webGL2.createKernel(drawRandomFunction)
      .setGraphical(true)
      .setOutput([100, 100])
    : () => {};

  function draw() {
    cpuDrawRandom();
    webGLDrawRandom();
    webGL2DrawRandom();

    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);
</script>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expand file tree

Search code, repositories, users, issues, pull requests...

FilesExpand file tree

random.html

Latest commit

History

random.html

File metadata and controls

Expand file tree