The use of shader materials to customize the display of an object resulted in abnormal behavior

[wenrenqiang]

this online demo

three.js dev template - module - JSFiddle - Code Playground

I defined a black box with equal length and width in the shader, but when displayed in full screen, the length and width are not equal. Also, with the translation controller, this black box shakes.

[wenrenqiang]

Do you think the problem lies in normalization? If w=2.0 * w * s.x -1.0; The black cube will not deform, but its position will not be at the center origin of the screen