@paosder/gl-variable NPM

gl-variable

Use webGL1 attribute and uniform easily.

This is not documented yet, but type definitions are provided.

Install

> yarn add @paosder/gl-variable @paosder/vector-map

Usage

const gl: WebGLRenderingContext = ...;
const program: WebGLProgram = ...;

const cubes: GLVariable = createGLVariable(gl, program, {
  surface: {
    name: 'a_surface',
    type: 'attribute',
    size: 3,
    length: 24,
    usage: gl.STATIC_DRAW,
    defaultData: points,
  },
  color: {
    name: 'a_color',
    type: 'attribute',
    size: 4,
    usage: gl.DYNAMIC_DRAW,
    length: DEFAULT_CUBE_LENGTH,
    instanced: 1,
  },
  position: {
    name: 'a_position',
    type: 'attribute',
    size: 3,
    usage: gl.DYNAMIC_DRAW,
    length: DEFAULT_CUBE_LENGTH,
    instanced: 1,
  },
  rotation: {
    name: 'a_rotation',
    type: 'attribute',
    size: 4,
    matrix: true,
    usage: gl.DYNAMIC_DRAW,
    length: DEFAULT_CUBE_LENGTH,
    instanced: 1,
  },
  size: {
    name: 'a_size',
    type: 'attribute',
    size: 1,
    usage: gl.DYNAMIC_DRAW,
    length: DEFAULT_CUBE_LENGTH,
    instanced: 1,
  },
});

interface SomeOptions {
    color: Color;
    position: Coordinate;
    rotation: RotationMat;
    size: [number];
}

const options: SomeOptions = { ... };
const id = 'test-object';

addObject(cubes, id, options);

getAttribArray(cubes, id, 'position', (bufferArr: Float32Array) => {
  bufferArr[0] = 1; // change subarray data.
  bufferArr[1] = 0;
  bufferArr[2] = 1;

  return true; // we should return true when we change data and wants to refresh.
});

// Update variable. We should call this function after VAO is plugged in.
updateVariable(gl, program, cubes);