When I use THREE.MeshStandardMaterial with color 0xffffff, my textures are incredible washed out. The texture in this example is a solid #ff6600. The face below is the topic at hand.
When I set the underlying material color to 0xff6600 (the same as the texture), I get this result, which is exactly what I want!
This is a simplified example. What happens when half white, half orange?
In this case, I can have correct orange or correct white, but not both because the material color interferes!
What can be done to fix this?
Related
I am new to three.js and I created a classic sphere, wrapped with a world color map & bump map and an alpha map for clouds, and directional sunlight. How can I now add an earth at night texture only on the shadow side of the globe? The globe is rotating, so I couldn't just create 2 half-spheres.
I tried adding this grayscale mask to the texture, but it is also visible in daytime. I then tried illuminating the map with a different light aimed at the dark side, but couldn't selectively target only one material. I didn't quite understand if I need to use "emissiveMap".
Could I shine a light through a semi-transparent map/mask from the center of the earth to make the cities visible, or is there some type of "black light" to only make selected color/map areas shine in the dark?
I don't need any glowing effects, I just want it to be visible. Will I have to create individual light points or learn to use fragment shaders?
I have a bunch of planes with a shader material that draws a radial gradient from transparent to a defined color.
As soon as I add an Effectscomponent from drei with an unrealBloomPass, my scene looks like that:
How can I keep the transparency of my materials on each plane?
So, I'm trying to emulate a laptop screen in ThreeJS, so there's a video texture on it which I'd like to glow. Doesn't need to be a light source, it just needs to be illuminated.
I've tried using emissionMap of the texture with emission of 0xffffff (white) but it just comes out real grey and washed out. Trying with red (0xff0000) shows the video glowing red (obviously), and 0x000000 just doesn't show anything.
How do I just get the emissionMap to glow by itself, without being really washed out with some other colour? I've also tried:
Same settings with MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial and MeshToonMaterial. Same with all
Just setting map and color (i.e, without emission/emissionMap). Also totally washed out
Am I doing something wrong, or is it impossible to just have an emissionMap without having to choose a colour to completely wash it out with? Can I just have the texture?
did you try to set encoding of your videoTexture to THREE.sRGBEncoding?
videoTexture.encoding = THREE.sRGBEncoding;
You can add an emissiveMap to control the intensity of the emission on different parts of the mesh.
Here it is in the three.js docs
I'm trying to make a very simple shadow shader which consists of a plane with a shader showing a radial gradient on colors and alpha.
Beneath this shadow lies another plane with the same kind of shader but linear.
And as a background of all this, a linear gradient from dark blue to light blue.
The problem is that when my camera approaches the ground, the plane of the shadow masks the floor.
Why does it happen and what can I do to prevent that?
https://codesandbox.io/s/epic-sun-po9j3
https://po9j3.csb.app/
You'd need to post code to check for sure but it likely happens because three.js sorts the order it draws things based on the center of the objects and their distance from the camera.
You can force a different order by setting Object3D.renderOrder
three.js also generally draws opaque things before transparent things so my guess is your ground plane and your shadow plane are both set to transparent: true but the ground can be set to transparent: false in which case it will be drawn first.
You might find this article useful. It shows a similar example.
As for why there is a hole it's because of the depth buffer. If something in front gets drawn first then the pixels behind are not drawn. So if the shadow happens to be drawn first it ends up looking like a hole because the pixels of plane behind it are not drawn.
See this
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.