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
|
<html>
<head>
<title>
Emscripten: Raytracing
</title>
<script src="raytrace.js"></script>
<script>
// print function which the cubescript engine will call
function print(text) {
document.getElementById('output').innerHTML = text;
}
var drawingNow = false;
var calcedDepth = -1;
// Do everything - initialize SDL, set up canvas, render
function render(size, depth) {
if (drawingNow) return;
drawingNow = true;
if (calcedDepth != depth) {
print('<b>Generating scene data, please wait...</b>');
}
setTimeout(function() {
if (calcedDepth != depth) {
run([depth.toString()]);
calcedDepth = depth;
}
_SDL_Init(size);
var canvas = document.getElementById('canvas');
canvas.width = canvas.height = size;
HEAP[_screen] = _SDL_SetVideoMode(canvas.width, canvas.height, 32, 0, canvas);
var y = canvas.height-1;
function drawLine() {
print("Raytracing line: <b>" + (canvas.height-y) + "/" + canvas.height + '</b>');
__ZL10trace_lineiii(canvas.width, canvas.width, y);
y--;
if (y >= 0) {
setTimeout(arguments.callee, 1);
} else {
print('');
drawingNow = false;
}
}
drawLine();
});
}
</script>
</head>
<body>
<canvas id='canvas' width=1 height=1></canvas>
<hr>
<form onsubmit="setTimeout(function() { render(parseInt(size.value), parseInt(depth.value)) }); return false">
Rendered width/height (pixels): <input type="text" name="size" value="128">(use less for slower machines)<br>
Scene recursion (child spheres/sphere): <input type="text" name="depth" value="5">(use less for slower machines; careful with values > 6!)<br>
<input type="submit" value="Go!">
</form>
<div id="output" style="font-family: Courier New,Courier,monospace;"></div>
<hr>
Simple raytracing demo. The <a href="http://ompf.org/ray/sphereflake/">original C++ source</a> was
automatically converted to JavaScript using <a href="http://emscripten.org">Emscripten</a>.
</body>
</html>
|
