I have THREE.Points with Material:
var material = new THREE.PointsMaterial( { sizeAttenuation: false, visible: true, size: 128, color: 0xffffff, depthTest: false, depthWrite: false, opacity: 0.5, blending: THREE.AdditiveBlending, transparent: true, map: texture } );
This material works fine.
When I put another THREE.Points with the similar material, this material starts to be invisible, when I have both in camera view.
When I rotate the camera to position, where is visible only one THREE.Points, material starts to be visible again.
When is loaded and present in the camera view field some another object, or mesh, pointClouds(Points in r73) are invisible again ...
Problem starts with update to r73.
EDIT: IT HAPENS WHEN PLANET OBJECT IS VISIBLE set visible false, and all works great...
EDIT2 it happens only on some GPU, on INTEL HD4000/DELL NTB, error not occuring on ATI Mobility Radeon
Related
I was using CanvasRenderer in my scenes to render a brain with neurons.
The problem is that when I draw the neurons (every neuron consists of many many lines) the scene is really slow because I render a lot of neurons. So I switched into WebGLRenderer and it is much faster and smoother, but the scene looked completely different! No opacity is applied any more which made the neurons hidden inside the brain
Here is a comparison between the two scenes:
CanvasRenderer:
The brain has some transparency, and there is a green sphere represents a region of interest (ROI) also has transparency.
WebGLRenderer:
The transparency has completely gone!
I am using the following materials for the brain model and the ROI model:
var brain_material = new THREE.MeshPhongMaterial({
wireframe: false,
color: 0xaaaaaa,
specular: 0xcccccc,
opacity: 0.4
});
var roi_material = new THREE.MeshBasicMaterial({
color: selected_roi_color,
opacity: 0.2,
visible: true
})
and here is my renderer:
renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setClearColor(renderer_clear_color);
renderer.setPixelRatio(viewport_width / viewport_height);
renderer.setSize(viewport_width, viewport_height);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
How can I get a similar result to the CanvasRenderer using the WebGLRenderer?
Thank you very much
If you use opacity, then you have to use it with transparent:
var brain_material = new THREE.MeshPhongMaterial({
wireframe: false,
color: 0xaaaaaa,
specular: 0xcccccc,
transparent: true, // here
opacity: 0.4
});
var roi_material = new THREE.MeshBasicMaterial({
color: selected_roi_color,
transparent: true, // here
opacity: 0.2,
visible: true
})
When we add text-spites on scene, we saw that our transparent planes hide sprites, but didn't hide any 3d Objects.
Why is this and how to make sprites visible under transparent planes?
To look PNG example click here
My plane is:
// transparent plane
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
depthFunc: THREE.LessDepth,
});
But it seems no work good.
So, for that examle i wrote some code on fiddle, to figure out the problem:
look fidddle example
three.js renders opaque objects first, then transparent objects.
You can use this pattern to prevent your transparent objects from writing to the depth buffer:
// transparent plane
geometry = new THREE.PlaneBufferGeometry( 200, 200, 1, 1 );
material = new THREE.MeshBasicMaterial( {
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
depthWrite: false
} );
three.js r.112
So I have a simple particle system using THREE.Points and THREE.ParticleBasicMaterial as the material.
All the points are rendered as billboards using this .png image.
When rendered I expect each particle to be a glowing sphere (not exactly glowing, but definitely having that effect due to the radial gradient fading out into transparency). How to get the transparency to work? The result looks like this:
My material looks like this (note that I tried using different types of blending modes, but they just make things worse).
this.material = new THREE.ParticleBasicMaterial({
color: 'transparent',
size: 0.8,
map: this.spriteImage,
transparent: true,
sizeAttenuation: true
});
Add "depthWrite: false" to your material, like this:
this.material = new THREE.ParticleBasicMaterial({
color: 'transparent',
size: 0.8,
map: this.spriteImage,
transparent: true,
opacity: 0.5, // should be less than 1.0
sizeAttenuation: true,
depthWrite: false
});
I have a scene with a mesh (MeshPhongMaterial), box helper around this mesh, green spherical point markers (MeshLambertMaterial) and sprites (png images of "pins" with transparent backgrounds). And I am running into this issue:
http://imgur.com/nDQ3VRk
http://imgur.com/53NJhpK
Both my green markers and box helper lines are visible through the transparent background of my "pin" sprite, but my main mesh material isn't. In fact in the second image above the green marker that is visible through the png background is inside of the bronze mesh object and would not be visible otherwise.
Here are my materials:
1) Main mesh material JSON:
'Bronze': {
emissive: '#000000',
color: "#cd7f32",
specular: 0x83776B,
shininess: 100,
reflectivity: 1,
shading: THREE.SmoothShading,
metal: true,
envMap: textureEquirec, // our own hdri reflection image
transparent:true,
depthTest: true
}
2) Material for the green marker:
THREE.MeshLambertMaterial({ color: 0x00ff00 })
3) Material for the box helper:
THREE.LineBasicMaterial({ color: 0xdddddd })
4) Material/texture for the Sprite:
var textures = {
...
selectedPin: 'images/sprites/selected.png'
};
this.selectedPinTexture = THREE.ImageUtils.loadTexture( textures.selectedPin);
this.selectedPinMaterial = new THREE.SpriteMaterial( { map: this.selectedPinTexture } );
Please advise,
Thank you,
Anton.
If your pin sprite is drawing before the mesh, and writing depth (depthWrite:true) then the mesh will not appear.
Set .renderOrder of the sprite to always draw after the mesh if you want it to be transparent the mesh to be visible through it.
Add an alphaTest to you material like 0.5. For an explanation look at http://threejs.org/docs/#Reference/Materials/Material
I use threejs to add a pointCloud to the screen , and set texture map, But I find that the top point can cover the one behind it.
after I add AdditiveBlending , It's much better, but still have some problem.
Because I have another objects so I can't add depthTest:false , how can I solve this problem?
below is the code and the texture
var geometryBig = new THREE.Geometry();
var meshBig = new THREE.PointCloud(geometryBig, new THREE.PointCloudMaterial({
size: 4,
color: 0xFFFFFF,
transparent: true,
blending: THREE.AdditiveBlending,
// depthTest: false,
transparent: true,
sizeAttenuation: true,
map: THREE.ImageUtils.loadTexture(
"img/particle.png"
),
}));
Add to your PointCloudMaterial:
depthWrite: false