blob: 7e98901b75eeb20186abf3f8ac4b1a36657d6076 (
plain)
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
|
<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 drawing = false;
var hasSceneData = false;
// Do everything - initialize SDL, set up canvas, render
function render(size) {
if (drawing) return;
drawing = true;
if (!hasSceneData) {
print('Generating scene data, please wait...');
}
setTimeout(function() {
if (!hasSceneData) {
run(['5']);
_SDL_Init(32);
hasSceneData = true;
}
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('');
drawing = false;
}
}
drawLine();
});
}
</script>
</head>
<body>
<canvas id='canvas' width=1 height=1></canvas>
<hr>
<form onsubmit="setTimeout(function() { render(parseInt(size.value)) }); return false">
Size (pixels): <input type="text" name="size" value="128">
<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>
|
