-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (97 loc) · 5.8 KB
/
index.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
<!DOCTYPE html>
<html lang="en" ng-app="refractorium">
<head>
<meta charset="UTF-8">
<title>Refractorium</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<meta property="og:title" content="Refractorium: A light playground">
<meta property="og:description" content="An interactive light transport simulator all in your browser.">
<meta property="og:image" content="http://samreay.github.io/Refractorium/img/cover.jpg">
<meta property="og:url" content="http://samreay.github.io/Refractorium">
<meta property="og:site" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@samreayh">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/rzslider.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-controller="MainController as ctrl" class="dark">
<div class="sidebar">
<img src="img/name.png" style="margin-bottom: 20px; width: 100%;">
<p>A Javascript 2D light transport simulator!</p>
<p>Double click canvas for fun.</p>
<p><a href="http://samreay.github.io/project/2017/03/07/refractorium.html" target="_blank" >See here for more details!</a></p>
<h4 style="cursor: pointer;" ng-click="ctrl.clickRenderSettings()">Render Settings {{ctrl.renderSettingVisible ? "▲" : "▼"}}</h4>
<div ng-show="ctrl.renderSettingVisible">
<label>Canvas Size</label>
<div class="btn-group" style="font-size: 0.8em;">
<button class="btn btn-default" ng-click="ctrl.resize(size.height)" ng-class="{active: size.height == ctrl.selectedSize}" ng-repeat="size in ctrl.sizes">{{size.label}}</button>
</div>
<label for="NumRayPerFrame">Rays Per Frame:</label>
<rzslider class="custom" id="NumRayPerFrame" rz-slider-model="ctrl.renderer.numRaysPerFrame" rz-slider-options="ctrl.sliderNumRaysPerFrameOptions"></rzslider>
<label for="NumBounces">Number of Light Bounces:</label>
<rzslider class="custom" id="NumBounces" rz-slider-model="ctrl.renderer.numBounces" rz-slider-options="ctrl.sliderBounceOptions"></rzslider>
<label for="Exposure">Exposure:</label>
<rzslider class="custom" id="Exposure" rz-slider-model="ctrl.renderer.exposure" rz-slider-options="ctrl.sliderExposureptions"></rzslider>
</div>
<h4>Scenes</h4>
<select class="form-control input-sm" name="sceneSelect" id="sceneSelect" ng-model="ctrl.activeScene" ng-change="ctrl.selectScene()">
<option ng-repeat="scene in ctrl.scenes" value="{{scene.name}}">{{scene.name}}</option>
</select>
<h4>Objects</h4>
<select class="form-control input-sm" name="objectSelect" id="objectSelect" style="margin-bottom: 20px;"
ng-model="ctrl.activeObjectIndex" ng-change="ctrl.selectObject()">
<option ng-repeat="object in ctrl.sceneObjects" value="{{$index}}">{{object.getName()}}</option>
</select>
<div ng-if="ctrl.selectedObject != null">
<div ng-repeat="slider in ctrl.getSelectedObjectProperties()">
<label for="{{slider.key}}">{{slider.label}}</label>
<rzslider id="{{slider.key}}" class="custom" rz-slider-model="slider.value" rz-slider-options="slider.options" ></rzslider>
</div>
<button class="btn btn-danger" style="float: right; margin-top: 10px;" ng-click="ctrl.removeObject()">Remove</button>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="notsidebar">
<div class="topbar">
<div class="buttonbar">
<label>Add Object:</label>
<button class="button btn btn-default" ng-click="ctrl.addObject(objtype)" ng-repeat="objtype in ctrl.generator.getObjectNames()">{{objtype}}</button>
</div>
<div class="buttonbar second">
<label>Add Light:</label>
<button class="button btn btn-default" ng-click="ctrl.addLight(objtype)" ng-repeat="objtype in ctrl.generator.getLightNames()">{{objtype}}</button>
</div>
</div>
<div id="canvases">
<canvas id="mainCanvas" width="{{ctrl.width}}" height="{{ctrl.height}}"
ng-mouseup="ctrl.canvasMouseUp($event)"
ng-mouseleave="ctrl.canvasMouseLeave($event)"
ng-mousemove="ctrl.canvasMouseMove($event)"
ng-mousedown="ctrl.canvasClick($event)"
ng-dblclick="ctrl.switchPlots()"></canvas>
<canvas id="hiddenCanvas" width="{{ctrl.width}}" height="{{ctrl.height}}"
ng-mouseup="ctrl.canvasMouseUp($event)"
ng-mouseleave="ctrl.canvasMouseLeave($event)"
ng-mousemove="ctrl.canvasMouseMove($event)"
ng-mousedown="ctrl.canvasClick($event)"
ng-dblclick="ctrl.switchPlots()" style="display: none"></canvas>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/bootstrap.min.js"></script>
<script src="lib/rzslider.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/scene.js"></script>
<script src="js/light.js"></script>
<script src="js/renderer.js"></script>
<script src="js/scenes.js"></script>
<script src="js/app.js"></script>
</body>
</html>