Texture Maps, Materials & Lights

Questions
, ,
1

Hi guys,

i’m quite new to WebGL development and haven’t used any graphics engine like this before.
However i already made my first steps and i’m pretty sure to know, how things are working together now.

But i faced a quite complex problem i didn’t found a solution for yet. I also find barely informations about this specific topic on the internet.

It’s about textures. I recently learned about:

  • Color maps / Diffuse maps (material.map)
  • Normal maps / Bump maps (material.normalMap / material.bumpMap)
  • Displacement maps (material.displacementMap)
  • Occlusion maps (material.aoMap)
  • Specularity maps (specularMap)
    and i tried to apply all 5 maps to a single Material.

In the end i found only ond single combination, that worked our for all 5 maps: MeshPhongMaterial + SpotLight… is this correct?
Most Materials doesn’t support the texture maps, even if they contain the property specified above?
And all these texture mappings are depending on the light (e.g. as soon as i add a aoMap, HemisphereLight has no effect anymore)?

Is there any overview, where i can see, which combinations of texture maps + lights + materials are possible (i didn’t found any yet after a long research)?

At the end some code to show you guys what i did (or may did wrong?).
Loading of the texture maps:

var BRICK_COLOR = new THREE.TextureLoader().load("textures/brick_COLOR.png");
var BRICK_NRM = new THREE.TextureLoader().load("textures/brick_NRM.png");
var BRICK_DISP = new THREE.TextureLoader().load("textures/brick_DISP.png");
var BRICK_OCC = new THREE.TextureLoader().load("textures/brickOCC.png");
var BRICK_SPEC = new THREE.TextureLoader().load("textures/brick_SPEC.png");
Creation of the material:
var material = new THREE.MeshPhongMaterial({ map: BRICK_COLOR, normalMap: BRICK_NRM, displacementMap: BRICK_DISP, aoMap: BRICK_OCC, specularMap: BRICK_SPEC }); // also tried other materials
Light:
var light = new THREE.SpotLight(0xffffff); // also tried other lights
light.position.set(-6, -2, -6);
scene.add(light);

Creation of the actual object:

var shape = new THREE.BoxGeometry(1, 1, 1);
var block = new THREE.Mesh(shape, material);
scene.add(block);

I use the standard window.requestAnimationFrame mechanism to update & render the scene and the Three.js OrbitControls library.

Overall i’m quite impressed of the possibillities WebGL offers. But i guess for beginners it might be the hardest way to get into this 3D design and topic.

I’m looking forward to get some clarifying responses.

Greetings, Michael.