CODEWITHSUNDEEP
javascriptthree.jsshaderfragment-shader
Amritesh Anand
Amritesh Anand

Reputation: 983

THREE.ShaderMaterial opacity not working

I am switching to ShaderMaterial from MeshBasicMaterial in order to provide filters on my mesh textures. ShaderMaterial inherits from Material and hence opacity parameter is present. But changing this parameter doesn't change opacity of object. I am using THREE.HueSaturationShader which does not set alpha value.

I have added a very simple fiddle to showcase the situation
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();

Though I set the opacity to 0 the object is still visible.

How can I use both opacity and Shaders without adding extra opacity parameter in all of them.

Upvotes: 1

Views: 2653

Answers (1)

pailhead
pailhead

Reputation: 5431

Your shader material has no shader. By default it renders something like MeshBasicMaterial but with a hardcoded GLSL color of red, and no transparency / opacity.

If you want a ShaderMaterial, you actually need to write GLSL shaders for it.

Upvotes: 1

Related Questions