How to draw 2D lines without a scene in a WebGL context?

Questions
1

Hi!

I’m not sure if what I’m thinking of is at all possible.
Consider that I’m working on this multiple elements example.
Now imagine that I want to draw a dashed/dotted line from, for example, the bottom right corner of Scene 1 to the top left corner of Scene 7.

I’ve tried using Path2D, but I’m using a WebGL context (like the Three.js example shown) and therefore can’t use canvas.getContext('2d'); as explained in the Path2D documentation.

I’m new to Computer Graphics on the Web, so can someone tell me what approaches do I have available?

Thank you :slight_smile:

2

https://threejs.org/docs/#api/en/renderers/WebGLRenderer.getContext

edit: wait, you want 2d context? then just place another canvas on top of 3D

3 Likes
3

Interesting approach.
Won’t a canvas occlude the other? I mean, I could probably specify the z-index property with CSS and that would fix that.
I’ll let you know and mark as a solution if I make it work!

1 Like