简单的WebGL片段着色器仅渲染256像素中的前150个

Question

我一直在尝试调试为什么纹理变大时着色器会停止工作。 剪切和剪切之后，我已经达到了一个恒定输出着色器的作用，该着色器仅设法覆盖纹理的前150个像素。

我不知道为什么在150处会有一个边界。它肯定不会出现在代码中的任何地方。 它也与纹理的大小不成比例：将高度减小到128可提供正确的输出，而将其增大到256仍会在150处出现边界问题。

我已将复制缩小到我所知的程度。 不幸的是，仍然有很多webgl样板。 请注意，尽管reproom省略了对getError的调用，但原始代码却没有（并且没有触发任何错误）：

 let canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl'); const GL = WebGLRenderingContext; let w = 1; let h = 256; // Create a texture that's initially all 2s. let twos = new Uint8Array(w*h*4); for (let i = 0; i < twos.length; i++) twos[i] = 2; let texture = gl.createTexture(); let framebuffer = gl.createFramebuffer(); gl.bindTexture(GL.TEXTURE_2D, texture); gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer); gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST); gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST); gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE); gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE); gl.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, w, h, 0, GL.RGBA, GL.UNSIGNED_BYTE, twos); gl.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, texture, 0); gl.bindBuffer(GL.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(GL.ARRAY_BUFFER, new Float32Array([-1,1,1,1,-1,-1,1,-1]), GL.STATIC_DRAW); gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(GL.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,2,1,2,3,1]), GL.STATIC_DRAW); // Create a set-all-to-1s shader. let glVertexShader = gl.createShader(GL.VERTEX_SHADER); let glFragmentShader = gl.createShader(GL.FRAGMENT_SHADER); let program = gl.createProgram(); gl.shaderSource(glVertexShader, "attribute vec2 position;void main(){gl_Position = vec4(position, 0, 1);}"); gl.shaderSource(glFragmentShader, "void main(){gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0)/255.0;}"); gl.compileShader(glVertexShader); gl.compileShader(glFragmentShader); gl.attachShader(program, glVertexShader); gl.attachShader(program, glFragmentShader); gl.linkProgram(program); gl.useProgram(program); gl.enableVertexAttribArray(gl.getAttribLocation(program, 'position')); gl.vertexAttribPointer(gl.getAttribLocation(program, 'position'), 2, WebGLRenderingContext.FLOAT, false, 0, 0); // Should cause all the texture's pixels to get painted [1,1,1,1]. gl.drawElements(GL.TRIANGLES, 6, GL.UNSIGNED_SHORT, 0); // Read texture's pixels. let result = new Uint8Array(w * h * 4); gl.readPixels(0, 0, w, h, GL.RGBA, GL.UNSIGNED_BYTE, result); console.log(result.join("")); 

当我运行上面的代码片段时，控制台记录了600个（600 = 150 * 4），随后是424个二进制：

1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111112222222222222222222222222222222222222222
2222222222222222222222222222222222222222222222222222222222222222
2222222222222222222222222222222222222222222222222222222222222222
2222222222222222222222222222222222222222222222222222222222222222
2222222222222222222222222222222222222222222222222222222222222222
2222222222222222222222222222222222222222222222222222222222222222
2222222222222222222222222222222222222222222222222222222222222222

是什么原因造成的？

Answer 1

视口不够高。 不连续性为150像素/ 600输出，因为画布的默认高度为150像素 ，并且在创建webgl上下文时视口默认为画布的大小。

只需在绘图调用之前调用gl.viewport(0, 0, w, h) 。