Skip to content

Instantly share code, notes, and snippets.

@roboshoes
Created July 8, 2018 02:05
Show Gist options
  • Save roboshoes/ff601935154b95444cb96e82c062ee83 to your computer and use it in GitHub Desktop.
Save roboshoes/ff601935154b95444cb96e82c062ee83 to your computer and use it in GitHub Desktop.
Setup to use canvas-recorder in combination with image-shader.
import { draw, options, stop, start, bootstrap } from "canvas-recorder/gl";
import { ImageShader } from "image-shader";
// @ts-ignore
import fragment from "./fragmant.glsl";
const SIZE = 1024;
const canvas = document.createElement( "canvas" );
canvas.width = SIZE;
canvas.height = SIZE;
const context = canvas.getContext( "2d" );
const shader = new ImageShader( canvas, fragment );
options( {
size: [ SIZE, SIZE ],
canvas: shader.domElement,
record: false,
clear: false,
color: "black",
} );
draw( ( _, time: number ) => {
// use context vairable here to draw
shader.update();
} );
bootstrap();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment