question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AO Map does not respect texture repeat on a Geometry V3 import

See original GitHub issue
Description of the problem

When an Ambient Occlusion map is used on a model imported from the Version 3 Geometry format with 2 sets of UVs (sidenote: are 2 sets of UVs intended to be required for AO?), the AO texture ignores its Repeat property settings.

The following JSON is the most minimal case I could reproduce; save it out and load it into the https://threejs.org/editor/ . All textures are attached to this thread; color and normal are standard, a third texture has roughness on the green channel and AO on the red channel and is used for both.

Simple plane geometry, 2 sets of UVs, texture repeat set to [1,1] on all:

{
	"metadata": {
		"version": 4.5,
		"type": "Object",
		"generator": "Object3D.toJSON"
	},
	"geometries": [
		{
			"uuid": "0A8F2988-626F-411C-BD6A-AC656C4E6878",
			"type": "Geometry",
			"data": {
				"vertices": [ 1, 1, 0, 1, -1, 0, -1, -1, 0, -1, 1, 0 ],
                "normals":  [ 0,0,1, 0,0,1, 0,0,1, 0,0,1 ],
                "uvs": [ [ 1, 1, 1, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 0, 0, 0, 0, 1 ] ],
				"faces": [ 8, 2,1,0, 2,1,0, 2,1,0,   8, 3,2,0, 3,2,0, 3,2,0 ]
			}
		}],
	"materials": [
		{
			"uuid": "1004175C-0998-4243-900E-1183CE95A692",
			"type": "MeshStandardMaterial",
			"color": 16777215,
			"roughness": 0.5,
			"metalness": 0.01,
			"emissive": 0,
			"map": "2B905060-08BC-4F9A-B459-B19426D879A8",
			"normalMap": "DBCBCBC9-9C93-4CB0-96F0-BE95B3EAE706",
			"normalScale": [1,1],
            "roughnessMap": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
            "aoMap": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
            "aoMapIntensity": 0.5,
			"depthFunc": 3,
			"depthTest": true,
			"depthWrite": true,
			"skinning": false,
			"morphTargets": false,
			"dithering": false
		}],
	"textures": [
		{
			"uuid": "2B905060-08BC-4F9A-B459-B19426D879A8",
			"name": "",
			"mapping": 300,
			"repeat": [1,1],
			"offset": [0,0],
			"wrap": [1001,1001],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "66BE77DC-B7CB-4C84-B685-DDCC506C4015"
		},
		{
			"uuid": "DBCBCBC9-9C93-4CB0-96F0-BE95B3EAE706",
			"name": "",
			"mapping": 300,
			"repeat": [1,1],
			"offset": [0,0],
			"wrap": [1001,1001],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "CEB6F8FF-29C2-44D4-8C25-6998FF62CDE5"
		},
		{
			"uuid": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
			"name": "",
			"mapping": 300,
			"repeat": [1,1],
			"offset": [0,0],
			"wrap": [1001,1001],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "5D6FFCBC-2194-4A81-AC85-59D92F101A4C"
		}],
	"images": [
        {
            "uuid": "66BE77DC-B7CB-4C84-B685-DDCC506C4015",
            "url": "PodiumFloor_Floor_BaseColor.jpg"
        },
		{
			"uuid": "CEB6F8FF-29C2-44D4-8C25-6998FF62CDE5",
            "url": "PodiumFloor_Floor_Normal.jpg"
		},
		{
			"uuid": "5D6FFCBC-2194-4A81-AC85-59D92F101A4C",
            "url": "PodiumFloor_Floor_AO_R.jpg"
		}],
	"object": {
		"uuid": "378FAA8D-0888-4249-8701-92D1C1F37C51",
		"type": "Scene",
		"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
		"children": [
			{
				"uuid": "E7B44C44-DD75-4C29-B571-21AD6AEF0CA9",
				"type": "Mesh",
				"name": "SharedVertexTest",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
				"geometry": "0A8F2988-626F-411C-BD6A-AC656C4E6878",
				"material": "1004175C-0998-4243-900E-1183CE95A692"
			},
			{
				"uuid": "95EE0E37-CAA0-455D-8F12-7C4FDF6DF794",
				"type": "PointLight",
				"name": "PointLight 1",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,4.837141,1],
				"color": 16777215,
				"intensity": 0.25,
				"distance": 0,
				"decay": 1,
				"shadow": {
					"camera": {
						"uuid": "34ED7BBB-6BFE-47F4-B69B-554EC468FE20",
						"type": "PerspectiveCamera",
						"fov": 90,
						"zoom": 1,
						"near": 0.5,
						"far": 500,
						"focus": 10,
						"aspect": 1,
						"filmGauge": 35,
						"filmOffset": 0
					}
				}
			},
			{
				"uuid": "0F2D0E48-F685-487E-8E04-99E0B76F9A19",
				"type": "AmbientLight",
				"name": "AmbientLight 1",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
				"color": 16777215,
				"intensity": 1
			}],
		"background": 11184810
	}
}

