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);

}

物体上的颜色应该是完全光滑的，但有时它们看起来有点＆＃34;毛刺＆＃34;像这个小提琴中所示的像素化： https://jsfiddle.net/weqqv5z5/ 特别是在调整窗口大小时会发生这种情况。

我无法弄清楚为什么会发生这种情况，我只知道当材料中的transparent设置为false时，效果不会发生（在小提琴的第23行）

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

提前感谢您的帮助！

三个js着色器材质 - 透明度设置为true时的像素化毛刺

0 个答案: