三个 js 着色器材质 - 透明度设置为 true 时出现像素化故障答案

【问题标题】：Three js Shader Material - Pixelated glitching when transparency is set to true三个 js 着色器材质 - 透明度设置为 true 时出现像素化故障
【发布时间】：2015-04-30 04:58:51
【问题描述】：

我第一次使用着色器并在几个网格上使用 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);

}

对象上的颜色应该是完全平滑的，但有时它们看起来有点“小故障”和像素化，如下图所示： https://jsfiddle.net/weqqv5z5/ 尤其是在调整窗口大小时会发生这种情况。

我不知道为什么会这样，我只知道当材料中的transparent设置为false时效果不会发生（在小提琴的第23行）

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

提前感谢您的帮助！

【问题讨论】：

标签： javascript opengl-es three.js webgl

【解决方案1】：

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

gl_FragColor.a = 0.5;

小提琴：https://jsfiddle.net/weqqv5z5/1/

three.js r.71

【讨论】：

非常感谢！我只是尝试将材质中的不透明度更改为各种值，但更改着色器中的不透明度值更有意义。