A Simple Discrete-Event Simulation: Part 66

A direct link to the standalone page is here.

I followed up today and set up the initialization of the 3D graphics so it happens only after all of the required resources were loaded.

The process is kicked off by the function called by the body element’s onload event. This is called when the entire page and its required sources have been successfully loaded.

    <body onload="initGraphics()">

1	<body onload="initGraphics()">

The next key is to get everything that references the 3D graphics environment called for the first time in the initGraphics function. The function also starts off by getting handles to all user controls so it can re-enable them.

    function initGraphics() {
      var runButton = document.getElementById("run_button");
      var pseButton = document.getElementById("pause_button");
      var stpButton = document.getElementById("step_button");
      var rstButton = document.getElementById("reset_button");
      var tmoButton = document.getElementById("timeOps_button");
      var mltButton = document.getElementById("multiplier_button");
      runButton.disabled = false;
      pseButton.disabled = false;
      stpButton.disabled = false;
      rstButton.disabled = false;
      tmoButton.disabled = false;
      mltButton.disabled = false;
    
      initGraphics3D();          //set up the renderer
      verifyModel();             //define the environment elements
      initGraphics3DCamera();    //set up the camera
      initGraphics3DEntities();  //define the entities
      //this is called every screen refresh but is only called the first time when the body' onload event is processed
      updateAllDisplays();       //update and draw
    }

function initGraphics() {

var runButton = document.getElementById("run_button");

var pseButton = document.getElementById("pause_button");

var stpButton = document.getElementById("step_button");

var rstButton = document.getElementById("reset_button");

var tmoButton = document.getElementById("timeOps_button");

var mltButton = document.getElementById("multiplier_button");

runButton.disabled = false;

pseButton.disabled = false;

stpButton.disabled = false;

rstButton.disabled = false;

tmoButton.disabled = false;

mltButton.disabled = false;

initGraphics3D(); //set up the renderer

verifyModel(); //define the environment elements

initGraphics3DCamera(); //set up the camera

initGraphics3DEntities(); //define the entities

//this is called every screen refresh but is only called the first time when the body' onload event is processed

updateAllDisplays(); //update and draw

}

Here are most of the called functions. You’ve seen the verifyModel code before so I won’t repeat it here. It’s called because it initializes the 3D elements representing the simulation components and adds them to the scene. Note that the renderer.setClearColor("#000000",1); call explicitly sets the background color of the 3D scene, so it now renders properly on my 3rd gen iPad.

//***************************************************************************************
//*** basic 3D setup
//***************************************************************************************
    var renderer;
    var effect;
    var scene;
    var camera;
    var light;
    
    function initGraphics3D() {
      renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
      //var renderer = new THREE.WebGLRenderer();
      if (virtual3DViewOnly) {
        //get handles to wrapper divs and set them to not display
        //var handleBody = document.getElementById("body");
        //handleBody.style.margin = "0px";
        var handleWrapper = document.getElementById("wrapper");
        handleWrapper.style.display = "none";
        var handleWindow3D = document.getElementById("window3D");
        handleWindow3D.style.display = "none";
        var handleWrapper2 = document.getElementById("wrapper2");
        handleWrapper2.style.display = "none";
        //set the renderer to cover the entire screen
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        effect = new THREE.StereoEffect(renderer);
      } else {
        renderer.setSize( 380,260 );
        var window3D = document.getElementById("window3D");
        window3D.appendChild( renderer.domElement );
        //var globalCTX3D = window3D.children[0].getContext("2d");
      }
      renderer.setClearColor("#000000",1);

      scene = new THREE.Scene();
      //var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      camera = new THREE.PerspectiveCamera( 75, 380 / 260, 0.1, 1000 );

      light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );
      light.position.set( 0, 300, 0 );
      scene.add( light );
    }  //initGraphics3D

//***************************************************************************************

//*** basic 3D setup

//***************************************************************************************

var renderer;

var effect;

var scene;

var camera;

var light;

function initGraphics3D() {

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

//var renderer = new THREE.WebGLRenderer();

if (virtual3DViewOnly) {

//get handles to wrapper divs and set them to not display

//var handleBody = document.getElementById("body");

//handleBody.style.margin = "0px";

var handleWrapper = document.getElementById("wrapper");

handleWrapper.style.display = "none";

var handleWindow3D = document.getElementById("window3D");

handleWindow3D.style.display = "none";

var handleWrapper2 = document.getElementById("wrapper2");

handleWrapper2.style.display = "none";

//set the renderer to cover the entire screen

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

effect = new THREE.StereoEffect(renderer);

} else {

renderer.setSize( 380,260 );

var window3D = document.getElementById("window3D");

window3D.appendChild( renderer.domElement );

//var globalCTX3D = window3D.children[0].getContext("2d");

}

renderer.setClearColor("#000000",1);

scene = new THREE.Scene();

//var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera = new THREE.PerspectiveCamera( 75, 380 / 260, 0.1, 1000 );

light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );

light.position.set( 0, 300, 0 );

scene.add( light );

} //initGraphics3D

