Render Pipeline - actnwit/RhodoniteTS GitHub Wiki

Rhodonite allows for intricate rendering such as refraction and MSAA, but this inherently requires complex rendering pass settings. This requires general real-time rendering knowledge and is not easy for everyone to do.

image

For this reason, Rhodonite provides a mechanism called the render pipeline. The render pipeline is a class of complex multi-pass setups already built in, which allows users to easily benefit from advanced expressions such as refraction and MSAA. (like the URP (Universal Render Pipeline) in the Unity engine).

Currently, there is only one rendering pipeline, ForwardRenderPipeline, but another pipeline may be added in the future.

ForwardRenderPipeline

The render pipeline for the Forward rendering method.

import Rn from '... /... /... /dist/esm/index.mjs';

const p = document.createElement('p');
document.body.appendChild(p);

declare const window: any;

(async () => {
  Rn.Config.isUboEnabled = false;
  const canvas = document.getElementById('world') as HTMLCanvasElement;
  await Rn.System.init({
    approach: Rn.ProcessApproach.FastestWebGL2,
    canvas,
  });

  Rn.MeshRendererComponent.isDepthMaskTrueForTransparencies = true;

  // create ForwardRenderPipeline
  const forwardRenderPipeline = new Rn.ForwardRenderPipeline();
  forwardRenderPipeline.setup(canvas.width, canvas.height);

  // camera
  const {cameraComponent, cameraEntity} = createCamera();

  // gltf
  const mainExpression = await Rn.GltfImporter.import(
    '... /... /... /assets/gltf/glTF-Sample-Models/2.0/IridescentDishWithOlives/glTF-Binary/IridescentDishWithOlives.glb',
    {
      cameraComponent: cameraComponent,
      defaultMaterialHelperArgumentArray: [
        {
          makeOutputSrgb: false,
        },
      ],
    }
  );

  // env
  const envExpression = createEnvCubeExpression(
    '. /... /... /... /assets/ibl/papermill',
    cameraEntity
  );

  const mainRenderPass = mainExpression.renderPasses[0];
  // cameraController
  const mainCameraControllerComponent = cameraEntity.getCameraController();
  const controller =
    mainCameraControllerComponent.controller as Rn.OrbitCameraController;
  controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity);
  controller.dolly = 0.83;

  forwardRenderPipeline.setExpressions([envExpression, mainExpression]);

  // lighting
  setIBL('. /... /... /... /assets/ibl/papermill');

  const draw = function (frame) {
    Rn.System.process(frame);
  };

  forwardRenderPipeline.startRenderLoop(draw);
})();

Usage

First, create the ForwardRenderPipeline with new, then call the setup method.

  // create ForwardRenderPipeline
  const forwardRenderPipeline = new Rn.ForwardRenderPipeline();
  forwardRenderPipeline.setup(canvas.width, canvas.height);

Next, set the array of Expressions you want to draw with the setExpressions method.

  forwardRenderPipeline.setExpressions([envExpression, mainExpression]);

Call forwardRenderPipeline's startRenderLoop() method instead of Rn.System.startRenderLoop(). Set the drawing function as an argument. The first argument of the passed function is a frame object from the forwardRenderPipeline, which is used to call the Rn.System.process method.

  const draw = function (frame) {
    Rn.System.process(frame);
  };
  forwardRenderPipeline.startRenderLoop(draw);