examples/samplers.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <!--

    @license twgl.js Copyright (c) 2015, Gregg Tavares All Rights Reserved.
    Available via the MIT license.
    see: http://github.com/greggman/twgl.js for details

    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta property="og:title" content="TWGL.js - samplers" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://twgljs.org/examples/screenshots/samplers.png" />
    <meta property="og:description" content="TWGL.js - samplers" />
    <meta property="og:url" content="http://twgljs.org" />

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@greggman">
    <meta name="twitter:creator" content="@greggman">
    <meta name="twitter:domain" content="twgljs.org">
    <meta name="twitter:title" content="TWGL.js - samplers">
    <meta name="twitter:url" content="http://twgljs.org/examples/samplers.html">
    <meta name="twitter:description" content="TWGL.js - samplers">
    <meta name="twitter:image:src" content="http://twgljs.org/examples/screenshots/samplers.png">

    <link href="/resources/images/twgljs-icon.png" rel="shortcut icon" type="image/png">

    <title>twgl.js - samplers</title>
    <style>
      body {
          margin: 0;
          font-family: monospace;
      }
      canvas {
          display: block;
          width: 100vw;
          height: 100vh;
      }
      #b {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 2;
      }
      #no-webgl2 {
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        color: white;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <div id="b"><a href="http://twgljs.org">twgl.js</a> - samplers</div>
    <div id="no-webgl2" style="display: none;">
      <div>Sorry but your browser doesn't appear to support WebGL2</div>
    </div>
  </body>
  <script id="one-point-vs" type="notjs">
#version 300 es
uniform mat4 u_worldViewProjection;
uniform mat4 u_texMatrix;

in vec4 a_position;
in vec2 a_texcoord;

out vec4 v_position;
out vec2 v_texCoord;

void main() {
  v_texCoord = (u_texMatrix * vec4(a_texcoord, 0, 1)).xy;
  gl_Position = u_worldViewProjection * a_position;
}
  </script>
  <script id="one-point-fs" type="notjs">
#version 300 es
precision mediump float;

in vec4 v_position;
in vec2 v_texCoord;

uniform vec4 u_diffuseMult;
uniform sampler2D u_diffuse;

out vec4 outColor;

void main() {
  vec4 diffuseColor = texture(u_diffuse, v_texCoord) * u_diffuseMult;
  if (diffuseColor.a < 0.1) {
    discard;
  }
  outColor = diffuseColor;
}
  </script>
  <script src="../3rdparty/chroma.min.js"></script>
  <script type="module">
import * as twgl from '../dist/6.x/twgl-full.module.js';

function main() {
  twgl.setDefaults({attribPrefix: "a_"});
  const m4 = twgl.m4;
  const gl = document.getElementById("c").getContext("webgl2");
  if (!gl) {
    document.querySelector("#no-webgl2").style.display = "";
    return;
  }
  const onePointProgramInfo = twgl.createProgramInfo(gl, ["one-point-vs", "one-point-fs"], ["a_texcoord", "a_position"]);

  const shapes = [
    twgl.primitives.createCubeBufferInfo(gl, 2),
//    twgl.primitives.createSphereBufferInfo(gl, 1, 24, 12),
//    twgl.primitives.createPlaneBufferInfo(gl, 2, 2),
//    twgl.primitives.createTruncatedConeBufferInfo(gl, 1, 0, 2, 24, 1),
  ];

  function rand(min, max) {
    if (max === undefined) {
      max = min;
      min = 0;
    }
    return min + Math.random() * (max - min);
  }

  // Shared values
  const baseHue = rand(360);
  const camera = m4.identity();
  const view = m4.identity();
  const viewProjection = m4.identity();

  const ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width  = 8;
  ctx.canvas.height = 8;

  ctx.fillStyle = "#777";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = "#fff";
  ctx.beginPath();
  ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, ctx.canvas.width / 2 - 1, 0, Math.PI * 2);
  ctx.fill();

  const textures = twgl.createTextures(gl, {
    checker: {
      src: ctx.canvas,
    },
  });

  const samplers = twgl.createSamplers(gl, {
    nearest: {
      minMag: gl.NEAREST,
    },
    nearestClampS: {
      minMag: gl.NEAREST,
      wrapS: gl.CLAMP_TO_NEAREST,
    },
    linear: {
      minMag: gl.LINEAR,
    },
    nearestClamp: {
      minMag: gl.NEAREST,
      wrap: gl.CLAMP_TO_EDGE,
    },
    linearClamp: {
      minMag: gl.LINEAR,
      wrap: gl.CLAMP_TO_EDGE,
    },
    linearClampT: {
      minMag: gl.LINEAR,
      wrapT: gl.CLAMP_TO_EDGE,
    },
  });

  // This is soley to make it easy to pick textures at random
  const twoDTextureNames = Object.keys(textures);
  const allSamplers = Object.keys(samplers).map(name => samplers[name]);

  const objects = [];
  const drawObjects = [];
  const numObjects = 200;

  for (let ii = 0; ii < numObjects; ++ii) {
    const shape = shapes[ii % shapes.length];
    const texName = twoDTextureNames[ii % twoDTextureNames.length];
    const texture = textures[texName];
    const sampler = allSamplers[(ii / 2) % allSamplers.length | 0];
    const programInfo = onePointProgramInfo;
    let tx = m4.identity();
    tx = m4.translate(tx, [-.5, -.5, 0]);
    tx = m4.scale(tx, [2, 2, 0]);
    const uniforms = {
      u_diffuseMult: chroma.hsv((baseHue + rand(0, 60)) % 360, 0.7, 0.8).gl(),
      u_diffuse: {
        texture: texture,
        sampler: sampler,
      },
      u_viewInverse: camera,
      u_world: m4.identity(),
      u_worldInverseTranspose: m4.identity(),
      u_worldViewProjection: m4.identity(),
      u_texMatrix: tx,
//      u_texMatrix: m4.scale(m4.translation([-1, -1, 0]), [3, 3, 3]),
    };
    drawObjects.push({
      programInfo: programInfo,
      bufferInfo: shape,
      uniforms: uniforms,
    });
    objects.push({
      translation: [rand(-10, 10), rand(-10, 10), rand(-10, 10)],
      ySpeed: rand(0.1, 0.3),
      zSpeed: rand(0.1, 0.3),
      uniforms: uniforms,
    });
  }

  function render(time) {
    time *= 0.001;
    twgl.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const radius = 20;
    const orbitSpeed = time * 0.1;
    const projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 100);
    const eye = [Math.cos(orbitSpeed) * radius, 4, Math.sin(orbitSpeed) * radius];
    const target = [0, 0, 0];
    const up = [0, 1, 0];

    m4.lookAt(eye, target, up, camera);
    m4.inverse(camera, view);
    m4.multiply(projection, view, viewProjection);

    objects.forEach(function(obj) {
      const uni = obj.uniforms;
      const world = uni.u_world;
      m4.identity(world);
      m4.rotateY(world, time * obj.ySpeed, world);
      m4.rotateZ(world, time * obj.zSpeed, world);
      m4.translate(world, obj.translation, world);
      m4.rotateX(world, time, world);
      m4.transpose(m4.inverse(world, uni.u_worldInverseTranspose), uni.u_worldInverseTranspose);
      m4.multiply(viewProjection, uni.u_world, uni.u_worldViewProjection);
    });

    twgl.drawObjectList(gl, drawObjects);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}
main();
  </script>
</html>