//***************************************************************************************
//*** camera setup
//***************************************************************************************
    var cameraRadius;
    var cameraRevolutionAngle;
    var cameraRevolutionIncrement;
    var global3DBaseX;
    var global3DBaseY;
    var global3DBaseZ;
    var global3DLookTarget;
    
    function initGraphics3DCamera() {
      //this must all be set up AFTER the components have been initialized
      cameraRadius = 300.0;
      cameraRevolutionAngle = Math.PI * 0.5;
      cameraRevolutionIncrement = -0.005;

      var xWid = global3DMaxX - global3DMinX;
      var yWid = global3DMaxY - global3DMinY;

      if (xWid > yWid) {
        cameraRadius = xWid * global3DCameraRadiusFactor;
      } else {
        cameraRadius = yWid * global3DCameraRadiusFactor;
      }

      global3DBaseX = (global3DMinX + global3DMaxX) / 2;
      global3DBaseY = 0;
      global3DBaseZ = (global3DMinY + global3DMaxY) / 2;

      camera.position.x = global3DBaseX + cameraRadius * Math.cos(cameraRevolutionAngle);
      camera.position.y = global3DCameraHeight; //48;
      camera.position.z = global3DBaseZ + cameraRadius * Math.sin(cameraRevolutionAngle);

      global3DLookTarget = new THREE.Vector3(global3DBaseX, global3DBaseY, global3DBaseZ);
      camera.lookAt(global3DLookTarget);

      if (virtual3DViewOnly) {
        effect.render(scene, camera);
      } else {
        renderer.render(scene, camera);
      }

    }  //initGraphics3DCamera

//***************************************************************************************

//*** camera setup

//***************************************************************************************

var cameraRadius;

var cameraRevolutionAngle;

var cameraRevolutionIncrement;

var global3DBaseX;

var global3DBaseY;

var global3DBaseZ;

var global3DLookTarget;

function initGraphics3DCamera() {

//this must all be set up AFTER the components have been initialized

cameraRadius = 300.0;

cameraRevolutionAngle = Math.PI * 0.5;

cameraRevolutionIncrement = -0.005;

var xWid = global3DMaxX - global3DMinX;

var yWid = global3DMaxY - global3DMinY;

if (xWid > yWid) {

cameraRadius = xWid * global3DCameraRadiusFactor;

} else {

cameraRadius = yWid * global3DCameraRadiusFactor;

}

global3DBaseX = (global3DMinX + global3DMaxX) / 2;

global3DBaseY = 0;

global3DBaseZ = (global3DMinY + global3DMaxY) / 2;

camera.position.x = global3DBaseX + cameraRadius * Math.cos(cameraRevolutionAngle);

camera.position.y = global3DCameraHeight; //48;

camera.position.z = global3DBaseZ + cameraRadius * Math.sin(cameraRevolutionAngle);

global3DLookTarget = new THREE.Vector3(global3DBaseX, global3DBaseY, global3DBaseZ);

camera.lookAt(global3DLookTarget);

if (virtual3DViewOnly) {

effect.render(scene, camera);

} else {

renderer.render(scene, camera);

}

} //initGraphics3DCamera

    function initGraphics3DEntities() {
      for (var i = 0; i < global3DMaxEntityCount; i++) {
        //this call adds the newly defined components to the 3D scene
        define3DEntity(10000, 10000, 5, global3DEntityHeight, 8, globalReadyColor, globalReadyVertexColor);
      }
      normalize3DEntities(0);  //parameter is starting index
    }

function initGraphics3DEntities() {

for (var i = 0; i < global3DMaxEntityCount; i++) {

//this call adds the newly defined components to the 3D scene

define3DEntity(10000, 10000, 5, global3DEntityHeight, 8, globalReadyColor, globalReadyVertexColor);

}

normalize3DEntities(0); //parameter is starting index

}

    function updateAllDisplays() {
      drawModel();
      update3D();

      cameraRevolutionAngle += cameraRevolutionIncrement;
      if (cameraRevolutionAngle > Math.PI * 2.0) {
        cameraRevolutionAngle -= Math.PI * 2.0;
      } else if (cameraRevolutionAngle < 0) {
        cameraRevolutionAngle += Math.PI * 2.0;
      }
      camera.position.x = global3DBaseX + cameraRadius * Math.cos(cameraRevolutionAngle);
      camera.position.y = global3DCameraHeight; //48;
      camera.position.z = global3DBaseZ + cameraRadius * Math.sin(cameraRevolutionAngle);
      camera.lookAt(global3DLookTarget);

      if (virtual3DViewOnly) {
        effect.render(scene, camera);
      } else {
        renderer.render(scene, camera);
      }
    }  //updateAllDisplays

function updateAllDisplays() {

drawModel();

update3D();

cameraRevolutionAngle += cameraRevolutionIncrement;

if (cameraRevolutionAngle > Math.PI * 2.0) {

cameraRevolutionAngle -= Math.PI * 2.0;

} else if (cameraRevolutionAngle < 0) {

cameraRevolutionAngle += Math.PI * 2.0;

}

camera.position.x = global3DBaseX + cameraRadius * Math.cos(cameraRevolutionAngle);

camera.position.y = global3DCameraHeight; //48;

camera.position.z = global3DBaseZ + cameraRadius * Math.sin(cameraRevolutionAngle);

camera.lookAt(global3DLookTarget);

if (virtual3DViewOnly) {

effect.render(scene, camera);

} else {

renderer.render(scene, camera);

}

} //updateAllDisplays

M	T	W	T	F	S	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

A Simple Discrete-Event Simulation: Part 66

Leave a Reply Cancel reply

Recent Posts

Recent Comments

Categories

Meta