(() => {

  const m = new Float32Array([

    0, 0, 0, 0, 

    0, 0, 0, 0, 

    0, 0, 0, 0, 

    0, 0, 0, 0

  ])

  const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);

  const vert = `

    attribute vec3 vec;

    uniform mat4 mat;

    void main(void) {

      gl_Position = mat * vec4(vec, 1.);

      gl_PointSize = ${pointSize}.;

    }

  `

  const frag = `

    void main(void) {

      gl_FragColor = vec4(1., 1., 1., .4);

    }

  `

  document.body.style.background = '#333'

  const gl = document.body

    .appendChild(document.createElement('canvas'))

    .getContext('webgl')

  Object.assign(gl.canvas.style, {

    position: 'absolute',

    left: '50%',

    top: '50%',

    transform: 'translate(-50%, -50%)',

    outline: '1px solid gray'

  })

  with (gl) {

    const NUM = 600

    const verts = []

    for (let i = 0; i < NUM; i++) {

      verts.push(

        Math.random() * 1 - 0.5,

        Math.random() * 1 - 0.5,

        Math.random() * 1 - 0.5

      )

    }

    const leng = verts.length / 3

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

    const vs = createShader(VERTEX_SHADER)

    shaderSource(vs, vert)

    compileShader(vs)

    const fs = createShader(FRAGMENT_SHADER)

    const sp = createProgram()

    shaderSource(fs, frag)

    compileShader(fs)

    attachShader(sp, vs)

    attachShader(sp, fs)

    linkProgram(sp)

    useProgram(sp)

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

    enableVertexAttribArray(vec)

    const matLoc = getUniformLocation(sp, 'mat')

    function rot(x, y, z) {

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

      const sinA = Math.sin(x)

      const cosA = Math.cos(x)

      const sinB = Math.sin(y)

      const cosB = Math.cos(y)

      const sinY = Math.sin(z)

      const cosY = Math.cos(z)

      m[0] = cosA * cosB

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

      m[3] = 0

      m[4] = sinA * cosB

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

      m[7] = 0

      m[8] = -sinB

      m[9] = cosB * sinY

      m[10] = cosB * cosY

      m[11] = m[12] = m[13] = 0

      m[15] = 1

      uniformMatrix4fv(matLoc, false, m)

    }

    onresize = () => {

      const { canvas } = gl

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

      viewport(0, 0, size, size)

    }

    onresize()

    let ry = 0, rz = 0

    disable(DEPTH_TEST)

    enable(BLEND)

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

    function loop() {

      rot(0, ry -= 0.03, rz += 0.001)

      clearColor(0, 0, 0, 1)

      clear(COLOR_BUFFER_BIT)

      drawArrays(POINTS, 0, leng)

      window.requestAnimationFrame(loop)

    }

    loop()

  }

})()