WebGL创建4x2红绿网格纹理显示异常，求排查代码bug

问题根源 #

WebGL 纹理的像素数据遵循从上到下的存储顺序（第一个像素对应纹理左上角），同时你的纹理坐标将画布左上角映射到了纹理的y=0位置，两者叠加导致最终显示的纹理上下颠倒，与预期的红绿网格不符。

修复方案（二选一即可） #

方案1：调整纹理坐标，翻转T轴

修改纹理坐标缓冲区的数据，将每个坐标的y值反转，让画布左上角对应纹理的y=1位置（即纹理底部）：

// 原纹理坐标数据
// new Float32Array([
//     0.0, 0.0,
//     1.0, 0.0,
//     0.0, 1.0,
//     0.0, 1.0,
//     1.0, 0.0,
//     1.0, 1.0,
// ])

// 修改后的纹理坐标数据
new Float32Array([
    0.0, 1.0,
    1.0, 1.0,
    0.0, 0.0,
    0.0, 0.0,
    1.0, 1.0,
    1.0, 0.0,
])

方案2：反转纹理像素数据的行顺序

将传入texImage2D的像素数据行颠倒，让纹理的第一行（左上角）对应你预期的第二行数据：

// 原像素数据
// new Uint8Array([    
//     ...r, ...g, ...r, ...g,
//     ...g, ...r, ...g, ...r,
// ])

// 修改后的像素数据
new Uint8Array([    
    ...g, ...r, ...g, ...r,
    ...r, ...g, ...r, ...g,
])

修复后效果 #

两种方案都能让纹理显示为你预期的4x2红绿交替网格：第一行红绿红绿，第二行绿红绿红。

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