Initialization - actnwit/RhodoniteTS GitHub Wiki

Initialization of Rhodonite is simple.

In the Rn.System.init method, specify the process approach and the Canvas to draw to. Don't forget to specify await.

Depending on which process approach is chosen, the internal processing of WebGL differs. For the latest Rhodonite we recommend DataTexture.

await Rn.System.init({
  approach: Rn.ProcessApproach.DataTexture,
  canvas: document.getElementById('world')
};

List of Process Approaches

Type	Characteristics
Uniform	Uniform variables are used to pass shader parameters; this is suitable for troubleshooting because you can check the parameters to be passed to the uniform variables in e.g. spector.js.
DataTexture	Uses floating-point textures for passing shader parameters. This allows a large number of parameters to be passed, making it suitable for mobile devices. On the other hand, there are cases of performance degradation when rendering at high resolutions.

Summary

The following is a summary of the code up to this point.

// Set up System (specify process approach and pass in canvas)
await Rn.System.init({
  approach: Rn.ProcessApproach.DataTexture,
  canvas: document.getElementById('world')
});

Rhodonite initialization is now complete. Now it is time to create 3D data by writing the necessary data in code or reading it from a file such as glTF, and pass it to the System's process method via an Expression instance for rendering. The specific method is explained on the next page.