Test Instanced Squares

by flek

HTML

<script src="https://unpkg.com/[email protected]/dist/regl.js"></script>
<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');

const w = 400;
const h = 300;
const dpr = window.devicePixelRatio;

canvas.style.width = `${w}px`;
canvas.style.height = `${h}px`;
canvas.width = w * dpr;
canvas.height = h * dpr;

const extensions = ["angle_instanced_arrays", "oes_standard_derivatives"];
const regl = window.createREGL({ canvas, extensions });

const vertexPositionBuffer = regl.buffer([
  0, 0, 1, 0, 1, 1,
  0, 0, 1, 1, 0, 1
]);

const resolution = [100, 100];
const xdomain = [0, 100];
const ydomain = [100, 100];
const xrange = [100, 100];
const yrange = [100, 100];

const drawTriangle = regl({
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main() {
      gl_FragColor = color;
    }`,

  vert: `
    precision mediump float;
    
    attribute vec4 rect;
    attribute vec2 vertexPosition;
    
    uniform vec2 resolution;
    uniform vec2 xdomain, ydomain;
    uniform vec2 xrange, yrange;
    
    float toXDomain(float v, vec2 domain, vec2 range) {
      float qDomain = (domain.y - domain.x) / (range.y - range.x);
      return domain.x + qDomain * (v - range.x);
    }

    float toXRange(float v, vec2 domain, vec2 range) {
      float qRange = (range.y - range.x) / (domain.y - domain.x);
      return range.x + qRange * (v - domain.x);
    }
  
    
    float toYDomain(float v, vec2 domain, vec2 range) {
      float qDomain = (domain.y - domain.x) / (range.y - range.x);
      return domain.x + qDomain * (v - range.x);
    }

    float toYRange(float v, vec2 domain, vec2 range) {
      float qRange = (range.y - range.x) / (domain.y - domain.x);
      return range.x + qRange * (v - domain.x);
    }
  
    
    vec2 toRange(vec2 v) {
      return vec2(
        toXRange(v.x, xdomain, xrange),
        toYRange(v.y, ydomain, yrange)
      );
    }
    
    vec2 toDomain(vec2 v) {
      return vec2(
        toXDomain(v.x, xdomain, xrange),
        toYDomain(v.y, ydomain, yrange)
      );
    }

    vec4 rangeToClip(vec2 v) {
     ...