WebGL 纹理问题（奇怪的图形故障和映射问题）

Posted 2023-03-23

【中文标题】WebGL 纹理问题（奇怪的图形故障和映射问题）

【英文标题】：WebGL Issue with Texturing (Weird graphical glitches and mapping issue)

【发布时间】：2014-08-29 16:03:39

【问题描述】：

我的问题是，当使用 WebGL 并尝试读取 OBJ 模型时，纹理映射非常混乱。这是 Blender 中的样子。

当我这么说的时候，我可能完全不理解，但我相信在右侧窗口中，带有红点的小白圈代表 UV 坐标 (0,0)，这意味着左侧和/或下方的其他坐标其中包含一个负数。

这是 WebGL 中的输出

映射完全关闭（我尝试过钳位和重复无济于事），中间有一些奇怪的噪音。所以我的问题是，如何从 Blender 中获得介于 0 和 1 之间的正确 UV 坐标以及消除 WebGL 中的噪音。

这是纹理加载方法在将纹理传递给 WebGL 以在绘制循环中渲染之前的样子

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);

更新 不保持顶点顺序时：

【问题讨论】：

制作一个表面并添加简单的纹理贴图（生成坐标），然后将其导出到 obj 并使用文本编辑器打开。这是 OBJ 文件结构en.wikipedia.org/wiki/Wavefront_.obj_file 确保它们导出正确。

【参考方案1】：

通过确保我以 (s,t) 而不是 (x,y,z) 的形式获取 UV 坐标来修复。通过按 2 个一组（就像我应该做的那样）而不是按 3 个一组抓取单个坐标，我能够每次都完美地映射纹理坐标。