glsl-schlick-curve

This is a glslify module for Ken Perlin's bias and gain functions. Implemented using Christophe Schlick's fast bias alternative function.

Found through the schlick-curve javascript module. Explained by demofox including this useful interactive visualization

installation

npm install glsl-schlick-curve

API

This module exports two functions that can be used by glslify.

#pragma glslify: getBias = require('glsl-schlick-curve/bias.glsl')
#pragma glslify: getGain = require('glsl-schlick-curve/gain.glsl')

usage

This example below is also in the repo as ./example.js. Running npm install followed by npm start will start a budo instance that live updates against the example.js file.

const regl = require('regl')()
const glsl = require('glslify')

const squareGeometry = [
  // top left triangle
  [-1, 1],
  [-1, -1],
  [1, 1],
  // bottom right triangle
  [-1, -1],
  [1, -1],
  [1, 1],
]

const draw = regl({
  vert: `
    precision highp float;
    attribute vec2 position;
    varying vec2 vPosition;

    void main () {
      gl_Position = vec4(position, 0, 1);
      vPosition = position;
    }
  `,
  frag: glsl`
    precision highp float;
    uniform float tick;
    varying vec2 vPosition;

    #pragma glslify: getGain = require('./gain.glsl')

    void main () {
      vec3 color = vec3(
        getGain(
          mod(tick * 0.001, 1.0),
          distance(vec2(0.0), vPosition)
        )
      );
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  attributes : {
    position: squareGeometry,
  },
  uniforms: {
    tick: ({ tick }) => tick,
  },
  count: squareGeometry.length,
})

regl.frame(() => {
  regl.clear({
    color: [1, 1, 1, 1],
  })
  draw()
})