我一直在研究从 Three.js 中的数据创建纹理。 这非常简单，但有一些注意事项，有些部分可能会令人困惑。 很多年前我曾陷入过一些陷阱，最近又再次陷入其中，所以我决定写下来！
NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割
1、什么让（我）感到困惑？
从数据创建新纹理时，你必须设置格式、类型，并以特定类型的 TypedArray 提供数据：
const texture = new DataTexture(data, width, height, format, type, ...);文档里说：
“类型”必须与“格式”相对应。
好的...那么我如何知道为我想要使用的格式设置哪种类型？
2、灰度纹理
在这篇文章中，我将只讨论 WebGL1 的灰度（单通道）纹理，因为它是我当前的重点。 本文其余部分的所有内容都将适用于你想要支持的任何内容。
2.1 哪种格式?
好吧，我想创建一个单通道（灰度）纹理。
在文档的内部格式部分，你可以根据通道数和每个像素的字节数找到最适合你的格式。
亮度非常适合灰度纹理。 需要注意的是，它仅支持 Webgl1 的 UnsignedByte 纹理类型。
如果你使用 WebGL2， R* 格式允许你支持各种不同的位深度。
要了解有关不同文件格式含义的更多信息，我发现此页面很有用，它解释了文件格式后缀 F、 _SNORM 的含义以及如何解释这些类型的纹理。 这对于数据标准化很重要。
2.2 亮度格式允许三种类型（WebGL1）
好吧，我们刚刚了解到，对于 WebGL1，亮度格式采用 UnsignedByte 类型。
我们可以做得更好吗？
如果你的浏览器支持 OES_texture_float 扩展，则一堆新类型（ Float 和 HalfFloat）可用于 LUMINANCE 格式。 （官方文档）
| Format | Type | Byte per Pixel |
|---|---|---|
| RGBA | FLOAT | 16 |
| RGB | FLOAT | 12 |
| LUMINANCE_ALPHA | FLOAT | 8 |
| LUMINANCE | FLOAT | 4 |
| ALPHA | FLOAT | 4 |
| RGBA | HALF_FLOAT_OES | 8 |
| RGB | HALF_FLOAT_OES | 6 |
| LUMINANCE_ALPHA | HALF_FLOAT_OES | 4 |
| LUMINANCE | HALF_FLOAT_OES | 2 |
| ALPHA | HALF_FLOAT_OES | 2 |
2.3 Type转TypedArray
这非常简单：
| Type | Byte per Pixel | Typed Array |
|---|---|---|
| UnsignedByte | 1 | Uint8Array |
| HalfFloat | 2 | Uint16Array |
| Float | 4 | Float32Array |
重要的是类型数组中的位数与表中每个像素的字节数相匹配。 此外，对于 HalfFloat，应适当准备数据。
2.4 访问片段着色器中的数据
所有整数纹理（包括 UnsignedByteType）在上传到着色器时都会自动标准化，而浮动/整数纹理（包括 Float 和 HalfFloat）则按原样传递。
根据格式名称，您可以知道您正在处理哪种类型的数据以及是否会为您进行标准化。 （参考）。
换句话说，在片段着色器中，当使用 UnsignedByteType 纹理时，从纹理 2D 获取的值会自动标准化为 0 到 1 之间。 对于 FloatType 和 HalfFloatType，你将获得类型化数组中的值，而无需任何标准化。
3、示例
- UnsignedByte Texture
const textureSize = 16
const dataSize = 10;
const data = new Uint8Array(dataSize);
for (let i = 0; i < dataSize) {
data[i] = Math.round(Math.random() * 255); // pass anything from 0 to 255
}
const texture = new DataTexture(data, textureSize, textureSize, LUMINACE, UnsignedByteType);varying vec2 vUv;
uniform sampler2D uData;
void main(){
vec3 color;
vec4 data = texture2D( uData, vUv );
gl_FragColor = vec4( data.xyz, 1.0 );
}- HalfFloat Texture
要将数字转换为半浮点数，请按照 Three.js 的方式进行：像这样
⚠️ 将数字转换为半浮点精度时请注意 精度错误！
const textureSize = 16
const dataSize = 10;
const data = new Uint16Array(dataSize);
for (let i = 0; i < dataSize) {
const largeNumber = Math.random() * 10000; // pass anything from 0 to 10000
data[i] = toHalfFloat(largeNumber);
}
const texture = new DataTexture(data, textureSize, textureSize, LUMINACE, HalfFloatType);varying vec2 vUv;
uniform sampler2D uData;
uniform float uMax;
uniform float uMin;
void main(){
vec3 color;
vec4 data = texture2D( uData, vUv );
vec4 normalizedData = (data - uMin) / (uMax - uMin);
gl_FragColor = vec4( data.xyz, 1.0 );
}- Float Texture
const textureSize = 16
const dataSize = 10;
const data = new Float32Array(dataSize);
for (let i = 0; i < dataSize) {
const largeNumber = Math.random() * 10000; // pass anything from 0 to 10000
data[i] = largeNumber;
}
const texture = new DataTexture(data, textureSize, textureSize, LUMINACE, FloatType);varying vec2 vUv;
uniform sampler2D uData;
uniform float uMax;
uniform float uMin;
void main(){
vec3 color;
vec4 data = texture2D( uData, vUv );
vec4 normalizedData = (data - uMin) / (uMax - uMin);
gl_FragColor = vec4( data.xyz, 1.0 );
}原文链接：Three.js数据转纹理 - BimAnt
