three.js - Lens Flare and transparency - three.js

Currently in my project lens flare is not visible when behind a transparent object, even if the opacity is set to 0. I try to simulate a glass sphere around the camera - but the lens flare is not visible from inside the sphere. Is it possible to solve this?

I think you need to set sphere material depthWrite to false.
material.depthWrite = false;

Related

threejs: Why can the light pass through the plane?

Why can the light pass through the plane?
By default, shadow mapping uses back faces.
Planes only have 1 (front) face. To make shadows work with plane, try to enable front face shadows by disabling renderReverseSided :
renderer.shadowMap.enable = true;
renderer.shadowMap.renderReverseSided = false;
Check this fiddle and this issue.
WebGL does not have light occlusion implemented by default. As such, all surfaces visible by the light source will be lit.

SceneKit: Is it possible to cast an shadow on an Transparent Object?

i am trying to cast an shadow on an totally transparent plane in SceneKit on OSX. I am struggling with this problem since several hours and do not come to any solution.
My Purpose is to generate an Screenshot of several objects with an transparent background and just the shadow on an invisible Plane.
Do you have any suggestions for me how i can make this with apples SceneKit?
Do i have to program my own shader, can i make this work with shadermodifiers or can i use built in functionallity?
UPDATE:
I find an alternative solution for anyone who needs:
create a white plane under 3D model, note that the color of plane must be pure white.
set blend mode of plane's material to SCNBlendModeMultiply.
set light model of plane's material to SCNLightingModelLambert.
This works because any color multiply white color (1, ,1, 1) return itself And lambert light model will not take account of directional light, So the plane will always be background color which look like transparent. Another benefit of this solution is you don't need change light‘s shadow rendering mode.
For people who used to inspector of Xcode.
According to SceneKit: What's New.
First, add a plane under you model. Then prevent it from writing to colorBuffer.
Second, change your light model's shadow rendering mode to deferred. Notice that you must use light which can cast shadows.
Oily Guo, your solution works. Here the solution is in code:
Configuration of the light source:
light.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.4)
light.shadowMode = .deferred
And for the floor (ie. SCNFloor underneath your objects):
material.diffuse.contents = UIColor.white
material.colorBufferWriteMask = SCNColorMask(rawValue: 0)
I do not have an answer to your question, however I have a workaround:
Render your scene and keep the image in memory
Change all the materials in your object for pure black, no specular
Change the plane and the sky to a fully white material, lights to white
Render the scene to another image
On the second image, apply the CIColorInvertand CIMaskToAlpha Core Image filters
Using Core Image apply the Alpha Mask to the first render.
You'll get an image with a correct Alpha channel, and transparent shadows. You will need to tweak the materials and lights to get the results you want.
The shadow may become lighter on the edges, and the only way around that is rendering it as yet another image, and filling it with black after the Mask to Alpha step.

Three.js - transparent objects when rotated with TrackballControls don't behave like transparent

When I add to the scene two objects and set their transparency as true with some opacity and using TrackballControls I rotate the scene by mouse, the object which was initially further from camera loses its transparency.
I read that this is Z-buffer problem and further objects from camera will be displayed first. But when I rotate the scene using TrackballControls, camera changes its position, so transparent objects should be displayed correctly. But it is not like that.
Here in this picture - on the right is frontview, on the left is backview which is not displayed correctly:
http://www.foto-ondruskova.cz/Experiment/lenses.jpg
Please, any solutions?
I have come across this problem and setting alphaTest: 0.5 to the material as suggested here solved my problem. But it is hit and miss. Give it a try. Hopefully it works!

Mesh Opacity issue when the mesh is invisible

I have created a jsfiddle [ http://jsfiddle.net/georgeneil/cfrsj/5/ ] to demo the issue.
The scene have a red cube and a number of particle inside that cube. Here the steps to reproduce the issue.
1) Set the cube as invisible by unchecking the visible checkbox in the control pannel.
2) Rotate the cube
3) Increase the opacity via the opacity control in the pannel
4) Set the cube as visible.
Now the cube would have become completely opaque. I have observed that the issue is not consistent but used to occur most of the time for me.
Is this a bug in the API or is there any issue in my code ?
Transparency is hit-and-miss in webGL. In your case, your transparent objects are competing with each other. One solution is to set the transparency of your particles to false in your shaderMaterial, so there is only the single transparent cube. Everything works in that case.
Fiddle: http://jsfiddle.net/cfrsj/6/

Shadows in Three.js's Canvas renderer?

As of r49, Three.js does not support shadows in the Canvas renderer, right?
What I need is a shadow directly below an object, like if the light source was at infinite y (approximately sun at noon).
You can duplicate the object, set the scale.y to 0.001 and use a black color for the material :)

Resources