Question: forking the CanvasRenderer?

This question is about CanvasRender and the renderers system in general.

TLDR: would it work if I forked CanvasRenderer?

I understand that the CanvasRenderer was removed because WebGL is now commonplace, and reducing the maintenance of an oss library is a good thing… That all makes sense.

However I have a unique use case and I would like to continue using CanvasRenderer. I understand I would have to fork it and maintain the code myself.

What I want to know if it’s possible to do something like this:

  • fork the CanvasRenderer
  • use it with threejs
  • as threejs changes, update CanvasRenderer to stay up to date

I understand that the renderer system is essentially just renderer.render( scene, camera ), so a renderer has to understand the scene and the camera.

Is there an expert that can weigh in on this — whether it’s likely that in the future, the scene or camera APIs may change in a way that would make it really hard for a CanvasRender to render them?

I’m just fishing for information and opinions. Thanks.

Some links:

You can create your own custom renderer based on something else.
Name it what you want and you can use it in your own projects.

Here is an example of where I copied one of @prisoner849 examples into a smaller fiddle.
original :
my smaller version : An Example of using Prisoner849s WireFrameRenderer - JSFiddle - Code Playground


It is a custom quads wireframe renderer and not part of Threejs.
It is basically just a class with its own render function. See lines 21 to 73 in my version.
It draws straight to a HTML canvas. No WebGL involved.
You could create a renderer that writes full stops into the console if you wanted.

You can then use your renderer in place of any other, and you don’t even need to ask for permission.

const renderer = new MyCustomRederer(canvas)
// ... other code
renderer.render(scene, camera)

Here is another custom renderer,

CoordinateRenderer : Custom Renderer - JSFiddle - Code Playground

It renders the OrbitControls azimuth and polar values as geographical coordinates into a screen centred div.
Look for the CoordinateRenderer() class



this is the way.

1 Like