我试图在WebGL中使用3D纹理,但由于它目前不受本地支持,我不得不使用2D图像的技巧。它由64幅图像组成,每幅图像为64 of乘64 of (总计64x4096)。我想张贴一个链接,但我没有足够的xp所以(认真地?),你仍然可以找到文件url在小提琴更低。
我使用了gman溶液以及我自己的(最近的邻居)。在这两种情况下,当我使用斜投影()时,灰条纹伪影都有一个奇怪的呈现问题。
当投影是斜的时,条纹/破折号似乎出现在切片之间,并且取决于摄像机的位置,它们不以相同的频率出现。这就是为什么我想到的是渲染问题,而不是抽样问题。
有人知道如何处理这些文物吗?有什么内置的OpenGL ES可以启用/禁用吗?
这是着色代码:
<!-- FRAGMENT SHADER -->
<script id="fragment_shader1_custom3" type="x-shader/x-fragment">
uniform sampler2D texture;
uniform float imageIndex;
varying vec4 worldCoord;
varying vec2 vUv;
// tex is a texture with each slice of the cube placed in grid in a texture.
// texCoord is a 3d texture coord
// size is the size if the cube in pixels.
// slicesPerRow is how many slices there are across the texture
// numRows is the number of rows of slices
vec2 computeSliceOffset(float slice, float slicesPerRow, vec2 sliceSize) {
return sliceSize * vec2(mod(slice, slicesPerRow),
floor(slice / slicesPerRow));
}
vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size, float numRows, float slicesPerRow){
float slice = texCoord.z * size;
float sliceZ = floor(slice); // slice we need
float zOffset = fract(slice); // dist between slices
vec2 sliceSize = vec2(1.0 / slicesPerRow, // u space of 1 slice
1.0 / numRows); // v space of 1 slice
vec2 slice0Offset = computeSliceOffset(sliceZ, slicesPerRow, sliceSize);
vec2 slice1Offset = computeSliceOffset(sliceZ + 1.0, slicesPerRow, sliceSize);
vec2 slicePixelSize = sliceSize / size; // space of 1 pixel
vec2 sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels
vec2 uv = slicePixelSize * 0.5 + texCoord.xy * sliceInnerSize;
vec4 slice0Color = texture2D(tex, slice0Offset + uv);
vec4 slice1Color = texture2D(tex, slice1Offset + uv);
return mix(slice0Color, slice1Color, zOffset);
}
void main( void ) {
// the position within the shader
vec2 shaderPos = vUv;
// if outside the texture cube, use a yellow color
if(worldCoord.x < 0.0 || worldCoord.x >= 1.0 || worldCoord.y < 0.0 || worldCoord.y >= 1.0 || worldCoord.z < 0.0 || worldCoord.z >= 1.0){
gl_FragColor = vec4(1.0, 1.0 , 0.0, 1.0);
}else{
vec3 chunkPosition = vec3(worldCoord.x, worldCoord.y, worldCoord.z);
// 63.0 instead of 64.0 to avoid a edge situation
gl_FragColor = sampleAs3DTexture(texture, chunkPosition, 63.0, 64.0, 1.0);
}
}
</script> <!-- END FRAGMENT SHADER -->
<!-- VERTEX SHADER -->
<script id="vertexShader_custom1" type="x-shader/x-vertex">
varying vec2 vUv;
varying vec4 worldCoord;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
worldCoord = modelMatrix * vec4( position, 1.0 );
}
</script> <!-- END VERTEX SHADER -->
注意,我使用的是ThreeJS。谢谢你的帮助。
发布于 2016-10-25 12:05:35
正如您自己发现的,解决方案是在js代码中使用texture.minFilter ()加载纹理之后设置THREE.TextureLoader= THREE.NearestFilter (为此,请将js代码附加到您的问题中,这可能有助于将来的用户在堆栈溢出时处理这个问题)。
现在解释一下条纹:当你的像素接近你改变切片的一个平面时,变量sliceZ就会跳跃。你会遇到像素覆盖多个纹理的情况。请注意,像素的一部分位于某个v坐标,而部分像素位于v坐标,而v坐标的大小与纹理的64个像素相对应(以获取下面的图像)/我的猜测是,隐藏的机器相信,您的像素覆盖了64个纹理像素的v-跨度,因此获得了这些像素的平均值(在.minFilter中默认的mip地图设置已经预先计算了这一平均值)。
https://stackoverflow.com/questions/40244206
复制相似问题