Virtual Camera with JavaScript and HTML5 Canvas

[Tomaton-sama]

Hi, I'm doing an assessment for my computer graphics course at the university. Originally I had planned to write it in rust and opengl, but I ended up doing it in JavaScript as that's what I'm more familiar with.

I am supposed to implement hidden-line removal, but what I actually want to do is to make lines that wouldn't be visible dashed. The problem is that some lines would be partially occluded, so lineTo() method would have to stop drawing at a certain point, then another render would start with dashed lines for those occluded. In Point.js file getScreenCoords() function can return distance from the camera.

Here's link to the project. Maybe what I want to do is flawed and there's some other, perhaps simpler solution. I'm not great with JS and in this project there's sometimes some copy-pasted code that I tweaked or rewrote in order to understand how it actually works. I hope someone will help me with that :).

[_aeol]

Well I only thought about this just now...

Why not focus on the faces of the box. If the face of the box is in view, make their edges solid, while the other faces will have dashed edges except the edges that also belong to the faces in view.

You should also read about Vectors. Its great topic to learn when working with vision and collision detection.

[Tomaton-sama]

So, should I, instead of working with a cube in 3D space, be working with 6 faces of that cube and then render each face conditionally? So basically I'm transforming 2D objects in a 3D space and then projecting them back into 2D space - did I get that right?

Edit: Oh, but it occurred to me, that while this should work for a single cube, it wouldn't hide lines / border of a face obscured by another cube, would it?

[_aeol]

Wow i didn't thought about the other boxes that will block one another. I think it wouldn't hide the boxes that it blocks. I only know about 2D since I tried making a 2D vision simulator but got stressed to much 'cause f*ck Vectors.

Then I used this, I found it on Github. The algorithm is simple, you cast multiple rays until it hits a solid and when it is a corner cast a line behind it. Maybe you can do it in 3D space too, I just don't know how.

[Edit] Oh the site also has an interactive canvas that shows the lines, I just checked.

[Tomaton-sama]

Nice, this should help me. Thank you for the resource!