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