I'm using come particles with sprites, and then drawing some lines. Lines have a transparency and sprites has alpha channels.
Lines are placed near the camera, while particles are behind the lines.
However, it happens that lines seems to "cut thru" the particles, as if on the fragments where the lines are rendered.. the particles are skipped.
You can see a fiddle reproducing the problem here : http://jsfiddle.net/SimoneGianni/fzsjd1qc/2/
When the transparency of the line goes down near 0, you can see the background and the sphere behind, as if there particles were not there.
Am I doing something wrong or is a rendering bug?
Code follows :
THREE.ImageUtils.crossOrigin = '';
var container;
var camera, scene, renderer;
var particleSystem;
var line,lineM;
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500);
camera.position.z = 350;
camera.position.y = 35;
scene = new THREE.Scene();
raycaster = new THREE.Raycaster();
raycaster.params.PointCloud.threshold = 3;
var particles = 100;
var particlesGeometry = new THREE.Geometry();
var n = 200, n2 = n / 2; // particles spread in the cube
for (var i = 0; i < particles; i++) {
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
particlesGeometry.vertices.push(
new THREE.Vector3( x, y, z )
);
}
var particlesMaterial = new THREE.PointCloudMaterial({
map : THREE.ImageUtils.loadTexture('http://i.imgur.com/cxUw2NL.png'),
size : 70,
sizeAttenuation : true,
transparent : true,
opacity : 0.6
});
particleSystem = new THREE.PointCloud(particlesGeometry, particlesMaterial);
particleSystem.sortParticles = true;
scene.add(particleSystem);
sphereG = new THREE.SphereGeometry(50);
sphereM = new THREE.MeshNormalMaterial();
sphere = new THREE.Mesh(sphereG,sphereM);
sphere.position.z = -300;
scene.add(sphere);
lineG = new THREE.Geometry();
lineG.vertices.push(new THREE.Vector3(-100,30,120));
lineG.vertices.push(new THREE.Vector3(100,30,120));
lineM = new THREE.LineBasicMaterial({color: 0xeeeeee, linewidth:50, transparent:true});
lineM.opacity=0.1;
line = new THREE.Line(lineG, lineM, THREE.LinePieces);
scene.add(line);
renderer = new THREE.WebGLRenderer({
antialias : false
});
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var time = Date.now() * 0.001;
particleSystem.rotation.x = time * 0.025;
particleSystem.rotation.y = time * 0.05;
lineM.opacity = Math.cos(time);
renderer.render(scene, camera);
}body {
color: #cccccc;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #050505;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}<body>
<div id="container"></div>
<!--<img src="http://threejs.org/examples/textures/sprites/ball.png"></img>-->
<script src="http://threejs.org/build/three.js"></script>
</body>