THREE.ShaderMaterial 不透明度不起作用

Question

我正在从 MeshBasicMaterial 切换到 ShaderMaterial，以便在我的网格纹理上提供滤镜。 ShaderMaterial 继承自 Material，因此存在不透明度参数。但是改变这个参数不会改变对象的不透明度。我使用的 THREE.HueSaturationShader 没有设置 alpha 值。

我添加了一个非常简单的fiddle来展示情况
http://jsfiddle.net/thenectorgod/89aahytL/1/.

// BufferGeometry Tester

var hostDiv, scene, renderer, camera;

var WIDTH = 500;//window.innerWidth,
HEIGHT = 500;//window.innerHeight,
FOV = 35,
NEAR = 1,
FAR = 1000;

function init() {
hostDiv = document.createElement('div');
document.body.appendChild(hostDiv);

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor( 0x888888, 1 );
hostDiv.appendChild(renderer.domElement);

camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;
camera.lookAt(scene.position);
var geometry = new THREE.PlaneBufferGeometry(20,20);
var material = new THREE.ShaderMaterial({
  transparent: true,
  depthTest: false
});
material.opacity = 0;
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
scene.add(camera);
animate();
}

function render() {
renderer.render(scene, camera);
}

function animate() {
requestAnimationFrame(animate);
render();
}

init();

虽然我将不透明度设置为 0，但对象仍然可见。

如何在不添加额外的不透明度参数的情况下同时使用不透明度和着色器。

Answer 1

您的着色器 material 没有着色器。默认情况下，它呈现类似 MeshBasicMaterial 的内容，但使用硬编码的 GLSL 红色颜色，并且没有透明度/不透明度。

如果你想要一个ShaderMaterial，你实际上需要为它编写GLSL着色器。

THREE.ShaderMaterial 不透明度不起作用

THREE.ShaderMaterial opacity not working

javascript

shader

fragment-shader

three.js