Webgl 为什么不'；我正在用GL.POINTS绘制的这些体素是否对齐？我怎样才能修好它？

我一直在使用webgl开发体素引擎。它使用gl.points根据到点的距离使用正方形绘制体素

下面是它工作原理的基本知识

Vertex: 

//Get position using the projection matrix and block XYZ 
gl_Position =  uMatrix * uModelMatrix * vec4(aPixelPosition[0],-aPixelPosition[2],aPixelPosition[1],1.0);

//Set size of point based on screen height and divide it by depth to size based on distance
gl_PointSize = (uScreenSize[1]) / gl_Position[2];

这是从一个没有问题的角度来看的

你可以看到，它看起来正是我想要的（当然它没有真正的立方体那么好，但在移动设备上的预制件非常棒），现在让我们进入这个空心立方体，看看它是什么样子。这张照片是我向角落里看的

我更改了背景色以突出显示问题。基本上，如果你直接看积木，它们工作得很好，但是如果它们与你成一定角度，它们太小，留下很大的间隙。这张照片是我正对着墙看的

你可以看到面向后墙的设计非常完美，但其他所有的墙看起来都很糟糕

很明显，我做错了什么，或者没有正确地思考一些事情。我尝试了很多不同的方法来修复它，但没有一种修复方法能够正常工作

我尝试过使屏幕边缘的块变大，这解决了问题，但也使不需要的块变大。比如说，看一面平墙，即使看一面平墙没有问题，边缘也会变得更大

我也尝试过把正方形做得更大，这样可以修复它，但是它们到处重叠，看起来不那么干净

您可以在这里看到问题的示例（只需一秒钟即可生成结构） WASD-运动

---

箭头键/鼠标-查看

假设将投影矩阵分离出来，我想您希望

vec4 modelViewPosition = view * model * position;

gl_PointSize = someSize / -modelViewPosition.z;

gl_Position = projection * modelViewPosition;

“严格使用”；
/*全局窗口，twgl，requestAnimationFrame，文档*/
常数高度=120；
常数宽度=30
常量位置=[]；
常量颜色=[]；
常量正常=[]；
对于（设z=0；z{
如果（键[键]）{
const dir=camera.slice（move.ndx，move.ndx+3）；
const delta=v3.mulScalar（dir，deltaTime*speed*move.target）；
v3.添加（目标、增量、目标）；
如果（移动眼睛）{
v3.添加（眼、三角、眼）；
}    
}
});
总账使用程序（programInfo.program）；
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
//调用gl.activeTexture、gl.bindTexture、gl.uniformXXX
twgl.设置制服（程序信息{
投影，
modelView，
});  
//调用gl.DrawArray或gl.drawElements
twgl.drawBufferInfo（总帐，bufferInfo，总帐点数）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
window.addEventListener（'key