2013-07-02 103 views
1

我在使用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 }); 
+0

一些代碼將是偉大的 – Muath

+0

在這裏你可以看到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; 
      } 

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

3

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

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

+0

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

4

就試試這個:

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

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

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

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

+0

Thx,它幫助了我。 – Halt