Skip to content

Latest commit

 

History

History
36 lines (26 loc) · 1.34 KB

README.md

File metadata and controls

36 lines (26 loc) · 1.34 KB

WebGL Sketch

npm

Example

import * as Sketch from 'webgl-sketch';

Sketch.create({
  canvas: document.getElementById('Output'),
  fragmentShaderSource: require('my-fragment.glsl'),
  size: [window.innerWidth, window.innerHeight],
  uniforms: {
    baseColor: [0.424, 0.357, 0.482],
    seed: 42.0
  },
  vertexShaderSource: require('basic-vertex.glsl')
});

API

create (options = {})

Instantiates a WebGL context on a canvas, and renders shaders to it.
Options can include:

  • canvas (optional) – An existing canvas element to render into; if not supplied, a new canvas is created instead.
  • dynamic (optional) – A boolean, whether to animate dynamic rendering of the canvas, which sets the uniform float u_time each render; defaults to false.
  • fragmentShaderSource – GLSL shader source string to use as the fragment shader.
  • size (optional) – An array of [width, height] to size the canvas to; if not supplied, [200, 200] is used.
  • uniforms (optional) – An object to inject as uniforms into the fragment shader, using each key as the uniform name (e.g., "name" as u_name) and the value encoded based on type(s).
  • vertexShaderSource – GLSL shader source string to use as the vertex shader.