# Renderer

modV's rendering capabilities can be extended with custom renderers. Renderers define the Module types which can be used.

The default renderers in modV are 2d, shader and isf.

modV.use('renderer', {
  name: 'isf',
  render: function() {},
  setup: function() {},

# name

  • Type: string
  • Default: undefined

Sets the name of the Renderer. This name is also used when defining a Module's type.

# render

  • Type: function
  • Default: undefined

Function that renders the Module to the given Canvas. Accepts a RenderContext Object as the only argument.


function render(RenderContext) {
  const { canvas: { width, height }, context } = RenderContext;
  // …some render code

  context.drawImage(renderedImage, 0, 0, width, height);

# RenderContext

key type info
RenderContext.Module object The current Module instance being rendered
RenderContext.canvas HTMLCanvas The Canvas element to draw to
RenderContext.context CanvasRenderingContext2D The 2D Context of RenderContext.canvas
RenderContext.pipeline boolean true if the current Layer in Pipline mode
RenderContext.video HTMLVideo Video Element playing the Webcam stream
RenderContext.features object Object containing key-value pairs of the requested audio features
RenderContext.meyda Meyda The Meyda instance, for Meyda.windowing or other Meyda utilities
RenderContext.delta DOMHighResTimeStamp The Deltatime returned by modV's main requestAnimationFrame loop
RenderContext.bpm number The current BPM
RenderContext.kick boolean true if BeatDetektor heard a kick, false otherwise

# setup

  • Type: function
  • Default: undefined

Function which sets up a Module when initialising a new instance. Accepts a Module Object as the only argument.


function setup(Module) {
  const fragmentShader = Module.fragmentShader;
  const vertexShader = Module.vertexShader;

  // …build a WebGL program and append it to a store or the Module
  // (or other setup code, depending on your renderer's needs)

  return Module;