map world coordinate to a texture's value in fragment shader

ε祈祈猫儿з 提交于 2019-12-12 05:28:22

问题


I am trying to map a world coordinate to a texture's value in the fragment shader using threeJS.

The generated 'color' is only black but webgl doesn't return any error.

Here is what I get:

  • in the 3D, what I get in webgl (black slice instead of an image)
  • in the 2D canvas, what I should in webgl.

My shaders:

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

and the relevant part of the threeJS part:

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

and my IJK texture is generated as below:

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

where:

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

Does what I try to do make sense at all? I don't expect to have it correct there but I do not see any white pixels in my texture, which is the most problematic.

Best,


回答1:


issue is that the texture we are trying to display is not valid. New thread create about this specific issue: generate texture from array in threejs



来源:https://stackoverflow.com/questions/28173813/map-world-coordinate-to-a-textures-value-in-fragment-shader

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!