Prodecural Texture on Point

by Gregg Tavares

HTML

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

JavaScript

const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
attribute vec4 position;
void main() {
  gl_Position = position;
  gl_PointSize = 128.0;
}
`;

const fs = `
precision highp float;
uniform sampler2D tex;
void main() {
  gl_FragColor = vec4(
    fract(gl_PointCoord.xy * 4.0),
    0, 1);
}
`;

const prg = twgl.createProgram(gl, [vs, fs]);
gl.useProgram(prg);
gl.drawArrays(gl.POINTS, 0, 1);