I've made the switch from MeshBasicMaterial to ShaderMaterial to implement filters on my mesh textures. While ShaderMaterial inherits from Material and includes an opacity parameter, changing this parameter doesn't seem to affect the object's opacity. I'm currently using THREE.HueSaturationShader which doesn't handle the alpha value.
To demonstrate this issue, I've created a simple fiddle: http://jsfiddle.net/thenectorgod/89aahytL/1/.
// Testing BufferGeometry
var hostDiv, scene, renderer, camera;
var WIDTH = 500;
var HEIGHT = 500;
var FOV = 35;
var NEAR = 1;
var 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();
Even though I've set the opacity to 0, the object remains visible.
I'm looking for a way to utilize both opacity and Shaders without having to add an extra opacity parameter to all of them.