I try to simulate light reflection, refraction, etc. in a fish tank and I need water material and glass material.
Actually I use no water and a phong material for the glass because I haven't found better for now, a testing demo can be see here: http://ledohm.free.fr/test_webgl/
For the water I don't need to simulate the waves, which means I can use the same material as the glass but with differents values for opacity, reflexion and refractive index.
I've found this example which seems to perfectly simulate glass but I don't understand how to adapt the material for my needs. From what I understood the refraction is computed from the envMap but I've no texture. I just want a wall of glass which simulate reflexion/refraction/... like in the reality as much as possible. How I can create (or find) a material like this?
Edit 1:
green: water total internal reflection
red: glass reflection
1: refracted by water
2: refracted by water + glass
3 & 4: lost
Edit 2:
Thanks to this tutorial I've unsdertood how shaders works and more specifically this example but, if I understand correctly, I can't use a shader to simulate light in a material with a thickness because shaders apply only on the surfaces of a mesh, I'm right?
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?
My scene is pretty simple. I have a (Ground) Plane and a sphere on top of it. I am setting an emissive material to the sphere. Now, I want reflection of the emitted light by the sphere on the plane.
Looks like that is not possible in a straight-forward way. (I totally wish THREE.js was like Maya or Blender). And from what I have looked around, point lights were suggested. But I am having a gradient emission map. So a point light will not satisfy my needs here.
Some other answers have suggested something on the lines of capturing the scene by a reflection surface and other have pointed me to cube camera rendering....I do not totally understand what they mean - am quite new to THREE.js and this low a level of graphics. Especially this answer to a beginner like me looks daunting (I am just starting to mess with shaders). Emissive ligth and reflection in Three.js
If anyone can explain the method or provide resources where I can learn about them, I would be grateful.
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.
Does anyone have any ideas how to fix the below issue?
The red is just a plane (representing water) with a shader material. I have written a custom shader for the water material, but its very simple (I get it to display red). As you can see from the image below the two particle systems seem to mess up the draw order.
Weirdly - if I use a standard THREE material for the water, like phong or lambert, then the issue doesn't happen. Is there some define / property that I need to change on the shader material to prevent this from happening?
Many
Thanks