Html 普通WebGL片段着色器仅渲染256个像素中的前150个

我一直在尝试调试为什么当纹理变大时着色器停止工作。在切割、切割和切割之后，我已经达到了一个点，我有一个恒定的输出着色器，只能覆盖纹理的前150个像素

我不知道为什么会有150的边界。它当然不会出现在代码中的任何地方。它也与纹理的大小不成正比：将高度降低到128会得到正确的输出，而将其增加到256会在150时仍然存在边界问题

我已经尽我所知把这个复制品做得很小了。不幸的是，还有很多webgl样板文件。注意，尽管repo忽略了对getError的调用，但原始代码没有（并且没有触发错误）：

let canvas=document.createElement（'canvas'）；
设gl=canvas.getContext（'webgl'）；
const GL=WebGLRenderingContext；
设w=1；
设h=256；
//创建一个最初都是2的纹理。
设twos=新的UINT8阵列（w*h*4）；
对于（设i=0；iconsole.log（result.join（“”）视口不够高。不连续性为150像素/600输出，因为视口默认为创建webgl上下文时画布的大小

只需在绘图调用之前调用
gl.viewport（0，0，w，h）
。
我的意思是您没有设置默认为webgl中画布大小的
gl.viewport
。因此视口大小与纹理大小不匹配。如果添加
gl.视口（0,0，w，h）在您的示例中，我只看到日志1s。为了清楚起见，创建webgl上下文时，视口默认为画布的大小。因此，从技术上讲，视口的默认大小不是300x150，画布的默认大小是300x150。换句话说，如果在调用
getContext
之前将画布大小设置为75x25，则视口将从75x25开始。在那之后，你可以根据自己的需要设置任何新的尺寸。@gman啊，我明白了。当我说“那”时，它可能意味着“画布的当前大小”或“画布的默认大小”。澄清。正如您所注意到的，您需要将视口设置为与要绘制的对象相匹配