Graphics WebGL绘制透视视图体积

我试图计算视图体积平面的8（4+4）个顶点：近和远

我需要这些顶点来在webGL中绘制摄影机的视图体积

到目前为止，我设法从每个角度使用三角学来计算它们，但当我绘制顶点时，结果似乎并不准确。 到目前为止，我得出了顶点的方程：

y=sqrt（斜边^2-平面^2）

x=sqrt（斜边^2-平面^2）

z=平面（近或远）

---

有人能帮忙吗？提前谢谢。

您可以通过逆投影矩阵投影一个标准立方体

const m4=twgl.m4；
const gl=document.querySelector（“canvas”）.getContext（“webgl”）；
常数vs=`
属性向量4位置；
均匀mat4 u_世界视图投影；
void main（）{
gl_位置=u_世界视图投影*位置；
}
`;
常数fs=`
精密中泵浮子；
void main（）{
gl_FragColor=vec4（1,0,0,1）；
}
`;
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
常量数组={
职位：[
-1,  1, -1,
1,  1, -1,
1, -1, -1,
-1, -1, -1,
-1,  1,  1,
1,  1,  1,
1, -1,  1,
-1, -1,  1,
],
指数：[
0, 1, 1, 2, 2, 3, 3, 0,
4, 5, 5, 6, 6, 7, 7, 4,
0, 4, 1, 5, 2, 6, 3, 7,
],
};
const bufferInfo=twgl.createBufferInfoFromArrays（gl，arrays）；
函数渲染（时间）{
时间*=0.001；
twgl.resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
让我们一起看；
{  
常数fov=30*Math.PI/180；
const aspect=gl.canvas.clientWidth/gl.canvas.clientHeight；
常数zNear=0.5；
常数zFar=100；
projectionToViewWith=m4.透视图（视野、纵横比、zNear、zFar）；
}
让我们看一看；
{
常数fov=30*Math.PI/180；
const aspect=gl.canvas.clientWidth/gl.canvas.clientHeight；
常数zNear=2；
常数zFar=10；
projectionToBeViewed=m4.透视图（视野、纵横比、zNear、zFar）；
}
const inverseProjectionToBeViewed=m4.inverse（projectionToBeViewed）；
常数半径=20；
常数眼=[Math.sin（时间）*半径，4，Math.cos（时间）*半径]；
常量目标=[0,0,0]；
const up=[0,1,0]；
常量摄影机=m4。注视（眼睛、目标、向上）；
常量视图=m4。反向（摄像头）；
const viewProjection=m4.乘法（projectionToViewWith，视图）；
常量worldViewProjection=m4.0(
视图投影，
反向投影（查看）；
总账使用程序（programInfo.program）；
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
twgl.设置制服（程序信息{
世界视图投影：世界视图投影，
});
twgl.drawBufferInfo（总帐，bufferInfo，总帐行）；
请求动画帧（渲染）；
}
请求动画帧（渲染）
body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；}

哇，非常感谢。这实际上在概念上更容易。我试图实现它，但我有一些麻烦的想法。我有两张画布，我想在画布上画画布相机的截头台。我尝试了以下方法（如果我错了，请纠正我）：正如您所说，我创建了一个标准立方体模型。然后，对于该模型的每个点V，我乘以canvasB的V*逆投影矩阵。这给了我一个新的点V“，对应于canvasB的查看量的限制。我现在会有所有正确的点，我可以把它们发送到顶点缓冲区。这给了我一个平行六面体，你除以W了吗<代码>温度=V*反向投影矩阵；newV=temp.xyz/temp.w

它工作了！我按错误的顺序乘法。我对你感激不尽。顺便说一句，我一直在关注你们关于webgl的教程，它们都是黄金。太好了！