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
Related
Distortion, color replacement on glb (gltf) models. Blue changes to green, and yellow changes to orange.
v106 three.js
v97 GLTFLoader.js
You're using an environment map in your preview in blender. That env map has a dominant color that will affect the coloring of your model. To compare these references, you want to make sure you're using the same envmap in both blender and webgl. If you are only using lights in your threejs scene, you'll want to make sure they are colored to match.
Another thing that can affect the coloring is the gamma output settings in your THREE.Renderer, and textures.
You can go through a lot of heroics to get the outputs of both renderers to match. Read this: https://discourse.threejs.org/t/whats-this-about-gammafactor/4264
If you just want a quicker fix.. tweak your lighting/envmaps, or tweak the colors/intensity of the lights you have set up in your threejs scene.
If this behavior is something that has changed between versions of THREE.. it may be something to file a bug report on.
There are now gamma related settings on both the threejs renderer and textures.
If this isn't enough info, let me know and I may know someone else who can help set you straight :) Hi Don!
Old question but for the record what caused it for me was the vertex colors under Object Data Properties:
Deleting the Col fixed the texture colors.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
There is a TextGeometry mesh
Some BoxGeometry mesh as a background
How to make this glow between them?
I tried to put many PointLight between text and box, but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
The typical way of doing this is via post-processing. three.js offers a so called "Bloom" pass which is demonstrated in the following example: webgl_postprocessing_unreal_bloom. I suggest you start with this setup.
but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
It's no good approach in general to add that number of light sources to a three.js scene. If you place some small sphere meshes (based on THREE.SphereGeometry) with a bright material color onto the text, you should get a good result with bloom pass.
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.
I am rendering a sofa using r71 but the texture quality is not proper. If I render it through r58 then it looks really good. It is a bug or what?? Below are the images, first one is rendered via r58 and second one via r71.
Coming from r58 a lot of things has changed, for you especially how they calculate gamma and hardwireing the ambient term to the diffuse color.
The main difference I see is your model appears darker.
To make the model appear brighter you could set the materials color to white: material.color.setHex( 0xFFFFFF );.
If this is still not bright enough I discovered a little Hack by setting the HSL Lighting value to something > 1. material.color.setHSL( 0, 0, 6 );
Without providing the code on how you create your material its only a shot in the dark.
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!