将世界坐标映射到片段着色器中的纹理值答案

【问题标题】：map world coordinate to a texture's value in fragment shader将世界坐标映射到片段着色器中的纹理值
【发布时间】：2015-03-26 06:20:54
【问题描述】：

我正在尝试使用 threeJS 将世界坐标映射到片段着色器中的纹理值。

生成的“颜色”只有黑色，但 webgl 不返回任何错误。

这是我得到的：

在 3D 中，我在 webgl 中得到的（黑色切片而不是图像）
在 2D 画布中，我应该在 webgl 中。

我的着色器：

<script id="vertShader" type="shader">

varying vec4 vPos;

void main() {
    vPos = modelViewMatrix * vec4(position, 1.0 );
    gl_Position = projectionMatrix *
                  modelViewMatrix * vec4(position, 1.0 );
}
</script>

<script id="fragShader" type="shader">

uniform mat4 rastoijk;
uniform sampler2D ijk;
uniform vec3 dimensionsIJK;

varying vec4 vPos;

void main(void) {
    // get IJK coordinates of current element
    vec4 ijkPos = rastoijk * vPos;
    //convert IJK coordinates to texture coordinates
    float sliceIndex = float(ijkPos[2])*(float(dimensionsIJK[0])*float(4))*float(dimensionsIJK[1]);
    float rowIndex = ijkPos[1]*(dimensionsIJK[0]*float(4));
    float colIndex = ijkPos[0]*float(4);
    vec2 textureCoordinates = vec2(colIndex, sliceIndex + rowIndex);
    vec3 color = texture2D( ijk, textureCoordinates ).rgb;

    gl_FragColor = vec4(color, 1.0);
  }
</script>

以及threeJS部分的相关部分：

  var mat = new THREE.ShaderMaterial({
        uniforms: {
            ijk: {type: 't', value: ijkRGBATex},
            dimensionsIJK: {type: 'v3', value: new THREE.Vector3( dimensions[0], dimensions[1], dimensions[2] )},
            rastoijk: {type: 'm4', value: new THREE.Matrix4().set(rasijk[0], rasijk[4], rasijk[8], rasijk[12],
                                         rasijk[1], rasijk[5], rasijk[9], rasijk[13],
                                         rasijk[2], rasijk[6], rasijk[10], rasijk[14],
                                         rasijk[3], rasijk[7], rasijk[11], rasijk[15])}
        },
        vertexShader: document.
                      getElementById('vertShader').text,
        fragmentShader: document.
                      getElementById('fragShader').text
    });

我的 IJK 纹理生成如下：

ijkRGBATex = new THREE.DataTexture( _imageRGBA, _dims[0].length * 4, _dims[1]*_dims[2], THREE.RGBAFormat );

地点：

var _dims = [numberCols, numberRows, numberSlices];
var _imageRGBA = new Float32Array(_dims[2] *_dims[1] * _dims[0] * 4);
  for(var i=0; i<_data.length; i++){
    _imageRGBA[4*i] = _imageRGBA[4*i + 1] = _imageRGBA[4*i + 2] = ((_data[i] - _min) / (_max - _min));
    _imageRGBA[4*i + 3] = 1;
  }

我尝试做的事情是否有意义？我不希望它在那里正确，但我在纹理中看不到任何白色像素，这是最有问题的。

最好的，

【问题讨论】：

我知道这是一个懒惰的答案，但检查过采样器是否正确绑定？您可以尝试使用其他纹理或固定纹理坐标。这可能会返回一个非黑色值（即：0.5）。
是的，你是对的，问题是我生成纹理的方式必须是正确的，但仍然不是运气（见编辑）
stackoverflow.com/questions/28188775/…

标签： canvas three.js glsl webgl texture2d

【解决方案1】：

问题是我们试图显示的纹理无效。关于这个特定问题的新线程创建：generate texture from array in threejs

【讨论】：