三个 js Shader Material - 透明度设置为 true 时出现像素化故障

Question

我是第一次使用着色器并在一些网格上使用 THREE.RawShaderMaterial。我在非常简单的着色器上得到了一些奇怪的伪像：

顶点着色器：

precision mediump float;
precision mediump int;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec3 position;
attribute vec4 color;

varying vec3 vPosition;

void main() {
    vPosition = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器：

precision mediump float;
precision mediump int;

varying vec3 vPosition;

void main() {
    gl_FragColor.r = vPosition.x;
    gl_FragColor.g = vPosition.y;
    gl_FragColor.b = 1.0;
}

我在一大堆像这样创建的对象上使用它：

asdfobject = new THREE.Object3D();
scene.add(asdfobject);

var geometry = new THREE.SphereGeometry(1, 4, 4);
var material = new THREE.RawShaderMaterial({

    uniforms: {
        time: { type: "f", value: 1.0 }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    side: THREE.DoubleSide,
    transparent: true,
} );

for(var i = 0; i < 80; i++) {

    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5);
    mesh.position.multiplyScalar(400);
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
    asdfobject.add(mesh);

}

物体上的颜色应该是完全平滑的，但有时它们看起来有点 "glitchy" 和像素化，如下所示 fiddle： https://jsfiddle.net/weqqv5z5/ 尤其是在调整 window.

大小时会发生这种情况

我不知道为什么会这样，我只知道当 material 中的 transparent 设置为 false 时效果不会发生（在 fiddle 中的第 23 行)

我还没有能够在任何其他设备上对此进行测试，所以它也可能是显卡特定的问题。我是运行 64 位 Arch Linux 笔记本电脑，配备 Intel HD 4000 显卡。

在此先感谢您的帮助！

Answer 1

您需要设置片段颜色的 alpha 值。

gl_FragColor.a = 0.5;

fiddle: https://jsfiddle.net/weqqv5z5/1/

three.js r.71

三个 js Shader Material - 透明度设置为 true 时出现像素化故障

Three js Shader Material - Pixelated glitching when transparency is set to true

javascript

opengl-es

webgl

three.js