65 строки
2.2 KiB
HTML
65 строки
2.2 KiB
HTML
<html>
|
|
<head>
|
|
<title>
|
|
Emscripten: Raytracing
|
|
</title>
|
|
<script src="raytrace.js"></script>
|
|
<script type="text/javascript">
|
|
// print function which the runtime 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) {
|
|
var startTime = Date.now();
|
|
|
|
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;
|
|
IHEAP[_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('Finished in ' + (Date.now() - startTime)/1000 + ' seconds.');
|
|
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>
|
|
|