javascript - webgl纹理格式,类型和internalFormat的无效组合

标签 javascript webgl textures

我正在尝试将平铺 map 渲染到单个四边形上。为此,我尝试使用纹理,其中包含要从瓦片集中采样的瓦片的列/行。列/行是无符号的 8 位整数。
问题是,我不知道要使用哪种格式/类型组合。我查看了规范,但似乎没有任何效果。
这是我上传数据的方式:

// Some data, representing a 2x2 tile grid
const columns = 2;
const rows = 2;
const data = [
//  col, row, -, -,
    205, 205, 0, 0,
    104, 104, 0, 0,
    104, 104, 0, 0,
    205, 205, 0, 0,
];
const buffer = new Uint8Array(data);
// pretend this creates a HTMLImageElement from the data
const image = Image.from(buffer, columns, rows);

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 
    /* internalformat */ gl.RGBA8UI, 
    /* format */ gl.RGBA,
    /* type */ gl.UNSIGNED_BYTE,
    /* data */ image);
gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

// ... then at some point
gl.activeTexture(gl.TEXTURE0 + 0);
gl.bindTexture(gl.TEXTURE_2D, texture);
tileMapShader.uniforms.uTILEMAP.set(0); // pretend this exists
这就是我尝试渲染数据的方式(没有任何瓦片集采样):
#version 300 es
precision mediump float;
precision mediump usampler2D;

uniform usampler2D uTILEMAP;

in vec2 vTEXCOORD;

out vec4 oFRAG;

void main()
{
    uvec4 data = texture(uTILEMAP, vTEXCOORD);
    oFRAG = vec4(data.r / 255u, data.g / 255u, data.b / 255u, data.a / 255u);
}
着色器的顶点着色器工作正常,我通过渲染平面颜色对其进行了测试。
使用上面的片段着色器,我看到黑屏,并收到警告:
GL_INVALID_OPERATION: Invalid combination of format, type and internalFormat.
什么是有效的组合?

最佳答案

我继续通过尝试尽可能多的组合来暴力破解它,这似乎是

gl.texImage2D(gl.TEXTURE_2D, 
    /* internalformat */ gl.RGBA8UI, 
    /* format */ gl.RGBA_INTEGER,
    /* type */ gl.UNSIGNED_BYTE,
    /* data */ image);
有效,所以问题是提供的格式必须是 RGBA_INTEGER .

关于javascript - webgl纹理格式,类型和internalFormat的无效组合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65022682/

相关文章:

javascript - "Location " Node/javascript 中的属性

unity3d - 如何在非 GUI 元素中使用 "9-sliced"图像类型?

swift - 如何避免快速调整纹理大小

javascript - Three.js 为 faceColors 和 vertexColors 重用几何体

html - 在 WebGL 中与 HTML 背景混合

user-interface - WebGL 中的完整 UI 小部件工具包渲染

three.js - 将 three.js 纹理拆分为 block

javascript - DataTables初始化关键字与官方示例不同

javascript - Laravel Javascript - 检查 session 中是否存在主题,添加类

javascript - 在 WordPress 中使用 javascript 使用 iframe 动态 url