使用带有three.js的纹理图集时立方体边缘的接缝

本文介绍了使用带有three.js的纹理图集时立方体边缘的接缝的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

在three.js中使用纹理图集时，立方体的水平面之间有接缝.
这是演示:
这里我使用了重复和偏移:

 var materials = [];var t = [];var imgData = document.getElementById("texture_atlas").src;for ( var i = 0; i <6; i ++ ) {t[i] = THREE.ImageUtils.loadTexture(imgData);//2048x256t[i].repeat.x = 1/8;t[i].offset.x = i/8;//t[i].magFilter = THREE.NearestFilter;t[i].minFilter = THREE.NearestFilter;t[i].generateMipmaps = false;material.push( new THREE.MeshBasicMaterial( { map: t[i], overdraw: 0.5 } ) );}var skyBox = new THREE.Mesh(new THREE.CubeGeometry(1024, 1024, 1024), new THREE.MeshFaceMaterial(materials));skyBox.applyMatrix(new THREE.Matrix4().makeScale(1, 1, -1));场景添加(天空盒)；

图集的大小为 2048x256(2 的幂).我也尝试过手动 UV 映射而不是重复，但结果是一样的.我使用 8 个瓦片而不是 6 个瓦片，因为我认为除法 1/6 的精度会导致问题，但不是.

这条线上的像素来自地图集中的下一个图块.我尝试了完全白色的地图集，没有任何人工制品.这就解释了为什么 Z 面的垂直边界上没有接缝.我玩过过滤器、wrapT、wrapS 和 mipmap，但它没有帮助.提高分辨率无济于事.有 8192x1024 图集

否则，更简单的解决方案是为每个面使用不同的纹理.Webgl 支持立方体纹理，通常大部分时间用于实现天空盒.

I have seams between horizontal faces of the cube when use texture atlas in three.js.
This is demo: http://jsfiddle/rnix/gtxcj3qh/7/ or http://jsfiddle/gtxcj3qh/8/ (from comments)

Screenshot of the problem:
Here I use repeat and offset:

    var materials = [];
    var t = [];
    var imgData = document.getElementById("texture_atlas").src;
    for ( var i = 0; i < 6; i ++ ) {
      t[i] = THREE.ImageUtils.loadTexture( imgData ); //2048x256
      t[i].repeat.x  = 1 / 8;
      t[i].offset.x = i / 8;
      //t[i].magFilter = THREE.NearestFilter;
      t[i].minFilter = THREE.NearestFilter;
      t[i].generateMipmaps = false;
      materials.push( new THREE.MeshBasicMaterial( { map: t[i], overdraw: 0.5 } ) );
    }

    var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024), new THREE.MeshFaceMaterial(materials) );
    skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
    scene.add( skyBox );

The atlas has size 2048x256 (power of two). I also tried manual UV-mapping instead of repeat, but the result is the same. I use 8 tiles instead of 6 because I have thought precision of division 1/6 causes the problem, but not.

Pixels on this line are from next tile in atlas. I tried completly white atlas and there was not any artefacts. This explains why there are not seams on vertical borders of Z-faces. I have played with filters, wrapT, wrapS and mipmaps but it does not help. Increasing resolution does not help. There is 8192x1024 atlas http://s.getid/jsfiddle/atlas.png I tried another atlas, the result is the same.

I know that I can split atlas into separate files and it works perfectly but it is not convenient.

Whats wrong?

解决方案

I think the issue is the filtering problem with texture sheets. On image borders in a texture sheet, the gpu may pick the texel from either the correct image or the neighbor image due to limited precision. Because the colors are usually very different, this results in the visible seams. In regular textures, this is solved with CLAMP_TO_EDGE.

If you must use texture alias, then you need to fake CLAMP_TO_EDGE behavior by padding the image borders. See this answer https://gamedev.stackexchange/questions/61796/sprite-sheet-textures-picking-up-edges-of-adjacent-texture. It should look something like this: (exaggerated borders for clarity)

Otherwise, the simpler solution is to use a different texture for each face. Webgl supports the cube texture and that is usually used the majority of the time to implement skyboxes.

这篇关于使用带有three.js的纹理图集时立方体边缘的接缝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！