Two.js: Webgl renderer is just a canvas rendered as a texture on a plane ?

[Muini]

Hi hi !
I took a look at the code of the WebGL renderer, and noticed this. It's not like Three.js Shape renderer. Is this right ?
Then, could it work with the three.js Shape renderer to render full SVG (gradient, stroke etc... included) ?

Thanks !

[jonobr1]

Thanks for the message and question @Muini. Hopefully these responses answer your question:

1. Yes, the WebGLRenderer is simply the canvas renderer onto planes. At the time of conception (2012!), engineers on the Chrome Team actually recommended this direction instead of building out the geometry as Three.js does. Despite this recommendation, I used Three.js as a core dependency for the alpha version of Two.js and built all the geometry out internal to the library. The downside to this was that (again, at the time in 2012) there was high fidelity stroke / line rendering in Three, there was only the GL_LINE native rendering which has certain limitations that SVG and Canvas2d don't exhibit. So, I opted for the texture uploading method that is present today. That being said, I have had some discussion at some point to attempt to offload the texture uploading in favor of signed distance field rendering in the fragment shader (see https://github.com/jonobr1/two.js/issues/237#issuecomment-364539302). With the right setup, this can radically improve performance for the WebGLRenderer.

2. This example (link) shows how you can use Two.js and Three.js in concert to create extruded 3D shapes. Though this exists, the SVG importing functionality that is native to Three.js was originally based off Two.js' interpret function. So you should be able to also import SVGs directly into Three.js.

[adroitwhiz]

I actually came up with a (really rough) renderer a while back that draws SDFs on a 2D canvas using a clever hack and then packs them into a WebGL texture. If you change the shape of a path you'd still need to re-render it but scaling works fine.

I can put it up on GitHub soon but it's still a rough prototype.

[jonobr1]

Woah, I would _love_ to see that. Curious how you handle the vertices (if it's a traditional vertex attribute or something more creative).

[adroitwhiz]

It's probably not as clever as you're thinking--it's essentially just drawing the path on a 2D canvas but slightly fuzzy around the edges, so all you need to draw is a quadrilateral.

The SDF is in red, the rendered path is in orange.

[jonobr1]

Interesting, interesting. Still excited to see your approach!

[Muini]

Thank you both. So, right now the three.js way is the only way, I know of, to render SVG on WebGL.

I will keep an eye on this, SDF is a very interesting approach, I would love to see more !

[jonobr1]

If what you're looking for is actual triangulation and generation through vertex attributes, faces, etc. then yes Three.js is a leading candidate. Though there are many WebGL frameworks out there.