中心凹渲染：WebGL可以从屏幕中心向外螺旋渲染顶点/片段着色器吗？
如何告诉WebGL从屏幕中心渲染，然后按顺时针方向向外扩展，如果时间过长，如何取消/停止渲染中心凹渲染：WebGL可以从屏幕中心向外螺旋渲染顶点/片段着色器吗？,webgl,Webgl,如何告诉WebGL从屏幕中心渲染，然后按顺时针方向向外扩展，如果时间过长，如何取消/停止渲染 或者我需要自己手动平铺多张画布，并在所有画布上投影吗？作为我对您问题的评论示例，下面是一个过于简单的中心凹渲染示例。我从渲染到纹理的示例开始 那个 将带纹理的立方体渲染为纹理 将立方体的纹理渲染为画布上的立方体 这个 将纹理立方体渲染为低分辨率纹理 将带纹理的立方体渲染为高分辨率纹理 渲染填充画布的低分辨率纹理 渲染中心的高分辨率纹理 有很多瑕疵，低分辨率纹理的分辨率太低，你需要更好的算法来混合它们，但
或者我需要自己手动平铺多张画布，并在所有画布上投影吗？作为我对您问题的评论示例，下面是一个过于简单的中心凹渲染示例。我从渲染到纹理的示例开始 那个 将带纹理的立方体渲染为纹理 将立方体的纹理渲染为画布上的立方体 这个 将纹理立方体渲染为低分辨率纹理 将带纹理的立方体渲染为高分辨率纹理 渲染填充画布的低分辨率纹理 渲染中心的高分辨率纹理 有很多瑕疵，低分辨率纹理的分辨率太低，你需要更好的算法来混合它们，但它显示了效果 唯一不寻常的事情 将视口更改为仅渲染到中心。也可以通过缩放平面来实现这一点
// Tell WebGL how to convert from clip space to pixels
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
drawRenderTarget(lowResRT);
// Tell WebGL how to convert from clip space to pixels
gl.viewport(
gl.canvas.width / 4,
gl.canvas.height / 4,
gl.canvas.width / 2,
gl.canvas.height / 2);
drawRenderTarget(highResRT);
在这种情况下，该代码计算一个截头体的正确值，其中心和近平面的中心是2单位高和2×纵横单位宽。它计算一个子矩形，而不是。这就是我们如何使高分辨率纹理与低分辨率纹理匹配
// Compute the projection matrix
var near = 1;
// compute a near plane 2 units tall, 2 * aspect high
var vTop = near * Math.tan(fieldOfViewRadians * 0.5);
var vHeight = 2 * vTop;
var vWidth = aspect * vHeight;
var vLeft = -0.5 * vWidth;
// how compute a subrect of that near plane where
// left, bottom are offsets into the computed near plane
// and width, height are the dimensions of the sub rect
vLeft += left * vWidth / 2;
vTop -= bottom * vHeight / 2;
vWidth *= width / 2;
vHeight *= height / 2;
var projectionMatrix =
m4.frustum(vLeft, vLeft + vWidth, vTop - vHeight, vTop, near, 2000);
AFAICT大多数中心凹渲染都不是这样工作的。IIUC大多数中心凹渲染的工作原理是渲染不同分辨率的纹理，然后使用各种技术将它们组合在一起。好吧，格曼说的没错，中心凹渲染不是这样工作的。将画布平铺在一起会非常低效，因为您无法在始终绑定到单个画布的webgl上下文之间共享资源，更不用说您无法以这种方式使用WebVR API，因为这也假设了单个画布。