Draw a noisy triangle with WebGL using Regl and Glslify

index.js

// file: src/index.js
const glsl = require('glslify')
const regl =  require('regl')();

/* Tutorial: https://vallandingham.me/regl_intro.html */
const drawTriangle = regl({
  vert: glsl.file('./shaders/noise.vert'),
  frag: glsl.file('./shaders/noise.frag'),

  attributes: {
    position: [[0, -1], [-1, 0], [1, 1]],
  },

  count: 3,
});

drawTriangle();

noise.frag

// file: src/shaders/noise.frag
// fragment shaders don't have a default precision
precision mediump float;

// import perlin noise function
#pragma glslify: noise = require(glsl-noise/simplex/2d)

void main() {
  // gl_FragCoord gives pixel coords rel. to origin = lower-left corner of window, 
  // pixel center at half-pixel center => origin = (0.5, 0.5)
  float brightness = noise(gl_FragCoord.xy);

  gl_FragColor = vec4(brightness, 0, 0, 1);
}

noise.vert

// file: src/shaders/noise.vert
attribute vec2 position;

void main() {
  gl_Position = vec4(position, 0, 1);
}

package.json

{
  "name": "webgl-example",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "budo src/index.js --live"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "glsl-noise": "*",
    "glslify": "^7.1.1",
    "regl": "^2.1.0"
  },
  "devDependencies": {
    "budo": "^11.7.0"
  },
  "browserify": {
    "transform": [ "glslify" ]
  }
}

Webgl-example.md

Install dependencies

$ npm install

Run on webbrowser

$ npm start