Result: 2uv1x as expected.

Same geometry, now with the textures upped to [3,3] repeat, 1 set of UVs:

{
	"metadata": {
		"version": 4.5,
		"type": "Object",
		"generator": "Object3D.toJSON"
	},
	"geometries": [
		{
			"uuid": "0A8F2988-626F-411C-BD6A-AC656C4E6878",
			"type": "Geometry",
			"data": {
				"vertices": [ 1, 1, 0, 1, -1, 0, -1, -1, 0, -1, 1, 0 ],
                "normals":  [ 0,0,1, 0,0,1, 0,0,1, 0,0,1 ],
                "uvs": [ [ 1, 1, 1, 0, 0, 0, 0, 1 ] ],
				"faces": [ 8, 2,1,0, 2,1,0,   8, 3,2,0, 3,2,0 ]
			}
		}],
	"materials": [
		{
			"uuid": "1004175C-0998-4243-900E-1183CE95A692",
			"type": "MeshStandardMaterial",
			"color": 16777215,
			"roughness": 0.5,
			"metalness": 0.01,
			"emissive": 0,
			"map": "2B905060-08BC-4F9A-B459-B19426D879A8",
			"normalMap": "DBCBCBC9-9C93-4CB0-96F0-BE95B3EAE706",
			"normalScale": [1,1],
            "roughnessMap": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
            "aoMap": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
            "aoMapIntensity": 0.5,
			"depthFunc": 3,
			"depthTest": true,
			"depthWrite": true,
			"skinning": false,
			"morphTargets": false,
			"dithering": false
		}],
	"textures": [
		{
			"uuid": "2B905060-08BC-4F9A-B459-B19426D879A8",
			"name": "",
			"mapping": 300,
			"repeat": [3,3],
			"offset": [0,0],
			"wrap": [1000,1000],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "66BE77DC-B7CB-4C84-B685-DDCC506C4015"
		},
		{
			"uuid": "DBCBCBC9-9C93-4CB0-96F0-BE95B3EAE706",
			"name": "",
			"mapping": 300,
			"repeat": [3,3],
			"offset": [0,0],
			"wrap": [1000,1000],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "CEB6F8FF-29C2-44D4-8C25-6998FF62CDE5"
		},
		{
			"uuid": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
			"name": "",
			"mapping": 300,
			"repeat": [3,3],
			"offset": [0,0],
			"wrap": [1000,1000],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "5D6FFCBC-2194-4A81-AC85-59D92F101A4C"
		}],
	"images": [
        {
            "uuid": "66BE77DC-B7CB-4C84-B685-DDCC506C4015",
            "url": "PodiumFloor_Floor_BaseColor.jpg"
        },
		{
			"uuid": "CEB6F8FF-29C2-44D4-8C25-6998FF62CDE5",
            "url": "PodiumFloor_Floor_Normal.jpg"
		},
		{
			"uuid": "5D6FFCBC-2194-4A81-AC85-59D92F101A4C",
            "url": "PodiumFloor_Floor_AO_R.jpg"
		}],
	"object": {
		"uuid": "378FAA8D-0888-4249-8701-92D1C1F37C51",
		"type": "Scene",
		"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
		"children": [
			{
				"uuid": "E7B44C44-DD75-4C29-B571-21AD6AEF0CA9",
				"type": "Mesh",
				"name": "SharedVertexTest",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
				"geometry": "0A8F2988-626F-411C-BD6A-AC656C4E6878",
				"material": "1004175C-0998-4243-900E-1183CE95A692"
			},
			{
				"uuid": "95EE0E37-CAA0-455D-8F12-7C4FDF6DF794",
				"type": "PointLight",
				"name": "PointLight 1",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,4.837141,1],
				"color": 16777215,
				"intensity": 0.25,
				"distance": 0,
				"decay": 1,
				"shadow": {
					"camera": {
						"uuid": "34ED7BBB-6BFE-47F4-B69B-554EC468FE20",
						"type": "PerspectiveCamera",
						"fov": 90,
						"zoom": 1,
						"near": 0.5,
						"far": 500,
						"focus": 10,
						"aspect": 1,
						"filmGauge": 35,
						"filmOffset": 0
					}
				}
			},
			{
				"uuid": "0F2D0E48-F685-487E-8E04-99E0B76F9A19",
				"type": "AmbientLight",
				"name": "AmbientLight 1",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
				"color": 16777215,
				"intensity": 1
			}],
		"background": 11184810
	}
}

