three.js透明png紋理奇怪的邊框webgl

我在使用png作爲three.js中的紋理時遇到了一個奇怪的問題。 png在可見區域和透明區域之間的區域會出現奇怪的邊界。我已經嘗試過玩alphatest的價值，但是有時候圖像會在真正很薄的1px行的地方完整地消失。有沒有解決方法如何解決這個問題？three.js透明png紋理奇怪的邊框webgl

var explosionTexture = new THREE.ImageUtils.loadTexture('explosion.png'); 
     boomer = new TextureAnimator(explosionTexture, 4, 4, 16, 55); // texture, #horiz, #vert, #total, duration. 
     var explosionMaterial = new THREE.MeshBasicMaterial({ map: explosionTexture }); 
     explosionMaterial.transparent = true; 
     var cube2Geometry = new THREE.PlaneGeometry(64, 64, 1, 1); 
     cube2 = new THREE.Mesh(cube2Geometry, explosionMaterial); 
     cube2.position.set(100,26,0); 
     scene.add(cube2); 


     // renderer 

     //renderer = new THREE.WebGLRenderer({ antialias: false, premultipliedAlpha: true }); 
     renderer = new THREE.WebGLRenderer({ antialias: false });

來源

2013-07-02 greenglow

一些代碼將是偉大的 – Muath

在這裏你可以看到1px的細線的外觀在編輯器： [1]：http://i.imgur.com/Www2PsR.png ？1？2013 以下是它在瀏覽器中的外觀：紋理： [2]：http://i.imgur.com/Z3J9S0f.png?1?5201 – greenglow

-2

我解決了這個問題是這樣的：

  var c2GVertices = cube2Geometry.vertices; 


      for (var i = 0; i < c2GVertices.length; i++) { 
       c2GVertices[i].x = c2GVertices[i].x - 0.5; 
       c2GVertices[i].y = c2GVertices[i].y - 0.5; 
      }

有移動所有頂點的半像素更簡單的方法？

來源

2013-08-20 13:07:34 greenglow

恭喜你，你已經直接碰到特克塞爾到像素映射陷阱。 :)

This應該幫助你離開那裏，雖然它不是WebGL的基礎仍然適用。

來源

2013-07-03 16:25:50 havarc

哦，不:)。你確定？但是邊框不像我的形象那樣上色，更像灰色。當我在紋理元素到皮爾陷阱時，它不應該像圖像那樣着色嗎？無論如何，我會嘗試你的解決方案... – greenglow

就試試這個：

explosionTexture.anisotropy = 0; 
explosionTexture.magFilter = THREE.NearestFilter; 
explosionTexture.minFilter = THREE.NearestFilter;

而且你不應該構建渲染器時使用antialaising：

renderer = new THREE.WebGLRenderer({antialias: false});

這樣做是爲了預覽的Minecraft紋理包，偉大的工程:-)

來源

2014-11-14 15:37:44 Myz

Thx，它幫助了我。 – Halt

使用材料混合，下面的配置對我有用：

material.blending = THREE.CustomBlending 
material.blendSrc = THREE.OneFactor 
material.blendDst = THREE.OneMinusSrcAlphaFactor

見這個例子： http://threejs.org/examples/#webgl_materials_blending_custom

來源

2016-04-10 01:58:11 glued

three.js透明png紋理奇怪的邊框webgl

回答

相關問題