Question

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

生成的颜色＆＃39;只是黑色但webgl不会返回任何错误。

这是我得到的：

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

enter image description here

我的着色器：

<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>

以及三个JS部分的相关部分：

  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;
  }

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

最佳，

Answer 1

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

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

1 个答案: