RenderingModule

[components / rendering / RenderingModule.js]
https://github.com/WhitestormJS/whitestorm.js/blob/dev/src/framework/components/rendering/RenderingModule.js

WHS.RenderingModule is an abstract class, that defines the rendering plugin API.

Your WHS.World instance can have one RenderingModule that will draw its Scene from its Camera point a view into the screen, or a framebuffer that can be used for post processing effects.

There is two rendering plugins provided in WhitestormJS :

• BasicRendering - that is used by default by any WHS.World instance, and do basic WebGLRenderer drawing to the screen
• PostProcessor - that can be used to combine multiple rendering passes to achieve post procesing effects.

How to configure your WHS.World to use a rendering plugin

Default

By default, WHS.World internaly use a WHS.BasicRendering plugin, so you don't need to do anything to set up this plugin.

Specific

If you want to set a different plugin to your world instance, you should proced like this :

JavaScript

let world = new WHS.World(params);

world.$rendering = new WHS.YourRenderingModule(renderingParams);
let plugin = world.$rendering;

plugin.doThings(...);

📘

It is important to use it like this, and only assign the new YourRenderingModule(...) to world.renderingPlugin. Do not store it directly!

to see more, look at the post processing examples.

Implementing your own rendering plugin

If you want to do advanced rendering, you can create your own rendering plugin like that :
(note that you MUST re-implement those methods, or your plugin won't work)

JavaScript

import { RenderingModule } from '../RenderingModule';

class YourRenderingModule extends RenderingModule {
  constructor(params = {}) {
    super(params);
    return (world) => {
      this.world = world;
      return this;
    }
  }

  build(params = {}) {
   /* build your THREE.js rendering objects here, usually 
   you'll want to instaciate and store a WebGLRenderer here. */
  }

  renderPlugin(scene, camera, delta) {
    /* This is the render callback that will be called on each frames */
  }

  setSize(width, height) {
    /* propagate or resize your plugin rendering elements */ 
  }
}