We have to calculate the intersection with the screen plane mathematically which is not difficult - continue reading on the next page.Within this section, we establish rendering the edges between two points. The steps of transformation through camera space and screen space are packed into functions (since we need to re-use these steps when calculating how many pixels an edge will consume) and the ability to specify a custom radius r for each point becomes added in order to make the edges appear like lines while the points remain rendered as bigger, colored dots.
In the function drawEdge, in order to draw a solid edge (ie. not dotted), a number gets calculated thats twice the number of pixels counted in between the final display of the edges two points. Then, points become automatically generated, those in the number of that number that we just calculated. Each points gets rendered (with half radius and grey) - grey edges will appear in between our colored dots.
Instead of letting the user move around, we just circularly move the camera location.
Since the script was not working on my older mobile phone (while the script previous page did, flawlessly) - i performed some logging here.
I found the reasons: performance.now() and window.requestAnimationFrame() are only available in modern browser - one needs to use older Date.now() and window.setTimeout() instead!
We have to calculate the intersection with the screen plane mathematically which is not difficult - continue reading on the next page.Continued in lesson 6