three.js透明png纹理奇怪的边界webgl
three.js transparent png texture strange border webgl
在three.js中使用png作为纹理时遇到了一个奇怪的问题。png在可见和透明之间的区域有奇怪的边界。我已经准备好尝试使用字母测试值,但有时图像会在非常细的1px线的区域完全消失。有解决方案吗?如何解决这个问题?
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 } );
试试这个:
explosionTexture.anisotropy = 0;
explosionTexture.magFilter = THREE.NearestFilter;
explosionTexture.minFilter = THREE.NearestFilter;
此外,在构建渲染器时不应使用抗锯齿:
renderer = new THREE.WebGLRenderer({antialias: false});
这样做是为了预览minecraft纹理包,效果很好:-)
使用材料混合,以下配置对我有效:
material.blending = THREE.CustomBlending
material.blendSrc = THREE.OneFactor
material.blendDst = THREE.OneMinusSrcAlphaFactor
请参见此示例:http://threejs.org/examples/#webgl_materials_blending_custom
恭喜你,你已经直接进入了Texel到Pixel的映射陷阱。:)
这应该会帮助你摆脱困境,尽管它不是WebGL,但基础知识仍然适用。
好的,所以我尝试了这个页面上的所有解决方案。他们都失败了。
对我有用的是对精灵纹理使用正确的Texture.wrapS
(水平包裹)和Texture.wrapT
(垂直包裹)。
我个人在我的精灵顶部发现了这个丑陋的边缘。我只需要确保我的Texture.wrapT
设置是THREE.ClampToEdgeWrapping
而不是THREE.RepeatWrapping
。
完美地解决了这个问题,而没有干扰alpha测试值、纹理过滤器、顶点或抗锯齿。
我这样解决了它:
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;
}
有没有一种更简单的方法可以将所有顶点移动半个像素?
相关文章:
- 如何检测用于WebGL的专用或集成显卡
- 上传带有XMLHttprequest的文件-多部分/表单数据中缺少边界
- 在WebGL中绘制多个二维图像
- 对于如何在没有modernizr的情况下用边界半径的功能检测检查来替换我的旧浏览器检查
- WebGL绘制图像
- webgl在一个正方形上操纵两个纹理
- 仅在边界内时替换特定字符
- 将谷歌地图中的平移边界设置为图像覆盖
- Three.js,WebGL,渲染六幅图像的全景图
- 将边界设置为overlayImage谷歌地图
- 为什么不是't这=>边界“;这个“;到周围的范围
- 获取以屏幕像素为单位的旋转SVG元素的边界
- RegEx:在单词边界添加加号
- 我如何才能获得Facebook在边界内的位置列表
- 精灵从pixi到p2的边界多边形
- 如何在使用IEWebGL时检测WebGL是否可用
- WebGL-依次应用多个程序
- 关于基于VivaGraph WebGL的渲染的问题
- WebGL多纹理多维数据集
- three.js透明png纹理奇怪的边界webgl