Result: 1uv3x I would not have expected the complete darkness of the plane, but this may just be the way the shader works with only 1 set of UVs.

Same geometry, 2UV sets, with all textures tiled to [3,3]

{
	"metadata": {
		"version": 4.5,
		"type": "Object",
		"generator": "Object3D.toJSON"
	},
	"geometries": [
		{
			"uuid": "0A8F2988-626F-411C-BD6A-AC656C4E6878",
			"type": "Geometry",
			"data": {
				"vertices": [ 1, 1, 0, 1, -1, 0, -1, -1, 0, -1, 1, 0 ],
                "normals":  [ 0,0,1, 0,0,1, 0,0,1, 0,0,1 ],
                "uvs": [ [ 1, 1, 1, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 0, 0, 0, 0, 1 ] ],
				"faces": [ 8, 2,1,0, 2,1,0, 2,1,0,   8, 3,2,0, 3,2,0, 3,2,0 ]
			}
		}],
	"materials": [
		{
			"uuid": "1004175C-0998-4243-900E-1183CE95A692",
			"type": "MeshStandardMaterial",
			"color": 16777215,
			"roughness": 0.5,
			"metalness": 0.01,
			"emissive": 0,
			"map": "2B905060-08BC-4F9A-B459-B19426D879A8",
			"normalMap": "DBCBCBC9-9C93-4CB0-96F0-BE95B3EAE706",
			"normalScale": [1,1],
            "roughnessMap": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
            "aoMap": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
            "aoMapIntensity": 0.5,
			"depthFunc": 3,
			"depthTest": true,
			"depthWrite": true,
			"skinning": false,
			"morphTargets": false,
			"dithering": false
		}],
	"textures": [
		{
			"uuid": "2B905060-08BC-4F9A-B459-B19426D879A8",
			"name": "",
			"mapping": 300,
			"repeat": [3,3],
			"offset": [0,0],
			"wrap": [1000,1000],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "66BE77DC-B7CB-4C84-B685-DDCC506C4015"
		},
		{
			"uuid": "DBCBCBC9-9C93-4CB0-96F0-BE95B3EAE706",
			"name": "",
			"mapping": 300,
			"repeat": [3,3],
			"offset": [0,0],
			"wrap": [1000,1000],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "CEB6F8FF-29C2-44D4-8C25-6998FF62CDE5"
		},
		{
			"uuid": "2CC1EE93-3FA2-4458-A022-85210D6A415A",
			"name": "",
			"mapping": 300,
			"repeat": [3,3],
			"offset": [0,0],
			"wrap": [1000,1000],
			"minFilter": 1008,
			"magFilter": 1006,
			"anisotropy": 1,
			"flipY": true,
			"image": "5D6FFCBC-2194-4A81-AC85-59D92F101A4C"
		}],
	"images": [
        {
            "uuid": "66BE77DC-B7CB-4C84-B685-DDCC506C4015",
            "url": "PodiumFloor_Floor_BaseColor.jpg"
        },
		{
			"uuid": "CEB6F8FF-29C2-44D4-8C25-6998FF62CDE5",
            "url": "PodiumFloor_Floor_Normal.jpg"
		},
		{
			"uuid": "5D6FFCBC-2194-4A81-AC85-59D92F101A4C",
            "url": "PodiumFloor_Floor_AO_R.jpg"
		}],
	"object": {
		"uuid": "378FAA8D-0888-4249-8701-92D1C1F37C51",
		"type": "Scene",
		"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
		"children": [
			{
				"uuid": "E7B44C44-DD75-4C29-B571-21AD6AEF0CA9",
				"type": "Mesh",
				"name": "SharedVertexTest",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
				"geometry": "0A8F2988-626F-411C-BD6A-AC656C4E6878",
				"material": "1004175C-0998-4243-900E-1183CE95A692"
			},
			{
				"uuid": "95EE0E37-CAA0-455D-8F12-7C4FDF6DF794",
				"type": "PointLight",
				"name": "PointLight 1",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,4.837141,1],
				"color": 16777215,
				"intensity": 0.25,
				"distance": 0,
				"decay": 1,
				"shadow": {
					"camera": {
						"uuid": "34ED7BBB-6BFE-47F4-B69B-554EC468FE20",
						"type": "PerspectiveCamera",
						"fov": 90,
						"zoom": 1,
						"near": 0.5,
						"far": 500,
						"focus": 10,
						"aspect": 1,
						"filmGauge": 35,
						"filmOffset": 0
					}
				}
			},
			{
				"uuid": "0F2D0E48-F685-487E-8E04-99E0B76F9A19",
				"type": "AmbientLight",
				"name": "AmbientLight 1",
				"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
				"color": 16777215,
				"intensity": 1
			}],
		"background": 11184810
	}
}

