在threeJS中将数组数据传递给着色器答案

【问题标题】：pass array data to shader in threeJS在threeJS中将数组数据传递给着色器
【发布时间】：2015-03-25 03:25:49
【问题描述】：

我正在尝试将“volume._data”传递给我在threeJS 中的片段着色器。它是一个 Float32Array，最多可以包含：512x512x512x4 个元素。

  var mat = new THREE.ShaderMaterial({
        uniforms: {
            color: {type: 'f', value: 1.0},
            ijk: {type: '??', value: volume._data},
            dimensions: {type: 'vec3', value: volume._dimensions},
            ijktoras: {type: 'mat4', value: volume._RASToIJK}
        },
        vertexShader: document.
                      getElementById('vertShader').text,
        fragmentShader: document.
                      getElementById('fragShader').text
    });

问题是我不知道该给它哪种类型。或者是传递 2D 纹理的最佳选择？

我对纹理的担心是它太大而无法传递给着色器。

是否有任何解决方法可以将这些信息量传递给着色器？

我的总体目标是，在片段着色器中，将屏幕像素位置映射到对象世界的坐标。然后将这个世界坐标映射到我的volume._data（ijk空间）上以在屏幕上显示特定的颜色。

谢谢你，尼古拉斯

【问题讨论】：

标签： arrays three.js webgl texture2d

【解决方案1】：

查看https://github.com/mrdoob/three.js/wiki/Uniforms-types 获取数组，例如：

"uFloatArray3" : { type: "fv",  value: [ 0.1, 0.2, 0.3, 0.4, 0.5, 0.6 ] }, // float array (vec3)

或

"uVec4Array" : { type: "v4v", value: [ new THREE.Vector4( 0.1, 0.2, 0.3, 0.4 ), 
                                   new THREE.Vector4( 0.4, 0.5, 0.6, 0.7 ) ] }, // Vector4 array

您始终可以将这些数据打包到一个直接数组中并使用分隔符。

就您所做的而言，最好传入 3 个纹理，每个 512x512 并为您的 4 个值访问 RGBA。它不会太慢，在你尝试之前不要太担心优化。

这当然取决于您如何在缓冲区中填充数据。更快的方法是通过使用像素数组的画布，如下所述：https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

【讨论】：

谢谢，我发布了一个与此相关的新问题 :) stackoverflow.com/questions/28173813/…
更新链接：threejs.org/docs/#api/en/core/Uniform，这让我意识到没有 unint 数组，只有 int 数组。有错误Unhandled Rejection (TypeError): u.setValue is not a function。 (Typescript + React + Three.js)

【解决方案2】：

Flux 提供的答案是正确的。对于那些在这里尝试组合体积着色器的人来说，以下内容可能很有用。

您可以使用一维数组来表示 3d 空间，并使用以下方法通过它的 x,y,z 坐标检索正确的数组项。

x,y,z 坐标应该在本地空间（而不是世界）中，原点位于 0,0,0。您需要知道每个 2d 部分的宽度和高度。

假设体素体积为 3x3x3

uniform float[] Voxels;
uniform int Width = 3;
uniform int Height = 3;

float getValueAtVoxel(x,y,z) {
    int voxel = (Width * Height * z) + (y * Width) + x;

    if (voxel < 0 || voxel >= Voxels.length) {
        return 0.0;
    }

    return Voxels[voxel];
}

【讨论】：