Does anyone know how to render a shadow map in threejs? I have a terrain mesh in my scene and instead of having all the objects cast a shadow on the terrain, I was hoping I could maybe render a nice shadow map to a texture that is applied to the mesh.
Does anyone have ideas of how to accomplish this - or perhaps some documentation on the subject that I could apply to three?
** EDIT **
Just to clarify for future references, I was wondering if there are any techniques available to render / bake textures that can later be applied as uniforms to a mesh.
have a look at his example:
http://threejs.org/examples/#webgl_materials_lightmap
What you are after are called "light maps" in threejs, in other places they are also referred to as oclusion textures/maps.
[Edit]
It is possible to bake a light-map from geometry using other tools, such as Blender: https://blender.stackexchange.com/questions/13956/how-do-you-bake-ambient-occlusion-for-a-model
Related
I'm trying to render texture to material but it rendered is not correctly, maybe my texture is wrong, but when i add the texture in blender it renders correctly. I don't know why.
Sorry I just learned threejs, but the current project needs to render in 3d. So I came here to ask if anyone has a solution, please help me.
Here is my Codesanbox:
https://codesandbox.io/s/hero-kdhox?file=/src/App.js
The texture I have added in Blender something like this:
https://imgur.com/dYkD5u8
You must flip your textures vertically, threejs will by default flip them when you import them using 'useLoader' there is a property flipY for textures but it hasn't been working reliably
Your best bet is to flip them vertically manually before importing
Alternatively, pack the textures in your GLB on blender itself
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.
Is it possible to have a custom geometry emit light in Three.js?
There is a similar question from 5 years ago here.
In my particular case, I have created a TorusGeometry. I would like this torus to also give off light. Is that possible?
The only true way to do this is raytracing, in which case your torus becomes an "emitter" of photons and its geometry is used to calculate the initial directions of said photons.
Otherwise, light technically doesn't exist. Only (mathematical) descriptions of lights exist. (Remember, lights aren't visible/aren't rendered unless you're using a LightHelper.) These descriptions are used by material shaders, which use the light descriptions (and other objects in the scene, in the case of shadows) to determine the color the current fragment should contribute to a pixel.
With this in mind, if you could write a shader to handle a torus-shaped light, then all you need to do is provide that light's information to the shader. You can do this by extending a THREE.js light class to make your own TorusLight to add to the scene, then give the objects in your scene your custom shader.
THAT SAID, if you'd be satisfied with simulating the torus light, and want a visible torus, you can always add a PointLight at the position of your torus (or several throughout the body of the torus), and give your torus some kind of glow effect.
I have a large terrain scene with many objects that cast shadows on the terrain. It seems I need multiple light sources to achieve good shadow resolution.
I will probably need to edit the source code to make a particular light affect one object in the scene only so that it only casts shadows from that one light.
How do I edit the shadows SRC in THREE.JS to acheive this?
Is it possible to fix the shadow map problem below? Basically the shadowmap doesn't seem to respect the alpha test. The shadow is of the tree planes geometry and not of the leaves. Would this be something to do with depth-write perhaps?
I am just using a standard
THREE.MeshPhongMaterial
When casting shadows, objects are treated as solid from the point of view of the light.
But what you can do is specify a customDepthMaterial that utilizes alphaTest. This custom depth material is used in the shadow calculation.
There is an example of this technique here: http://threejs.org/examples/webgl_animation_cloth.html.
three.js r.63