-
Notifications
You must be signed in to change notification settings - Fork 1
/
ppo-babylon-vr-hungry-js.html
122 lines (103 loc) · 4.9 KB
/
ppo-babylon-vr-hungry-js.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js sample code</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css" />
<link rel="stylesheet" type="text/css" href="src/css/MovingButtons.css" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/3.8.0/tf.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='src/js/controls.js'></script>
<script src='src/js/neuralnetworks.js'></script>
<script src='src/js/types.js'></script>
<script src='src/js/utils.js'></script>
<script src='src/js/ui/SimplePPOUI.js'></script>
<!-- Babylon.js -->
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/libktx.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src='src/js/envs/BabylonjsVRExperimentWorld/BabylonjsVRExperimentWorld.js'></script>
<script>
var w = new BabylonjsVRExperimentWorld({});
var PPOworker = new Worker("./src/js/agents/policy_gradients/ppo_class_worker.js");
/*Create agent object*/
var a = new Agent({eyes_count: 36});
/*Create neural network*/
let cur_nn = build_full_connected(a.observation_space.shape, [128, 128], a.action_space.shape, 'tanh', 'tanh');
/*Create neural network*/
let weights_obj = get_serialized_layers_data(cur_nn);
/*Create UI*/
let ui = new SimpleUI({parent: document.body, policy_nn: cur_nn, worker: PPOworker});
/*Adding agent to the environment object*/
w.addAgent(a);
/*Message broker between Agent worker and app*/
PPOworker.onmessage = function(e){
if(e.data.msg_type === "step"){
var step_data = w.step(e.data.action);
PPOworker.postMessage({msg_type: "step", step_data: step_data, n_obs: w.n_obs, e_r: w.get_episode_reward(), e_l: w.get_episode_length()});
}
/*When user recieves neural network weights from agent worker*/
if(e.data.msg_type === "get_policy_weights_answer"){
/*create neural network from serialized weights*/
let model_p = create_model_by_serialized_data(e.data.policy_weights);
/*downloading policy weights*/
model_p.save('downloads://policy');
/*Create neural network from serialized weights*/
let model_v = create_model_by_serialized_data(e.data.value_weights);
/*downloading value function weights*/
model_v.save('downloads://value');
}
/*Answer from worker that policy weights have been set*/
if(e.data.msg_type === "load_policy_weigths_by_path_answer"){
alert('Policy weights have been set');
}
/*Answer from worker that value function weights have been set*/
if(e.data.msg_type === "load_value_weigths_by_path_answer"){
alert('Value weights have been set');
}
}
/*Starting training process*/
tf.setBackend("webgl").then(()=>{
PPOworker.postMessage({
msg_type: "start",
observation_space: a.observation_space,
action_space: a.action_space,
n_obs: w.n_obs,
policy_nn: weights_obj
});
});
</script>
</body>
</html>