.lightmap second set of uv coordinates

Questions
, ,
1

Hello!
I really need the help of responsive people. Help create a second set of uv coordinates for lightmap.

There is a 3d car model (* .fbx), stands on a plane (PlaneBufferGeometry), which has a texture (TARMAC2.jpg). It is necessary to place the shadow of the car (shadow.jpg) and the light from the headlights (light.jpg) on ​​the PlaneBufferGeometry object.

Lighting does not give realistic shadows under the car. Rendered the shadow separately in Blender. How to put a shadow under the car, the texture of the light from the headlights and glare on the headlights as in this example: https://renaultespace.littleworkshop.fr/? Thanks for any info !!! in threejs newbie.

Here is how it is loaded now using lightmap. Problem: the lm-texture with a shadow stretches across the surface. I can not imagine how to create a second set of uv coordinates for lightmap.

var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.TextureLoader().load("model/TARMAC2.jpg", function ( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 10;
map.repeat.set( 10, 10 );
groundTexture = map;
}  );
var lm = new THREE.TextureLoader().load("model/shadow_copy514.jpg");
var groundMaterial = new THREE.MeshBasicMaterial(
                {
color: 0xdad8d5,
lightMap: lm,
map: groundMat
});
var uvs = groundGeo.attributes.uv.array;
console.log(uvs);
groundGeo.addAttribute( 'uv2', new THREE.BufferAttribute( uvs, 2 )     );
var ground = new THREE.Mesh(groundGeo, groundMaterial);
ground.rotation.x = - Math.PI / 2;
ground.position.y = -3;
scene.add( ground );

final
now

2

How about doing this:

var uvs = [ 0, 1, 1, 1, 0, 0, 1, 0 ];
groundGeo.addAttribute( 'uv2', new Float32BufferAttribute( uvs, 2 ) );

The light map should cover the entire ground with this uv coordinates.

3

thanks for the answer))

nothing has changed ((((.
“The light map should cover the entire ground with this uv coordinates.” - what does it mean? if you create lightmap (shadow_copy514.jpg) = 10000х10000px, the file is very heavy. I don’t need a lightmap to cover the whole earth. The lightmap should only be under the car (in the center of PlaneBufferGeometry).
if I use THREE.ShaderMaterial () - I get the same result (lightmap = ground)

prim

4

Ah, now I see. Um, that makes it hard to generate the texture coordinates on the fly.

@donmccurdy Any chances @_w_starovoitenko creates its ground in Blender and the export the model as glTF? Are light maps and a second set of uv coordinates supported?

5 
//model
var loader = new THREE.FBXLoader();

loader.load('model/bmw_opt.fbx',
function (fbx){
 bmw = fbx;
 fbx.add( light );
fbx.add( lightHolder );

 fbx.traverse( function ( child ) {
        if ( child.isMesh ) {
          child.castShadow = true;
          child.receiveShadow = true;
          child.material.envMap = envMap;
          child.material.envMapPol = envMapPol;
          if(child.name == "body")
    {
      fbxParts.body = child;
    }
     if(child.name == "glass")
{
 fbxParts.glass = child;
 child.receiveShadow = false;
6

Is a lightmap the right way to represent a single shadow like this? If your lighting and car position are fixed, why not bake it into the ground texture or use a decal? If the lighting and car position are not fixed, I’m not sure how you will use the second set of UVs here.

Note that in the link above, they use an ambient occlusion map for the shadow beneath the car. But I suppose the issues would be the same.

Exporting to glTF will let you create a second set of UVs and include them in the model. You can also attach an AO map. But glTF does not include light maps so you’d need to load that separately with TextureLoader. For how to set up the material, see https://github.com/KhronosGroup/glTF-Blender-Exporter/blob/master/docs/user.md.

2 Likes
7

The lighting and position of the car are fixed.
The texture of the earth is shifted along the Y axis (groundTexture.offset.y - = speed / 2;).

I will try to deal with the decal example (it is not yet possible to achieve the desired result).

Maybe I can understand glTF, thanks

8

Whoa, hold on a sec… Don, how many UVs total does glTF support? I never even thought of glTF having more than one UV. Even if it is just two, that is double what I thought…

9

The glTF format supports any number of UVs, but at the moment three.js only supports two. Lightmap and AO use the second UV set in three.js, other textures use the first UV set.

2 Likes
10

donmccurdy - professional!!!

thanks to all!!!
problem solved)
all as in the example https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cars.html

This example did not work for me correctly. Solution: reducing the size of the land from 100,000 to 10,000)))))

New question:
Maybe someone knows how to implement the headlights?
https://partner.viscircle.com/VWPolo/
The headlights of the car - this texture changes on the object or the texture is loaded separately …light

Maybe PointLight

1 Like
11
  1. Bake emissiveMap for all the enlightened parts of the head lamp
  2. Get a proper Sprite image for the flare
  3. Turn off depthWrite property of Transparent glass of headlight
  4. Apply the emissiveMap that was baked earlier to all the corresponding head lamp parts
  5. Position the sprite object inside the head lamp container
  6. Write a script to reduce the scale of the sprite and emissiveIntensity of component to which emissiveMap has been applied, so that, if camera view is from the front (i.e near ), the scale and intensity to be maximum and to be minimum if the camera view is from left, right or back ( i.e far ).

For switching on and off, simply hide the sprite object and set the emissiveIntensities to zero and vice-versa

2 Likes