Real-Time 3D Graphics with WebGL 2 - Second Edition

Initialization Steps

We will create a global variable that will store the (simulation) time. We will also create the global variables that regulate the animation:

let  gl, scene, program, camera, transforms,  elapsedTime, initialTime,  fixedLight = false,  balls = [],  sceneTime = 0,  animationRate = 15,  gravity = 9.8,  ballsCount = 50;

The load function is updated to load a bunch of balls using the same geometry (same JSON file), but we are adding it several times to the scene object. The code looks like this:

function load() {  scene.add(new Floor(80, 2));  for (let i = 0; i < ballsCount; i++) {    balls.push(new BouncingBall());    scene.load('/common/models/geometries/ball.json', `ball${i}`);  }}

ES6 Template Literals If you're not familiar with the ...