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 = texture2D(tex, gl_PointCoord);
}
`;

const prg = twgl.createProgram(gl, [vs, fs]);
const tex = twgl.createTexture(gl, {
  src: 'https://i.imgur.com/KjUybBD.png',
}, () => {
  gl.useProgram(prg);
  gl.drawArrays(gl.POINTS, 0, 1);
})