Canvas 将世界坐标映射到纹理';片段着色器中的s值
我正在尝试使用threeJS将世界坐标映射到片段着色器中的纹理值 生成的“颜色”仅为黑色,但webgl不返回任何错误 以下是我得到的:Canvas 将世界坐标映射到纹理';片段着色器中的s值,canvas,three.js,glsl,webgl,texture2d,Canvas,Three.js,Glsl,Webgl,Texture2d,我正在尝试使用threeJS将世界坐标映射到片段着色器中的纹理值 生成的“颜色”仅为黑色,但webgl不返回任何错误 以下是我得到的: 在3D中,我在webgl中得到了什么(黑色切片而不是图像) 在2D画布中,我在webgl中应该做什么 我的着色器: <script id="vertShader" type="shader"> varying vec4 vPos; void main() { vPos = modelViewMatrix * vec4(positio
- 在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>
我的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;
}
var\u dims=[numberCols,numberRows,numberSlices];
var\u imagerba=新的Float32Array(\u dims[2]*\u dims[1]*\u dims[0]*4);
对于(var i=0;i问题是我们试图显示的纹理无效。新线程创建关于此特定问题:我知道这有点懒,但已检查采样器是否正确绑定?您可以尝试使用其他纹理或固定纹理坐标。这可能会返回非黑色值(即:0.5)是的,你是对的,问题是我生成纹理的方式必须正确,但仍然不是运气(请参见编辑)
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;
}