{"id":1296,"date":"2017-01-04T09:44:21","date_gmt":"2017-01-04T14:44:21","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=1296"},"modified":"2017-02-03T12:59:01","modified_gmt":"2017-02-03T17:59:01","slug":"a-simple-discrete-event-simulation-part-66","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2017\/01\/04\/a-simple-discrete-event-simulation-part-66\/","title":{"rendered":"A Simple Discrete-Event Simulation: Part 66"},"content":{"rendered":"

<\/iframe><\/p>\nA direct link to the standalone page is <a href=\"https:\/\/www.rpchurchill.com\/demo\/des\/discrete-event-sim_20170104.html\">here<\/a>.<\/p>\nI followed up today and set up the initialization of the 3D graphics so it happens only after all of the required resources were loaded.<\/p>\nThe 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.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n <body onload=\"initGraphics()\">\r\n<\/pre>\nThe next key is to get everything that references the 3D graphics environment called for the first time in the <code>initGraphics<\/code> function. The function also starts off by getting handles to all user controls so it can re-enable them.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n function initGraphics() {\r\n var runButton = document.getElementById(\"run_button\");\r\n var pseButton = document.getElementById(\"pause_button\");\r\n var stpButton = document.getElementById(\"step_button\");\r\n var rstButton = document.getElementById(\"reset_button\");\r\n var tmoButton = document.getElementById(\"timeOps_button\");\r\n var mltButton = document.getElementById(\"multiplier_button\");\r\n runButton.disabled = false;\r\n pseButton.disabled = false;\r\n stpButton.disabled = false;\r\n rstButton.disabled = false;\r\n tmoButton.disabled = false;\r\n mltButton.disabled = false;\r\n \r\n initGraphics3D(); \/\/set up the renderer\r\n verifyModel(); \/\/define the environment elements\r\n initGraphics3DCamera(); \/\/set up the camera\r\n initGraphics3DEntities(); \/\/define the entities\r\n \/\/this is called every screen refresh but is only called the first time when the body' onload event is processed\r\n updateAllDisplays(); \/\/update and draw\r\n }\r\n<\/pre>\nHere 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 <code>renderer.setClearColor(\"#000000\",1);<\/code> call explicitly sets the background color of the 3D scene, so it now renders properly on my 3rd gen iPad.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n\/\/***************************************************************************************\r\n\/\/*** basic 3D setup\r\n\/\/***************************************************************************************\r\n var renderer;\r\n var effect;\r\n var scene;\r\n var camera;\r\n var light;\r\n \r\n function initGraphics3D() {\r\n renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});\r\n \/\/var renderer = new THREE.WebGLRenderer();\r\n if (virtual3DViewOnly) {\r\n \/\/get handles to wrapper divs and set them to not display\r\n \/\/var handleBody = document.getElementById(\"body\");\r\n \/\/handleBody.style.margin = \"0px\";\r\n var handleWrapper = document.getElementById(\"wrapper\");\r\n handleWrapper.style.display = \"none\";\r\n var handleWindow3D = document.getElementById(\"window3D\");\r\n handleWindow3D.style.display = \"none\";\r\n var handleWrapper2 = document.getElementById(\"wrapper2\");\r\n handleWrapper2.style.display = \"none\";\r\n \/\/set the renderer to cover the entire screen\r\n renderer.setSize( window.innerWidth, window.innerHeight );\r\n document.body.appendChild( renderer.domElement );\r\n effect = new THREE.StereoEffect(renderer);\r\n } else {\r\n renderer.setSize( 380,260 );\r\n var window3D = document.getElementById(\"window3D\");\r\n window3D.appendChild( renderer.domElement );\r\n \/\/var globalCTX3D = window3D.children[0].getContext(\"2d\");\r\n }\r\n renderer.setClearColor(\"#000000\",1);\r\n\r\n scene = new THREE.Scene();\r\n \/\/var camera = new THREE.PerspectiveCamera( 75, window.innerWidth \/ window.innerHeight, 0.1, 1000 );\r\n camera = new THREE.PerspectiveCamera( 75, 380 \/ 260, 0.1, 1000 );\r\n\r\n light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );\r\n light.position.set( 0, 300, 0 );\r\n scene.add( light );\r\n } \/\/initGraphics3D\r\n<\/pre>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n\/\/***************************************************************************************\r\n\/\/*** camera setup\r\n\/\/***************************************************************************************\r\n var cameraRadius;\r\n var cameraRevolutionAngle;\r\n var cameraRevolutionIncrement;\r\n var global3DBaseX;\r\n var global3DBaseY;\r\n var global3DBaseZ;\r\n var global3DLookTarget;\r\n \r\n function initGraphics3DCamera() {\r\n \/\/this must all be set up AFTER the components have been initialized\r\n cameraRadius = 300.0;\r\n cameraRevolutionAngle = Math.PI * 0.5;\r\n cameraRevolutionIncrement = -0.005;\r\n\r\n var xWid = global3DMaxX - global3DMinX;\r\n var yWid = global3DMaxY - global3DMinY;\r\n\r\n if (xWid > yWid) {\r\n cameraRadius = xWid * global3DCameraRadiusFactor;\r\n } else {\r\n cameraRadius = yWid * global3DCameraRadiusFactor;\r\n }\r\n\r\n global3DBaseX = (global3DMinX + global3DMaxX) \/ 2;\r\n global3DBaseY = 0;\r\n global3DBaseZ = (global3DMinY + global3DMaxY) \/ 2;\r\n\r\n camera.position.x = global3DBaseX + cameraRadius * Math.cos(cameraRevolutionAngle);\r\n camera.position.y = global3DCameraHeight; \/\/48;\r\n camera.position.z = global3DBaseZ + cameraRadius * Math.sin(cameraRevolutionAngle);\r\n\r\n global3DLookTarget = new THREE.Vector3(global3DBaseX, global3DBaseY, global3DBaseZ);\r\n camera.lookAt(global3DLookTarget);\r\n\r\n if (virtual3DViewOnly) {\r\n effect.render(scene, camera);\r\n } else {\r\n renderer.render(scene, camera);\r\n }\r\n\r\n } \/\/initGraphics3DCamera\r\n<\/pre>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n function initGraphics3DEntities() {\r\n for (var i = 0; i < global3DMaxEntityCount; i++) {\r\n \/\/this call adds the newly defined components to the 3D scene\r\n define3DEntity(10000, 10000, 5, global3DEntityHeight, 8, globalReadyColor, globalReadyVertexColor);\r\n }\r\n normalize3DEntities(0); \/\/parameter is starting index\r\n }\r\n<\/pre>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n function updateAllDisplays() {\r\n drawModel();\r\n update3D();\r\n\r\n cameraRevolutionAngle += cameraRevolutionIncrement;\r\n if (cameraRevolutionAngle > Math.PI * 2.0) {\r\n cameraRevolutionAngle -= Math.PI * 2.0;\r\n } else if (cameraRevolutionAngle < 0) {\r\n cameraRevolutionAngle += Math.PI * 2.0;\r\n }\r\n camera.position.x = global3DBaseX + cameraRadius * Math.cos(cameraRevolutionAngle);\r\n camera.position.y = global3DCameraHeight; \/\/48;\r\n camera.position.z = global3DBaseZ + cameraRadius * Math.sin(cameraRevolutionAngle);\r\n camera.lookAt(global3DLookTarget);\r\n\r\n if (virtual3DViewOnly) {\r\n effect.render(scene, camera);\r\n } else {\r\n renderer.render(scene, camera);\r\n }\r\n } \/\/updateAllDisplays\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"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 … <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2017\/01\/04\/a-simple-discrete-event-simulation-part-66\/\">Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60],"tags":[121,49],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1296"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1296"}],"version-history":[{"count":4,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1296\/revisions"}],"predecessor-version":[{"id":1401,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1296\/revisions\/1401"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}