playground/index.html

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.">
    <title>Playground</title>
    <link rel="stylesheet" type="text/css" href="css/basic-layout.css">
    <link rel="stylesheet" type="text/css" href="css/info-layout.css">
    <link rel="stylesheet" type="text/css" href="css/app-layout.css">
</head>

<body>
    <!-- basic layout defined in css/basic-layout.css -->
    <div id="loading"><h1>L O A D I N G ...</h1></div>
    <div id="layout">
        <div id="scene"></div>
        <div id="app">
            <div id="layout-app">
                <div id="header"></div>
                <div id="xray_img_1">
                    <img id="xray_img_src_1" src="model/homer-brain.jpg"/>
                </div>
                <div id="ddr_img_1">
                    <img id="ddr_img_src_1" src="model/homer-brain.jpg"/>
                </div>
                <div id="xray_img_2">
                    <img id="xray_img_src_2" src="model/homer-brain.jpg"/>
                </div>
                <div id="ddr_img_2">
                    <img id="ddr_img_src_2" src="model/homer-brain.jpg"/>
                </div>
                <div id="xray_readout">TODO</div>
                <div id="cam_readout">TODO</div>
                <div id="cam_img"></div>
                <!-- <div id="linac_sign">TODO</div> -->
                <div id="timeline">TODO</div><!-- http://bl.ocks.org/denisemauldin/ceb7065687c125223339a26a47d58a28 -->
                <div id="warning_sign"></div>
                <div id="statusbar"></div>
                <div id="console">
                <button type="button" id="button_xray">Take Xray Images</button>
                <button type="button" id="button_repos" disabled="true">Poke the Patient</button>
                </div>
            </div>
        </div>
        <div id="info">
            <img id="patient_profile" src="model/homer-profile.jpg"/>
        </div>
    </div>

    <script type="module">
        // loading Three.js libs
        import * as THREE from './js/three.js-r115/build/three.module.js';
        import { OrbitControls } from './js/three.js-r115/examples/jsm/controls/OrbitControls.js';
        import { OBJLoader } from './js/three.js-r115/examples/jsm/loaders/OBJLoader.js';
        //import Stats from './js/three.js-r115/examples/jsm/libs/stats.module.js';

        // Playground
        // ----------
        /** pg_s_loadling -> pg_s_loaded -> pg_s_preview -> pg_s_interactive */
        var pg_state = "pg_s_loadling";
        const ctrl_pg_preview_duration_ms = 5 * 1000; // use bigger value to let delay oot trigger
        const ctrl_pg_state_transition_interval_ms = 500; // the interval polling frequency of evaluating state transition
        const ctrl_pg_patient_oot_rate = 0.1; /* out-of-toelrance probability (evaluated per ctrl_pg_state_transition_interval_ms) */
        const ctrl_pg_patient_oot_after_repos_at_least_ms = 10000; /* [just for smoothy demo] we trigger oot not immediately after a repos */
        const ctrl_pg_patient_oot_after_xray_at_least_ms = 5000; /* [just for smoothy demo] we trigger oot not immediately after xrays */
        var ctrl_pg_patient_last_repos_timestamp_ms = Date.now();
        var ctrl_pg_patient_last_xray_timestamp_ms = Date.now();
        var ctrl_pg_patient_deviation_rot = new THREE.Vector3();
        var ctrl_pg_patient_deviation_trans = new THREE.Vector3();
        var ctrl_pg_couch_correct_rot = new THREE.Vector3();
        var ctrl_pg_couch_correct_trans = new THREE.Vector3();
        // ----------

        /** wf_s_treating -> wf_s_patient_oot -> wf_s_imaging -> wf_s_fusion -> wf_s_couch_move
         **        ^-------------------------------------------------------------|
         **/
        // ------------------------------
        var wf_state = "wf_s_treating";
        // ------------------------------

        // scene control
        // --------------
        var ctrl_gantry_beam_mv_on = true;
        var ctrl_gantry_speed_default = 10; /* degree/s */
        var ctrl_gantry_speed = ctrl_gantry_speed_default;
        var ctrl_camera_on = true;
        var ctrl_xray_triggerd = false;
        var ctrl_xray_expose_time_ms = 500;
        // --------------

        // scene objects
        // ----------------
        var scene;
        //var scene_stats;
        var scene_camera;
        var scene_controls; /* e.g. mouse */
        var scene_renderer;
        const scene_renderer_max_fps = 40;             /* desired max. animation fps */
        const scene_renderer_min_fps = 25;             /* desired min. animation fps */
        var scene_animation_clock = new THREE.Clock();
        var scene_renderer_elapsed_ms = 0;  /* the elapsed time since the last scene is rendered */
        const scene_background = 0xfbfbfb;

        var scene_obj_couch;
        var scene_obj_couch_top;
        var scene_obj_patient;
        var scene_obj_patient_tumor;
        var scene_obj_isocenter;
        var scene_obj_camera;
        var scene_obj_camera_fov1;
        var scene_obj_camera_fov2;
        var scene_obj_flat_panel_1;
        var scene_obj_flat_panel_2;
        var scene_obj_xray_src_1;
        var scene_obj_xray_src_2;
        var scene_obj_xray_fov_1;
        var scene_obj_xray_fov_2;
        var scene_obj_gantry;
        var scene_obj_gantry_beam_mv;

        const scene_raycaster_from = new THREE.Vector3(0, -1000, 1000); // where in scene camera is
        var raycaster = new THREE.Raycaster(scene_raycaster_from, new THREE.Vector3(), 100, scene_raycaster_from.length());
        var rays_nr_per_ms = 0.1; // estmated raycasting speed
        var scene_raycaster_done = 0; // how many rays are already done
        // ----------------

        // surface point cloud scene
        // --------------------
        var pc_scene;
        var pc_scene_camera;
        var pc_scene_renderer;
        var pc_scene_controls;
        var pc_scene_point_cloud; // THREE.GROUP: hold points from 'point_cloud_points'

        const point_cloud_scan_from_x = -150;
        const point_cloud_scan_to_x   = 150;
        const point_cloud_scan_from_y = -200;
        const point_cloud_scan_to_y   = 150;
        const point_cloud_w = 20;
        const point_cloud_h = 30;
        var point_cloud_points; // array of THREE.GeometryMesh shapes
        // --------------------

        function pc_scene_init() {
            // DOM: where to append the scene
            var container = document.getElementById('cam_img');
            const container_width = container.clientWidth;
            const container_height = container.clientHeight;

            // init camera
            pc_scene_camera = new THREE.PerspectiveCamera(16, container_width / container_height, 1, 3000);
            //pc_scene_camera = new THREE.OrthographicCamera(container_width / -2, container_height / 2, container_height / 2, container_width / -2, 1, 7000);
            pc_scene_camera.position.set(0, -1000, 1000);
            pc_scene_camera.up.set(0, 0, 1);
            pc_scene_camera.lookAt(new THREE.Vector3(0, 0, 0));

            // init scene
            pc_scene = new THREE.Scene();

            // init renderer
            pc_scene_renderer = new THREE.WebGLRenderer({ antialias: true }); // WebGLRenderer CanvasRenderer
            pc_scene_renderer.setClearColor('black');
            pc_scene_renderer.setPixelRatio(window.devicePixelRatio);
            pc_scene_renderer.setSize(container_width, container_height);

            // add point clouds
            pc_scene_point_cloud = new THREE.Group();
            point_cloud_points = new Array(point_cloud_w * point_cloud_h);
            for (var i = 0, len = point_cloud_points.length; i < len; i++) {
                var point = new THREE.Mesh(
                    new THREE.SphereGeometry(3, 4, 4),
                    new THREE.MeshBasicMaterial());
                    point_cloud_points[i] = point; // added to array
                pc_scene_point_cloud.add(point); // aded to scene
            }
            pc_scene.add(pc_scene_point_cloud);

            // init control
            pc_scene_controls = new OrbitControls(pc_scene_camera, pc_scene_renderer.domElement);
            pc_scene_controls.target = new THREE.Vector3(0, -50, 0);
            pc_scene_controls.enablePan = true;
            pc_scene_controls.enableDamping = true;
            pc_scene_controls.dampingFactor = 0.05;
            pc_scene_controls.minDistance = 50;
            pc_scene_controls.maxDistance = 3000;
            pc_scene_controls.maxPolarAngle = Math.PI / 5;
            pc_scene_controls.maxAzimuthAngle = Math.PI / 4;
            pc_scene_controls.minAzimuthAngle = -Math.PI / 4;

            pc_scene_controls.panSpeed = 0.8;
            pc_scene_controls.rotateSpeed = 0.7;
            pc_scene_controls.zoomSpeed = 0.2;

            // append to DOM
            container.appendChild(pc_scene_renderer.domElement);
        }

        function scene_init() {
            // DOM: where to append the scene
            var container = document.getElementById('scene');
            const container_width = container.clientWidth;
            const container_height = container.clientHeight;

            // init camera
            scene_camera = new THREE.PerspectiveCamera(60, container_width / container_height, 1, 7000);
            //scene_camera = new THREE.OrthographicCamera(container_width / -2, container_height / 2, container_height / 2, container_width / -2, 1, 7000);
            scene_camera.position.set(900, -1600, 1400);
            scene_camera.up.set(0, 0, 1);
            scene_camera.lookAt(new THREE.Vector3(0, -200, 0));

            // init scene
            scene = new THREE.Scene();

            // init lights
            var ambLight = new THREE.AmbientLight(0x303030);
            scene.add(ambLight);
            var light1 = new THREE.DirectionalLight(0xffffff, .6);
            light1.position.set(3000, 1500, 3000);
            scene.add(light1);
            var light2 = new THREE.DirectionalLight(0xffffff, .5);
            light2.position.set(-3000, -1500, 3000);
            scene.add(light2);
            var light3 = new THREE.DirectionalLight(0xffffff, .5);
            light3.position.set(1000, -3000, 1000);
            scene.add(light3);

            // init obbjects
            {

                {// gantry
                    const scene_obj_gantry_size_x = 700;
                    const scene_obj_gantry_size_y = 300;
                    const scene_obj_gantry_height = 2000;

                    const scene_obj_gantry_arm_size_x = 700;
                    const scene_obj_gantry_arm_size_y = 1000;
                    const scene_obj_gantry_arm_height = 250;

                    const scene_obj_gantry_head_size = scene_obj_gantry_arm_size_y / 4;
                    const scene_obj_gantry_head_height = 200;

                    scene_obj_gantry = new THREE.Mesh(new THREE.BoxGeometry(scene_obj_gantry_size_x, scene_obj_gantry_size_y, scene_obj_gantry_height),
                        new THREE.MeshLambertMaterial({ color: 0xffb399 }));
                    var scene_obj_gantry_arm = new THREE.Mesh(new THREE.BoxGeometry(scene_obj_gantry_arm_size_x, scene_obj_gantry_arm_size_y, scene_obj_gantry_arm_height),
                        new THREE.MeshLambertMaterial({ color: 0xffb399 }));
                    var scene_obj_gantry_head = new THREE.Mesh(new THREE.CylinderGeometry(scene_obj_gantry_head_size, scene_obj_gantry_head_size, scene_obj_gantry_head_height, 32),
                        new THREE.MeshLambertMaterial({ color: 0xffb399 }));
                    scene_obj_gantry_beam_mv = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, (scene_obj_gantry_height - scene_obj_gantry_arm_height - scene_obj_gantry_arm_height)/2, 12),
                        new THREE.MeshLambertMaterial({ color: 0xff0000 }));

                    scene_obj_gantry_beam_mv.position.set(0, -scene_obj_gantry_head_height - scene_obj_gantry_arm_height/2, 0);
                    scene_obj_gantry_head.add(scene_obj_gantry_beam_mv);

                    scene_obj_gantry_head.rotateX(THREE.Math.degToRad(90));
                    scene_obj_gantry_head.position.set(0, 0, -scene_obj_gantry_head_height);
                    scene_obj_gantry_arm.add(scene_obj_gantry_head);

                    scene_obj_gantry_arm.position.set(0, -scene_obj_gantry_arm_size_y/2 - scene_obj_gantry_size_y/2, scene_obj_gantry_height/2 - scene_obj_gantry_arm_height/2);
                    scene_obj_gantry.add(scene_obj_gantry_arm);

                    scene_obj_gantry.position.set(0, scene_obj_gantry_arm_size_y/2 + scene_obj_gantry_size_y/2, 0);
                    scene.add(scene_obj_gantry);
                }
                { // couch and top
                    const scene_obj_couch_height = 900;

                    scene_obj_couch = new THREE.Mesh(new THREE.BoxGeometry(450, 500, scene_obj_couch_height),
                        new THREE.MeshLambertMaterial({ color: 0xffb399 }));
                    scene_obj_couch_top = new THREE.Mesh(new THREE.BoxGeometry(500, 1700, 50),
                        new THREE.MeshLambertMaterial({ color: 0x301d1d }));

                    scene_obj_couch_top.position.set(0, 300, scene_obj_couch_height/2);

                    scene_obj_couch.add(scene_obj_couch_top);
                    scene_obj_couch.position.set(0, -800, -600);

                    scene.add(scene_obj_couch);
                }
                { // patient
                    const scene_obj_patient_model = 'model/Homer.reduced.OBJ';
                    const scene_obj_patient_scale = 200;
                    const scene_obj_patient_material = new THREE.MeshPhongMaterial({ color: 0xFED90F, transparent: true, opacity: 0.8, depthWrite: true });

                    var loader = new OBJLoader();
                    loader.load(scene_obj_patient_model,
                        function ( object ) {
                            scene_obj_patient = object;
                            scene_obj_patient.traverse( function ( child )
                            {
                                if ( child.isMesh ) {
                                    child.material = scene_obj_patient_material;
                                }
                            });

                            // patient tumor (its precise position at isocenter will be calculated later)
                            scene_obj_patient_tumor = new THREE.Mesh(new THREE.SphereGeometry(10 / scene_obj_patient_scale, 12, 12),
                                                                     new THREE.MeshLambertMaterial({ color: 0x00A886 }));
                            scene_obj_patient.add(scene_obj_patient_tumor);

                            scene_obj_patient.scale.set(scene_obj_patient_scale, scene_obj_patient_scale, scene_obj_patient_scale);
                            scene_obj_patient.position.set(0, 50, 150); // XXX: hardcoded default prepos so that the patient is at isocenter
                            // XXX: Make sure all relevant objects now are added to scene
                            // to calculate tumor initial position.
                            // (tumor -> patient -> couch top -> couch -> scene)
                            scene_obj_couch_top.add(scene_obj_patient);
                            // force re-compute all matrix from scene to tumor
                            scene_obj_patient_tumor.updateWorldMatrix(true, true);
                            // compute transformation now so that the tumor will be located at origin in world
                            var local = scene_obj_patient_tumor.worldToLocal(new THREE.Vector3(0,0,0));
                            scene_obj_patient_tumor.position.set(local.x, local.y, local.z);

                            // XXX: just make a guess of raycasting speed from probes
                            // XXX: make sure scene_obj_patient world matrix is updated properly
                            //      and locates around isocenter
                            scene_obj_patient.updateMatrixWorld(false);
                            {
                                var clock = new THREE.Clock();
                                const probes = 5;
                                clock.start();
                                for (var tries=0; tries<probes; tries++) {
                                    const scene_raycaster_dir = new THREE.Vector3(tries-probes/2, 0, 0).sub(scene_raycaster_from).normalize();
                                    raycaster.set(scene_raycaster_from, scene_raycaster_dir);
                                    var intersected = raycaster.intersectObject(scene_obj_patient, true);
                                    if (intersected.length == 0) {
                                        console.warn("raycastig probe", tries, "does not hit anything");
                                    }
                                }
                                var delta_ms = clock.getDelta()*1000 / probes;
                                rays_nr_per_ms = 10/(delta_ms*6); // empirical guess...
                                console.log("Average raycast time:", delta_ms, " Default estimated rays_nr_per_ms:", rays_nr_per_ms);
                                clock.stop();
                            }

                            // FIXME: take also other loading procedures into consideration?
                            {
                                pg_state = 'pg_s_loaded';
                            }
                        },
                        function ( xhr ) {
                            if ( xhr.lengthComputable ) {
                                var percentComplete = xhr.loaded / xhr.total * 100;
                                console.log( scene_obj_patient_model + ': ' + Math.round( percentComplete, 2 ) + '% downloaded' );
                            }
                        },
                        function ( ) { console.log( 'An error happened with loading: ' + scene_obj_patient_model ); }
                        ); // loader.load
                }
                { // fixed isocenter cross
                    var buildAxis = function (src, dst, color) {
                        var geom = new THREE.Geometry()
                        var mat = new THREE.LineBasicMaterial({ linewidth: 10, color: color });
                        geom.vertices.push(src.clone());
                        geom.vertices.push(dst.clone());
                        //geom.computeLineDistances();
                        var axis = new THREE.LineSegments(geom, mat);
                        return axis;
                    }
                    var buildAxes = function (length) {
                        var axes = new THREE.Object3D();
                        axes.add(buildAxis(new THREE.Vector3(-length, 0, 0), new THREE.Vector3(length, 0, 0), 0x0000ff)); // X
                        axes.add(buildAxis(new THREE.Vector3(0, -length, 0), new THREE.Vector3(0, length, 0), 0x00ff00)); // Y
                        axes.add(buildAxis(new THREE.Vector3(0, 0, -length), new THREE.Vector3(0, 0, length), 0xff0000)); // Z
                        return axes;
                    }

                    var axes = buildAxes(50);
                    scene.add(axes);
                }

                { // fixed camera setup
                    const scene_obj_camera_fov_size = 300;
                    const scene_obj_camera_fov_length = 1450;
                    const scene_obj_camera_fov_tilt = 4;

                    const scene_obj_camera_fov_geometry = new THREE.ConeGeometry(scene_obj_camera_fov_size, scene_obj_camera_fov_length, 32);
                    const scene_obj_camera_fov_material = new THREE.MeshPhongMaterial({ color: 0xf674f6, transparent: true, opacity: 0.1, depthWrite: false });

                    const scene_obj_camera_intra_distance = 450;

                    scene_obj_camera = new THREE.Mesh(new THREE.BoxGeometry(scene_obj_camera_intra_distance, 50, 50),
                        new THREE.MeshLambertMaterial({ color: 0xffbf00 }));

                    scene_obj_camera_fov1 = new THREE.Mesh(scene_obj_camera_fov_geometry, scene_obj_camera_fov_material);
                    scene_obj_camera_fov2 = new THREE.Mesh(scene_obj_camera_fov_geometry, scene_obj_camera_fov_material);

                    scene_obj_camera_fov1.rotateZ(THREE.Math.degToRad(-scene_obj_camera_fov_tilt));
                    scene_obj_camera_fov1.translateY(-scene_obj_camera_fov_length/2);
                    scene_obj_camera_fov1.translateX(+scene_obj_camera_fov_size/2);

                    scene_obj_camera_fov2.rotateZ(THREE.Math.degToRad(+scene_obj_camera_fov_tilt));
                    scene_obj_camera_fov2.translateY(-scene_obj_camera_fov_length/2);
                    scene_obj_camera_fov2.translateX(-scene_obj_camera_fov_size/2);

                    scene_obj_camera.add(scene_obj_camera_fov1);
                    scene_obj_camera.add(scene_obj_camera_fov2);

                    scene_obj_camera.rotateX(THREE.Math.degToRad(135));
                    scene_obj_camera.position.set(0, -1000, 1000);

                    scene.add(scene_obj_camera);
                }

                { // fixed xray
                    const scene_obj_xray_fov_length = 2700;
                    const scene_obj_flat_panel_size = 500;

                    const scene_obj_xray_src_geometry = new THREE.CylinderGeometry(120, 100, 100, 5);
                    const scene_obj_xray_src_material = new THREE.MeshLambertMaterial({ color: 0xffbf00 });

                    const scene_obj_xray_fov_geometry = new THREE.CylinderGeometry(50, scene_obj_flat_panel_size*.6, scene_obj_xray_fov_length, 4);
                    const scene_obj_xray_fov_material = new THREE.MeshPhongMaterial({ color: 0xffff00, transparent: true, opacity: 0.2, depthWrite: false });

                    const scene_obj_xray_flat_panel_geometry = new THREE.BoxGeometry(scene_obj_flat_panel_size, scene_obj_flat_panel_size, 35);
                    const scene_obj_xray_flat_panel_material = new THREE.MeshLambertMaterial({ color: 0xcfcfcf, transparent: true, opacity: 0.8 });

                    scene_obj_flat_panel_1 = new THREE.Mesh(scene_obj_xray_flat_panel_geometry, scene_obj_xray_flat_panel_material);
                    scene_obj_flat_panel_2 = new THREE.Mesh(scene_obj_xray_flat_panel_geometry, scene_obj_xray_flat_panel_material);

                    scene_obj_xray_fov_1 = new THREE.Mesh(scene_obj_xray_fov_geometry, scene_obj_xray_fov_material);
                    scene_obj_xray_fov_2 = new THREE.Mesh(scene_obj_xray_fov_geometry, scene_obj_xray_fov_material);

                    scene_obj_xray_src_1 = new THREE.Mesh(scene_obj_xray_src_geometry, scene_obj_xray_src_material);
                    scene_obj_xray_src_2 = new THREE.Mesh(scene_obj_xray_src_geometry, scene_obj_xray_src_material);

                    const scene_obj_xray_fov_rot_x = 90;
                    const scene_obj_xray_fov_rot_y = 45;
                    const scene_obj_xray_flat_panel_rot_x = 210;
                    const scene_obj_xray_flat_panel_rot_y = 35;

                    scene_obj_xray_src_1.rotateX(THREE.Math.degToRad(90));
                    scene_obj_xray_src_1.translateY(scene_obj_xray_fov_length);
                    scene_obj_flat_panel_1.add(scene_obj_xray_src_1);

                    scene_obj_xray_fov_1.rotateX(THREE.Math.degToRad(scene_obj_xray_fov_rot_x));
                    scene_obj_xray_fov_1.rotateY(THREE.Math.degToRad(scene_obj_xray_fov_rot_y));
                    scene_obj_xray_fov_1.translateY(scene_obj_xray_fov_length/2);
                    scene_obj_flat_panel_1.add(scene_obj_xray_fov_1);

                    scene_obj_flat_panel_1.rotateX(THREE.Math.degToRad(scene_obj_xray_flat_panel_rot_x));
                    scene_obj_flat_panel_1.rotateY(THREE.Math.degToRad(scene_obj_xray_flat_panel_rot_y));
                    scene_obj_flat_panel_1.translateZ(-scene_obj_xray_fov_length/2);

                    scene_obj_xray_src_2.rotateX(THREE.Math.degToRad(90));
                    scene_obj_xray_src_2.translateY(scene_obj_xray_fov_length);
                    scene_obj_flat_panel_2.add(scene_obj_xray_src_2);

                    scene_obj_xray_fov_2.rotateX(THREE.Math.degToRad(scene_obj_xray_fov_rot_x));
                    scene_obj_xray_fov_2.rotateY(THREE.Math.degToRad(scene_obj_xray_fov_rot_y));
                    scene_obj_xray_fov_2.translateY(scene_obj_xray_fov_length/2);
                    scene_obj_flat_panel_2.add(scene_obj_xray_fov_2);

                    scene_obj_flat_panel_2.rotateX(THREE.Math.degToRad(scene_obj_xray_flat_panel_rot_x));
                    scene_obj_flat_panel_2.rotateY(THREE.Math.degToRad(-scene_obj_xray_flat_panel_rot_y));
                    scene_obj_flat_panel_2.translateZ(-scene_obj_xray_fov_length/2);

                    scene.add(scene_obj_flat_panel_1);
                    scene.add(scene_obj_flat_panel_2);
                }
            }

            // init renderer
            scene_renderer = new THREE.WebGLRenderer({ antialias: true }); // WebGLRenderer CanvasRenderer
            scene_renderer.setClearColor(scene_background);
            scene_renderer.setPixelRatio(window.devicePixelRatio);
            scene_renderer.setSize(container_width, container_height);
            //scene_renderer.shadowMap.enabled = true;
            //scene_renderer.shadowMap.type = THREE.PCFSoftShadowMap;

            // init control
            scene_controls = new OrbitControls(scene_camera, scene_renderer.domElement);
            scene_controls.enableDamping = true;
            scene_controls.dampingFactor = 0.05;
            scene_controls.minDistance = 200;
            scene_controls.maxDistance = 3200;
            scene_controls.maxPolarAngle = Math.PI / 2;
            scene_controls.maxAzimuthAngle = Math.PI / 1.2;
            scene_controls.minAzimuthAngle = -Math.PI / 1.2;

            scene_controls.panSpeed = 0.8;
            scene_controls.rotateSpeed = 0.7;
            scene_controls.zoomSpeed = 0.2;

            // append to DOM
            container.appendChild(scene_renderer.domElement);

            //scene_stats = new Stats();
			//container.appendChild( scene_stats.dom );
        }

        function scene_animation_update( elapsed_ms ) {
            if (ctrl_gantry_speed != 0) {
                scene_obj_gantry.rotateOnAxis(new THREE.Vector3(0, 1, 0), THREE.Math.degToRad(elapsed_ms*ctrl_gantry_speed/1000));
            }

            scene_obj_gantry_beam_mv.visible = ctrl_gantry_beam_mv_on;

            scene_obj_camera_fov1.visible = ctrl_camera_on;
            scene_obj_camera_fov2.visible = ctrl_camera_on;

            scene_obj_xray_fov_1.visible = ctrl_xray_triggerd;
            scene_obj_xray_fov_2.visible = ctrl_xray_triggerd;

            // animate OOT (coughing)
            // Euler Rotation: RX > RY > RZ
            if (!ctrl_pg_patient_deviation_rot.equals(new THREE.Vector3(0,0,0))) {
                const animation_speed_deviation_rot_deg_per_ms = 0.1;
                const step = THREE.Math.degToRad(animation_speed_deviation_rot_deg_per_ms * elapsed_ms);
                var exexute_animate_deviation_rot = new THREE.Vector3(0,0,0);

                const pendingX = ctrl_pg_patient_deviation_rot.x;
                const stepX = Math.sign(pendingX) * step;
                const animateX = (Math.abs(pendingX) > step) ? stepX : pendingX;
                exexute_animate_deviation_rot.setX(animateX);
                if (exexute_animate_deviation_rot.x != 0) {
                    ctrl_pg_patient_deviation_rot.setX(pendingX - animateX);
                }
                else {
                    const pendingY = ctrl_pg_patient_deviation_rot.y;
                    const stepY = Math.sign(pendingY) * step;
                    const animateY = (Math.abs(pendingY) > step) ? stepY : pendingY;
                    exexute_animate_deviation_rot.setY(animateY);
                    if (exexute_animate_deviation_rot.y != 0) {
                        ctrl_pg_patient_deviation_rot.setY(pendingY - animateY);
                    }
                    else {
                        const pendingZ = ctrl_pg_patient_deviation_rot.z;
                        const stepZ = Math.sign(pendingZ) * step;
                        const animateZ = (Math.abs(pendingZ) > step) ? stepZ : pendingZ;
                        exexute_animate_deviation_rot.setZ(animateZ);
                        if (exexute_animate_deviation_rot.z != 0) {
                            ctrl_pg_patient_deviation_rot.setZ(pendingZ - animateZ);
                        }
                    }
                }
                var tf = new THREE.Matrix4();
                tf.makeRotationFromEuler(new THREE.Euler(exexute_animate_deviation_rot.x, exexute_animate_deviation_rot.y ,exexute_animate_deviation_rot.z));
                scene_obj_patient.applyMatrix4(tf);
            }

            // FIXME: we move patient at the moment, not couch
            // couch correction
            // Euler Rotation: RZ > RY > RX
            if (wf_state == 'wf_s_couch_move' &&
                !ctrl_pg_couch_correct_rot.equals(new THREE.Vector3(0,0,0))) {
                const animation_speed_correct_rot_deg_per_ms = 0.01;
                const step = THREE.Math.degToRad(animation_speed_correct_rot_deg_per_ms * elapsed_ms);
                var exexute_animate_correct_rot = new THREE.Vector3(0,0,0);

                const pendingZ = ctrl_pg_couch_correct_rot.z;
                const stepZ = Math.sign(pendingZ) * step;
                const animateZ = (Math.abs(pendingZ) > step) ? stepZ : pendingZ;
                exexute_animate_correct_rot.setZ(animateZ);
                if (exexute_animate_correct_rot.z != 0) {
                    ctrl_pg_couch_correct_rot.setZ(pendingZ - animateZ);
                }
                else {
                    const pendingY = ctrl_pg_couch_correct_rot.y;
                    const stepY = Math.sign(pendingY) * step;
                    const animateY = (Math.abs(pendingY) > step) ? stepY : pendingY;
                    exexute_animate_correct_rot.setY(animateY);
                    if (exexute_animate_correct_rot.y != 0) {
                        ctrl_pg_couch_correct_rot.setY(pendingY - animateY);
                    }
                    else {
                        const pendingX = ctrl_pg_couch_correct_rot.x;
                        const stepX = Math.sign(pendingX) * step;
                        const animateX = (Math.abs(pendingX) > step) ? stepX : pendingX;
                        exexute_animate_correct_rot.setX(animateX);
                        if (exexute_animate_correct_rot.x != 0) {
                            ctrl_pg_couch_correct_rot.setX(pendingX - animateX);
                        }
                    }
                }
                var tf = new THREE.Matrix4();
                tf.makeRotationFromEuler(new THREE.Euler(exexute_animate_correct_rot.x, exexute_animate_correct_rot.y ,exexute_animate_correct_rot.z));
                scene_obj_patient.applyMatrix4(tf);
            }
        }

        function scene_ray_cast( elapsed_ms ) {
            // XXX: QnD adapt rays_nr_per_ms according to estimated fps dynamically
            const estimated_fps = 1000 / elapsed_ms;
            if (elapsed_ms != 0) {
                if (estimated_fps <= scene_renderer_min_fps) {
                    rays_nr_per_ms *= 0.9;
                }
                else if (estimated_fps <= (scene_renderer_max_fps+scene_renderer_min_fps)/2) {
                    rays_nr_per_ms *= 1.15;
                }
                else {
                    rays_nr_per_ms *= 1.01;
                }
            }

            // nr_of_ray: the total rays to cast in this round
            const count = (elapsed_ms == 0) ? 0 : Math.min(
                parseInt(elapsed_ms * rays_nr_per_ms, 10),
                point_cloud_w * point_cloud_h - scene_raycaster_done
            );

            //console.log(estimated_fps, rays_nr_per_ms, count);

            for (var idx = scene_raycaster_done;
                 idx < scene_raycaster_done + count;
                 idx++) {
                const w = idx % point_cloud_w;
                const h = (idx - w) / point_cloud_w;
                const dir_x = point_cloud_scan_from_x + w * (point_cloud_scan_to_x - point_cloud_scan_from_x) / (point_cloud_w - 1);
                const dir_y = point_cloud_scan_from_y + h * (point_cloud_scan_to_y - point_cloud_scan_from_y) / (point_cloud_h - 1);
                const scene_raycaster_dir = new THREE.Vector3(dir_x, dir_y, 0).sub(scene_raycaster_from).normalize();
                raycaster.set(scene_raycaster_from, scene_raycaster_dir);
                const intersects = raycaster.intersectObject(scene_obj_patient, true);
                if ( intersects.length > 0 ) {
                    point_cloud_points[idx].visible = true;
                    point_cloud_points[idx].position.set( // use a bit random to simulate noise
                        intersects[0].point.x + 3 * (Math.random() - 0.5),
                        intersects[0].point.y + 3 * (Math.random() - 0.5),
                        intersects[0].point.z + 3 * (Math.random() - 0.5)
                    );
                }
                else
                {
                    point_cloud_points[idx].visible = false;
                }
            }

            scene_raycaster_done = (scene_raycaster_done + count) % (point_cloud_w * point_cloud_h);
        }

        function onWindowResize() {
            {
                var container = document.getElementById('scene');
                var container_width = container.clientWidth;
                var container_height = container.clientHeight;

                scene_camera.aspect = container_width / container_height;
                scene_camera.updateProjectionMatrix();
                scene_renderer.setSize(container_width, container_height);
            }
            {
                var container = document.getElementById('cam_img');
                var container_width = container.clientWidth;
                var container_height = container.clientHeight;

                pc_scene_camera.aspect = container_width / container_height;
                pc_scene_camera.updateProjectionMatrix();
                pc_scene_renderer.setSize(container_width, container_height);
            }
        }

        function scene_render() {
            scene_renderer.render(scene, scene_camera);
            //scene_stats.update();
        }

        function pc_scene_render() {
            pc_scene_renderer.render(pc_scene, pc_scene_camera);
        }

        function scene_animate() {
            requestAnimationFrame(scene_animate);

            if (pg_state == 'pg_s_loadling') {
                return;
            }

            scene_controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

            // delta from last scene_animate call
            const delta_ms = parseInt(scene_animation_clock.getDelta() * 1000, 10);

            // elapsed time from the last actual render call
            scene_renderer_elapsed_ms += delta_ms;
            const interval_max_ms = parseInt(1000 / scene_renderer_max_fps, 10);

            // calculating ray casting as often and as much as possible without huge performance penalty
            scene_ray_cast( delta_ms );

            // render scene under max. fps
            if (scene_renderer_elapsed_ms >= interval_max_ms) {
                scene_animation_update( scene_renderer_elapsed_ms );
                scene_render();
                scene_renderer_elapsed_ms = scene_renderer_elapsed_ms % interval_max_ms;
            }
            else {
                return;
            }
        }

        function pc_scene_animate() {
            requestAnimationFrame(pc_scene_animate);

            if (pg_state == 'pg_s_loadling') {
                return;
            }

            pc_scene_controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

            pc_scene_render();
        }

        scene_init();
        pc_scene_init();

        scene_animate();
        pc_scene_animate();

        window.addEventListener('resize', onWindowResize, false);
        // ---

        // simple state management
        // ----------------------
        var b_xray = document.getElementById("button_xray");
        var b_repos = document.getElementById("button_repos");
        var statusbar = document.getElementById("statusbar");
        var warning_sign = document.getElementById("warning_sign");
        var xray_img_src_1 = document.getElementById("xray_img_src_1");
        var xray_img_src_2 = document.getElementById("xray_img_src_2");

        const b_xray_ready_color  = "#FFFF99";
        const b_xray_active_color  = "#FFFF00";
        const b_repos_off_color = "";
        const b_repos_ready_color = "#ffcdb2";
        const b_repos_pressed_color = "#e76f51";

        b_xray.style.background = b_xray_ready_color;
        b_repos.style.background = b_repos_off_color;

        var action_trigger_xray = function(e)
        {
            e.preventDefault();
            ctrl_pg_patient_last_xray_timestamp_ms = Date.now();
            b_xray.style.background = b_xray_active_color;
            ctrl_xray_triggerd = true;

            xray_img_src_1.classList.remove('effect_bumpin1');
            xray_img_src_2.classList.remove('effect_bumpin2');

            if (wf_state == 'wf_s_patient_oot') {
                wf_state = 'wf_s_imaging';
                console.log(wf_state);
            }

            setTimeout(function() {
                b_xray.style.background = b_xray_ready_color;
                ctrl_xray_triggerd = false;

                xray_img_src_1.classList.add('effect_bumpin1');
                xray_img_src_2.classList.add('effect_bumpin2');

                if (wf_state == 'wf_s_imaging') {
                    wf_state = 'wf_s_fusion';
                    console.log(wf_state);
                }
            }, ctrl_xray_expose_time_ms);
        };
        b_xray.addEventListener('mousedown', action_trigger_xray, { passiv: false } );
        b_xray.addEventListener('touchstart', action_trigger_xray, { passiv: false } );

        var action_releasing_couch_control = function()
        {
            if (wf_state == 'wf_s_couch_move') {
                wf_state = 'wf_s_fusion';
                console.log(wf_state);
                b_repos.style.background = b_repos_ready_color;
            }
        }
        b_repos.addEventListener('mouseup', action_releasing_couch_control, { passiv: false } );
        b_repos.addEventListener('touchend', action_releasing_couch_control, { passiv: false } );
        b_repos.addEventListener('touchcancel', action_releasing_couch_control, { passiv: false } );

        var action_pressing_couch_control = function()
        {
            if (wf_state == 'wf_s_fusion') {
                wf_state = 'wf_s_couch_move';
                console.log(wf_state);
                b_repos.style.background = b_repos_pressed_color;
            }
        };
        b_repos.addEventListener('mousedown', action_pressing_couch_control, { passiv: false } );
        b_repos.addEventListener('touchstart', action_pressing_couch_control, { passiv: false } );

        var text_ok = function() {
            statusbar.innerHTML = "Patient position is OK. You may take Xray images to verify patient position at any time.";
            warning_sign.innerHTML = "Radiation treatment is ongoing.";
            warning_sign.style.backgroundColor = '#00A886';
        }
        var text_oot = function() {
            statusbar.innerHTML = "Patient movement is detected by surface camera. Please take Xray images to verify patient position.";
            warning_sign.innerHTML = "Treatment is paused.";
            warning_sign.style.backgroundColor = '#EE2375';
        }
        var text_couch_move = function() {
            // FIXME statusbar.innerHTML = "Please hold the couch control to reposition patient.";
            statusbar.innerHTML = "Please poke the patient back to the right position.";
        }
        setInterval(function () {
            if (pg_state == 'pg_s_loaded') {
                document.querySelector("#loading").style.display = 'none';
                pg_state = 'pg_s_preview';

                text_ok();

                setTimeout(function() {
                    pg_state = 'pg_s_interactive'
                }, ctrl_pg_preview_duration_ms);
            }
            else if (pg_state == 'pg_s_interactive') {
                var patient_image = document.getElementById("patient_profile");

                if (wf_state == 'wf_s_treating') {

                    text_ok();

                    patient_image.classList.remove('effect_shake');
                    patient_image.src = "model/homer-profile.jpg";

                    ctrl_gantry_beam_mv_on = true;
                    ctrl_gantry_speed = ctrl_gantry_speed_default;

                    b_repos.disabled = true;
                    b_repos.style.background = b_repos_off_color;

                    // randomly trigger OOT
                    if (Math.random() < ctrl_pg_patient_oot_rate &&
                        Date.now() - ctrl_pg_patient_last_repos_timestamp_ms > ctrl_pg_patient_oot_after_repos_at_least_ms &&
                        Date.now() - ctrl_pg_patient_last_xray_timestamp_ms > ctrl_pg_patient_oot_after_xray_at_least_ms) {

                        wf_state = 'wf_s_patient_oot';
                        console.log(wf_state);

                        // generate a new OOT deviation
                        const oot_rot_max_deg = 5;
                        ctrl_pg_patient_deviation_rot = new THREE.Vector3(
                            THREE.Math.degToRad( (2*Math.random()-1)*oot_rot_max_deg ),
                            THREE.Math.degToRad( (2*Math.random()-1)*oot_rot_max_deg ),
                            THREE.Math.degToRad( (2*Math.random()-1)*oot_rot_max_deg ));
                        ctrl_pg_patient_deviation_trans = new THREE.Vector3(0, 0, 0);
                        // generate inversed couch correction
                        ctrl_pg_couch_correct_rot = ctrl_pg_patient_deviation_rot.clone();
                        ctrl_pg_couch_correct_rot.multiplyScalar(-1);
                        ctrl_pg_couch_correct_trans = ctrl_pg_patient_deviation_trans.clone();
                        ctrl_pg_couch_correct_trans.multiplyScalar(-1);

                        patient_image.classList.add('effect_shake');
                        patient_image.src = "model/homer-profile-coughing.jpg";

                        ctrl_gantry_beam_mv_on = false;
                        ctrl_gantry_speed = 0;

                        text_oot();
                    }
                }
                else if (wf_state == 'wf_s_couch_move') {
                    if (ctrl_pg_couch_correct_rot.equals(new THREE.Vector3(0,0,0))) {
                        ctrl_pg_patient_last_repos_timestamp_ms = Date.now();
                        wf_state = 'wf_s_treating';
                        console.log(wf_state);
                    }
                }
                else if (wf_state == 'wf_s_fusion') {
                    b_repos.disabled = false;
                    b_repos.style.background = b_repos_ready_color;
                    text_couch_move();
                }
            }
        }, ctrl_pg_state_transition_interval_ms);
        // ----------------------

    </script>
</body>

</html>