Result: 2uv3x while the color and normal (although you may need to up the direct lighting or metalness to see it) and roughness tile correctly, AO is still at the same size as the [1,1] repeat case.

There’s certainly a chance this issue is another offshoot of https://github.com/mrdoob/three.js/issues/9457 if e.g. something internal is going off-by-one in its material indexing for property lookup…

Three.js version
  • Dev
  • r85
Browser
  • [?] All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • [?] All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Reproduced in live https://threejs.org/editor/ editor on Windows chrome Version 59.0.3071.86 (Official Build) (64-bit)

Textures: podiumfloor_floor_basecolor

podiumfloor_floor_normal

podiumfloor_floor_ao_r

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
WestLangleycommented, Jun 14, 2017

Since you are learning, I suggest you also learn your way around the source code. I am sure your improvements to the docs would be welcomed by all.

And, by the way, try not to complain. There is a lot to learn. Everyone has to go through what you are going through. 😃

2reactions
WestLangleycommented, Jun 13, 2017

lightmap and aomap require a 2nd set of UVs. offset and repeat apply only to the first set of UVs.

Also see this stackoverflow post.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Texture#repeat – three.js docs
This defines how the texture is wrapped vertically and corresponds to V in UV mapping. The same choices are available as for #...
Read more >
Ambient Occlusion Node
The Ambient Occlusion (AO) node uses the object in your scene to create a black and white texture that represents the occlusion on...
Read more >
Texture Import Settings
Only available when Generate Mip Maps is enabled. Wrap Mode, Select how the Texture behaves when tiled. The default option is Repeat. All...
Read more >
Blender 3 Importing & Setting up Texture Maps Ultimate Guide ...
Blender 3 Importing & Setting up Texture Maps Ultimate Guide AO Glass Opacity Displacement EmissionIn this tutorial, you will learn how to ...
Read more >
Texture 2.0 VOP node
This operator computes a filtered sample of the texture map specified and returns an RGB or RGBA color. If the image does not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found