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, 解决方案 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 这篇关于在片段着色器中将世界坐标映射到纹理的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
09-05 00:23