使用WEBGL实现带彩色渐变的Fragment 运行白屏问题求助

你代码里存在两处直接导致白屏的错误，修复后即可正常实现多颜色渐变矩形效果：

错误1：错误调用flatten函数 #

你在传入颜色缓冲区数据时给flatten加了new关键字，flatten是WebGLUtils工具库提供的普通数组转换函数，不是构造函数，加new会抛出运行时错误中断代码执行。

修复代码： #

// 原错误代码
// gl.bufferData(gl.ARRAY_BUFFER, new flatten(colors), gl.STATIC_DRAW);
// 修改为
gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

错误2：未绑定颜色属性到着色器 #

你创建了颜色缓冲区，但没有将缓冲区数据和着色器中的颜色属性变量关联，GPU无法读取颜色数据传递给渲染管线。

修复代码： #

在顶点位置属性绑定逻辑后，新增颜色属性绑定代码：

var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

// 新增以下内容
var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );

着色器检查 #

如果修复后仍有问题，请确认你的着色器代码符合以下逻辑：

• 顶点着色器需声明vColor属性，并通过varying变量传递给片元着色器

attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;

void main() {
    gl_Position = vPosition;
    fColor = vColor;
}

• 片元着色器需接收varying颜色变量并赋值给输出颜色

precision mediump float;
varying vec4 fColor;

void main() {
    gl_FragColor = fColor;
}

内容的提问来源于stack exchange，提问作者markio