After mapping the variables, we can initialize shader uniforms, such as lights:

gl.uniform3fv(program.uLightPosition, lights.getArray('position'));
gl.uniform3fv(program.uLd, lights.getArray('diffuse'));
gl.uniform3fv(program.uLs, lights.getArray('specular'));

The default material properties are as follows:

gl.uniform3fv(program.uKa, [1, 1, 1]);
gl.uniform3fv(program.uKd, [1, 1, 1]);
gl.uniform3fv(program.uKs, [1, 1, 1]);
gl.uniform1f(program.uNs, 1);

Lastly, we will create a floor instance that we will use later. We will also structure the data that describes the car model that we'll be loading later:

floor = new Floor(200, 2);

carModelData = {
  'BMW i8': {
    paintAlias: 'BMW',
    partsCount: 25,
    path: '/common/models/bmw-i8/part'
  }
};

Although we have only described one car model here, we'll leverage this data format so that we can add other car models later in this chapter.

Here's the final configure function, which you can find in the ch09_02_showroom.html source code:

function configure() {
  const canvas = utils.getCanvas('webgl-canvas');
  utils.autoResizeCanvas(canvas);

  gl = utils.getGLContext(canvas);
  gl.clearColor(...clearColor);
  gl.clearDepth(1);
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LESS);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  program = new Program(gl, 'vertex-shader', 'fragment-shader');

  const attributes = [
    'aVertexPosition',
    'aVertexNormal',
    'aVertexColor'
  ];

  const uniforms = [
    'uProjectionMatrix',
    'uModelViewMatrix',
    'uNormalMatrix',
    'uLightPosition',
    'uWireframe',
    'uLd',
    'uLs',
    'uKa',
    'uKd',
    'uKs',
    'uNs',
    'uD',
    'uIllum'
  ];

  program.load(attributes, uniforms);

  scene = new Scene(gl, program);
  clock = new Clock();

  camera = new Camera(Camera.ORBITING_TYPE);
  new Controls(camera, canvas);

  transforms = new Transforms(gl, program, camera, canvas);

  lights = new LightsManager();

  lightPositions = {
    farLeft: [-1000, 1000, -1000],
    farRight: [1000, 1000, -1000],
    nearLeft: [-1000, 1000, 1000],
    nearRight: [1000, 1000, 1000]
  };

  Object.keys(lightPositions).forEach(key => {
    const light = new Light(key);
    light.setPosition(lightPositions[key]);
    light.setDiffuse([0.4, 0.4, 0.4]);
    light.setSpecular([0.8, 0.8, 0.8]);
    lights.add(light)
  });

  gl.uniform3fv(program.uLightPosition, lights.getArray('position'));
  gl.uniform3fv(program.uLd, lights.getArray('diffuse'));
  gl.uniform3fv(program.uLs, lights.getArray('specular'));

  gl.uniform3fv(program.uKa, [1, 1, 1]);
  gl.uniform3fv(program.uKd, [1, 1, 1]);
  gl.uniform3fv(program.uKs, [1, 1, 1]);
  gl.uniform1f(program.uNs, 1);

  floor = new Floor(200, 2);

  carModelData = {
    'BMW i8': {
      paintAlias: 'BMW',
      partsCount: 25,
      path: '/common/models/bmw-i8/part'
    }
  };
}

We have finished setting up the scene. Next, we'll implement the load function.