Open molicaca opened 2 years ago
Thanks for the report and sorry it's confusing
The first example is manually dividing by Z. The problem with manually dividing by Z is the sign is lost. Example (-6 / -3 = 2). -6 and -3 are negative but after dividing the result is positive.
This is one reason why the space the shader returns is called "clip space" because once the sign is lost it's impossible to clip the triangle correctly all the vertices that are z < 0
get flipped to a positive value.
So, what really happens is your shader returns vertices in clip space by setting gl_Position
. Every 3 vertices make a triangle in clip space, that triangle is clipped in clip space, and after that step the vertices are divided by W.
You can see if you take the 2nd example on the page where we let WebGL do the division it shows the correct image
Sorry if that was confusing.
The point of the first example it to show that dividing by Z will give you the illusion of perspective.
The point of the second example it to show that WebGL does
vertex = gl_Position.xyz / gl_Position.z
It divides by Z for you so you don't do the division yourself like the first example, you let WebGL do it.
I should probably put more details to show why you let WebGL do it.
as for
Also, the code in that example also gets wrong. In this code "float zToDivideBy = 1.0 + position.z u_fudgeFactor;" it should be "float zToDivideBy = (1.0 + position.z) u_fudge
You might be right. For me, it didn't really matter. What mattered was that the image looks like it has perspective (things further away are smaller than things that are near).
Once we've established that dividing by Z gives the illusion of perspective we can go to step 3 and show we can achieve this division using matrices
And step 4 is that there is magic math (math that is unexplained) that will compute a matrix that will give us perspective based on field of view, aspect, near, and far inputs.
Describe the bug It seems some codes are wrong in the first example of 3D Perspective Section.
To Reproduce Steps to reproduce the behavior:
Expected behavior Then in the result figure, the model seems to be worn, just like below
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context Also, the code in that example also gets wrong. In this code "float zToDivideBy = 1.0 + position.z u_fudgeFactor;" it should be "float zToDivideBy = (1.0 + position.z) u_fudgeFactor;".